feat(text-field): add isCondensed prop (#2787)

Co-authored-by: Jonathan Creasman <[email protected]>
commercetools · Apr 22, 2024 · d30700f · d30700f
1 parent 96fe379
commit d30700f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 0 deletions.
diff --git a/.changeset/light-walls-cough.md b/.changeset/light-walls-cough.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/text-field': minor
+---
+
+Included a new property (**isCondensed**) which allows to render a more visually compact variant of the input.
diff --git a/packages/components/fields/text-field/README.md b/packages/components/fields/text-field/README.md
@@ -58,6 +58,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                                                                                                                                                                                                          |
 | `placeholder`          | `string`                                                                                              |          |           | Placeholder text for the input                                                                                                                                                                                                                                    |

diff --git a/packages/components/fields/text-field/src/text-field.story.js b/packages/components/fields/text-field/src/text-field.story.js
@@ -74,6 +74,7 @@ storiesOf('Components|Fields', module)
               onBlur={action('onBlur')}
               onFocus={action('onFocus')}
               isAutofocussed={boolean('isAutofocussed', false)}
+              isCondensed={boolean('isCondensed', false)}
               isDisabled={boolean('isDisabled', false)}
               isReadOnly={boolean('isReadOnly', false)}
               placeholder={text('placeholder', 'Placeholder')}

diff --git a/packages/components/fields/text-field/src/text-field.tsx b/packages/components/fields/text-field/src/text-field.tsx
@@ -124,6 +124,10 @@ export type TTextFieldProps = {
    * 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).
    */
@@ -237,6 +241,7 @@ class TextField extends Component<TTextFieldProps, TTextFieldState> {
             onBlur={this.props.onBlur}
             onFocus={this.props.onFocus}
             isAutofocussed={this.props.isAutofocussed}
+            isCondensed={this.props.isCondensed}
             isDisabled={this.props.isDisabled}
             isReadOnly={this.props.isReadOnly}
             hasWarning={hasWarning}

diff --git a/packages/components/fields/text-field/src/text-field.visualroute.jsx b/packages/components/fields/text-field/src/text-field.visualroute.jsx
@@ -92,5 +92,14 @@ export const component = () => (
         renderWarning={() => 'Custom warning'}
       />
     </Spec>
+    <Spec label="with isCondensed">
+      <TextField
+        title="Welcome Text"
+        value={value}
+        isCondensed={true}
+        onChange={() => {}}
+        horizontalConstraint={7}
+      />
+    </Spec>
   </Suite>
 );