Skip to content

Commit 0ea4123

Browse files
rroppolorroppolo
authored
UIDS-337 Update multi-select input styles to SingleSelect (#366)
1 parent 32f7647 commit 0ea4123

File tree

7 files changed

+165
-26
lines changed

7 files changed

+165
-26
lines changed

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 91 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4519,15 +4519,15 @@ exports[`Storyshots Design System/Selects/Async Default 1`] = `
45194519
onKeyDown={[Function]}
45204520
>
45214521
<div
4522-
className=" css-qv254q-control"
4522+
className=" css-15ub2n0-control"
45234523
onMouseDown={[Function]}
45244524
onTouchEnd={[Function]}
45254525
>
45264526
<div
45274527
className=" css-g1d714-ValueContainer"
45284528
>
45294529
<div
4530-
className=" css-1wa3eu0-placeholder"
4530+
className=" css-1269n2i-placeholder"
45314531
>
45324532
Select...
45334533
</div>
@@ -4641,15 +4641,15 @@ exports[`Storyshots Design System/Selects/Async Labeled 1`] = `
46414641
onKeyDown={[Function]}
46424642
>
46434643
<div
4644-
className=" css-qv254q-control"
4644+
className=" css-15ub2n0-control"
46454645
onMouseDown={[Function]}
46464646
onTouchEnd={[Function]}
46474647
>
46484648
<div
46494649
className=" css-g1d714-ValueContainer"
46504650
>
46514651
<div
4652-
className=" css-1wa3eu0-placeholder"
4652+
className=" css-1269n2i-placeholder"
46534653
>
46544654
Select...
46554655
</div>
@@ -4756,15 +4756,15 @@ exports[`Storyshots Design System/Selects/Creatable Default 1`] = `
47564756
onKeyDown={[Function]}
47574757
>
47584758
<div
4759-
className=" css-qv254q-control"
4759+
className=" css-15ub2n0-control"
47604760
onMouseDown={[Function]}
47614761
onTouchEnd={[Function]}
47624762
>
47634763
<div
47644764
className=" css-g1d714-ValueContainer"
47654765
>
47664766
<div
4767-
className=" css-1wa3eu0-placeholder"
4767+
className=" css-1269n2i-placeholder"
47684768
>
47694769
Select...
47704770
</div>
@@ -4870,15 +4870,15 @@ exports[`Storyshots Design System/Selects/Single Default 1`] = `
48704870
onKeyDown={[Function]}
48714871
>
48724872
<div
4873-
className=" css-qv254q-control"
4873+
className=" css-15ub2n0-control"
48744874
onMouseDown={[Function]}
48754875
onTouchEnd={[Function]}
48764876
>
48774877
<div
48784878
className=" css-g1d714-ValueContainer"
48794879
>
48804880
<div
4881-
className=" css-1wa3eu0-placeholder"
4881+
className=" css-1269n2i-placeholder"
48824882
>
48834883
Select...
48844884
</div>
@@ -4947,15 +4947,15 @@ exports[`Storyshots Design System/Selects/Single Labeled 1`] = `
49474947
onKeyDown={[Function]}
49484948
>
49494949
<div
4950-
className=" css-qv254q-control"
4950+
className=" css-15ub2n0-control"
49514951
onMouseDown={[Function]}
49524952
onTouchEnd={[Function]}
49534953
>
49544954
<div
49554955
className=" css-g1d714-ValueContainer"
49564956
>
49574957
<div
4958-
className=" css-1wa3eu0-placeholder"
4958+
className=" css-1269n2i-placeholder"
49594959
>
49604960
Select...
49614961
</div>
@@ -5017,15 +5017,15 @@ exports[`Storyshots Design System/Selects/Single Loading 1`] = `
50175017
onKeyDown={[Function]}
50185018
>
50195019
<div
5020-
className=" css-1wkj6wz-control"
5020+
className=" css-1930729-control"
50215021
onMouseDown={[Function]}
50225022
onTouchEnd={[Function]}
50235023
>
50245024
<div
50255025
className=" css-g1d714-ValueContainer"
50265026
>
50275027
<div
5028-
className=" css-1wa3eu0-placeholder"
5028+
className=" css-1269n2i-placeholder"
50295029
>
50305030
Select...
50315031
</div>
@@ -5074,6 +5074,83 @@ exports[`Storyshots Design System/Selects/Single Loading 1`] = `
50745074
</div>
50755075
`;
50765076

5077+
exports[`Storyshots Design System/Selects/Single Multi Select 1`] = `
5078+
<div
5079+
style={
5080+
Object {
5081+
"padding": "1rem",
5082+
}
5083+
}
5084+
>
5085+
<label
5086+
htmlFor="multi-select"
5087+
id="select-label"
5088+
>
5089+
Multi select
5090+
</label>
5091+
<div
5092+
className="SingleSelect css-2b097c-container"
5093+
id="multi-select"
5094+
onKeyDown={[Function]}
5095+
>
5096+
<div
5097+
className=" css-15ub2n0-control"
5098+
onMouseDown={[Function]}
5099+
onTouchEnd={[Function]}
5100+
>
5101+
<div
5102+
className=" css-g1d714-ValueContainer"
5103+
>
5104+
<div
5105+
className=" css-1269n2i-placeholder"
5106+
>
5107+
Select...
5108+
</div>
5109+
<input
5110+
aria-autocomplete="list"
5111+
aria-labelledby="select-label"
5112+
className="css-62g3xt-dummyInput"
5113+
disabled={false}
5114+
id="react-select-9-input"
5115+
onBlur={[Function]}
5116+
onChange={[Function]}
5117+
onFocus={[Function]}
5118+
readOnly={true}
5119+
tabIndex="0"
5120+
value=""
5121+
/>
5122+
</div>
5123+
<div
5124+
className=" css-1hb7zxy-IndicatorsContainer"
5125+
>
5126+
<span
5127+
className=" css-43ykx9-indicatorSeparator"
5128+
/>
5129+
<div
5130+
aria-hidden="true"
5131+
className=" css-fric97-indicatorContainer"
5132+
onMouseDown={[Function]}
5133+
onTouchEnd={[Function]}
5134+
>
5135+
<svg
5136+
aria-hidden="true"
5137+
className="css-6q0nyr-Svg"
5138+
focusable="false"
5139+
height={20}
5140+
viewBox="0 0 20 20"
5141+
width={20}
5142+
>
5143+
<path
5144+
d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
5145+
/>
5146+
</svg>
5147+
</div>
5148+
</div>
5149+
</div>
5150+
</div>
5151+
</div>
5152+
`;
5153+
50775154
exports[`Storyshots Design System/Selects/Single Searchable 1`] = `
50785155
<div
50795156
style={
@@ -5087,15 +5164,15 @@ exports[`Storyshots Design System/Selects/Single Searchable 1`] = `
50875164
onKeyDown={[Function]}
50885165
>
50895166
<div
5090-
className=" css-qv254q-control"
5167+
className=" css-15ub2n0-control"
50915168
onMouseDown={[Function]}
50925169
onTouchEnd={[Function]}
50935170
>
50945171
<div
50955172
className=" css-g1d714-ValueContainer"
50965173
>
50975174
<div
5098-
className=" css-1wa3eu0-placeholder"
5175+
className=" css-1269n2i-placeholder"
50995176
>
51005177
Select...
51015178
</div>

‎src/Select/AsyncSelect.test.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Async from 'react-select/async';
33
import { create } from 'react-test-renderer';
44

55
import { AsyncSelect, SELECT_SIZES } from 'src/Select';
6+
import { SIZE_SMALL_HEIGHT } from 'src/Select/styles';
67

78
const renderAsync = (props) => create(
89
<AsyncSelect loadOptions={jest.fn()} {...props} />,
@@ -16,8 +17,8 @@ describe('AsyncSelect', () => {
1617
const { props } = root.findByType(Async);
1718
const contentStyles = getContentStyles(props);
1819

19-
expect(contentStyles.height).toBe('2.25rem');
20-
expect(contentStyles.minHeight).toBe('2.25rem');
20+
expect(contentStyles.height).toBe(SIZE_SMALL_HEIGHT.height);
21+
expect(contentStyles.minHeight).toBe(SIZE_SMALL_HEIGHT.minHeight);
2122
});
2223

2324
test('size prop set to null will not set height of select', () => {

‎src/Select/SingleSelect.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import classNames from 'classnames';
23
import Select from 'react-select';
34
import propTypes from 'prop-types';
45

@@ -32,7 +33,7 @@ const SingleSelect = ({
3233
{...props}
3334
aria-label={ariaLabel}
3435
aria-labelledby={ariaLabelledBy}
35-
className={`${className || ''} SingleSelect`}
36+
className={classNames('SingleSelect', className)}
3637
defaultValue={defaultValue}
3738
getOptionLabel={getOptionLabel}
3839
getOptionValue={getOptionValue}

‎src/Select/SingleSelect.stories.jsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,16 @@ export const Labeled = () => (
4040
/>
4141
</Fragment>
4242
);
43+
44+
export const MultiSelect = () => (
45+
<Fragment>
46+
<label htmlFor="multi-select" id="select-label">Multi select</label>
47+
<SingleSelect
48+
aria-labelledby="select-label"
49+
id="multi-select"
50+
isMulti
51+
options={options}
52+
onChange={onChange}
53+
/>
54+
</Fragment>
55+
);

‎src/Select/SingleSelect.test.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Select from 'react-select';
33
import { create } from 'react-test-renderer';
44

55
import { SingleSelect, SELECT_SIZES } from 'src/Select';
6+
import { SIZE_SMALL_HEIGHT } from 'src/Select/styles';
67

78
const renderSelect = (props) => create(
89
<SingleSelect options={[]} onChange={jest.fn()} {...props} />,
@@ -16,8 +17,8 @@ describe('SingleSelect', () => {
1617
const { props } = root.findByType(Select);
1718
const contentStyles = getContentStyles(props);
1819

19-
expect(contentStyles.height).toBe('2.25rem');
20-
expect(contentStyles.minHeight).toBe('2.25rem');
20+
expect(contentStyles.height).toBe(SIZE_SMALL_HEIGHT.height);
21+
expect(contentStyles.minHeight).toBe(SIZE_SMALL_HEIGHT.minHeight);
2122
});
2223

2324
test('size prop set to null will not set height of select', () => {

‎src/Select/styles.js‎

Lines changed: 52 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,73 @@ import fontWeights from '../Styles/fontWeights';
33

44
export const SELECT_SIZES = { SMALL: 'small' };
55

6+
export const SIZE_SMALL_HEIGHT = {
7+
height: 'auto',
8+
minHeight: '2.25rem',
9+
};
10+
611
const getHeightProps = (size) => {
712
if (size === SELECT_SIZES.SMALL) {
8-
return {
9-
height: '2.25rem',
10-
minHeight: '2.25rem',
11-
};
13+
return SIZE_SMALL_HEIGHT;
1214
}
1315
return null;
1416
};
1517

18+
function getBorderStyles(isFocused, isSelected) {
19+
return {
20+
boxShadow: (isFocused || isSelected) ? '0px 0px 8px 0px #66AFE9B2;' : 'none',
21+
borderColor: (
22+
(isFocused || isSelected) ? systemColors.UX_BLUE_300 : systemColors.inputBorderColor
23+
),
24+
};
25+
}
26+
1627
/*
1728
To set styles for your item, make sure your option object has a child `colors` object
1829
with a text and/or hover key defined to override the defaults
1930
*/
2031
const defaultStyles = ({ size }) => ({
21-
control: (styles, { isDisabled }) => ({
32+
control: (styles, { isDisabled, isFocused, isSelected }) => ({
2233
...styles,
2334
...getHeightProps(size),
2435
backgroundColor: isDisabled ? systemColors.inputDisabledBg : styles.backgroundColor,
25-
borderColor: systemColors.inputBorderColor,
36+
...getBorderStyles(isFocused, isSelected),
37+
':hover': {
38+
...styles[':hover'],
39+
...getBorderStyles(isFocused, isSelected),
40+
},
2641
}),
2742
dropdownIndicator: (styles) => ({ ...styles, color: systemColors.UX_GRAY_600 }),
2843
indicatorSeparator: (styles) => ({ ...styles, display: 'none' }),
44+
multiValue: (styles) => ({
45+
...styles,
46+
backgroundColor: systemColors.UX_BLUE_100,
47+
color: systemColors.UX_BLUE_700,
48+
borderRadius: '.25rem',
49+
}),
50+
multiValueLabel: (styles) => ({
51+
...styles,
52+
color: systemColors.UX_BLUE_700,
53+
fontSize: '0.875rem',
54+
fontWeight: 400,
55+
lineHeight: '1.25rem',
56+
paddingLeft: '.5rem',
57+
}),
58+
multiValueRemove: (styles) => ({
59+
...styles,
60+
color: systemColors.UX_BLUE,
61+
cursor: 'pointer',
62+
':hover': {
63+
...styles[':hover'],
64+
backgroundColor: systemColors.selectOptionFocusedBg,
65+
color: systemColors.UX_BLUE_700,
66+
},
67+
}),
68+
placeholder: (styles) => ({
69+
...styles,
70+
color: systemColors.UX_GRAY_800,
71+
fontWeight: '300',
72+
}),
2973
singleValue: (styles, { data }) => ({
3074
...styles,
3175
color: (
@@ -46,6 +90,7 @@ const defaultStyles = ({ size }) => ({
4690
backgroundColor: isSelected || isFocused ? colors.hover : styles.backgroundColor,
4791
color: colors.text,
4892
fontWeight: fontWeights.light,
93+
fontSize: '0.875rem',
4994
cursor: 'pointer',
5095

5196
':active': {
@@ -56,7 +101,7 @@ const defaultStyles = ({ size }) => ({
56101

57102
':hover': {
58103
...styles[':hover'],
59-
backgroundColor: colors.hover || systemColors.UX_GRAY_200,
104+
backgroundColor: colors.hover || systemColors.UX_BLUE_100,
60105
},
61106
};
62107
},

‎src/Styles/colors/inputs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@ import palette from './palette';
33
export default {
44
inputBorderColor: palette.UX_GRAY_400,
55
inputDisabledBg: palette.UX_GRAY_300,
6+
selectOptionFocusedBg: '#C7DDEF',
67
};

0 commit comments

Comments
 (0)