From 8bf179b975ad9f14ea83cd7d6a70e0abd79a4272 Mon Sep 17 00:00:00 2001 From: Jonathan Creasman Date: Fri, 26 Apr 2024 05:15:11 -0400 Subject: [PATCH] feat(async-select): add isCondensed prop to field and input (#2796) Co-authored-by: Jonathan Creasman --- .changeset/long-wombats-push.md | 6 ++++++ .../components/fields/async-select-field/README.md | 1 + .../src/async-select-field.story.js | 1 + .../async-select-field/src/async-select-field.tsx | 5 +++++ .../src/async-select-field.visualroute.jsx | 11 +++++++++++ .../components/inputs/async-select-input/README.md | 1 + .../src/async-select-input.story.js | 1 + .../async-select-input/src/async-select-input.tsx | 6 ++++++ .../src/async-select-input.visualroute.jsx | 9 +++++++++ 9 files changed, 41 insertions(+) create mode 100644 .changeset/long-wombats-push.md diff --git a/.changeset/long-wombats-push.md b/.changeset/long-wombats-push.md new file mode 100644 index 0000000000..7a4090019f --- /dev/null +++ b/.changeset/long-wombats-push.md @@ -0,0 +1,6 @@ +--- +'@commercetools-uikit/async-select-field': minor +'@commercetools-uikit/async-select-input': minor +--- + +Add isCondensed prop that when set to true, condenses the input height, icon size and font size. diff --git a/packages/components/fields/async-select-field/README.md b/packages/components/fields/async-select-field/README.md index 68344a1a98..bb8e24bdeb 100644 --- a/packages/components/fields/async-select-field/README.md +++ b/packages/components/fields/async-select-field/README.md @@ -69,6 +69,7 @@ export default Example; | `filterOption` | `AsyncProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu
[Props from React select was used](https://react-select.com/props) | | `containerId` | `AsyncProps['id']` | | | The id to set on the SelectContainer component
[Props from React select was used](https://react-select.com/props) | | `isClearable` | `AsyncProps['isClearable']` | | | Is the select value clearable
[Props from React select was used](https://react-select.com/props) | +| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `AsyncProps['isDisabled']` | | | Is the select disabled
[Props from React select was used](https://react-select.com/props) | | `isReadOnly` | `boolean` | | | Is the select read-only | | `isOptionDisabled` | `AsyncProps['isOptionDisabled']` | | | Override the built-in logic to detect whether an option is disabled
[Props from React select was used](https://react-select.com/props) | diff --git a/packages/components/fields/async-select-field/src/async-select-field.story.js b/packages/components/fields/async-select-field/src/async-select-field.story.js index 576948749e..af82152500 100644 --- a/packages/components/fields/async-select-field/src/async-select-field.story.js +++ b/packages/components/fields/async-select-field/src/async-select-field.story.js @@ -161,6 +161,7 @@ storiesOf('Components|Fields/SelectFields', module) onFocus={action('onFocus')} onInputChange={action('onInputChange')} isAutofocussed={boolean('isAutofocussed', false)} + isCondensed={boolean('isCondensed', false)} isDisabled={boolean('isDisabled', false)} isReadOnly={boolean('isReadOnly', false)} isMulti={isMulti} diff --git a/packages/components/fields/async-select-field/src/async-select-field.tsx b/packages/components/fields/async-select-field/src/async-select-field.tsx index 85d1bd87b9..8bcde92007 100644 --- a/packages/components/fields/async-select-field/src/async-select-field.tsx +++ b/packages/components/fields/async-select-field/src/async-select-field.tsx @@ -160,6 +160,10 @@ export type TAsyncSelectFieldProps = { * [Props from React select was used](https://react-select.com/props) */ isClearable?: ReactSelectAsyncProps['isClearable']; + /** + * Use this property to reduce the paddings of the component for a ui compact variant + */ + isCondensed?: boolean; /** * Is the select disabled *
@@ -442,6 +446,7 @@ export default class AsyncSelectField extends Component< id={this.state.id} containerId={this.props.containerId} isClearable={this.props.isClearable} + isCondensed={this.props.isCondensed} isDisabled={this.props.isDisabled} isReadOnly={this.props.isReadOnly} isOptionDisabled={this.props.isOptionDisabled} diff --git a/packages/components/fields/async-select-field/src/async-select-field.visualroute.jsx b/packages/components/fields/async-select-field/src/async-select-field.visualroute.jsx index adb1ba9f2a..efa459b380 100644 --- a/packages/components/fields/async-select-field/src/async-select-field.visualroute.jsx +++ b/packages/components/fields/async-select-field/src/async-select-field.visualroute.jsx @@ -111,6 +111,17 @@ const DefaultRoute = () => ( renderWarning={() => 'Custom warning'} /> + + {}} + loadOptions={loadOptions} + horizontalConstraint={7} + /> + ); diff --git a/packages/components/inputs/async-select-input/README.md b/packages/components/inputs/async-select-input/README.md index fef56e92b0..45795afa45 100644 --- a/packages/components/inputs/async-select-input/README.md +++ b/packages/components/inputs/async-select-input/README.md @@ -68,6 +68,7 @@ export default Example; | `inputValue` | `AsyncProps['inputValue']` | | | The value of the search input
[Props from React select was used](https://react-select.com/props) | | `containerId` | `AsyncProps['id']` | | | The id to set on the SelectContainer component
[Props from React select was used](https://react-select.com/props) | | `isClearable` | `AsyncProps['isClearable']` | | | Is the select value clearable
[Props from React select was used](https://react-select.com/props) | +| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `isDisabled` | `AsyncProps['isDisabled']` | | | Is the select disabled
[Props from React select was used](https://react-select.com/props) | | `isOptionDisabled` | `AsyncProps['isOptionDisabled']` | | | Override the built-in logic to detect whether an option is disabled
[Props from React select was used](https://react-select.com/props) | | `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options
[Props from React select was used](https://react-select.com/props) | diff --git a/packages/components/inputs/async-select-input/src/async-select-input.story.js b/packages/components/inputs/async-select-input/src/async-select-input.story.js index b3220bc5ee..3ca0108145 100644 --- a/packages/components/inputs/async-select-input/src/async-select-input.story.js +++ b/packages/components/inputs/async-select-input/src/async-select-input.story.js @@ -94,6 +94,7 @@ class SelectStory extends Component { id={text('id', '')} containerId={text('containerId', '')} isClearable={boolean('isClearable', false)} + isCondensed={boolean('isCondensed', false)} isDisabled={boolean('isDisabled', false)} isReadOnly={boolean('isReadOnly', false)} isMulti={isMulti} diff --git a/packages/components/inputs/async-select-input/src/async-select-input.tsx b/packages/components/inputs/async-select-input/src/async-select-input.tsx index 0946536bdc..69bc3371d3 100644 --- a/packages/components/inputs/async-select-input/src/async-select-input.tsx +++ b/packages/components/inputs/async-select-input/src/async-select-input.tsx @@ -163,6 +163,10 @@ export type TAsyncSelectInputProps = { * [Props from React select was used](https://react-select.com/props) */ isClearable?: ReactSelectAsyncProps['isClearable']; + /** + * Use this property to reduce the paddings of the component for a ui compact variant + */ + isCondensed?: boolean; /** * Is the select disabled *
@@ -383,6 +387,7 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => { hasError: props.hasError, showOptionGroupDivider: props.showOptionGroupDivider, menuPortalZIndex: props.menuPortalZIndex, + isCondensed: props.isCondensed, isDisabled: props.isDisabled, isReadOnly: props.isReadOnly, iconLeft: props.iconLeft, @@ -471,6 +476,7 @@ const AsyncSelectInput = (props: TAsyncSelectInputProps) => { cacheOptions={props.cacheOptions} // Extra props // @ts-ignore: passed to the react-select components via `selectProps`. + isCondensed={props.isCondensed} iconLeft={props.iconLeft} controlShouldRenderValue={props.controlShouldRenderValue} /> diff --git a/packages/components/inputs/async-select-input/src/async-select-input.visualroute.jsx b/packages/components/inputs/async-select-input/src/async-select-input.visualroute.jsx index 51491dc417..a4c6e2720c 100644 --- a/packages/components/inputs/async-select-input/src/async-select-input.visualroute.jsx +++ b/packages/components/inputs/async-select-input/src/async-select-input.visualroute.jsx @@ -104,5 +104,14 @@ export const component = () => ( iconLeft={} /> + + {}} + loadOptions={loadOptions} + horizontalConstraint={7} + /> + );