UI Kit | FE | SearchTextInput add new isCondensed prop (#2781)

* feat(search-text-input): add new isCondensed prop * feat(search-text-input): add PR feedback * feat(search-text-input): add PR feedback --------- Co-authored-by: Jonathan Creasman <[email protected]> Co-authored-by: Jonathan Creasman <[email protected]>
commercetools · Apr 15, 2024 · 9933003 · 9933003
1 parent c2447db
commit 9933003
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 2 deletions.
diff --git a/.changeset/good-mayflies-notice.md b/.changeset/good-mayflies-notice.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/search-text-input': minor
+---
+
+Add isCondensed prop that when set to true, condenses the input height and font size.
diff --git a/packages/components/inputs/search-text-input/README.md b/packages/components/inputs/search-text-input/README.md
@@ -60,6 +60,7 @@ export default Example;
 | `onSubmit`             | `Function`<br/>[See signature.](#signature-onSubmit)                                                  |    ✅    |           | Handler when the search button is clicked.                                                                                |
 | `onReset`              | `Function`<br/>[See signature.](#signature-onReset)                                                   |    ✅    |           | Handler when the clear button is clicked.                                                                                 |
 | `isAutofocussed`       | `boolean`                                                                                             |          |           | Focus the input on initial render                                                                                         |
+| `isCondensed`          | `boolean`                                                                                             |          |           | Use this property to reduce the paddings of the component for a ui compact variant                                        |
 | `isDisabled`           | `boolean`                                                                                             |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).                            |
 | `isReadOnly`           | `boolean`                                                                                             |          |           | Indicates that the field is displaying read-only content                                                                  |
 | `hasError`             | `boolean`                                                                                             |          |           | Indicates if the input has invalid values                                                                                 |

diff --git a/packages/components/inputs/search-text-input/src/search-text-input.story.js b/packages/components/inputs/search-text-input/src/search-text-input.story.js
@@ -39,6 +39,7 @@ storiesOf('Components|Inputs', module)
                 onChange(event.target.value);
               }}
               isAutofocussed={boolean('isAutofocussed', false)}
+              isCondensed={boolean('isCondensed', false)}
               isDisabled={boolean('isDisabled', false)}
               isReadOnly={boolean('isReadOnly', false)}
               isClearable={boolean('isClearable', true)}

diff --git a/packages/components/inputs/search-text-input/src/search-text-input.styles.ts b/packages/components/inputs/search-text-input/src/search-text-input.styles.ts
@@ -3,6 +3,7 @@ import { getInputStyles } from '@commercetools-uikit/input-utils';
 import { designTokens } from '@commercetools-uikit/design-system';
 
 type TInputProps = {
+  isCondensed?: boolean;
   isDisabled?: boolean;
   hasError?: boolean;
   hasWarning?: boolean;
@@ -53,6 +54,9 @@ const getSearchTextInputStyles = (props: TInputProps) => [
     &:hover {
       background-color: transparent !important;
     }
+    font-size: ${props.isCondensed
+      ? `${designTokens.fontSize20}`
+      : `${designTokens.fontSize30}`};
   `,
 ];
 
@@ -124,7 +128,9 @@ const getSearchTextInputContainerStyles = (props: TInputProps) => [
     border: 1px solid ${getInputContainerBorderColor(props)};
     border-radius: ${designTokens.borderRadiusForInput};
     box-shadow: ${getInputBoxShadow(props)};
-    height: ${designTokens.heightForInput};
+    height: ${props.isCondensed
+      ? `${designTokens.heightForInputAsSmall}`
+      : `${designTokens.heightForInput}`};
     box-sizing: border-box;
     &:hover {
       border-color: ${getInputContainerBorderColor(

diff --git a/packages/components/inputs/search-text-input/src/search-text-input.tsx b/packages/components/inputs/search-text-input/src/search-text-input.tsx
@@ -69,6 +69,10 @@ export type TSearchTextInputProps = {
    * Focus the input on initial render
    */
   isAutofocussed?: boolean;
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
    */
@@ -204,14 +208,15 @@ const SearchTextInput: ForwardRefExoticComponent<
             !props.isReadOnly && (
               <SecondaryIconButton
                 icon={<CloseIcon />}
-                size="medium"
+                size={props.isCondensed ? 'small' : 'medium'}
                 label={'clear-button'}
                 onClick={handleClear}
                 css={getClearIconButtonStyles(props)}
               />
             )}
           <SecondaryIconButton
             icon={<SearchIcon />}
+            size={props.isCondensed ? 'medium' : 'big'}
             label={'search-button'}
             onClick={handleSubmit}
             css={getSearchIconButtonStyles(props)}

diff --git a/packages/components/inputs/search-text-input/src/search-text-input.visualroute.jsx b/packages/components/inputs/search-text-input/src/search-text-input.visualroute.jsx
@@ -110,5 +110,15 @@ export const component = () => (
         hasWarning={true}
       />
     </Spec>
+    <Spec label="with isCondensed">
+      <SearchTextInput
+        value={value}
+        onChange={() => {}}
+        isCondensed={true}
+        horizontalConstraint={7}
+        onSubmit={() => {}}
+        onReset={() => {}}
+      />
+    </Spec>
   </Suite>
 );