Skip to content

Commit b796a2d

Browse files
mgadewollmgadewoll
committed
REVERT ME: draft changes
- adds initial EuiSelectable design changes
1 parent 0e5dba6 commit b796a2d

15 files changed

+1654
-682
lines changed

‎packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap‎

Lines changed: 82 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,14 @@ exports[`EuiSelectable custom options with data 1`] = `
1313
>
1414
<div
1515
class="euiSelectableList__list emotion-euiSelectableList__list"
16-
style="position: relative; height: 96px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
16+
style="position: relative; height: 112px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
1717
tabindex="-1"
1818
>
1919
<ul
2020
aria-multiselectable="true"
2121
id="generated-id_listbox"
2222
role="listbox"
23-
style="height: 96px; width: 100%;"
23+
style="height: 112px; width: 100%;"
2424
tabindex="0"
2525
>
2626
<li
@@ -31,16 +31,25 @@ exports[`EuiSelectable custom options with data 1`] = `
3131
class="euiSelectableListItem emotion-euiSelectableListItem-s"
3232
id="generated-id_listbox_option-0"
3333
role="option"
34-
style="position: absolute; left: 0px; top: 0px; height: 32px; width: 100%;"
34+
style="position: absolute; left: 8px; top: 8px; height: 32px; width: calc(100% - 16px);"
3535
title="Titan"
3636
>
3737
<span
3838
class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
3939
>
4040
<span
41-
class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
42-
data-euiicon-type="empty"
43-
/>
41+
class="euiSelectableListItem__optionIcon emotion-euiSelectableListItem__optionIcon"
42+
>
43+
<span
44+
class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
45+
>
46+
<span
47+
class="emotion-euiCheckbox__icon-check"
48+
data-euiicon-type="empty"
49+
role="presentation"
50+
/>
51+
</span>
52+
</span>
4453
<span
4554
class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
4655
>
@@ -60,16 +69,25 @@ exports[`EuiSelectable custom options with data 1`] = `
6069
class="euiSelectableListItem emotion-euiSelectableListItem-s"
6170
id="generated-id_listbox_option-1"
6271
role="option"
63-
style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
72+
style="position: absolute; left: 8px; top: 40px; height: 32px; width: calc(100% - 16px);"
6473
title="Enceladus"
6574
>
6675
<span
6776
class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
6877
>
6978
<span
70-
class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
71-
data-euiicon-type="empty"
72-
/>
79+
class="euiSelectableListItem__optionIcon emotion-euiSelectableListItem__optionIcon"
80+
>
81+
<span
82+
class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
83+
>
84+
<span
85+
class="emotion-euiCheckbox__icon-check"
86+
data-euiicon-type="empty"
87+
role="presentation"
88+
/>
89+
</span>
90+
</span>
7391
<span
7492
class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
7593
>
@@ -89,16 +107,25 @@ exports[`EuiSelectable custom options with data 1`] = `
89107
class="euiSelectableListItem emotion-euiSelectableListItem-s"
90108
id="generated-id_listbox_option-2"
91109
role="option"
92-
style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
110+
style="position: absolute; left: 8px; top: 72px; height: 32px; width: calc(100% - 16px);"
93111
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
94112
>
95113
<span
96114
class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
97115
>
98116
<span
99-
class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
100-
data-euiicon-type="empty"
101-
/>
117+
class="euiSelectableListItem__optionIcon emotion-euiSelectableListItem__optionIcon"
118+
>
119+
<span
120+
class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
121+
>
122+
<span
123+
class="emotion-euiCheckbox__icon-check"
124+
data-euiicon-type="empty"
125+
role="presentation"
126+
/>
127+
</span>
128+
</span>
102129
<span
103130
class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
104131
>
@@ -146,14 +173,14 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
146173
>
147174
<div
148175
class="euiSelectableList__list emotion-euiSelectableList__list"
149-
style="position: relative; height: 96px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
176+
style="position: relative; height: 112px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
150177
tabindex="-1"
151178
>
152179
<ul
153180
aria-multiselectable="true"
154181
id="generated-id_listbox"
155182
role="listbox"
156-
style="height: 96px; width: 100%;"
183+
style="height: 112px; width: 100%;"
157184
tabindex="0"
158185
>
159186
<li
@@ -165,16 +192,25 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
165192
data-test-subj="titanOption"
166193
id="generated-id_listbox_option-0"
167194
role="option"
168-
style="position: absolute; left: 0px; top: 0px; height: 32px; width: 100%;"
195+
style="position: absolute; left: 8px; top: 8px; height: 32px; width: calc(100% - 16px);"
169196
title="Titan"
170197
>
171198
<span
172199
class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
173200
>
174201
<span
175-
class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
176-
data-euiicon-type="empty"
177-
/>
202+
class="euiSelectableListItem__optionIcon emotion-euiSelectableListItem__optionIcon"
203+
>
204+
<span
205+
class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
206+
>
207+
<span
208+
class="emotion-euiCheckbox__icon-check"
209+
data-euiicon-type="empty"
210+
role="presentation"
211+
/>
212+
</span>
213+
</span>
178214
<span
179215
class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
180216
>
@@ -190,16 +226,25 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
190226
class="euiSelectableListItem emotion-euiSelectableListItem-s"
191227
id="generated-id_listbox_option-1"
192228
role="option"
193-
style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
229+
style="position: absolute; left: 8px; top: 40px; height: 32px; width: calc(100% - 16px);"
194230
title="Enceladus"
195231
>
196232
<span
197233
class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
198234
>
199235
<span
200-
class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
201-
data-euiicon-type="empty"
202-
/>
236+
class="euiSelectableListItem__optionIcon emotion-euiSelectableListItem__optionIcon"
237+
>
238+
<span
239+
class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
240+
>
241+
<span
242+
class="emotion-euiCheckbox__icon-check"
243+
data-euiicon-type="empty"
244+
role="presentation"
245+
/>
246+
</span>
247+
</span>
203248
<span
204249
class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
205250
>
@@ -215,16 +260,25 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
215260
class="euiSelectableListItem emotion-euiSelectableListItem-s"
216261
id="generated-id_listbox_option-2"
217262
role="option"
218-
style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
263+
style="position: absolute; left: 8px; top: 72px; height: 32px; width: calc(100% - 16px);"
219264
title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
220265
>
221266
<span
222267
class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
223268
>
224269
<span
225-
class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
226-
data-euiicon-type="empty"
227-
/>
270+
class="euiSelectableListItem__optionIcon emotion-euiSelectableListItem__optionIcon"
271+
>
272+
<span
273+
class="EuiCheckboxControl euiSelectableListItem__checkbox emotion-EuiCheckboxControl-unselected"
274+
>
275+
<span
276+
class="emotion-euiCheckbox__icon-check"
277+
data-euiicon-type="empty"
278+
role="presentation"
279+
/>
280+
</span>
281+
</span>
228282
<span
229283
class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
230284
>

‎packages/eui/src/components/selectable/selectable.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ const options: EuiSelectableOption[] = [
4545
},
4646
{
4747
label: 'Iapetus',
48-
checked: 'on',
4948
},
5049
{
5150
label: 'Phoebe',
@@ -85,6 +84,7 @@ const meta: Meta<EuiSelectableProps> = {
8584
searchable: false,
8685
singleSelection: false,
8786
isPreFiltered: false,
87+
allowExclusions: false,
8888
},
8989
};
9090
hideStorybookControls(meta, ['aria-label']);

‎packages/eui/src/components/selectable/selectable.styles.ts‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,19 @@
99
import { css } from '@emotion/react';
1010

1111
import { logicalCSS } from '../../global_styling';
12+
import { UseEuiTheme } from '../../services';
1213

13-
export const euiSelectableStyles = {
14-
euiSelectable: css`
15-
display: flex;
16-
flex-direction: column;
17-
`,
18-
fullHeight: css`
19-
${logicalCSS('height', '100%')}
20-
`,
14+
export const euiSelectableStyles = (euiThemeContext: UseEuiTheme) => {
15+
const { euiTheme } = euiThemeContext;
16+
17+
return {
18+
euiSelectable: css`
19+
display: flex;
20+
flex-direction: column;
21+
padding: ${euiTheme.size.s};
22+
`,
23+
fullHeight: css`
24+
${logicalCSS('height', '100%')}
25+
`,
26+
};
2127
};

‎packages/eui/src/components/selectable/selectable.tsx‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,11 @@ import React, {
1919
import { Align } from 'react-window';
2020
import classNames from 'classnames';
2121

22-
import { keys, htmlIdGenerator } from '../../services';
22+
import {
23+
keys,
24+
htmlIdGenerator,
25+
RenderWithEuiStylesMemoizer,
26+
} from '../../services';
2327
import { CommonProps, ExclusiveUnion } from '../common';
2428
import { EuiLoadingSpinner } from '../loading';
2529
import { EuiSpacer } from '../spacer';
@@ -39,7 +43,7 @@ import {
3943
createPartialStringEqualityOptionMatcher,
4044
getMatchingOptions,
4145
} from './matching_options';
42-
import { euiSelectableStyles as styles } from './selectable.styles';
46+
import { euiSelectableStyles } from './selectable.styles';
4347

4448
export type EuiSelectableOnChangeEvent = KeyboardEvent | MouseEvent;
4549

@@ -133,6 +137,7 @@ export type EuiSelectableProps<T = {}> = CommonProps &
133137
* `false`: allows multiple selection
134138
* `true`: only allows one selection
135139
* `always`: can and must have only one selection
140+
* @default false
136141
*/
137142
singleSelection?: EuiSelectableOptionsListProps['singleSelection'];
138143
/**
@@ -612,10 +617,6 @@ export class EuiSelectable<T = {}> extends Component<
612617
}
613618

614619
const classes = classNames('euiSelectable', className);
615-
const cssStyles = [
616-
styles.euiSelectable,
617-
height === 'full' && styles.fullHeight,
618-
];
619620

620621
/** Create message content that replaces the list if no options are available (yet) */
621622
let messageContent: ReactNode | undefined;
@@ -858,18 +859,30 @@ export class EuiSelectable<T = {}> extends Component<
858859
);
859860

860861
return (
861-
<div
862-
ref={this.containerRef}
863-
css={cssStyles}
864-
className={classes}
865-
onKeyDown={this.onKeyDown}
866-
onBlur={this.onContainerBlur}
867-
onFocus={this.onFocus}
868-
onMouseDown={this.onMouseDown}
869-
{...rest}
870-
>
871-
{children && children(list, search)}
872-
</div>
862+
<RenderWithEuiStylesMemoizer>
863+
{(stylesMemoizer) => {
864+
const styles = stylesMemoizer(euiSelectableStyles);
865+
const cssStyles = [
866+
styles.euiSelectable,
867+
height === 'full' && styles.fullHeight,
868+
];
869+
870+
return (
871+
<div
872+
ref={this.containerRef}
873+
css={cssStyles}
874+
className={classes}
875+
onKeyDown={this.onKeyDown}
876+
onBlur={this.onContainerBlur}
877+
onFocus={this.onFocus}
878+
onMouseDown={this.onMouseDown}
879+
{...rest}
880+
>
881+
{children && children(list, search)}
882+
</div>
883+
);
884+
}}
885+
</RenderWithEuiStylesMemoizer>
873886
);
874887
}
875888
}

0 commit comments

Comments
 (0)