diff --git a/.changeset/afraid-toes-join.md b/.changeset/afraid-toes-join.md new file mode 100644 index 0000000000..87e8aa7c6d --- /dev/null +++ b/.changeset/afraid-toes-join.md @@ -0,0 +1,6 @@ +--- +'@commercetools-uikit/async-creatable-select-field': minor +'@commercetools-uikit/async-creatable-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-creatable-select-field/README.md b/packages/components/fields/async-creatable-select-field/README.md index 4ce6f85907..d021252b57 100644 --- a/packages/components/fields/async-creatable-select-field/README.md +++ b/packages/components/fields/async-creatable-select-field/README.md @@ -70,6 +70,7 @@ export default Example; | `filterOption` | `AsyncCreatableProps['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` | `AsyncCreatableProps['id']` | | | The id to set on the SelectContainer component
[Props from React select was used](https://react-select.com/props) | | `isClearable` | `AsyncCreatableProps['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` | `AsyncCreatableProps['isDisabled']` | | | Is the select disabled
[Props from React select was used](https://react-select.com/props) | | `isReadOnly` | `boolean` | | | Is the select read-only | | `isOptionDisabled` | `AsyncCreatableProps['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-creatable-select-field/src/async-creatable-select-field.story.js b/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.story.js index 6875f325a0..c57bafc7d2 100644 --- a/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.story.js +++ b/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.story.js @@ -192,6 +192,7 @@ storiesOf('Components|Fields/SelectFields', module) hintIcon={hintIcon} badge={text('badge', '')} iconLeft={iconLeft ? createElement(iconLeft) : undefined} + isCondensed={boolean('isCondensed', false)} {...addMenuPortalProps()} /> diff --git a/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.tsx b/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.tsx index cabc5cf5a6..51d47eaab2 100644 --- a/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.tsx +++ b/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.tsx @@ -159,6 +159,10 @@ export type TAsyncCreatableSelectFieldProps = { * [Props from React select was used](https://react-select.com/props) */ isClearable?: ReactSelectAsyncCreatableProps['isClearable']; + /** + * Use this property to reduce the paddings of the component for a ui compact variant + */ + isCondensed?: boolean; /** * Is the select disabled *
@@ -519,6 +523,7 @@ export default class AsyncCreatableSelectField extends Component< createOptionPosition={this.props.createOptionPosition} showOptionGroupDivider={this.props.showOptionGroupDivider} iconLeft={this.props.iconLeft} + isCondensed={this.props.isCondensed} {...filterDataAttributes(this.props)} /> ( renderWarning={() => 'Custom warning'} /> + + {}} + loadOptions={loadOptions} + horizontalConstraint={7} + /> + ); diff --git a/packages/components/inputs/async-creatable-select-input/README.md b/packages/components/inputs/async-creatable-select-input/README.md index 2003d9dbf2..70a37c55ae 100644 --- a/packages/components/inputs/async-creatable-select-input/README.md +++ b/packages/components/inputs/async-creatable-select-input/README.md @@ -70,6 +70,7 @@ export default Example; | `inputValue` | `AsyncCreatableProps['inputValue']` | | | The value of the search input
[Props from React select was used](https://react-select.com/props) | | `containerId` | `AsyncCreatableProps['id']` | | | The id to set on the SelectContainer component
[Props from React select was used](https://react-select.com/props) | | `isClearable` | `AsyncCreatableProps['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` | `AsyncCreatableProps['isDisabled']` | | | Is the select disabled
[Props from React select was used](https://react-select.com/props) | | `isOptionDisabled` | `AsyncCreatableProps['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` | `AsyncCreatableProps['isMulti']` | | | Support multiple selected options
[Props from React select was used](https://react-select.com/props) | diff --git a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.story.js b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.story.js index 6879966f8a..488928dd07 100644 --- a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.story.js +++ b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.story.js @@ -89,6 +89,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-creatable-select-input/src/async-creatable-select-input.tsx b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx index 03fc25caf3..3ad412eeef 100644 --- a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx +++ b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx @@ -165,6 +165,10 @@ export type TAsyncCreatableSelectInputProps = { * [Props from React select was used](https://react-select.com/props) */ isClearable?: ReactSelectAsyncCreatableProps['isClearable']; + /** + * Use this property to reduce the paddings of the component for a ui compact variant + */ + isCondensed?: boolean; /** * Is the select disabled *
@@ -411,6 +415,7 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => { hasError: props.hasError, showOptionGroupDivider: props.showOptionGroupDivider, menuPortalZIndex: props.menuPortalZIndex, + isCondensed: props.isCondensed, isDisabled: props.isDisabled, isReadOnly: props.isReadOnly, iconLeft: props.iconLeft, @@ -508,6 +513,7 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => { createOptionPosition={props.createOptionPosition} // @ts-ignore iconLeft={props.iconLeft} + isCondensed={props.isCondensed} /> diff --git a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.visualroute.jsx b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.visualroute.jsx index f49635ad5e..9b5698eed4 100644 --- a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.visualroute.jsx +++ b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.visualroute.jsx @@ -91,5 +91,15 @@ export const component = () => ( iconLeft={} /> + + {}} + isCondensed={true} + defaultOptions={true} + loadOptions={loadOptions} + horizontalConstraint={7} + /> + );