Skip to content

Commit 6d835ff

Browse files
rise-erpeldingrise-erpelding
authored
fix(accordion): clean up spacing issues (#4139)
1 parent 4bd0032 commit 6d835ff

File tree

5 files changed

+51
-40
lines changed

5 files changed

+51
-40
lines changed

‎.changeset/sweet-badgers-melt.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
"@spectrum-css/accordion": minor
3+
---
4+
5+
Changes values of `--spectrum-accordion-item-minimum-height` to align more closely with design spec, this affects the minimum height of accordion items for some combinations of size/density by giving them more space.
6+
7+
New accordion minimum heights will use the heights/tokens:
8+
9+
| Size | Compact | Regular | Spacious |
10+
| ---- | --------------------------- | --------------------------- | --------------------------- |
11+
| S | 24px/`component-height-75` | 32px/`component-height-100` | 40px/`component-height-200` |
12+
| M | 32px/`component-height-100` | 40px/`component-height-200` | 48px/`component-height-300` |
13+
| L | 40px/`component-height-200` | 48px/`component-height-300` | 56px/`component-height-400` |
14+
| XL | 48px/`component-height-300` | 56px/`component-height-400` | 64px/`component-height-500` |

‎components/accordion/dist/metadata.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@
193193
"--spectrum-component-height-200",
194194
"--spectrum-component-height-300",
195195
"--spectrum-component-height-400",
196-
"--spectrum-component-height-50",
196+
"--spectrum-component-height-500",
197197
"--spectrum-component-height-75",
198198
"--spectrum-corner-radius-medium-size-extra-large",
199199
"--spectrum-corner-radius-medium-size-large",

‎components/accordion/index.css‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
.spectrum-Accordion {
1515
/* Layout and spacing */
16-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
16+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
1717
--spectrum-accordion-item-minimum-width: var(--spectrum-accordion-minimum-width);
1818
--spectrum-accordion-item-width: var(--spectrum-field-default-width-medium);
1919
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-100);
@@ -93,7 +93,7 @@
9393
}
9494

9595
.spectrum-Accordion--sizeS {
96-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75);
96+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
9797
--spectrum-accordion-item-width: var(--spectrum-accordion-minimum-width); /* small size default width uses this min-width token */
9898
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-75);
9999
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-small);
@@ -110,7 +110,7 @@
110110
}
111111

112112
.spectrum-Accordion--sizeL {
113-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
113+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
114114
--spectrum-accordion-item-width: var(--spectrum-field-default-width-large);
115115
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-200);
116116
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-large);
@@ -127,7 +127,7 @@
127127
}
128128

129129
.spectrum-Accordion--sizeXL {
130-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
130+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400);
131131
--spectrum-accordion-item-width: var(--spectrum-field-default-width-extra-large);
132132
--spectrum-accordion-disclosure-indicator-height: var(--spectrum-chevron-icon-size-300);
133133
--spectrum-accordion-disclosure-indicator-to-text-space: var(--spectrum-accordion-disclosure-indicator-to-text-extra-large);
@@ -144,55 +144,55 @@
144144
}
145145

146146
.spectrum-Accordion--compact {
147-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75);
147+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
148148
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-medium);
149149
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-medium);
150150
--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-medium);
151151

152152
&.spectrum-Accordion--sizeS {
153-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-50);
153+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-75);
154154
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-small);
155155
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-small);
156156
--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-small);
157157
}
158158

159159
&.spectrum-Accordion--sizeL {
160-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
160+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
161161
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-large);
162162
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-large);
163163
--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-large);
164164
}
165165

166166
&.spectrum-Accordion--sizeXL {
167-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
167+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
168168
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-compact-extra-large);
169169
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-compact-extra-large);
170170
--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-compact-extra-large);
171171
}
172172
}
173173

174174
.spectrum-Accordion--spacious {
175-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
175+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
176176
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-medium);
177177
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-medium);
178178
--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-medium);
179179

180180
&.spectrum-Accordion--sizeS {
181-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-100);
181+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-200);
182182
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-small);
183183
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-small);
184184
--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-small);
185185
}
186186

187187
&.spectrum-Accordion--sizeL {
188-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-300);
188+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400);
189189
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-large);
190190
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-large);
191191
--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-large);
192192
}
193193

194194
&.spectrum-Accordion--sizeXL {
195-
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-400);
195+
--spectrum-accordion-item-minimum-height: var(--spectrum-component-height-500);
196196
--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-spacious-extra-large);
197197
--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-spacious-extra-large);
198198
--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-spacious-extra-large);
@@ -272,6 +272,12 @@
272272
}
273273

274274
.spectrum-Accordion-itemTitle {
275+
/* if we use min-height token, sometimes we'll have extra space so we'll need to center the text vertically */
276+
display: flex;
277+
align-items: center;
278+
279+
min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size));
280+
box-sizing: border-box; /* respect min-block-size but include padding */
275281
padding-block: var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space));
276282
padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space));
277283
}
@@ -328,7 +334,7 @@
328334

329335
&:has(+ .spectrum-Accordion-itemDirectActions) {
330336
/* set spacing between header and direct actions, whether or not noInlinePadding variant is used */
331-
padding-inline-end: var(--mod-accordion-item-header-to-direct-actions-space, var(--spectrum-accordion-item-header-to-direct-actions-space));
337+
margin-inline-end: var(--mod-accordion-item-header-to-direct-actions-space, var(--spectrum-accordion-item-header-to-direct-actions-space));
332338
}
333339
}
334340

‎components/accordion/stories/accordion.stories.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,11 @@ WithForcedColors.parameters = {
149149
/**
150150
* Accordion items have a default width for each size, but a custom width can also be set to any
151151
* width that meets or exceeds the minimum width.
152+
*
153+
* This example also uses the body typography element with class `.spectrum-Body` for the
154+
* accordion item's content. If using typography, the t-shirt size of the typography element
155+
* may need to be adjusted to match the accordion item's font size. The body typography component
156+
* shown here is a size "S," in contrast with the the accordion's "M" size.
152157
*/
153158
export const CustomWidth = AccordionGroup.bind({});
154159
CustomWidth.tags = ["!dev"];
@@ -160,7 +165,7 @@ CustomWidth.args = {
160165
},
161166
};
162167
CustomWidth.parameters = {
163-
chromatic: { disableSnapshot: false },
168+
chromatic: { disableSnapshot: true },
164169
};
165170

166171
/**
@@ -202,6 +207,9 @@ DirectActions.tags = ["!dev"];
202207
DirectActions.args = {
203208
items: directActionsContent
204209
};
210+
DirectActions.parameters = {
211+
chromatic: { disableSnapshot: true },
212+
};
205213

206214
/**
207215
* Individual accordion items can be disabled by applying the `.is-disabled` class to the

‎components/accordion/stories/accordion.test.js‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -16,39 +16,20 @@ export const testsContent = new Map([
1616
[
1717
"Architecture",
1818
{
19-
content: Typography({
20-
semantics: "body",
21-
content: [
22-
"This is an example of text content within the content area that uses the spectrum-Body typography class on the paragraphs. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit.",
23-
Link({
24-
url: "https://www.adobe.com/creativecloud/plans.html",
25-
text: "Learn more about Adobe Creative Cloud plans and pricing.",
26-
}),
27-
],
28-
}),
19+
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.",
2920
isOpen: true,
3021
},
3122
],
3223
[
3324
"Nature",
3425
{
35-
content: Typography({
36-
semantics: "body",
37-
content: [
38-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.",
39-
Link({
40-
url: "https://www.adobe.com/acrobat.html",
41-
text: "Learn more about Acrobat.",
42-
}),
43-
],
44-
}),
26+
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.",
4527
},
4628
],
4729
[
4830
"Illustrations",
4931
{
50-
content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit.",
51-
isOpen: true,
32+
content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.",
5233
},
5334
],
5435
[
@@ -80,9 +61,10 @@ export const longerContent = new Map([
8061
"Are Adobe products worth it?",
8162
{
8263
content: Typography({
64+
size: "s",
8365
semantics: "body",
8466
content: [
85-
"This is an example of text content within the content area that uses the spectrum-Body typography class on the paragraphs. Adobe makes some of the most widely used software applications in the world, many of which are industry standard.",
67+
"Adobe makes some of the most widely used software applications in the world, many of which are industry standard. Get started with free apps like Adobe Acrobat Reader, Aero, Fill & Sign, Photoshop Express, and Adobe Scan. Or consider Creative Cloud, with plans starting at just US$9.99/mo. Every Adobe Creative Cloud plan includes perks like free stock images and fonts, collaboration tools, and cloud storage as well as regular feature updates to deliver the latest technology.",
8668
Link({
8769
url: "https://www.adobe.com/creativecloud/plans.html",
8870
text: "Learn more about Adobe Creative Cloud plans and pricing.",
@@ -96,6 +78,7 @@ export const longerContent = new Map([
9678
"Which Adobe product is best for editing PDFs?",
9779
{
9880
content: Typography({
81+
size: "s",
9982
semantics: "body",
10083
content: [
10184
"You can edit PDFs with Adobe Acrobat, which is available in two editions: Standard and Pro. Acrobat Standard provides basic tools to create, edit, and sign PDFs on Windows devices. Acrobat Pro is the complete PDF solution with tools to edit, convert, and sign PDFs across web, mobile, and tablet, as well as on Windows and macOS computers. If you'd like to try before you buy, you can get a free 7-day trial of Acrobat Pro.",
@@ -110,14 +93,14 @@ export const longerContent = new Map([
11093
[
11194
"How many products does Adobe have?",
11295
{
113-
content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as Adobe Experience Manager, Campaign, and Target.",
96+
content: "Adobe offers nearly 100 products. Get creative with industry-standard apps like Adobe Photoshop, Illustrator, InDesign, and Lightroom. Create, edit, and sign PDFs with Adobe Acrobat and Acrobat Sign. And deliver exceptional customer experiences with our marketing and commerce apps such as adobe experience manager, Campaign, and Target.",
11497
isOpen: true,
11598
},
11699
],
117100
[
118101
"What are the most popular Adobe products?",
119102
{
120-
content: "This is an example of text content within the content area that is not wrapped by any typography classes or elements. Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.",
103+
content: "Adobe makes some of the most widely used software in the world, including popular apps like Acrobat Pro, Photoshop, Illustrator, InDesign, Lightroom, and Premiere Pro.",
121104
},
122105
],
123106
]);

0 commit comments

Comments
 (0)