diff --git a/.changeset/loud-moose-invite.md b/.changeset/loud-moose-invite.md
new file mode 100644
index 0000000000..463f49c565
--- /dev/null
+++ 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
index 68a280f074..9adf958f3a 100644
--- 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
index c49cbdd632..bfcf09c857 100644
--- 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
index ed727fc785..4828d96d36 100644
--- 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
index f38a680d4a..42ba51002b 100644
--- 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}
/>
+
+ {}}
+ selectedLanguage="en"
+ horizontalConstraint={7}
+ isCondensed={true}
+ defaultExpandLanguages={true}
+ />
+
+
+ {}}
+ selectedLanguage="en"
+ horizontalConstraint={7}
+ isCondensed={true}
+ />
+