Skip to content

Commit

Permalink
feat(async-select): add isCondensed prop to field and input (#2796)
Browse files Browse the repository at this point in the history 
Co-authored-by: Jonathan Creasman <[email protected]>
  • Loading branch information
@jmcreasman
jmcreasman and Jonathan Creasman authored Apr 26, 2024
1 parent 4dbbe80 commit 8bf179b
Show file tree
Hide file tree
Showing 9 changed files with 41 additions and 0 deletions.
6 changes: 6 additions & 0 deletions .changeset/long-wombats-push.md
View file
Original file line number Diff line number Diff line change
@@ -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.
1 change: 1 addition & 0 deletions packages/components/fields/async-select-field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export default Example;
| `filterOption` | `AsyncProps['filterOption']` | | | Custom method to filter whether an option should be displayed in the menu&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `containerId` | `AsyncProps['id']` | | | The id to set on the SelectContainer component&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `isClearable` | `AsyncProps['isClearable']` | | | Is the select value clearable&#xA;<br>&#xA;[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&#xA;<br>&#xA;[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&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
Expand Down
1 change: 1 addition & 0 deletions packages/components/fields/async-select-field/src/async-select-field.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/fields/async-select-field/src/async-select-field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
* <br>
Expand Down Expand Up @@ -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}
Expand Down
11 changes: 11 additions & 0 deletions packages/components/fields/async-select-field/src/async-select-field.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,17 @@ const DefaultRoute = () => (
renderWarning={() => 'Custom warning'}
/>
</Spec>
<Spec label="is condensed">
<AsyncSelectField
title="State"
name="form-field-name"
isCondensed={true}
value={value}
onChange={() => {}}
loadOptions={loadOptions}
horizontalConstraint={7}
/>
</Spec>
</Suite>
);

Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/async-select-input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ export default Example;
| `inputValue` | `AsyncProps['inputValue']` | | | The value of the search input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `containerId` | `AsyncProps['id']` | | | The id to set on the SelectContainer component&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `isClearable` | `AsyncProps['isClearable']` | | | Is the select value clearable&#xA;<br>&#xA;[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&#xA;<br>&#xA;[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&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `isMulti` | `AsyncProps['isMulti']` | | | Support multiple selected options&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
Expand Down
1 change: 1 addition & 0 deletions packages/components/inputs/async-select-input/src/async-select-input.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
6 changes: 6 additions & 0 deletions packages/components/inputs/async-select-input/src/async-select-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
* <br>
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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}
/>
Expand Down
9 changes: 9 additions & 0 deletions packages/components/inputs/async-select-input/src/async-select-input.visualroute.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,5 +104,14 @@ export const component = () => (
iconLeft={<WorldIcon />}
/>
</Spec>
<Spec label="is condensed">
<AsyncSelectInput
value={value}
isCondensed={true}
onChange={() => {}}
loadOptions={loadOptions}
horizontalConstraint={7}
/>
</Spec>
</Suite>
);

0 comments on commit 8bf179b

Please sign in to comment.