Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pangolin 3766 localized multiline text field #2794

Merged
merged 8 commits into from
Apr 29, 2024
Merged

Pangolin 3766 localized multiline text field #2794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
74134f9
feat(localized-multiline-text-input): add support for isCondensed pro…
Sarah4VT Apr 23, 2024
6bb8707
feat(localized-multiline-text-input): set value of cacheMeasurements …
Sarah4VT Apr 24, 2024
016dd5a
feat(localized-multiline-text-input): move cacheMeasurements to prop …
Sarah4VT Apr 25, 2024
ef81e48
feat(localized-multiline-text-field): add support for isCondensed pro…
Sarah4VT Apr 23, 2024
27309dc
feat(localized-multiline-text-field): add cacheMeasurements prop to L…
Sarah4VT Apr 25, 2024
85a90a7
feat(localized-multiline-text-field): update readme description for c…
Sarah4VT Apr 25, 2024
e87a950
feat(localized-multiline-text-field): update readme default value to …
Sarah4VT Apr 25, 2024
b165b2e
feat(localized-multiline-text-field): remove changeset from previous …
Sarah4VT Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/slimy-games-press.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading