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 3712 select field #2782

Merged
merged 11 commits into from
Apr 17, 2024
Merged

Pangolin 3712 select field #2782

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
c51937a
feat(select-input): update styling of select input component for opti…
Sarah4VT Apr 10, 2024
a22f7ee
feat(select-input): update types to be more dynamic/maintainable and …
Sarah4VT Apr 12, 2024
2bf1a47
feat(select-input): update text for isCondensed in readme
Sarah4VT Apr 12, 2024
a270209
feat(select-input): make multi tag remove button, multi tag height, a…
Sarah4VT Apr 15, 2024
522e0ba
feat(select-field): add isCondensed layout for SelectField component
Sarah4VT Apr 12, 2024
c0451a2
feat(select-field): undo change I didn't mean to do and may have been…
Sarah4VT Apr 17, 2024
9bca7e0
feat(select-field): remove duplicate code that came from a bad merge
Sarah4VT Apr 17, 2024
fd315f2
feat(select-field): update typo in readme
Sarah4VT Apr 17, 2024
0c7795f
feat(select-field): update typo in readme
Sarah4VT Apr 17, 2024
c54153d
refactor(select-field): update readmes
CarlosCortizasCT Apr 17, 2024
faa117f
refactor(select-field): restore original comment format
CarlosCortizasCT Apr 17, 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/good-guests-peel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@commercetools-uikit/select-field': minor
---

Add support for isCondensed layout for SelectField
1 change: 1 addition & 0 deletions packages/components/fields/select-field/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ export default Example;
| `isClearable` | `boolean` | | | Is the select value clearable |
| `isDisabled` | `boolean` | | | Is the select disabled |
| `isReadOnly` | `boolean` | | | Is the select read-only |
| `isCondensed` | `boolean` | | | Whether the input and its options are rendered with condensed paddings |
| `isOptionDisabled` | `ReactSelectProps['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` | `boolean` | | | Support multiple selected options |
| `isSearchable` | `boolean` | | | Whether to enable search functionality |
Expand Down
1 change: 1 addition & 0 deletions packages/components/fields/select-field/src/select-field.story.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@ storiesOf('Components|Fields/SelectFields', module)
isAutofocussed={boolean('isAutofocussed', false)}
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
isCondensed={boolean('isCondensed', false)}
isMulti={isMulti}
placeholder={text('placeholder', 'Select...')}
title={text('title', 'Favourite animal')}
Expand Down
5 changes: 5 additions & 0 deletions packages/components/fields/select-field/src/select-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,10 @@ export type TSelectFieldProps = {
* Is the select read-only
*/
isReadOnly?: boolean;
/**
* Whether the input and its options are rendered with condensed paddings
*/
isCondensed?: boolean;
/**
* Override the built-in logic to detect whether an option is disabled
* <br/>
Expand Down Expand Up @@ -405,6 +409,7 @@ export default class SelectField extends Component<TSelectFieldProps> {
isClearable={this.props.isClearable}
isDisabled={this.props.isDisabled}
isReadOnly={this.props.isReadOnly}
isCondensed={this.props.isCondensed}
isOptionDisabled={this.props.isOptionDisabled}
isMulti={this.props.isMulti}
isSearchable={this.props.isSearchable}
Expand Down
11 changes: 11 additions & 0 deletions packages/components/fields/select-field/src/select-field.visualroute.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,17 @@ export const component = () => (
isReadOnly={true}
/>
</Spec>
<Spec label="when is condensed">
<SelectField
title="State"
name="form-field-name"
value={value}
onChange={() => {}}
options={options}
horizontalConstraint={7}
isCondensed={true}
/>
</Spec>
<Spec label="when has warning">
<SelectField
title="State"
Expand Down
2 changes: 1 addition & 1 deletion packages/components/inputs/select-input/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export default Example;
| `isAutofocussed` | `boolean` | | | Focus the control when it is mounted |
| `backspaceRemovesValue` | `ReactSelectProps['backspaceRemovesValue']` | | | Remove the currently focused option when the user presses backspace&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `components` | `ReactSelectProps['components']` | | | Map of components to overwrite the default ones, see what components you can override&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `isCondensed` | `boolean` | | | Whether the options appear in a condensed layout |
| `isCondensed` | `boolean` | | | Whether the input and options are rendered with condensed paddings |
| `controlShouldRenderValue` | `ReactSelectProps['controlShouldRenderValue']` | | | Control whether the selected values should be rendered in the control&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `filterOption` | `ReactSelectProps['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) |
| `id` | `ReactSelectProps['inputId']` | | | Used as HTML id property. An id is generated automatically when not provided.&#xA;This forwarded as react-select's "inputId"&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
Expand Down
2 changes: 1 addition & 1 deletion packages/components/inputs/select-input/src/select-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export type TSelectInputProps = {
*/
components?: ReactSelectProps['components'];
/**
* Whether the options appear in a condensed layout
* Whether the input and options are rendered with condensed paddings
*/
isCondensed?: boolean;
/**
Expand Down
Loading