[terra-search-field] Added invalid red box for invalid search field

packages/terra-core-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added a invalid example in `terra-search-Field`.
+
 ## 1.52.0 - (November 21, 2023)
 
 * Added

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';
 <SearchFieldFilterNumeric />
 <SearchFieldFocus />
 <SearchFieldProgrammaticSet />
+<SearchFieldInvalid />
 
 ## SearchField Props
 <SearchFieldPropsTable />

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 (
+    <div>
+      <p>Minimum Search Length is 3</p>
+      <SearchField
+        id="searchfield"
+        inputAttributes={{ 'aria-invalid': isInvalid, 'aria-describedby': 'search-callback-text' }}
+        onSearch={handleSearch}
+        onInvalidSearch={handleInvalidSearch}
+        onChange={handleChange}
+        onInput={handleInput}
+        minimumSearchTextLength={3}
+        value={text}
+        inputRefCallback={(ref) => { inputRef.current = ref; }}
+        searchDelay={500}
+      />
+      <div id="search-callback-text" className={isInvalid ? cx('error-text') : ''}>
+        {message}
+        {text}
+      </div>
+    </div>
+  );
+};
+
+export default SearchFieldInvalid;

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);
+  } 
+}