Skip to content

Commit

Permalink
Add min width and max width prop to select input (#2685)
Browse files Browse the repository at this point in the history 
* feat(select input): add min and max-width props to select input

* feat(select input): update readme

* feat(select input): fallback to default when no max or min value provided

* feat(select input): update props naming

* feat(select input): use horizontal scale for min and max props

* feat(select input): update readmes

* feat(select input): update horizontal constraint

* feat(select input): update changeset

---------

Co-authored-by: Ddouglasz <[email protected]>
Co-authored-by: Carlos Cortizas <[email protected]>
  • Loading branch information
@ddouglasz @CarlosCortizasCT
3 people authored Jan 18, 2024
1 parent b80555d commit 6803787
Show file tree
Hide file tree
Showing 9 changed files with 166 additions and 66 deletions.
6 changes: 6 additions & 0 deletions .changeset/polite-colts-joke.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@commercetools-uikit/select-input': minor
'@commercetools-uikit/select-utils': minor
---

We're introducing two new props (`minMenuWidth` and `maxMenuWidth`) which allows the control of the minimum and maximum widths of the select dropdown menu.
4 changes: 3 additions & 1 deletion .changeset/spicy-books-invite.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,6 @@
'@commercetools-uikit/selectable-search-input': patch
---

provide option to pass selector prop to the dropdown option in selectable search input.
We included two new props (`selectDataProps`, `inputDataProps`) which allow consumers to forward `data-*` html props independently to both the `select` and `input` HTML elements.

If you were providing `data-*` props directly to these component, those will keep being forwarded to the `input` HTML element the same way they currently do but we will intend to remove that behaviour in the future in favour of the new added props.
88 changes: 45 additions & 43 deletions packages/components/inputs/select-input/README.md
View file

Large diffs are not rendered by default.

10 changes: 10 additions & 0 deletions packages/components/inputs/select-input/src/select-input.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,16 @@ storiesOf('Components|Inputs/SelectInputs', module)
value={value}
showOptionGroupDivider={showOptionGroupDivider}
iconLeft={iconLeft ? createElement(iconLeft) : undefined}
minMenuWidth={select(
'minWidth',
Constraints.getAcceptedMaxPropValues(),
'scale'
)}
maxMenuWidth={select(
'maxWidth',
Constraints.getAcceptedMaxPropValues(),
'scale'
)}
{...addMenuPortalProps()}
/>
<NeighbouringStackingContext />
Expand Down
44 changes: 44 additions & 0 deletions packages/components/inputs/select-input/src/select-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,48 @@ export type TSelectInputProps = {
* [Props from React select was used](https://react-select.com/props)
*/
value?: ReactSelectProps['value'];
/**
* The min width (a range of values from the horizontalConrtaint set of values) for which the select-input menu
* is allowed to shrink. If unset, the menu will shrink to a default value.
*/
minMenuWidth?:
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| 13
| 14
| 15
| 16
| 'scale'
| 'auto';
/**
* The max width (a range of values from the horizontalConrtaint set of values) for which the select-input menu
* is allowed to grow. If unset, the menu will grow horrizontally to fill its parent.
*/
maxMenuWidth?:
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| 13
| 14
| 15
| 16
| 'scale'
| 'auto';
};

const defaultProps: Pick<
Expand Down Expand Up @@ -429,6 +471,8 @@ const SelectInput = (props: TSelectInputProps) => {
hasValue: !isEmpty(selectedOptions),
controlShouldRenderValue: props.controlShouldRenderValue,
horizontalConstraint: props.horizontalConstraint,
minMenuWidth: props.minMenuWidth,
maxMenuWidth: props.maxMenuWidth,
}) as ReactSelectProps['styles']
}
filterOption={props.filterOption}
Expand Down
51 changes: 50 additions & 1 deletion packages/components/inputs/select-utils/src/create-select-styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,40 @@ type TProps = {
hasValue?: boolean;
controlShouldRenderValue?: boolean;
appearance?: 'default' | 'quiet';
minMenuWidth?:
| 2
| 3
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| 13
| 14
| 15
| 16
| 'scale'
| 'auto';
maxMenuWidth?:
| 4
| 5
| 6
| 7
| 8
| 9
| 10
| 11
| 12
| 13
| 14
| 15
| 16
| 'scale'
| 'auto';
horizontalConstraint?:
| 3
| 4
Expand Down Expand Up @@ -58,6 +92,17 @@ type TState = {
isSelected?: boolean;
};

type TDesignTokenName = keyof typeof designTokens;

const getHorizontalConstraintValue = (
value?: TProps['minMenuWidth'] | TProps['maxMenuWidth']
) => {
return (
designTokens[`constraint${value}` as TDesignTokenName] ||
designTokens.constraint3
);
};

const getInputBackgroundColor = (props: TProps) => {
if (props.appearance === 'quiet') {
return designTokens.backgroundColorForInputAsQuiet;
Expand Down Expand Up @@ -195,7 +240,11 @@ const menuStyles = (props: TProps) => (base: TBase) => {
return base.borderColorForInput;
})(),
width: props.horizontalConstraint === 'auto' ? 'auto' : '100%',
minWidth: designTokens.constraint3,
minWidth: props.minMenuWidth
? getHorizontalConstraintValue(props.minMenuWidth)
: designTokens.constraint3,
maxWidth:
props.maxMenuWidth ?? getHorizontalConstraintValue(props.maxMenuWidth),
};
};

Expand Down
14 changes: 4 additions & 10 deletions packages/components/inputs/selectable-search-input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,14 +47,8 @@ const Example = () => (
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
]}
selectDataProps={[
{ 'data-select-1': 'value-1' },
{ 'data-select-2': 'value-2' },
]}
inputDataProps={[
{ 'data-input-1': 'value-1' },
{ 'data-input-2': 'value-2' },
]}
selectDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
inputDataProps={[{ 'prop-3': 'value-1' }, { 'prop-4': 'value-2' }]}
/>
);

Expand Down Expand Up @@ -95,8 +89,8 @@ export default Example;
| `closeMenuOnSelect` | `ReactSelectProps['closeMenuOnSelect']` | | | Whether the menu should close after a value is selected. Defaults to `true`.&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props) |
| `menuHorizontalConstraint` | `union`<br/>Possible values:<br/>`3 , 4 , 5` | | `3` | Horizontal size limit for the dropdown menu. |
| `showSubmitButton` | `boolean` | | `true` | Show submit button in the input |
| `selectDataProps` | `Array: TDataProps[]` | | | used to pass `data-*` props to the select component |
| `inputDataProps` | `Array: TDataProps[]` | | | used to pass `data-*` props to the input element |
| `selectDataProps` | `Record<string, string>` | | | used to pass `data-*` props to the select component.&#xA;eg: selectDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]} |
| `inputDataProps` | `Record<string, string>` | | | used to pass `data-*` props to the input element.&#xA;eg: inputDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]} |

## Signatures

Expand Down
9 changes: 0 additions & 9 deletions packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,15 +143,6 @@ storiesOf('Components|Inputs', module)
onSubmit={(submitValues) => {
alert(JSON.stringify(submitValues));
}}
inputDataProps={{
'track-component': 'InputElement',
foo: 'bar',
}}
selectDataProps={{
'track-component': 'SelectElement',
bar: 'foo',
}}
data-legacy-prop="foobar"
{...addMenuPortalProps()}
/>
<NeighbouringStackingContext />
Expand Down
6 changes: 4 additions & 2 deletions packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,11 +207,13 @@ export type TSelectableSearchInputProps = {
*/
showSubmitButton?: boolean;
/**
* used to pass `data-*` props to the select component
* used to pass data-* props to the select component.
* eg: selectDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
*/
selectDataProps?: Record<string, string>;
/**
* used to pass `data-*` props to the input element
* used to pass data-* props to the input element.
* eg: inputDataProps={[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}
*/
inputDataProps?: Record<string, string>;
};
Expand Down

1 comment on commit 6803787

@vercel
Copy link

@vercel vercel bot commented on 6803787 Jan 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ui-kit – ./

ui-kit-git-main-commercetools.vercel.app
ui-kit-five-rho.vercel.app
ui-kit-commercetools.vercel.app
uikit.commercetools.com

Please sign in to comment.