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} + /> +