From 94676ead6a1becdd34c82850878b8cffb83690e5 Mon Sep 17 00:00:00 2001
From: UM100080 <UdayKiran.Mattam@cerner.com>
Date: Mon, 27 Nov 2023 18:25:50 +0530
Subject: [PATCH 1/3] first-comit

---
 packages/terra-core-docs/CHANGELOG.md         |  3 +
 .../doc/search-field/About.1.doc.mdx          |  2 +
 .../example/SearchFieldInvalid.jsx            | 75 +++++++++++++++++++
 .../example/SearchFieldInvalid.module.scss    | 15 ++++
 4 files changed, 95 insertions(+)
 create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.jsx
 create mode 100644 packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.module.scss

diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index 66b40e38426..859dae9613a 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/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
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';
 <SearchFieldFilterNumeric />
 <SearchFieldFocus />
 <SearchFieldProgrammaticSet />
+<SearchFieldInvalid />
 
 ## SearchField Props
 <SearchFieldPropsTable />
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..eef9dd9037c
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/search-field/example/SearchFieldInvalid.jsx
@@ -0,0 +1,75 @@
+import React, { useState, useRef } from 'react';
+import Button from 'terra-button/lib/Button';
+import SearchField from 'terra-search-field';
+import styles from './SearchFieldInvalid.module.scss';
+
+const SearchFieldInvalid = () => {
+  const [searchText, setSearchText] = useState('');
+  const [message, setMessage] = useState('');
+  const [text, setText] = useState('');
+  const inputRef = useRef(null);
+
+  const setTextClick = () => {
+    if (inputRef.current) {
+      inputRef.current.value = 'IpsumLorem';
+      let customEvent;
+      if (typeof (Event) === 'function') {
+        customEvent = new Event('input', {
+          bubbles: true,
+          cancelable: false,
+        });
+      } else {
+        customEvent = document.createEvent('Event');
+        customEvent.initEvent('input', true, false);
+      }
+      inputRef.current.dispatchEvent(customEvent);
+    }
+  };
+
+  const handleInvalidSearch = (value) => {
+    setSearchText(value);
+    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);
+  };
+
+  const handleInput = (event) => {
+    setText(event.target.value);
+  };
+
+  const handleSearch = (value) => {
+    setSearchText(value);
+    setMessage('Search Text: ');
+    if (inputRef.current) {
+      inputRef.current.classList.remove(styles['error-border']); // Remove red border on valid search
+    }
+  };
+
+  return (
+    <div>
+      <Button text="Set search field text" onClick={setTextClick} id="search-field-set-text-button" />
+      <p>Minimum Search Length is 3</p>
+      <SearchField
+        id="searchfield"
+        onSearch={handleSearch}
+        onInvalidSearch={handleInvalidSearch}
+        onChange={handleChange}
+        onInput={handleInput}
+        minimumSearchTextLength={3}
+        value={text}
+        inputRefCallback={(ref) => { inputRef.current = ref; }}
+      />
+      <div id="search-callback-text" className={(!searchText || text.length === 0) ? styles['error-text'] : ''}>
+        {message}
+        {searchText}
+      </div>
+    </div>
+  );
+};
+
+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);
+  } 
+}

From 54533971b1c5a354d7ed6f6ab191f2a8e3c27cc4 Mon Sep 17 00:00:00 2001
From: UM100080 <UdayKiran.Mattam@cerner.com>
Date: Thu, 30 Nov 2023 16:55:06 +0530
Subject: [PATCH 2/3] example text

---
 .../doc/search-field/example/SearchFieldInvalid.jsx           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index eef9dd9037c..3ab270777bf 100644
--- 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
@@ -11,7 +11,7 @@ const SearchFieldInvalid = () => {
 
   const setTextClick = () => {
     if (inputRef.current) {
-      inputRef.current.value = 'IpsumLorem';
+      inputRef.current.value = 'Ip';
       let customEvent;
       if (typeof (Event) === 'function') {
         customEvent = new Event('input', {
@@ -52,7 +52,7 @@ const SearchFieldInvalid = () => {
 
   return (
     <div>
-      <Button text="Set search field text" onClick={setTextClick} id="search-field-set-text-button" />
+      <Button text="Set Invalid search text" onClick={setTextClick} id="search-field-set-text-button" />
       <p>Minimum Search Length is 3</p>
       <SearchField
         id="searchfield"

From 69dc1f85eaf467ee96173bf2352bdc363a0db653 Mon Sep 17 00:00:00 2001
From: SM051274 <sm051274@cerner.net>
Date: Tue, 5 Dec 2023 00:17:11 +0530
Subject: [PATCH 3/3] doc corrections

---
 .../example/SearchFieldInvalid.jsx            | 36 +++++++------------
 1 file changed, 12 insertions(+), 24 deletions(-)

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
index 3ab270777bf..bddc70b7995 100644
--- 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
@@ -1,33 +1,19 @@
 import React, { useState, useRef } from 'react';
-import Button from 'terra-button/lib/Button';
 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 [searchText, setSearchText] = useState('');
+  const [isInvalid, setInvalid] = useState(false);
   const [message, setMessage] = useState('');
   const [text, setText] = useState('');
   const inputRef = useRef(null);
 
-  const setTextClick = () => {
-    if (inputRef.current) {
-      inputRef.current.value = 'Ip';
-      let customEvent;
-      if (typeof (Event) === 'function') {
-        customEvent = new Event('input', {
-          bubbles: true,
-          cancelable: false,
-        });
-      } else {
-        customEvent = document.createEvent('Event');
-        customEvent.initEvent('input', true, false);
-      }
-      inputRef.current.dispatchEvent(customEvent);
-    }
-  };
-
   const handleInvalidSearch = (value) => {
-    setSearchText(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
@@ -36,6 +22,7 @@ const SearchFieldInvalid = () => {
 
   const handleChange = (event, value) => {
     setText(value);
+    setInvalid(false);
   };
 
   const handleInput = (event) => {
@@ -43,7 +30,7 @@ const SearchFieldInvalid = () => {
   };
 
   const handleSearch = (value) => {
-    setSearchText(value);
+    setText(value);
     setMessage('Search Text: ');
     if (inputRef.current) {
       inputRef.current.classList.remove(styles['error-border']); // Remove red border on valid search
@@ -52,10 +39,10 @@ const SearchFieldInvalid = () => {
 
   return (
     <div>
-      <Button text="Set Invalid search text" onClick={setTextClick} id="search-field-set-text-button" />
       <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}
@@ -63,10 +50,11 @@ const SearchFieldInvalid = () => {
         minimumSearchTextLength={3}
         value={text}
         inputRefCallback={(ref) => { inputRef.current = ref; }}
+        searchDelay={500}
       />
-      <div id="search-callback-text" className={(!searchText || text.length === 0) ? styles['error-text'] : ''}>
+      <div id="search-callback-text" className={isInvalid ? cx('error-text') : ''}>
         {message}
-        {searchText}
+        {text}
       </div>
     </div>
   );