From d30700f097c8572115b98d08c51bd5b94808630a Mon Sep 17 00:00:00 2001 From: Jonathan Creasman Date: Mon, 22 Apr 2024 03:36:42 -0400 Subject: [PATCH] feat(text-field): add isCondensed prop (#2787) Co-authored-by: Jonathan Creasman --- .changeset/light-walls-cough.md | 5 +++++ packages/components/fields/text-field/README.md | 1 + .../components/fields/text-field/src/text-field.story.js | 1 + packages/components/fields/text-field/src/text-field.tsx | 5 +++++ .../fields/text-field/src/text-field.visualroute.jsx | 9 +++++++++ 5 files changed, 21 insertions(+) create mode 100644 .changeset/light-walls-cough.md diff --git a/.changeset/light-walls-cough.md b/.changeset/light-walls-cough.md new file mode 100644 index 0000000000..de0e41e544 --- /dev/null +++ b/.changeset/light-walls-cough.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/text-field': minor +--- + +Included a new property (**isCondensed**) which allows to render a more visually compact variant of the input. diff --git a/packages/components/fields/text-field/README.md b/packages/components/fields/text-field/README.md index 13053bd79b..f104138e90 100644 --- a/packages/components/fields/text-field/README.md +++ b/packages/components/fields/text-field/README.md @@ -58,6 +58,7 @@ export default Example; | `onBlur` | `FocusEventHandler` | | | Called when input is blurred | | `onFocus` | `FocusEventHandler` | | | Called when input is focused | | `isAutofocussed` | `boolean` | | | Focus the input on initial render | +| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `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` | `string` | | | Placeholder text for the input | diff --git a/packages/components/fields/text-field/src/text-field.story.js b/packages/components/fields/text-field/src/text-field.story.js index e44571a7d0..183c080265 100644 --- a/packages/components/fields/text-field/src/text-field.story.js +++ b/packages/components/fields/text-field/src/text-field.story.js @@ -74,6 +74,7 @@ storiesOf('Components|Fields', module) onBlur={action('onBlur')} onFocus={action('onFocus')} isAutofocussed={boolean('isAutofocussed', false)} + isCondensed={boolean('isCondensed', false)} isDisabled={boolean('isDisabled', false)} isReadOnly={boolean('isReadOnly', false)} placeholder={text('placeholder', 'Placeholder')} diff --git a/packages/components/fields/text-field/src/text-field.tsx b/packages/components/fields/text-field/src/text-field.tsx index 44d68c532d..4f8b538303 100644 --- a/packages/components/fields/text-field/src/text-field.tsx +++ b/packages/components/fields/text-field/src/text-field.tsx @@ -124,6 +124,10 @@ export type TTextFieldProps = { * Focus the input on initial render */ isAutofocussed?: boolean; + /** + * Use this property to reduce the paddings of the component for a ui compact variant + */ + isCondensed?: boolean; /** * Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). */ @@ -237,6 +241,7 @@ class TextField extends Component { onBlur={this.props.onBlur} onFocus={this.props.onFocus} isAutofocussed={this.props.isAutofocussed} + isCondensed={this.props.isCondensed} isDisabled={this.props.isDisabled} isReadOnly={this.props.isReadOnly} hasWarning={hasWarning} diff --git a/packages/components/fields/text-field/src/text-field.visualroute.jsx b/packages/components/fields/text-field/src/text-field.visualroute.jsx index 88e1baf879..11cddb67ac 100644 --- a/packages/components/fields/text-field/src/text-field.visualroute.jsx +++ b/packages/components/fields/text-field/src/text-field.visualroute.jsx @@ -92,5 +92,14 @@ export const component = () => ( renderWarning={() => 'Custom warning'} /> + + {}} + horizontalConstraint={7} + /> + );