From 6c73d8578f5634fa1e059a086ba655dcaa712ada Mon Sep 17 00:00:00 2001 From: Sarah Brolley Date: Mon, 29 Apr 2024 11:12:32 -0400 Subject: [PATCH] Pangolin 3766 localized multiline text field (#2794) * feat(localized-multiline-text-input): add support for isCondensed property on LocalizedMultilineTextInput * feat(localized-multiline-text-input): set value of cacheMeasurements based on whether isCondensed value has been toggled * feat(localized-multiline-text-input): move cacheMeasurements to prop exposed on LocalizedMultilineTextInput * feat(localized-multiline-text-field): add support for isCondensed prop on LocalizedMultilineTextField * feat(localized-multiline-text-field): add cacheMeasurements prop to LocalizedMultilineTextField component to allow resizing height when isCondensed toggles * feat(localized-multiline-text-field): update readme description for cacheMeasurements, change storybook default value to true, add default value in component * feat(localized-multiline-text-field): update readme default value to include quotes * feat(localized-multiline-text-field): remove changeset from previous branch --- .changeset/slimy-games-press.md | 5 +++++ .../localized-multiline-text-field/README.md | 4 +++- .../localized-multiline-text-field.story.js | 2 ++ .../src/localized-multiline-text-field.tsx | 15 +++++++++++-- ...lized-multiline-text-field.visualroute.jsx | 21 +++++++++++++++++++ 5 files changed, 44 insertions(+), 3 deletions(-) create mode 100644 .changeset/slimy-games-press.md diff --git a/.changeset/slimy-games-press.md b/.changeset/slimy-games-press.md new file mode 100644 index 0000000000..a54f718851 --- /dev/null +++ b/.changeset/slimy-games-press.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/localized-multiline-text-field': minor +--- + +Add support for isCondensed prop to LocalizedMultilineTextField diff --git a/packages/components/fields/localized-multiline-text-field/README.md b/packages/components/fields/localized-multiline-text-field/README.md index 22f97c4f1f..8d8e4ce2d6 100644 --- a/packages/components/fields/localized-multiline-text-field/README.md +++ b/packages/components/fields/localized-multiline-text-field/README.md @@ -67,10 +67,12 @@ export default Example; | `selectedLanguage` | `string` | ✅ | | Specifies which language will be shown in case the `LocalizedTextInput` is collapsed. | | `onBlur` | `FocusEventHandler` | | | Called when input is blurred | | `onFocus` | `Function`
[See signature.](#signature-onFocus) | | | Called when input is focused | -| `defaultExpandMultilineText` | `boolean` | | | Expands input components holding multiline values instead of collpasing them by default. | +| `defaultExpandMultilineText` | `boolean` | | | Expands input components holding multiline values instead of collapsing them by default. | +| `cacheMeasurements` | `boolean` | | `true` | Use this property to turn off caching input measurements. | | `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. Pass `true` to show all languages by default. | | `isAutofocussed` | `boolean` | | | Sets the focus on the first input when `true` is passed. | +| `isCondensed` | `boolean` | | | Whether the text inputs for each localization should render with condensed paddings. | | `isDisabled` | `boolean` | | | Disables all input fields. | | `isReadOnly` | `boolean` | | | Disables all input fields and shows them in read-only mode. | | `placeholder` | `Object`
[See signature.](#signature-placeholder) | | | Placeholders for each language. Object of the same shape as `value`. | diff --git a/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js index a1cc3ebf8c..ab65f61bd5 100644 --- a/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js +++ b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js @@ -113,6 +113,8 @@ storiesOf('Components|Fields', module) } defaultExpandMultilineText={defaultExpandMultilineText} isAutofocussed={boolean('isAutofocussed', false)} + cacheMeasurements={boolean('cacheMeasurements', 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-multiline-text-field/src/localized-multiline-text-field.tsx b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.tsx index b458ce47be..f8da8ba168 100644 --- a/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.tsx +++ b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.tsx @@ -139,9 +139,13 @@ export type TLocalizedMultilineTextFieldProps = { */ onFocus?: () => void; /** - * Expands input components holding multiline values instead of collpasing them by default. + * Expands input components holding multiline values instead of collapsing them by default. */ defaultExpandMultilineText?: boolean; + /** + * Use this property to turn off caching input measurements. + */ + cacheMeasurements?: boolean; /** * Will hide the language expansion controls when set to `true`. All languages will be shown when set to `true`. */ @@ -155,6 +159,10 @@ export type TLocalizedMultilineTextFieldProps = { * Sets the focus on the first input when `true` is passed. */ isAutofocussed?: boolean; + /** + * Whether the text inputs for each localization should render with condensed paddings. + */ + isCondensed?: boolean; /** * Disables all input fields. */ @@ -229,9 +237,10 @@ class LocalizedMultilineTextField extends Component< static defaultProps: Pick< TLocalizedMultilineTextFieldProps, - 'horizontalConstraint' + 'horizontalConstraint' | 'cacheMeasurements' > = { horizontalConstraint: 'scale', + cacheMeasurements: true, }; state = { @@ -304,6 +313,8 @@ class LocalizedMultilineTextField extends Component< } defaultExpandLanguages={this.props.defaultExpandLanguages} isAutofocussed={this.props.isAutofocussed} + cacheMeasurements={this.props.cacheMeasurements} + isCondensed={this.props.isCondensed} isDisabled={this.props.isDisabled} isReadOnly={this.props.isReadOnly} errors={this.props.errorsByLanguage} diff --git a/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.visualroute.jsx b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.visualroute.jsx index 13c2bf9504..dc03bc03f6 100644 --- a/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.visualroute.jsx +++ b/packages/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.visualroute.jsx @@ -106,6 +106,27 @@ export const component = () => ( isDisabled={true} /> + + {}} + selectedLanguage="en" + horizontalConstraint={7} + isCondensed={true} + defaultExpandLanguages={true} + /> + + + {}} + selectedLanguage="en" + horizontalConstraint={7} + isCondensed={true} + /> +