Skip to content

Commit 9433767

Browse files
castastrophecastastrophe
committed
fix(pagination): deprecate legacy features to align with foundations
1 parent bb895f8 commit 9433767

File tree

6 files changed

+57
-95
lines changed

6 files changed

+57
-95
lines changed

‎.storybook/modes/index.js

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -12,31 +12,22 @@
1212
*/
1313

1414
const modes = {
15-
"Light | LTR": {
16-
color: "light",
17-
textDirection: "ltr",
18-
},
19-
"Dark | RTL": {
20-
color: "dark",
21-
textDirection: "rtl",
22-
},
23-
"S1 | Light | LTR": {
24-
context: "legacy",
25-
color: "light",
26-
textDirection: "ltr",
27-
},
28-
"Express | Light | LTR": {
29-
context: "express",
30-
color: "light",
31-
textDirection: "ltr",
32-
},
15+
Light: {
16+
color: "light",
17+
},
18+
Dark: {
19+
color: "dark",
20+
},
21+
RTL: {
22+
textDirection: "rtl",
23+
},
3324
};
3425

3526
export default modes;
3627

3728
export const disableDefaultModes = {
38-
...Object.keys(modes).reduce((acc, key) => {
39-
acc[key] = { disable: true };
40-
return acc;
41-
}, {}),
29+
...Object.keys(modes).reduce((acc, key) => {
30+
acc[key] = { disable: true };
31+
return acc;
32+
}, {}),
4233
};

‎.storybook/preview.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const parameters = {
9393
// Set an empty object to avoid the "undefined" value in the ComponentDetails doc block
9494
packageJson: {},
9595
// A list of published npm tags that should not appear in the ComponentDetails doc block
96-
ignoredTags: ["beta", "next"],
96+
ignoredTags: ["beta"],
9797
};
9898

9999
export default {

‎components/card/dist/metadata.json

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"sourceFile": "index.css",
33
"selectors": [
4-
".spectrum--light .spectrum-Card",
54
".spectrum-Card",
65
".spectrum-Card .spectrum-Divider",
76
".spectrum-Card--gallery",
@@ -63,6 +62,7 @@
6362
".spectrum-Card.is-selected .spectrum-Card-quickActions",
6463
".spectrum-Card.is-selected:before",
6564
".spectrum-Card.spectrum-Card--gallery",
65+
".spectrum-Card.spectrum-Card--quiet",
6666
".spectrum-Card:after",
6767
".spectrum-Card:before",
6868
".spectrum-Card:focus .spectrum-Card-actions",
@@ -102,6 +102,7 @@
102102
"--mod-card-body-spacing",
103103
"--mod-card-border-color",
104104
"--mod-card-border-color-hover",
105+
"--mod-card-border-color-selected",
105106
"--mod-card-border-width",
106107
"--mod-card-content-margin-bottom",
107108
"--mod-card-content-margin-top",
@@ -113,7 +114,6 @@
113114
"--mod-card-footer-margin-block-start",
114115
"--mod-card-footer-margin-inline-end",
115116
"--mod-card-footer-margin-inline-start",
116-
"--mod-card-footer-margin-top",
117117
"--mod-card-footer-padding-block-end",
118118
"--mod-card-footer-padding-block-start",
119119
"--mod-card-horizontal-body-padding",
@@ -122,6 +122,7 @@
122122
"--mod-card-minimum-width-quiet",
123123
"--mod-card-preview-background-color",
124124
"--mod-card-preview-background-color-hover",
125+
"--mod-card-preview-border-width-selected",
125126
"--mod-card-preview-minimum-height",
126127
"--mod-card-selected-background-color-rgb",
127128
"--mod-card-selected-background-opacity",
@@ -133,7 +134,6 @@
133134
"--mod-card-title-font-weight",
134135
"--mod-card-title-line-height",
135136
"--mod-card-title-padding-right",
136-
"--mod-card-title-padding-top",
137137
"--mod-overlay-animation-duration"
138138
],
139139
"component": [
@@ -147,7 +147,6 @@
147147
"--spectrum-card-actions-size",
148148
"--spectrum-card-actions-spacing",
149149
"--spectrum-card-background-color",
150-
"--spectrum-card-background-color-hover-quiet",
151150
"--spectrum-card-body-font-color",
152151
"--spectrum-card-body-font-family",
153152
"--spectrum-card-body-font-size",
@@ -172,7 +171,6 @@
172171
"--spectrum-card-minimum-width",
173172
"--spectrum-card-preview-background-color",
174173
"--spectrum-card-preview-background-color-hover",
175-
"--spectrum-card-preview-background-color-quiet",
176174
"--spectrum-card-preview-border-width-selected",
177175
"--spectrum-card-preview-minimum-height",
178176
"--spectrum-card-selected-background-color-rgb",
@@ -186,15 +184,13 @@
186184
"--spectrum-card-title-font-style",
187185
"--spectrum-card-title-font-weight",
188186
"--spectrum-card-title-line-height",
189-
"--spectrum-card-title-padding-right",
190-
"--spectrum-card-title-padding-top"
187+
"--spectrum-card-title-padding-right"
191188
],
192189
"global": [
193190
"--spectrum-animation-duration-100",
194191
"--spectrum-background-base-color",
195192
"--spectrum-background-layer-2-color",
196193
"--spectrum-blue-700",
197-
"--spectrum-blue-900-rgb",
198194
"--spectrum-body-color",
199195
"--spectrum-body-line-height",
200196
"--spectrum-body-sans-serif-font-style",
@@ -211,7 +207,6 @@
211207
"--spectrum-gray-100",
212208
"--spectrum-gray-100-rgb",
213209
"--spectrum-gray-200",
214-
"--spectrum-gray-300",
215210
"--spectrum-heading-color",
216211
"--spectrum-heading-line-height",
217212
"--spectrum-heading-sans-serif-font-style",
@@ -225,5 +220,5 @@
225220
],
226221
"system-theme": [],
227222
"passthroughs": [],
228-
"high-contrast": ["--highcontrast-card-body-font-color"]
223+
"high-contrast": []
229224
}

‎components/card/index.css

Lines changed: 28 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@
1212
*/
1313

1414
.spectrum-Card {
15+
--spectrum-card-border-color: var(--spectrum-gray-100);
16+
--spectrum-card-border-color-hover: var(--spectrum-gray-200);
17+
--spectrum-card-divider-color: var(--spectrum-gray-200);
18+
--spectrum-card-preview-background-color: var(--spectrum-gray-100);
19+
--spectrum-card-preview-background-color-hover: var(--spectrum-gray-200);
20+
1521
/* Default Layout */
1622
--spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color));
1723
--spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400));
@@ -22,13 +28,9 @@
2228
--spectrum-card-footer-padding-top: var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100));
2329
--spectrum-card-subtitle-padding-right: var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100));
2430

25-
--spectrum-card-border-width: var(--spectrum-border-width-100);
26-
--spectrum-card-corner-radius: var(--spectrum-corner-radius-100);
27-
--spectrum-card-border-color: var(--spectrum-gray-100);
28-
--spectrum-card-border-color-hover: var(--spectrum-gray-200);
29-
--spectrum-card-border-color-selected: var(--spectrum-blue-700);
30-
31-
--spectrum-card-divider-color: var(--spectrum-gray-200);
31+
--spectrum-card-border-width: var(--mod-card-border-width, var(--spectrum-border-width-100));
32+
--spectrum-card-corner-radius: var(--mod-card-corner-radius, var(--spectrum-corner-radius-100));
33+
--spectrum-card-border-color-selected: var(--mod-card-border-color-selected, var(--spectrum-blue-700));
3234

3335
/* Typography */
3436
--spectrum-card-title-font-family: var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack));
@@ -65,39 +67,21 @@
6567
/* Selected */
6668
--spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1); /* table-selected-row-background-opacity does not exist in tokens yet */
6769

68-
--spectrum-card-preview-border-width-selected: var(--spectrum-border-width-100);
69-
--spectrum-card-preview-background-color: var(--spectrum-background-base-color);
70-
--spectrum-card-preview-background-color-hover: var(--spectrum-gray-300);
70+
--spectrum-card-preview-border-width-selected: var(--mod-card-preview-border-width-selected, var(--spectrum-border-width-100));
7171

7272
/* Horizontal */
7373
--spectrum-card-horizontal-body-padding: var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300));
7474
--spectrum-card-horizontal-preview-padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200));
7575

76-
/* TODO: These are placeholder until recursive RGB is available */
77-
.spectrum--light & {
78-
--spectrum-card-selected-background-color-rgb: var(--spectrum-blue-900-rgb);
76+
&.spectrum-Card--quiet {
77+
--mod-card-minimum-width: var(--mod-card-minimum-width-quiet);
78+
--mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
7979
}
8080

8181
&.spectrum-Card--gallery {
8282
--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
8383
}
84-
}
8584

86-
/* Quiet/Gallery */
87-
.spectrum-Card--quiet,
88-
.spectrum-Card--gallery {
89-
--mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
90-
--mod-card-minimum-width: var(--mod-card-minimum-width-quiet, var(--spectrum-card-minimum-width));
91-
}
92-
93-
.spectrum-Card--quiet,
94-
.spectrum-Card--gallery,
95-
.spectrum-Card--horizontal {
96-
--mod-card-preview-background-color: var(--spectrum-card-preview-background-color-quiet, var(--spectrum-background-base-color));
97-
--spectrum-card-preview-background-color-hover: var(--spectrum-card-background-color-hover-quiet, var(--spectrum-gray-200));
98-
}
99-
100-
.spectrum-Card {
10185
position: relative;
10286
display: inline-flex;
10387
flex-direction: column;
@@ -253,12 +237,10 @@
253237
}
254238

255239
.spectrum-Card-body {
256-
/* @deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start
257-
and will be removed in a future version. */
258-
padding-block-start: var(--mod-card-body-padding-block-start, var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top)));
259-
padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
260-
padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
261-
padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
240+
padding-block-start: var(--spectrum-card-body-padding-block-start);
241+
padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
242+
padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
243+
padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
262244
}
263245

264246
.spectrum-Card-preview {
@@ -304,18 +286,15 @@
304286

305287
.spectrum-Card-footer {
306288
/* Accommodate for wanting less spacing between body and footer */
307-
margin-block-start: var(--mod-card-footer-margin-block-start, calc(-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-content-margin-bottom, var(--spectrum-card-content-margin-bottom)))));
308-
margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)));
309-
margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)));
310-
padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) - var(--mod-card-border-width, var(--spectrum-card-border-width))));
311-
312-
/* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start
313-
and will be removed in a future version. */
314-
padding-block-start: var(--mod-card-footer-padding-block-start, var(--mod-card-footer-margin-top, var(--spectrum-card-footer-padding-top)));
315-
316-
color: var(--highcontrast-card-body-font-color, var(--mod-card-body-font-color, var(--spectrum-card-body-font-color)));
317-
line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height));
318-
border-block-start: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
289+
margin-block-start: var(--mod-card-footer-margin-block-start, calc(-1 * (var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom))));
290+
margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--spectrum-card-body-spacing));
291+
margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--spectrum-card-body-spacing));
292+
padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
293+
padding-block-start: var(--spectrum-card-footer-padding-top);
294+
295+
color: var(--spectrum-card-body-font-color);
296+
line-height: var(--spectrum-card-body-line-height);
297+
border-block-start: var(--spectrum-card-border-width) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
319298
}
320299

321300
.spectrum-Card-header {
@@ -467,9 +446,9 @@
467446
align-items: center;
468447
justify-content: center;
469448

470-
border-start-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
449+
border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
471450
border-start-end-radius: 0;
472-
border-end-start-radius: calc(var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) - var(--mod-card-border-width, var(--spectrum-card-border-width)));
451+
border-end-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
473452
border-end-end-radius: 0;
474453

475454
padding: var(--spectrum-card-horizontal-preview-padding);

‎components/pagination/CHANGELOG.md

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
8080

8181
🗓 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/pagination@7.1.6...@spectrum-css/pagination@8.0.0)
8282

83-
\*feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
83+
- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
8484

8585
### 🛑 BREAKING CHANGES
86-
- Removes component-builder & component-builder-simple for script leveraging postcss
8786

87+
- Removes component-builder & component-builder-simple for script leveraging postcss
8888
- Imports added to index.css and themes/express.css
8989

9090
<a name="7.1.6"></a>
@@ -135,7 +135,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
135135

136136
### 🐛 Bug fixes
137137

138-
\*deprecate logical transform plugin ([#2437](https://github.com/adobe/spectrum-css/issues/2437))([ff5dda6](https://github.com/adobe/spectrum-css/commit/ff5dda6))
138+
- deprecate logical transform plugin ([#2437](https://github.com/adobe/spectrum-css/issues/2437))([ff5dda6](https://github.com/adobe/spectrum-css/commit/ff5dda6))
139139

140140
<a name="7.1.0"></a>
141141

@@ -145,7 +145,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
145145

146146
### ✨ Features
147147

148-
\*remove theme files without content([1eadd4f](https://github.com/adobe/spectrum-css/commit/1eadd4f))
148+
- remove theme files without content([1eadd4f](https://github.com/adobe/spectrum-css/commit/1eadd4f))
149149

150150
<a name="7.0.5"></a>
151151

@@ -163,7 +163,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
163163

164164
**Note:** Version bump only for package @spectrum-css/pagination
165165

166-
<a name="7.0.3"></a>
166+
<a name="7.0.3"></a>'
167167

168168
## 7.0.3
169169

@@ -193,12 +193,11 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
193193

194194
🗓 2023-10-13 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/pagination@6.0.50...@spectrum-css/pagination@7.0.0)
195195

196-
\*feat(pagination)!: migrate to spectrum tokens package([f29a74d](https://github.com/adobe/spectrum-css/commit/f29a74d))
196+
- feat(pagination)!: migrate to spectrum tokens package([f29a74d](https://github.com/adobe/spectrum-css/commit/f29a74d))
197197

198198
### 🛑 BREAKING CHANGES
199199

200-
*
201-
Replaces DNA tokens with Spectrum tokens.
200+
- Replaces DNA tokens with Spectrum tokens.
202201

203202
Update build to use Spectrum tokens.
204203
Remove skin.css and incorporate its CSS into index.css.
@@ -313,7 +312,7 @@ Add the "Button style" version of Pagination from the docs to Storybook.
313312

314313
### 🔙 Reverts
315314

316-
\*gulp and build updates ([#2121](https://github.com/adobe/spectrum-css/issues/2121))([03a37f5](https://github.com/adobe/spectrum-css/commit/03a37f5)), closes[#2099](https://github.com/adobe/spectrum-css/issues/2099)
315+
- gulp and build updates ([#2121](https://github.com/adobe/spectrum-css/issues/2121))([03a37f5](https://github.com/adobe/spectrum-css/commit/03a37f5)), closes[#2099](https://github.com/adobe/spectrum-css/issues/2099)
317316

318317
<a name="6.0.40"></a>
319318

@@ -379,7 +378,7 @@ Add the "Button style" version of Pagination from the docs to Storybook.
379378

380379
### 🐛 Bug fixes
381380

382-
\*icon sizing in Storybook story templates ([#2037](https://github.com/adobe/spectrum-css/issues/2037))([c90c8a3](https://github.com/adobe/spectrum-css/commit/c90c8a3))
381+
- icon sizing in Storybook story templates ([#2037](https://github.com/adobe/spectrum-css/issues/2037))([c90c8a3](https://github.com/adobe/spectrum-css/commit/c90c8a3))
383382

384383
<a name="6.0.32"></a>
385384

@@ -437,7 +436,7 @@ Add the "Button style" version of Pagination from the docs to Storybook.
437436

438437
### 🐛 Bug fixes
439438

440-
\*restore files to pre-formatted state([491dbcb](https://github.com/adobe/spectrum-css/commit/491dbcb))
439+
- restore files to pre-formatted state([491dbcb](https://github.com/adobe/spectrum-css/commit/491dbcb))
441440

442441
<a name="6.0.25"></a>
443442

‎tools/generator/templates/index.css.hbs

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@
1515
// color: var(--highcontrast-{{ folderName }}-content-color-default, var(--mod-{{ folderName }}-content-color-default, var(--spectrum-{{ folderName }}-content-color-default)));
1616

1717
&.spectrum-{{ pascalCase name }}--sizeS {}
18-
&,
19-
&.spectrum-{{ pascalCase name }}--sizeM {}
2018
&.spectrum-{{ pascalCase name }}--sizeL {}
2119
&.spectrum-{{ pascalCase name }}--sizeXL {}
2220
}

0 commit comments

Comments
 (0)