Skip to content

Commit

Permalink
Pangolin 3766 localized multiline text field (#2794)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@Sarah4VT
Sarah4VT authored Apr 29, 2024
1 parent a3844a1 commit 6c73d85
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/slimy-games-press.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@commercetools-uikit/localized-multiline-text-field': minor
---

Add support for isCondensed prop to LocalizedMultilineTextField
4 changes: 3 additions & 1 deletion packages/components/fields/localized-multiline-text-field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`<br/>[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`<br/>[See signature.](#signature-placeholder) | | | Placeholders for each language. Object of the same shape as `value`. |
Expand Down
2 changes: 2 additions & 0 deletions ...ponents/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' })}
Expand Down
15 changes: 13 additions & 2 deletions ...s/components/fields/localized-multiline-text-field/src/localized-multiline-text-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
*/
Expand All @@ -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.
*/
Expand Down Expand Up @@ -229,9 +237,10 @@ class LocalizedMultilineTextField extends Component<

static defaultProps: Pick<
TLocalizedMultilineTextFieldProps,
'horizontalConstraint'
'horizontalConstraint' | 'cacheMeasurements'
> = {
horizontalConstraint: 'scale',
cacheMeasurements: true,
};

state = {
Expand Down Expand Up @@ -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}
Expand Down
21 changes: 21 additions & 0 deletions .../fields/localized-multiline-text-field/src/localized-multiline-text-field.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,27 @@ export const component = () => (
isDisabled={true}
/>
</Spec>
<Spec label="when condensed and open">
<LocalizedMultilineTextField
title="Welcome Text"
value={value}
onChange={() => {}}
selectedLanguage="en"
horizontalConstraint={7}
isCondensed={true}
defaultExpandLanguages={true}
/>
</Spec>
<Spec label="when condensed and closed">
<LocalizedMultilineTextField
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">
<LocalizedMultilineTextField
title="Welcome Text"
Expand Down

0 comments on commit 6c73d85

Please sign in to comment.