docs(styles): updated search field

SAP · Jul 18, 2023 · 6fc1d01 · 6fc1d01
1 parent c0705a6
commit 6fc1d01
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 19 deletions.
diff --git a/packages/styles/stories/Components/tool-header/horizontal-paddings.example.html b/packages/styles/stories/Components/tool-header/horizontal-paddings.example.html
@@ -96,16 +96,38 @@ <h4>Size XL (3rem)</h4>
             </button>
         </div>
     </div>
-    <div class="fd-tool-header__group fd-tool-header__group--center">
-        <div class="fd-tool-header__element">
-            <div class="fd-input-group fd-tool-header__input-group fd-tool-header__search-field">
-                <input class="fd-input fd-input-group__input fd-tool-header__search-field-input" type="text" id="aqwsdewfwfw" name="" placeholder="Search...">
-                <div class="fd-input-group__addon fd-tool-header__search-field-addon fd-tool-header__search-submit fd-input-group__addon--button">
-                    <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-tool-header__button" aria-label="Search">
-                        <i class="sap-icon--search"></i>
-                    </button>
-                </div>
-            </div>
+    <div class="fd-tool-header__group">
+        <div id="JKHhjk7234k23" class="fd-input-group fd-tool-header__search-field">
+          <input
+            aria-label="search-input"
+            type="text"
+            onfocus="addClass('JKHhjk7234k23', 'is-focus')"
+            onblur="removeClass('JKHhjk7234k23', 'is-focus')"
+            class="fd-input fd-input-group__input fd-tool-header__search-field-input"
+            id="F4GcX348b1"
+            placeholder="Search everything"
+          />
+          <div
+            class="fd-input-group__addon fd-tool-header__search-field-addon fd-tool-header__search-cancel fd-input-group__addon--button"
+          >
+            <button
+              aria-label="button-search"
+              class="fd-tool-header__button fd-button fd-button--transparent"
+            >
+              <i class="sap-icon--decline"></i>
+            </button>
+          </div>
+          <div
+            class="fd-input-group__addon fd-tool-header__search-field-addon fd-tool-header__search-submit fd-input-group__addon--button"
+          >
+            <button
+              aria-label="button-search"
+              class="fd-tool-header__button fd-button fd-button--transparent"
+            >
+              <i class="sap-icon--search"></i>
+            </button>
+          </div>
+          <div class="fd-tool-header__search-field-helper"></div>
         </div>
     </div>
     <div class="fd-tool-header__group">

diff --git a/packages/styles/stories/Components/tool-header/menu.example.html b/packages/styles/stories/Components/tool-header/menu.example.html
@@ -15,18 +15,41 @@ <h4 class="fd-title fd-title--h5 fd-tool-header__title">Product Name</h4>
             <label class="fd-text fd-tool-header__text" for="input-1">Description (Text Element)</label>
         </div>
     </div>
-    <div class="fd-tool-header__group fd-tool-header__group--center">
-        <div class="fd-input-group fd-tool-header__input-group fd-tool-header__search-field">
-            <input class="fd-input fd-input-group__input fd-tool-header__search-field-input" type="text" id="aqwsdewfwfw" name="" placeholder="Search...">
-            <div class="fd-input-group__addon fd-tool-header__search-field-addon fd-tool-header__search-submit fd-input-group__addon--button">
-                <button class="fd-input-group__button fd-button fd-button--icon fd-button--transparent fd-tool-header__button" aria-label="Search">
-                    <i class="sap-icon--search"></i>
-                </button>
-            </div>
+    <div class="fd-tool-header__group">
+      <div id="JKHhjk7234k2" class="fd-input-group fd-tool-header__search-field">
+        <input
+          aria-label="search-input"
+          type="text"
+          onfocus="addClass('JKHhjk7234k2', 'is-focus')"
+          onblur="removeClass('JKHhjk7234k2', 'is-focus')"
+          class="fd-input fd-input-group__input fd-tool-header__search-field-input"
+          id="F4GcX348b1"
+          placeholder="Search everything"
+        />
+        <div
+          class="fd-input-group__addon fd-tool-header__search-field-addon fd-tool-header__search-cancel fd-input-group__addon--button"
+        >
+          <button
+            aria-label="button-search"
+            class="fd-tool-header__button fd-button fd-button--transparent"
+          >
+            <i class="sap-icon--decline"></i>
+          </button>
+        </div>
+        <div
+          class="fd-input-group__addon fd-tool-header__search-field-addon fd-tool-header__search-submit fd-input-group__addon--button"
+        >
+          <button
+            aria-label="button-search"
+            class="fd-tool-header__button fd-button fd-button--transparent"
+          >
+            <i class="sap-icon--search"></i>
+          </button>
         </div>
+        <div class="fd-tool-header__search-field-helper"></div>
+      </div>
     </div>
     <div class="fd-tool-header__group">
-
         <div class="fd-tool-header__element">
             <button class="fd-button fd-button--transparent fd-tool-header__button" aria-label="task">
                  <i class="sap-icon--circle-task"></i>