UI Kit | FE | TextInput add new isCondensed prop (#2778)

* feat(text-input): add new isCondensed prop * feat(text-input): remove commented out code * feat(text-input): add PR feedback * feat(text-input): add PR feedback --------- Co-authored-by: Jonathan Creasman <[email protected]> Co-authored-by: Carlos Cortizas <[email protected]>
commercetools · Apr 15, 2024 · 2c130c2 · 2c130c2
1 parent 9933003
commit 2c130c2
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 3 deletions.
diff --git a/.changeset/famous-shrimps-change.md b/.changeset/famous-shrimps-change.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/input-utils': minor
+'@commercetools-uikit/text-input': minor
+---
+
+Included a new property (**isCondensed**) which allows to render a more visually compact variant of the input.
diff --git a/packages/components/inputs/input-utils/src/styles.ts b/packages/components/inputs/input-utils/src/styles.ts
@@ -2,6 +2,7 @@ import { css } from '@emotion/react';
 import { designTokens } from '@commercetools-uikit/design-system';
 
 type TInputProps = {
+  isCondensed?: boolean;
   isDisabled?: boolean;
   disabled?: boolean;
   hasError?: boolean;
@@ -78,9 +79,15 @@ const getInputStyles = (props: TInputProps) => {
     display: flex;
     flex: 1;
     font-family: inherit;
-    font-size: ${designTokens.fontSize30};
-    height: ${designTokens.heightForInput};
-    min-height: ${designTokens.heightForInput};
+    font-size: ${props.isCondensed
+      ? `${designTokens.fontSize20}`
+      : `${designTokens.fontSize30}`};
+    height: ${props.isCondensed
+      ? `${designTokens.heightForInputAsSmall}`
+      : `${designTokens.heightForInput}`};
+    min-height: ${props.isCondensed
+      ? `${designTokens.heightForInputAsSmall}`
+      : `${designTokens.heightForInput}`};
     opacity: ${props.isDisabled || props.disabled
       ? '1'
       : 'unset'}; /* fix for mobile safari */

diff --git a/packages/components/inputs/text-input/README.md b/packages/components/inputs/text-input/README.md
@@ -54,6 +54,7 @@ export default Example;
 | `onBlur`               | `FocusEventHandler`                                                                                   |          |           | Called when input is blurred                                                                                              |
 | `onFocus`              | `FocusEventHandler`                                                                                   |          |           | Called when input is focused                                                                                              |
 | `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/text-input/src/text-input.story.js b/packages/components/inputs/text-input/src/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)}
               hasError={boolean('hasError', false)}

diff --git a/packages/components/inputs/text-input/src/text-input.tsx b/packages/components/inputs/text-input/src/text-input.tsx
@@ -48,6 +48,10 @@ export type TTextInputProps = {
    * 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).
    */

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