Skip to content

Commit 0d4cd1e

Browse files
jawinncastastrophe
jawinn
and
castastrophe
committed
feat(card): add additional mod properties (#2279)
Additional --mod custom properties were needed to customize the invididual paddings and margins for the card body. Also added for the card footer. Two custom properties have been renamed and marked as deprecated, with a fallback to the old mod name for the time being. Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>
1 parent ef85f31 commit 0d4cd1e

File tree

2 files changed

+134
-78
lines changed

2 files changed

+134
-78
lines changed

‎components/card/index.css

Lines changed: 125 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@
1616
* @component Card
1717
*/
1818
.spectrum-Card {
19-
/* Default Layout */
20-
--spectrum-card-background-color: var(--spectrum-background-layer-2-color);
21-
--spectrum-card-body-spacing: var(--spectrum-spacing-400);
22-
--spectrum-card-title-padding-top: var(--spectrum-spacing-300);
23-
--spectrum-card-title-padding-right: var(--spectrum-spacing-400);
24-
--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
25-
--spectrum-card-content-margin-bottom: var(--spectrum-spacing-300);
26-
--spectrum-card-footer-margin-top: var(--spectrum-spacing-100);
27-
--spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100);
19+
/* Default Layout */
20+
--spectrum-card-background-color: var(--spectrum-background-layer-2-color);
21+
--spectrum-card-body-spacing: var(--spectrum-spacing-400);
22+
--spectrum-card-title-padding-top: var(--spectrum-spacing-300);
23+
--spectrum-card-title-padding-right: var(--spectrum-spacing-400);
24+
--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
25+
--spectrum-card-content-margin-bottom: var(--spectrum-spacing-300);
26+
--spectrum-card-footer-padding-top: var(--spectrum-spacing-100);
27+
--spectrum-card-subtitle-padding-right: var(--spectrum-spacing-100);
2828

2929
--spectrum-card-border-width: var(--spectrum-border-width-100);
3030
--spectrum-card-corner-radius: var(--spectrum-corner-radius-100);
@@ -277,9 +277,9 @@
277277
.spectrum-Card-coverPhoto {
278278
position: relative;
279279

280-
display: flex;
281-
align-items: center;
282-
justify-content: center;
280+
display: flex;
281+
align-items: center;
282+
justify-content: center;
283283

284284
box-sizing: border-box;
285285
block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height));
@@ -311,19 +311,36 @@
311311
}
312312

313313
.spectrum-Card-body {
314-
padding-block-start: var(--mod-card-title-padding-top, var(--spectrum-card-title-padding-top));
315-
padding-block-end: calc(
316-
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
317-
var(--mod-card-border-width, var(--spectrum-card-border-width))
318-
);
319-
padding-inline-start: calc(
320-
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
321-
var(--mod-card-border-width, var(--spectrum-card-border-width))
322-
);
323-
padding-inline-end: calc(
324-
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
325-
var(--mod-card-border-width, var(--spectrum-card-border-width))
326-
);
314+
/* @deprecation --mod-card-title-padding-top has been renamed to --mod-card-body-padding-block-start
315+
and will be removed in a future version. */
316+
padding-block-start: var(
317+
--mod-card-body-padding-block-start,
318+
var(
319+
--mod-card-title-padding-top,
320+
var(--spectrum-card-title-padding-top)
321+
)
322+
);
323+
padding-inline-end: var(
324+
--mod-card-body-padding-inline-end,
325+
calc(
326+
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
327+
var(--mod-card-border-width, var(--spectrum-card-border-width))
328+
)
329+
);
330+
padding-inline-start: var(
331+
--mod-card-body-padding-inline-start,
332+
calc(
333+
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
334+
var(--mod-card-border-width, var(--spectrum-card-border-width))
335+
)
336+
);
337+
padding-block-end: var(
338+
--mod-card-body-padding-block-end,
339+
calc(
340+
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
341+
var(--mod-card-border-width, var(--spectrum-card-border-width))
342+
)
343+
);
327344
}
328345

329346
.spectrum-Card-preview {
@@ -383,27 +400,61 @@
383400
}
384401

385402
.spectrum-Card-footer {
386-
/* Accommodate for wanting less spacing between body and footer */
387-
margin-block-start: calc(
388-
-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
389-
var(--mod-card-content-margin-bottom, var(--spectrum-card-content-margin-bottom)))
390-
);
391-
margin-inline-start: var(--mod-card-body-spacing, var(--spectrum-card-body-spacing));
392-
margin-inline-end: var(--mod-card-body-spacing, var(--spectrum-card-body-spacing));
393-
padding-block-start: var(--mod-card-footer-margin-top, var(--spectrum-card-footer-margin-top));
394-
padding-block-end: calc(
395-
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
396-
var(--mod-card-border-width, var(--spectrum-card-border-width))
397-
);
398-
399-
line-height: var(--mod-card-body-line-height, var(--spectrum-card-body-line-height));
400-
color: var(
401-
--highcontrast-card-body-font-color,
402-
var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
403-
);
404-
405-
border-block-start: var(--mod-card-border-width, var(--spectrum-card-border-width)) solid
406-
var(--mod-card-divider-color, var(--spectrum-card-divider-color));
403+
/* Accommodate for wanting less spacing between body and footer */
404+
margin-block-start: var(
405+
--mod-card-footer-margin-block-start,
406+
calc(
407+
-1 * (var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
408+
var(
409+
--mod-card-content-margin-bottom,
410+
var(--spectrum-card-content-margin-bottom)
411+
))
412+
)
413+
);
414+
margin-inline-start: var(
415+
--mod-card-footer-margin-inline-start,
416+
var(
417+
--mod-card-body-spacing,
418+
var(--spectrum-card-body-spacing)
419+
)
420+
);
421+
margin-inline-end: var(
422+
--mod-card-footer-margin-inline-end,
423+
var(
424+
--mod-card-body-spacing,
425+
var(--spectrum-card-body-spacing)
426+
)
427+
);
428+
padding-block-end: var(
429+
--mod-card-footer-padding-block-end,
430+
calc(
431+
var(--mod-card-body-spacing, var(--spectrum-card-body-spacing)) -
432+
var(--mod-card-border-width, var(--spectrum-card-border-width))
433+
)
434+
);
435+
/* @deprecation --mod-card-footer-margin-top has been renamed to --mod-card-footer-padding-block-start
436+
and will be removed in a future version. */
437+
padding-block-start: var(
438+
--mod-card-footer-padding-block-start,
439+
var(
440+
--mod-card-footer-margin-top,
441+
var(--spectrum-card-footer-padding-top)
442+
)
443+
);
444+
445+
color: var(
446+
--highcontrast-card-body-font-color,
447+
var(--mod-card-body-font-color, var(--spectrum-card-body-font-color))
448+
);
449+
line-height: var(
450+
--mod-card-body-line-height,
451+
var(--spectrum-card-body-line-height)
452+
);
453+
border-block-start: var(
454+
--mod-card-border-width,
455+
var(--spectrum-card-border-width)
456+
)
457+
solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
407458
}
408459

409460
.spectrum-Card-header {
@@ -464,38 +515,34 @@
464515
display: none;
465516
}
466517

467-
.spectrum-Card-preview {
468-
position: relative;
469-
470-
overflow: visible;
471-
flex: 1;
472-
473-
box-sizing: border-box;
474-
inline-size: 100%;
475-
min-block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height));
476-
margin: 0 auto;
477-
478-
background-color: var(--mod-card-background-color, var(--spectrum-card-background-color));
479-
border-radius: var(--mod-card-corner-radius, var(--spectrum-card-corner-radius));
480-
481-
transition: background-color var(--mod-animation-duration-100, var(--spectrum-animation-duration-100));
482-
483-
/* Use ::before to show the selected overlay */
484-
&::before {
485-
content: "";
486-
487-
position: absolute;
488-
inset-block-start: 0;
489-
inset-inline-start: 0;
490-
491-
inline-size: 100%;
492-
block-size: 100%;
493-
}
494-
495-
/* Use ::after to show the selection outline so that the border doesn't
496-
* affect the layout of the content within the preview. */
497-
&::after {
498-
content: "";
518+
/* Use ::after to show the selection outline so that the border doesn't
519+
affect the layout of the content within the preview. */
520+
&::after {
521+
content: "";
522+
block-size: 100%;
523+
inline-size: 100%;
524+
position: absolute;
525+
inset-inline-start: 0;
526+
inset-inline-end: 0;
527+
inset-block-start: 0;
528+
border-style: solid;
529+
border-color: transparent;
530+
border-width: 0;
531+
border-radius: calc(
532+
var(--mod-card-corner-radius, var(--spectrum-card-corner-radius)) +
533+
var(
534+
--mod-card-focus-indicator-width,
535+
var(--spectrum-card-focus-indicator-width)
536+
)
537+
);
538+
margin-block-start: calc(
539+
-1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width))
540+
);
541+
margin-inline-start: calc(
542+
-1 * var(--mod-card-focus-indicator-width, var(--spectrum-card-focus-indicator-width))
543+
);
544+
}
545+
}
499546

500547
position: absolute;
501548
inset-block-start: 0;

‎components/card/metadata/mods.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@
1717
| `--mod-card-body-font-style` |
1818
| `--mod-card-body-font-weight` |
1919
| `--mod-card-body-line-height` |
20+
| `--mod-card-body-padding-block-end` |
21+
| `--mod-card-body-padding-block-start` |
22+
| `--mod-card-body-padding-inline-end` |
23+
| `--mod-card-body-padding-inline-start` |
2024
| `--mod-card-body-spacing` |
2125
| `--mod-card-border-color` |
2226
| `--mod-card-border-color-hover` |
@@ -27,7 +31,12 @@
2731
| `--mod-card-divider-color` |
2832
| `--mod-card-focus-indicator-color` |
2933
| `--mod-card-focus-indicator-width` |
34+
| `--mod-card-footer-margin-block-start` |
35+
| `--mod-card-footer-margin-inline-end` |
36+
| `--mod-card-footer-margin-inline-start` |
3037
| `--mod-card-footer-margin-top` |
38+
| `--mod-card-footer-padding-block-end` |
39+
| `--mod-card-footer-padding-block-start` |
3140
| `--mod-card-horizontal-body-padding` |
3241
| `--mod-card-horizontal-preview-padding` |
3342
| `--mod-card-minimum-width` |

0 commit comments

Comments
 (0)