Skip to content

Commit 6018d7e

Browse files
breehallthompsongl
breehall
and
thompsongl
authored
[EuiDescriptionList] New gutterSize prop (#6175)
* Add gap prop to EuiDescriptionList type * Revert styling changes * Created gutterSize prop for EuiDescriptionList by utiilizing margins for the Title and Description based on the size passed into the component * Added documentation for the new EuiDescriptionList gutterSize prop * Updated snapshots for DescriptionList * Updated comment explaining the use of the gutterSize prop and added a CHANGELOG entry * Removed unused code * Commit snapshot file because somehow, I'm always forgetting to do that * Update src/components/description_list/description_list_description.tsx Co-authored-by: Greg Thompson <[email protected]> * Removed the EuiDescription gutterSize example. Created a combined DescriptionList example for the gutterSize, align, and compressed props. * Code clean up Co-authored-by: Greg Thompson <[email protected]>
1 parent d40e9e9 commit 6018d7e

14 files changed

+227
-79
lines changed

‎src-docs/src/views/description_list/description_list_example.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,7 @@ export const DescriptionListExample = {
231231
demo: <DescriptionListInline />,
232232
},
233233
{
234-
title: 'Centered and compressed',
234+
title: 'Customizing appearance',
235235
source: [
236236
{
237237
type: GuideSectionTypes.JS,
@@ -242,7 +242,9 @@ export const DescriptionListExample = {
242242
<p>
243243
Using the <EuiCode>align</EuiCode> and <EuiCode>compressed</EuiCode>{' '}
244244
props you can further tailor the look of a description list. This
245-
works with column and inline types.
245+
works with column and inline types. You can also adjust the{' '}
246+
<EuiCode>gutterSize</EuiCode> prop to increase and decrease vertical
247+
spacing between <EuiCode>EuiDescriptionList</EuiCode> elements.
246248
</p>
247249
),
248250
snippet: descriptionListStylingSnippet,

‎src-docs/src/views/description_list/description_list_styling.js‎

Lines changed: 138 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,138 @@
1-
import React from 'react';
2-
3-
import { EuiDescriptionList, EuiSpacer } from '../../../../src/components';
4-
5-
const favoriteVideoGames = [
6-
{
7-
title: 'The Elder Scrolls: Morrowind',
8-
description: 'The opening music alone evokes such strong memories.',
9-
},
10-
{
11-
title: 'TIE Fighter',
12-
description:
13-
'The sequel to XWING, join the dark side and fly for the Emporer.',
14-
},
15-
{
16-
title: 'Quake 2',
17-
description: 'The game that made me drop out of college.',
18-
},
19-
];
20-
export default () => (
21-
<div style={{ maxWidth: '400px' }}>
22-
<EuiDescriptionList
23-
listItems={favoriteVideoGames}
24-
align="center"
25-
compressed
26-
/>
27-
28-
<EuiSpacer size="l" />
29-
30-
<EuiDescriptionList
31-
listItems={favoriteVideoGames}
32-
type="column"
33-
align="center"
34-
compressed
35-
/>
36-
37-
<EuiSpacer size="l" />
38-
39-
<EuiDescriptionList
40-
listItems={favoriteVideoGames}
41-
type="inline"
42-
align="center"
43-
compressed
44-
/>
45-
</div>
46-
);
1+
import React, { useState } from 'react';
2+
3+
import {
4+
EuiDescriptionList,
5+
EuiSpacer,
6+
EuiButtonGroup,
7+
EuiSwitch,
8+
EuiTitle,
9+
EuiFlexGroup,
10+
EuiFlexItem,
11+
} from '../../../../src/components';
12+
13+
export default () => {
14+
const favoriteVideoGames = [
15+
{
16+
title: 'The Elder Scrolls: Morrowind',
17+
description: 'The opening music alone evokes such strong memories.',
18+
},
19+
{
20+
title: 'TIE Fighter',
21+
description:
22+
'The sequel to XWING, join the dark side and fly for the Emporer.',
23+
},
24+
{
25+
title: 'Quake 2',
26+
description: 'The game that made me drop out of college.',
27+
},
28+
];
29+
30+
const alignToggleButtons = [
31+
{
32+
id: 'left',
33+
label: 'Left',
34+
},
35+
{
36+
id: 'center',
37+
label: 'Center',
38+
},
39+
];
40+
41+
const [alignSelected, setAlignSelected] = useState('center');
42+
43+
const alignOnChange = (id) => {
44+
setAlignSelected(id);
45+
};
46+
47+
const gutterToggleButtons = [
48+
{
49+
id: 's',
50+
label: 'Small',
51+
},
52+
{
53+
id: 'm',
54+
label: 'Medium',
55+
},
56+
];
57+
58+
const [gutterSelected, setGutterSelected] = useState('m');
59+
60+
const gutterOnChange = (id) => {
61+
setGutterSelected(id);
62+
};
63+
64+
const [compressed, setCompressed] = useState(true);
65+
66+
const compressedOnChange = () => {
67+
setCompressed(!compressed);
68+
};
69+
70+
return (
71+
<div style={{ maxWidth: '400px' }}>
72+
<EuiFlexGroup>
73+
<EuiFlexItem>
74+
<EuiTitle size="xxs">
75+
<h3>Align options</h3>
76+
</EuiTitle>
77+
<EuiButtonGroup
78+
legend="Toggle for the EuiDescription align prop"
79+
options={alignToggleButtons}
80+
idSelected={alignSelected}
81+
onChange={(id) => alignOnChange(id)}
82+
/>
83+
</EuiFlexItem>
84+
85+
<EuiFlexItem>
86+
<EuiTitle size="xxs">
87+
<h3>Row gutter sizes</h3>
88+
</EuiTitle>
89+
<EuiButtonGroup
90+
legend="Toggle for the EuiDescription gutterSize prop"
91+
options={gutterToggleButtons}
92+
idSelected={gutterSelected}
93+
onChange={(id) => gutterOnChange(id)}
94+
/>
95+
</EuiFlexItem>
96+
97+
<EuiFlexItem>
98+
<EuiTitle size="xxs">
99+
<h3>Compressed</h3>
100+
</EuiTitle>
101+
<EuiSwitch
102+
label="Compressed"
103+
checked={compressed}
104+
onChange={compressedOnChange}
105+
/>
106+
</EuiFlexItem>
107+
</EuiFlexGroup>
108+
109+
<EuiSpacer />
110+
111+
<EuiDescriptionList
112+
listItems={favoriteVideoGames}
113+
align={alignSelected}
114+
compressed={compressed}
115+
gutterSize={gutterSelected}
116+
/>
117+
118+
<EuiSpacer size="l" />
119+
120+
<EuiDescriptionList
121+
listItems={favoriteVideoGames}
122+
type="column"
123+
align={alignSelected}
124+
compressed={compressed}
125+
gutterSize={gutterSelected}
126+
/>
127+
128+
<EuiSpacer size="l" />
129+
130+
<EuiDescriptionList
131+
listItems={favoriteVideoGames}
132+
type="inline"
133+
align={alignSelected}
134+
compressed={compressed}
135+
/>
136+
</div>
137+
);
138+
};

‎src/components/description_list/__snapshots__/description_list.test.tsx.snap‎

Lines changed: 23 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[` 1`] = `
66
data-type="row"
77
>
88
<dt
9-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
9+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
1010
>
1111
Title 1
1212
</dt>
@@ -16,7 +16,7 @@ exports[` 1`] = `
1616
Description 1
1717
</dd>
1818
<dt
19-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
19+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
2020
>
2121
<em>
2222
Title 2
@@ -30,7 +30,7 @@ exports[` 1`] = `
3030
</code>
3131
</dd>
3232
<dt
33-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
33+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
3434
>
3535
Title 3
3636
</dt>
@@ -74,13 +74,27 @@ exports[`EuiDescriptionList props compressed is rendered 1`] = `
7474
/>
7575
`;
7676

77+
exports[`EuiDescriptionList props gutter m is rendered 1`] = `
78+
<dl
79+
class="euiDescriptionList emotion-euiDescriptionList-row-left"
80+
data-type="row"
81+
/>
82+
`;
83+
84+
exports[`EuiDescriptionList props gutter s is rendered 1`] = `
85+
<dl
86+
class="euiDescriptionList emotion-euiDescriptionList-row-left"
87+
data-type="row"
88+
/>
89+
`;
90+
7791
exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
7892
<dl
7993
class="euiDescriptionList emotion-euiDescriptionList-row-left"
8094
data-type="row"
8195
>
8296
<dt
83-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
97+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
8498
>
8599
Title 1
86100
</dt>
@@ -92,7 +106,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
92106
Description 1
93107
</dd>
94108
<dt
95-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
109+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
96110
>
97111
<em>
98112
Title 2
@@ -108,7 +122,7 @@ exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
108122
</code>
109123
</dd>
110124
<dt
111-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
125+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
112126
>
113127
Title 3
114128
</dt>
@@ -129,7 +143,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
129143
>
130144
<dt
131145
aria-label="aria-label"
132-
class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-normal"
146+
class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-m-normal"
133147
data-test-subj="test subject string"
134148
>
135149
Title 1
@@ -141,7 +155,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
141155
</dd>
142156
<dt
143157
aria-label="aria-label"
144-
class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-normal"
158+
class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-m-normal"
145159
data-test-subj="test subject string"
146160
>
147161
<em>
@@ -157,7 +171,7 @@ exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
157171
</dd>
158172
<dt
159173
aria-label="aria-label"
160-
class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-normal"
174+
class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-m-normal"
161175
data-test-subj="test subject string"
162176
>
163177
Title 3

‎src/components/description_list/__snapshots__/description_list_description.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variat
2020

2121
exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variations type column is rendered 1`] = `
2222
<dd
23-
class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
23+
class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal-m"
2424
/>
2525
`;
2626

@@ -32,7 +32,7 @@ exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variat
3232

3333
exports[`EuiDescriptionListDescription EuiDescriptionListDescription prop variations type responsiveColumn is rendered 1`] = `
3434
<dd
35-
class="euiDescriptionList__description emotion-euiDescriptionList__description-responsiveColumn-normal"
35+
class="euiDescriptionList__description emotion-euiDescriptionList__description-responsiveColumn-normal-m"
3636
/>
3737
`;
3838

‎src/components/description_list/__snapshots__/description_list_title.test.tsx.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,50 @@
22

33
exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations align center alignment is rendered 1`] = `
44
<dt
5-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
5+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
66
/>
77
`;
88

99
exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations compressed is rendered 1`] = `
1010
<dt
11-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-compressed"
11+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-compressed"
1212
/>
1313
`;
1414

1515
exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations text styles reversed text is rendered 1`] = `
1616
<dt
17-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-reverse"
17+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-reverse"
1818
/>
1919
`;
2020

2121
exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type column is rendered 1`] = `
2222
<dt
23-
class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
23+
class="euiDescriptionList__title emotion-euiDescriptionList__title-column-m-normal"
2424
/>
2525
`;
2626

2727
exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type inline is rendered 1`] = `
2828
<dt
29-
class="euiDescriptionList__title emotion-euiDescriptionList__title-inline-normal"
29+
class="euiDescriptionList__title emotion-euiDescriptionList__title-inline-m-normal"
3030
/>
3131
`;
3232

3333
exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type responsiveColumn is rendered 1`] = `
3434
<dt
35-
class="euiDescriptionList__title emotion-euiDescriptionList__title-responsiveColumn-normal"
35+
class="euiDescriptionList__title emotion-euiDescriptionList__title-responsiveColumn-m-normal"
3636
/>
3737
`;
3838

3939
exports[`EuiDescriptionListTitle EuiDescriptionListTitle prop variations type row is rendered 1`] = `
4040
<dt
41-
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
41+
class="euiDescriptionList__title emotion-euiDescriptionList__title-row-m-normal"
4242
/>
4343
`;
4444

4545
exports[`EuiDescriptionListTitle is rendered 1`] = `
4646
<dt
4747
aria-label="aria-label"
48-
class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-normal"
48+
class="euiDescriptionList__title testClass1 testClass2 emotion-euiDescriptionList__title-row-m-normal"
4949
data-test-subj="test subject string"
5050
>
5151
Content

0 commit comments

Comments
 (0)