diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index 1ba34fc3731..2b79a0a369e 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -3,7 +3,8 @@ ## Unreleased * Added - * Added aria-label to announce the visual label. + * Added a invalid example in `terra-search-Field`. + * Added aria-label to announce the visual label for `terra-form-select`. ## 1.52.0 - (November 21, 2023) diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/search-field/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/About.1.doc.mdx index d3b951f4f6a..6a51cd3759a 100644 --- a/packages/terra-core-docs/src/terra-dev-site/doc/search-field/About.1.doc.mdx +++ b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/About.1.doc.mdx @@ -14,6 +14,7 @@ import SearchFieldDisableAutoSearch from './example/SearchFieldDisableAutoSearch import SearchFieldFilterNumeric from './example/SearchFieldFilterNumeric?dev-site-example'; import SearchFieldFocus from './example/SearchFieldFocus?dev-site-example'; import SearchFieldProgrammaticSet from './example/SearchFieldProgrammaticSet?dev-site-example'; +import SearchFieldInvalid from './example/SearchFieldInvalid?dev-site-example'; import SearchFieldPropsTable from 'terra-search-field/lib/SearchField?dev-site-props-table'; @@ -73,6 +74,7 @@ import SearchField from 'terra-search-field'; + ## SearchField Props diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.jsx new file mode 100644 index 00000000000..bddc70b7995 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.jsx @@ -0,0 +1,63 @@ +import React, { useState, useRef } from 'react'; +import SearchField from 'terra-search-field'; +import classNames from 'classnames/bind'; +import styles from './SearchFieldInvalid.module.scss'; + +const cx = classNames.bind(styles); + +const SearchFieldInvalid = () => { + const [isInvalid, setInvalid] = useState(false); + const [message, setMessage] = useState(''); + const [text, setText] = useState(''); + const inputRef = useRef(null); + + const handleInvalidSearch = (value) => { + setText(value); + setInvalid(true); + setMessage('INVALID Search Text: '); + if (inputRef.current) { + inputRef.current.classList.add(styles['error-border']); // Add red border on invalid search + } + }; + + const handleChange = (event, value) => { + setText(value); + setInvalid(false); + }; + + const handleInput = (event) => { + setText(event.target.value); + }; + + const handleSearch = (value) => { + setText(value); + setMessage('Search Text: '); + if (inputRef.current) { + inputRef.current.classList.remove(styles['error-border']); // Remove red border on valid search + } + }; + + return ( +
+

Minimum Search Length is 3

+ { inputRef.current = ref; }} + searchDelay={500} + /> +
+ {message} + {text} +
+
+ ); +}; + +export default SearchFieldInvalid; diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.module.scss b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.module.scss new file mode 100644 index 00000000000..f1678787ba8 --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.module.scss @@ -0,0 +1,15 @@ +:local { + .error-text { + color: var(--terra-core-docs-error-text-color, #e50000); + font-size: var(--terra-core-docs-error-text-font-size, 0.857rem); + font-weight: var(--terra-core-docs-error-text-font-weight, normal); + line-height: 1.25; + margin-top: var(--terra-core-docs-error-text-margin-top, 0.357em); + outline: 0; + text-align: left; + } + + .error-border { + outline: var(--terra-core-docs-error-border-outline, 2px solid #e50000); + } +}