Skip to content

Commit dfd9619

Browse files
marissahuysentruytmarissahuysentruyt
committed
fix(table): linting errors fixed
- addresses some unused or "undefined" custom properties related to thumbnail that are not in use anymore - updates metadata - passes density arg to table row template to appropriately size the visuals
1 parent def3d1b commit dfd9619

File tree

3 files changed

+42
-64
lines changed

3 files changed

+42
-64
lines changed

‎components/table/dist/metadata.json

Lines changed: 15 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,6 @@
7979
".spectrum-Table-row--sectionHeader:hover",
8080
".spectrum-Table-row--summary",
8181
".spectrum-Table-row--summary .spectrum-Table-cell",
82-
".spectrum-Table-row--visual",
83-
".spectrum-Table-row--visual .spectrum-Table-cell",
84-
".spectrum-Table-row--visual .spectrum-Table-cell--visual",
85-
".spectrum-Table-row--visual.spectrum-Table-row--collapsible",
8682
".spectrum-Table-row.is-drop-target",
8783
".spectrum-Table-row.is-drop-target .spectrum-Table-cell",
8884
".spectrum-Table-row.is-drop-target .spectrum-Table-checkbox .spectrum-Checkbox-box:before",
@@ -126,13 +122,15 @@
126122
".spectrum-Table-visualInner",
127123
".spectrum-Table-visualInner .spectrum-Avatar",
128124
".spectrum-Table-visualInner .spectrum-Icon",
129-
".spectrum-Table-visualInner .spectrum-Table-visualContent",
130125
".spectrum-Table-visualInner .spectrum-Thumbnail",
131126
".spectrum-Table:dir(rtl)",
132127
".spectrum-Table:not(.spectrum-Table-scroller)",
133128
"[dir=\"rtl\"] .spectrum-Table"
134129
],
135130
"modifiers": [
131+
"--mod-table-avatar-size",
132+
"--mod-table-avatar-size-compact",
133+
"--mod-table-avatar-size-spacious",
136134
"--mod-table-border-color",
137135
"--mod-table-border-radius",
138136
"--mod-table-border-radius-quiet",
@@ -221,17 +219,14 @@
221219
"--mod-table-summary-row-min-height",
222220
"--mod-table-summary-row-text-color",
223221
"--mod-table-summary-row-top-to-text",
224-
"--mod-table-thumbnail-block-spacing",
225-
"--mod-table-thumbnail-block-spacing-compact",
226-
"--mod-table-thumbnail-block-spacing-spacious",
227222
"--mod-table-thumbnail-size",
228223
"--mod-table-thumbnail-size-compact",
229224
"--mod-table-thumbnail-size-spacious",
230-
"--mod-table-thumbnail-to-text",
231225
"--mod-table-transition-duration",
232226
"--mod-table-visual-to-text"
233227
],
234228
"component": [
229+
"--spectrum-table-avatar-size",
235230
"--spectrum-table-border-color",
236231
"--spectrum-table-border-divider-width",
237232
"--spectrum-table-border-radius",
@@ -255,7 +250,6 @@
255250
"--spectrum-table-focus-indicator-thickness",
256251
"--spectrum-table-header-background-color",
257252
"--spectrum-table-header-bottom-to-text",
258-
"--spectrum-table-header-checkbox-block-spacing",
259253
"--spectrum-table-header-font-weight",
260254
"--spectrum-table-header-row-bottom-to-text",
261255
"--spectrum-table-header-row-checkbox-block-spacing",
@@ -319,22 +313,16 @@
319313
"--spectrum-table-selected-row-background-opacity-non-emphasized-hover",
320314
"--spectrum-table-summary-row-background-color",
321315
"--spectrum-table-summary-row-font-weight",
322-
"--spectrum-table-thumbnail-block-spacing",
323-
"--spectrum-table-thumbnail-cell-block-spacing",
324-
"--spectrum-table-thumbnail-inner-content-block-spacing",
325-
"--spectrum-table-thumbnail-inner-minimum-block-spacing",
326316
"--spectrum-table-thumbnail-size",
327-
"--spectrum-table-thumbnail-to-text",
328-
"--spectrum-table-thumbnail-to-top-minimum-medium-compact",
329-
"--spectrum-table-thumbnail-to-top-minimum-medium-regular",
330-
"--spectrum-table-thumbnail-to-top-minimum-medium-spacious",
331317
"--spectrum-table-transition-duration",
332-
"--spectrum-table-visual-inner-content-block-spacing",
333318
"--spectrum-table-visual-to-text"
334319
],
335320
"global": [
336321
"--spectrum-accent-visual-color",
337322
"--spectrum-animation-duration-100",
323+
"--spectrum-avatar-size-100",
324+
"--spectrum-avatar-size-50",
325+
"--spectrum-avatar-size-75",
338326
"--spectrum-background-layer-1-color",
339327
"--spectrum-blue-900-rgb",
340328
"--spectrum-body-color",
@@ -369,13 +357,18 @@
369357
"--spectrum-side-focus-indicator",
370358
"--spectrum-spacing-300",
371359
"--spectrum-text-to-visual-300",
360+
"--spectrum-thumbnail-size-100",
372361
"--spectrum-thumbnail-size-200",
373-
"--spectrum-thumbnail-size-300",
374-
"--spectrum-thumbnail-size-500",
362+
"--spectrum-thumbnail-size-75",
375363
"--spectrum-transparent-white-100",
376364
"--spectrum-transparent-white-25"
377365
],
378-
"passthroughs": ["--mod-checkbox-margin-block", "--mod-thumbnail-size"],
366+
"passthroughs": [
367+
"--mod-avatar-block-size",
368+
"--mod-avatar-inline-size",
369+
"--mod-checkbox-margin-block",
370+
"--mod-thumbnail-size"
371+
],
379372
"high-contrast": [
380373
"--highcontrast-table-border-color",
381374
"--highcontrast-table-cell-focus-extra-offset",

‎components/table/index.css

Lines changed: 13 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -95,9 +95,9 @@
9595
--spectrum-table-section-header-block-start-spacing: var(--spectrum-component-top-to-text-100);
9696
--spectrum-table-section-header-block-end-spacing: var(--spectrum-component-bottom-to-text-100);
9797

98-
--spectrum-table-thumbnail-block-spacing: var(--spectrum-table-thumbnail-to-top-minimum-medium-regular);
9998
--spectrum-table-visual-to-text: var(--spectrum-text-to-visual-300);
100-
--spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-300);
99+
--spectrum-table-thumbnail-size: var(--spectrum-thumbnail-size-100);
100+
--spectrum-table-avatar-size: var(--spectrum-avatar-size-75);
101101

102102
--spectrum-table-cell-inline-spacing: var(--spectrum-table-edge-to-content);
103103
--spectrum-table-checkbox-to-cell-content: var(--spectrum-table-checkbox-to-text);
@@ -108,6 +108,8 @@
108108

109109
/* @passthrough */
110110
--mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size));
111+
--mod-avatar-block-size: var(--mod-table-avatar-size, var(--spectrum-table-avatar-size));
112+
--mod-avatar-inline-size: var(--mod-table-avatar-size, var(--spectrum-table-avatar-size));
111113

112114
&:dir(rtl) {
113115
--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
@@ -124,9 +126,9 @@
124126
/* Row Selection */
125127
--spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing-compact, var(--spectrum-table-row-checkbox-to-top-medium-compact));
126128

127-
/* Collapsible and Thumbnails */
128-
--spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-compact, var(--spectrum-table-thumbnail-to-top-minimum-medium-compact));
129-
--mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-200));
129+
/* Visuals */
130+
--mod-table-thumbnail-size: var(--mod-table-thumbnail-size-compact, var(--spectrum-thumbnail-size-75));
131+
--mod-table-avatar-size: var(--mod-table-avatar-size-compact, var(--spectrum-avatar-size-50));
130132
}
131133

132134
.spectrum-Table--spacious {
@@ -138,9 +140,9 @@
138140
/* Row Selection */
139141
--spectrum-table-row-checkbox-block-spacing: var(--mod-table-row-checkbox-block-spacing-spacious, var(--spectrum-table-row-checkbox-to-top-medium-spacious));
140142

141-
/* Collapsible and Thumbnails */
142-
--spectrum-table-thumbnail-block-spacing: var(--mod-table-thumbnail-block-spacing-spacious, var(--spectrum-table-thumbnail-to-top-minimum-medium-spacious));
143-
--mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-500));
143+
/* Visuals */
144+
--mod-table-thumbnail-size: var(--mod-table-thumbnail-size-spacious, var(--spectrum-thumbnail-size-200));
145+
--mod-table-avatar-size: var(--mod-table-avatar-size-spacious, var(--spectrum-avatar-size-100));
144146
}
145147

146148
.spectrum-Table--emphasized,
@@ -581,8 +583,8 @@
581583
}
582584

583585
&.spectrum-Table-headCell .spectrum-Table-checkbox {
584-
margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
585-
margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-checkbox-block-spacing));
586+
margin-block-start: calc(var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-row-checkbox-block-spacing)) - var(--mod-table-border-width, var(--spectrum-table-border-width)));
587+
margin-block-end: var(--mod-table-header-checkbox-block-spacing, var(--spectrum-table-header-row-checkbox-block-spacing));
586588
}
587589
}
588590

@@ -767,49 +769,22 @@
767769
}
768770

769771
/********* VISUALS- THUMBNAILS, AVATARS, ICONS *********/
770-
.spectrum-Table-row--visual {
771-
--spectrum-table-thumbnail-cell-block-spacing: var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing));
772-
--spectrum-table-thumbnail-inner-content-block-spacing: max(0px, calc((var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size)) - (var(--mod-table-row-line-height, var(--spectrum-table-row-line-height)) * var(--mod-table-header-font-size, var(--spectrum-table-row-font-size)))) / 2));
773-
774-
/* Cell that does not have a thumbnail, within a row that has a thumbnail. */
775-
.spectrum-Table-cell {
776-
padding-block: calc(var(--spectrum-table-thumbnail-cell-block-spacing) + var(--spectrum-table-thumbnail-inner-content-block-spacing));
777-
}
778-
779-
/* Cell that does have a thumbnail has its padding moved within the "Inner" and "Content" alignment wrappers. */
780-
.spectrum-Table-cell--visual {
781-
padding-block: 0;
782-
}
783-
784-
/* Sometimes the padding must be larger to match any extra space created by the disclosure icon (e.g. compact + large ). */
785-
&.spectrum-Table-row--collapsible {
786-
--spectrum-table-thumbnail-inner-minimum-block-spacing: max(0px, calc((var(--mod-table-disclosure-icon-size, var(--spectrum-table-disclosure-icon-size)) - var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size))) / 2));
787-
--spectrum-table-thumbnail-cell-block-spacing: max(var(--mod-table-thumbnail-block-spacing, var(--spectrum-table-thumbnail-block-spacing)), var(--spectrum-table-thumbnail-inner-minimum-block-spacing));
788-
}
789-
}
790-
791772
.spectrum-Table-visualInner {
792773
display: flex;
793774
flex-direction: row;
794775
flex-wrap: nowrap;
795776
justify-content: flex-start;
796777
align-items: center;
797778
gap: var(--spectrum-table-visual-to-text);
798-
padding-block: var(--spectrum-table-thumbnail-cell-block-spacing);
799779

800780
.spectrum-Thumbnail,
801781
.spectrum-Icon,
802782
.spectrum-Avatar {
803783
flex-grow: 0;
804784
flex-shrink: 0;
805-
margin-inline-end: var(--mod-table-thumbnail-to-text, var(--spectrum-table-thumbnail-to-text));
785+
margin-inline-end: var(--mod-table-visual-to-text, var(--spectrum-table-visual-to-text));
806786
line-height: var(--mod-table-row-line-height, var(--spectrum-table-row-line-height));
807787
}
808-
809-
.spectrum-Table-visualContent {
810-
/* Vertically centers text with the middle of the cell with the visual. */
811-
padding-block: var(--spectrum-table-visual-inner-content-block-spacing);
812-
}
813788
}
814789

815790
/********* HIGH CONTRAST *********/

‎components/table/stories/template.js

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const TableRowItem = ({
2626
isExpanded = false,
2727
isHidden = false,
2828
hasColumnDividers = false,
29+
density = "regular",
2930
tier,
3031
isLastTier = false,
3132
useDivs = false,
@@ -50,18 +51,26 @@ export const TableRowItem = ({
5051
? cellContent[columnIndex]
5152
: cellContent;
5253

53-
if (useVisuals) {
54+
if (useVisuals && columnIndex < 2) {
5455
return html`
5556
<div class="spectrum-Table-visualInner">
5657
${visualElement === "thumbnail" ?
5758
Thumbnail({
58-
size: "75",
59+
size: ({
60+
compact: "75",
61+
regular: "100",
62+
spacious: "200",
63+
}[density] || "100"),
5964
imageURL: "example-card-landscape.png",
6065
isCover: true,
6166
}, context)
6267
: visualElement === "avatar" ?
6368
Avatar({
64-
size: "75",
69+
size: ({
70+
compact: "50",
71+
regular: "75",
72+
spacious: "100",
73+
}[density] || "75"),
6574
imageURL: "example-card-landscape.png",
6675
isCover: true,
6776
}, context)
@@ -204,7 +213,7 @@ export const TableRowItem = ({
204213

205214
export const Template = ({
206215
rootClass = "spectrum-Table",
207-
density = "standard",
216+
density = "regular",
208217
isQuiet = false,
209218
isEmphasized = true,
210219
isLoading = false,
@@ -355,6 +364,7 @@ export const Template = ({
355364
${rowItems.map((item) =>
356365
TableRowItem({
357366
rootClass,
367+
density,
358368
useDivs,
359369
visualElement,
360370
hasColumnDividers,

0 commit comments

Comments
 (0)