feat(localized-text-input): add support for isCondensed prop in Local…

…izedTextInput component
commercetools · Apr 22, 2024 · 8c70390 · 8c70390
1 parent d30700f
commit 8c70390
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 2 deletions.
diff --git a/.changeset/nine-students-push.md b/.changeset/nine-students-push.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/localized-text-input': minor
+---
+
+Add support for isCondensed prop to LocalizedTextInput
diff --git a/packages/components/inputs/localized-text-input/README.md b/packages/components/inputs/localized-text-input/README.md
@@ -63,6 +63,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 field on initial render                                                                                                                                       |
+| `isCondensed`                   | `boolean`                                                                                                   |          |           | Whether the input and options are rendered with condensed paddings                                                                                                            |
 | `isDisabled`                    | `boolean`                                                                                                   |          |           | Disables all input fields.                                                                                                                                                    |
 | `isReadOnly`                    | `boolean`                                                                                                   |          |           | Disables all input fields and shows them in read-only mode.                                                                                                                   |
 | `placeholder`                   | `Record`                                                                                                    |          |           | Placeholders for each language. Object of the same shape as `value`.                                                                                                          |

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

diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.styles.ts b/packages/components/inputs/localized-text-input/src/localized-text-input.styles.ts
@@ -44,8 +44,12 @@ const getLanguageLabelStyles = (props: TLocalizedInputProps) => {
     box-sizing: border-box;
     color: ${designTokens.colorNeutral60};
     cursor: ${props.isDisabled ? 'not-allowed' : 'default'};
-    height: ${designTokens.heightForInput};
-    font-size: ${designTokens.fontSize30};
+    height: ${props.isCondensed
+      ? designTokens.heightForInputAsSmall
+      : designTokens.heightForInput};
+    font-size: ${props.isCondensed
+      ? designTokens.fontSize20
+      : designTokens.fontSize30};
     background-color: ${getLanguageLabelBackgroundColor(props)};
     border-top-left-radius: ${designTokens.borderRadiusForInput};
     border-bottom-left-radius: ${designTokens.borderRadiusForInput};

diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.tsx b/packages/components/inputs/localized-text-input/src/localized-text-input.tsx
@@ -87,6 +87,10 @@ export type TLocalizedTextInputProps = {
    * Focus the input field on initial render
    */
   isAutofocussed?: boolean;
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Disables all input fields.
    */
@@ -177,6 +181,7 @@ export type TLocalizedInputProps = {
   onBlur?: FocusEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   isAutofocussed?: boolean;
+  isCondensed?: boolean;
   isDisabled?: boolean;
   isReadOnly?: boolean;
   hasError?: boolean;
@@ -330,6 +335,7 @@ const LocalizedTextInput = (props: TLocalizedTextInputProps) => {
                     onBlur={props.onBlur}
                     onFocus={props.onFocus}
                     isAutofocussed={index === 0 && props.isAutofocussed}
+                    isCondensed={props.isCondensed}
                     isDisabled={props.isDisabled}
                     isReadOnly={props.isReadOnly}
                     hasError={Boolean(

diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.visualroute.jsx b/packages/components/inputs/localized-text-input/src/localized-text-input.visualroute.jsx
@@ -76,6 +76,25 @@ export const component = () => (
         isDisabled={true}
       />
     </Spec>
+    <Spec label="when isCondensed and open">
+      <LocalizedTextInput
+        value={value}
+        onChange={() => {}}
+        selectedLanguage="en"
+        horizontalConstraint={7}
+        isCondensed={true}
+        defaultExpandLanguages={true}
+      />
+    </Spec>
+    <Spec label="when isCondensed and closed">
+      <LocalizedTextInput
+        value={value}
+        onChange={() => {}}
+        selectedLanguage="en"
+        horizontalConstraint={7}
+        isCondensed={true}
+      />
+    </Spec>
     <Spec label="when there is an error for a specific language (first one)">
       <LocalizedTextInput
         value={value}