Skip to content

Commit 6debc82

Browse files
jasonbasuiljasonbasuil
authored
bug/UIDS-384 issue with modal prop single select (#459)
* fixes order of modal ternary in SingleSelect * adds story for SingleSelect inside Modal * adds bare minimum documentation for SingleSelect (WIP)
1 parent ba83d33 commit 6debc82

File tree

4 files changed

+250
-5
lines changed

4 files changed

+250
-5
lines changed

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

Lines changed: 146 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5608,7 +5608,7 @@ exports[`Storyshots Design System/Selects/Single Custom Option With Checkbox 1`]
56085608
aria-labelledby="select-label"
56095609
className="css-62g3xt-dummyInput"
56105610
disabled={false}
5611-
id="react-select-10-input"
5611+
id="react-select-11-input"
56125612
onBlur={[Function]}
56135613
onChange={[Function]}
56145614
onFocus={[Function]}
@@ -5685,7 +5685,7 @@ exports[`Storyshots Design System/Selects/Single Custom Value Container 1`] = `
56855685
aria-labelledby="select-label"
56865686
className="css-62g3xt-dummyInput"
56875687
disabled={false}
5688-
id="react-select-11-input"
5688+
id="react-select-12-input"
56895689
onBlur={[Function]}
56905690
onChange={[Function]}
56915691
onFocus={[Function]}
@@ -5795,6 +5795,150 @@ exports[`Storyshots Design System/Selects/Single Default 1`] = `
57955795
</div>
57965796
`;
57975797

5798+
exports[`Storyshots Design System/Selects/Single In Modal 1`] = `
5799+
<div
5800+
style={
5801+
Object {
5802+
"padding": "1rem",
5803+
}
5804+
}
5805+
>
5806+
<div
5807+
className="ReactModal__Overlay ReactModal__Overlay--after-open"
5808+
onClick={[Function]}
5809+
onMouseDown={[Function]}
5810+
style={
5811+
Object {
5812+
"backgroundColor": "rgba(255, 255, 255, 0.75)",
5813+
"bottom": 0,
5814+
"left": 0,
5815+
"position": "fixed",
5816+
"right": 0,
5817+
"top": 0,
5818+
}
5819+
}
5820+
>
5821+
<div
5822+
aria-label="Select in Modal"
5823+
aria-modal={true}
5824+
className="ReactModal__Content ReactModal__Content--after-open SelectInModal"
5825+
onClick={[Function]}
5826+
onKeyDown={[Function]}
5827+
onMouseDown={[Function]}
5828+
onMouseUp={[Function]}
5829+
role="dialog"
5830+
style={Object {}}
5831+
tabIndex="-1"
5832+
>
5833+
<header
5834+
className="ModalHeader"
5835+
>
5836+
<div
5837+
className="ModalHeader__heading"
5838+
>
5839+
<h1
5840+
className="ModalHeader__title"
5841+
id="select-in-modal"
5842+
>
5843+
Select in modal
5844+
</h1>
5845+
</div>
5846+
<button
5847+
aria-label="Close"
5848+
className="btn btn-sm btn-close"
5849+
disabled={false}
5850+
onClick={[Function]}
5851+
type="button"
5852+
/>
5853+
</header>
5854+
<div
5855+
className="ModalBody"
5856+
>
5857+
<span>
5858+
A select inside a modal
5859+
</span>
5860+
<div
5861+
className="SingleSelect css-2b097c-container"
5862+
id="select-in-modal"
5863+
onKeyDown={[Function]}
5864+
>
5865+
<div
5866+
className=" css-15ub2n0-control"
5867+
onMouseDown={[Function]}
5868+
onTouchEnd={[Function]}
5869+
>
5870+
<div
5871+
className=" css-g1d714-ValueContainer"
5872+
>
5873+
<div
5874+
className=" css-1269n2i-placeholder"
5875+
>
5876+
Select...
5877+
</div>
5878+
<input
5879+
aria-autocomplete="list"
5880+
aria-labelledby="select-label"
5881+
className="css-62g3xt-dummyInput"
5882+
disabled={false}
5883+
id="react-select-10-input"
5884+
onBlur={[Function]}
5885+
onChange={[Function]}
5886+
onFocus={[Function]}
5887+
readOnly={true}
5888+
tabIndex="0"
5889+
value=""
5890+
/>
5891+
</div>
5892+
<div
5893+
className=" css-1hb7zxy-IndicatorsContainer"
5894+
>
5895+
<span
5896+
className=" css-43ykx9-indicatorSeparator"
5897+
/>
5898+
<div
5899+
aria-hidden="true"
5900+
className=" css-7sl878-indicatorContainer"
5901+
onMouseDown={[Function]}
5902+
onTouchEnd={[Function]}
5903+
>
5904+
<svg
5905+
aria-hidden="true"
5906+
className="css-6q0nyr-Svg"
5907+
focusable="false"
5908+
height={20}
5909+
viewBox="0 0 20 20"
5910+
width={20}
5911+
>
5912+
<path
5913+
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"
5914+
/>
5915+
</svg>
5916+
</div>
5917+
</div>
5918+
</div>
5919+
</div>
5920+
</div>
5921+
<div
5922+
className="ModalFooter"
5923+
>
5924+
<button
5925+
className="btn btn-transparent"
5926+
type="button"
5927+
>
5928+
Cancel
5929+
</button>
5930+
<button
5931+
className="btn btn-success"
5932+
type="submit"
5933+
>
5934+
Save
5935+
</button>
5936+
</div>
5937+
</div>
5938+
</div>
5939+
</div>
5940+
`;
5941+
57985942
exports[`Storyshots Design System/Selects/Single Labeled 1`] = `
57995943
<div
58005944
style={

‎src/Select/SingleSelect.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ const SingleSelect = ({
5454
...defaultStyles({ size }),
5555
menuPortal: (base) => (
5656
modal ?
57-
base :
58-
{ ...base, zIndex: zStack.zIndexModalBackdrop + 1 }
57+
{ ...base, zIndex: zStack.zIndexModalBackdrop + 1 } :
58+
base
5959
),
6060
}}
6161
theme={defaultTheme}

‎src/Select/SingleSelect.mdx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { ArgsTable, Story, Preview } from '@storybook/addon-docs/blocks';
2+
import SingleSelect from './SingleSelect';
3+
4+
# SingleSelect
5+
6+
A base select input. Flexible and comes with multiselect, clearable, searchable, disabled, and loading support.
7+
8+
<ArgsTable of={SingleSelect} />
9+
10+
## Anatomy
11+
12+
## Best practices
13+
14+
## Guidelines
15+
16+
### General
17+
18+
### Implementation
19+
20+
### Default
21+
22+
<Preview>
23+
<Story id="design-system-selects-single--default" />
24+
</Preview>
25+
26+
### Searchable
27+
28+
<Preview>
29+
<Story id="design-system-selects-single--searchable" />
30+
</Preview>
31+
32+
### Loading
33+
34+
<Preview>
35+
<Story id="design-system-selects-single--loading" />
36+
</Preview>
37+
38+
### Labeled
39+
40+
<Preview>
41+
<Story id="design-system-selects-single--labeled" />
42+
</Preview>
43+
44+
### Multi Select
45+
46+
<Preview>
47+
<Story id="design-system-selects-single--multi-select" />
48+
</Preview>
49+
50+
### Custom Option With Checkbox
51+
52+
<Preview>
53+
<Story id="design-system-selects-single--custom-option-with-checkbox" />
54+
</Preview>
55+
56+
### Custom Value Container
57+
58+
<Preview>
59+
<Story id="design-system-selects-single--custom-value-container" />
60+
</Preview>

‎src/Select/SingleSelect.stories.jsx‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,27 @@
11
import React, { Fragment } from 'react';
2+
import { action } from '@storybook/addon-actions';
23

4+
import {
5+
Modal, ModalHeader, ModalBody, ModalFooter,
6+
} from 'src/Modal';
37
import SingleSelect from 'src/Select/SingleSelect';
48

59
import Option from './Option';
610
import ValueContainer from './ValueContainer';
711

8-
const onChange = () => {};
12+
import mdx from './SingleSelect.mdx';
13+
14+
const onChange = () => action('Change');
15+
const handleRequestClose = () => action('Close');
916

1017
export default {
1118
title: 'Design System/Selects/Single',
1219
component: SingleSelect,
20+
parameters: {
21+
docs: {
22+
page: mdx,
23+
},
24+
},
1325
};
1426

1527
const options = [
@@ -58,6 +70,35 @@ export const MultiSelect = () => (
5870
</Fragment>
5971
);
6072

73+
export const InModal = () => (
74+
<Modal
75+
ariaHideApp={false}
76+
className="SelectInModal"
77+
contentLabel="Select in Modal"
78+
isOpen
79+
>
80+
<ModalHeader
81+
title="Select in modal"
82+
titleId="select-in-modal"
83+
onRequestClose={handleRequestClose}
84+
/>
85+
<ModalBody>
86+
<span>A select inside a modal</span>
87+
<SingleSelect
88+
aria-labelledby="select-label"
89+
id="select-in-modal"
90+
modal
91+
options={options}
92+
onChange={onChange}
93+
/>
94+
</ModalBody>
95+
<ModalFooter>
96+
<button className="btn btn-transparent" type="button">Cancel</button>
97+
<button className="btn btn-success" type="submit">Save</button>
98+
</ModalFooter>
99+
</Modal>
100+
);
101+
61102
export const CustomOptionWithCheckbox = () => (
62103
<Fragment>
63104
<label htmlFor="multi-select" id="select-label-custom-option">Custom option with checkbox</label>

0 commit comments

Comments
 (0)