feat(localized-text-field): add support for isCondensed prop to Local…

…izedTextField component
commercetools · Apr 23, 2024 · dd48447 · dd48447
1 parent 2c9b378
commit dd48447
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 0 deletions.
diff --git a/.changeset/loud-moose-invite.md b/.changeset/loud-moose-invite.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/localized-text-field': minor
+---
+
+Add support for isCondensed prop to LocalizedTextField
diff --git a/packages/components/fields/localized-text-field/README.md b/packages/components/fields/localized-text-field/README.md
@@ -70,6 +70,7 @@ export default Example;
 | `hideLanguageExpansionControls` | `boolean`                                                                                    |          |           | Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`.                                                                                                                                                         |
 | `defaultExpandLanguages`        | `boolean`                                                                                    |          |           | Controls whether one or all languages are visible by default                                                                                                                                                                                                          |
 | `isAutofocussed`                | `boolean`                                                                                    |          |           | Focus the input on initial render                                                                                                                                                                                                                                     |
+| `isCondensed`                   | `boolean`                                                                                    |          |           | Whether the input and its options are rendered with condensed paddings                                                                                                                                                                                                |
 | `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`                   | `Record`                                                                                     |          |           | Placeholders for each language. Object of the same shape as `value`.                                                                                                                                                                                                  |

diff --git a/packages/components/fields/localized-text-field/src/localized-text-field.story.js b/packages/components/fields/localized-text-field/src/localized-text-field.story.js
@@ -107,6 +107,7 @@ storiesOf('Components|Fields', module)
                 defaultExpandLanguages || undefined
               }
               isAutofocussed={boolean('isAutofocussed', false)}
+              isCondensed={boolean('isCondensed', false)}
               isDisabled={boolean('isDisabled', false)}
               isReadOnly={boolean('isReadOnly', false)}
               placeholder={object('placeholder', { en: 'Placeholder' })}

diff --git a/packages/components/fields/localized-text-field/src/localized-text-field.tsx b/packages/components/fields/localized-text-field/src/localized-text-field.tsx
@@ -145,6 +145,10 @@ export type TLocalizedTextFieldProps = {
    * Focus the input on initial render
    */
   isAutofocussed?: boolean;
+  /**
+   * Whether the input and its options are rendered with condensed paddings
+   */
+  isCondensed?: boolean;
   /**
    * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
    */
@@ -291,6 +295,7 @@ class LocalizedTextField extends Component<
             }
             defaultExpandLanguages={this.props.defaultExpandLanguages}
             isAutofocussed={this.props.isAutofocussed}
+            isCondensed={this.props.isCondensed}
             isDisabled={this.props.isDisabled}
             isReadOnly={this.props.isReadOnly}
             errors={this.props.errorsByLanguage}

diff --git a/packages/components/fields/localized-text-field/src/localized-text-field.visualroute.jsx b/packages/components/fields/localized-text-field/src/localized-text-field.visualroute.jsx
@@ -82,6 +82,27 @@ export const component = () => (
         isDisabled={true}
       />
     </Spec>
+    <Spec label="when condensed and open">
+      <LocalizedTextField
+        title="Welcome Text"
+        value={value}
+        onChange={() => {}}
+        selectedLanguage="en"
+        horizontalConstraint={7}
+        isCondensed={true}
+        defaultExpandLanguages={true}
+      />
+    </Spec>
+    <Spec label="when condensed and closed">
+      <LocalizedTextField
+        title="Welcome Text"
+        value={value}
+        onChange={() => {}}
+        selectedLanguage="en"
+        horizontalConstraint={7}
+        isCondensed={true}
+      />
+    </Spec>
     <Spec label="when there is an error and the field is not touched">
       <LocalizedTextField
         title="Welcome Text"