Skip to content

Commit 4069237

Browse files
m4thieulavoiechloericesam-b-rose
authored
[IndexTable] Add support for subheaders and range selection (#9445)
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? This PR introduces subheader support to the `IndexTable.Row` component and adds optional props to `IndexTable.Cell` to manage any logical relationship between a subheader and its child row cells to make it properly accessible. [Initial design Figma](https://www.figma.com/file/e9bDz4TNXeVIhGQoi5qy4t/Group-by?type=design&node-id=2541-79450&t=l4Ci32xDjAcZDhV3-0) [Storybook ](https://5d559397bae39100201eedc1-ffunjiaaog.chromatic.com/?path=/story/all-components-indextable--with-sub-headers) | Current | Experimental | |--------|--------| | <img width="776" alt="Screenshot 2023-06-30 at 11 37 57 AM" src="https://github.com/Shopify/polaris/assets/18447883/a84ff53c-856d-4c40-bf35-1d91f93e71f5"> | <img width="775" alt="Screenshot 2023-06-30 at 11 37 43 AM" src="https://github.com/Shopify/polaris/assets/18447883/3ee73d4e-2b57-46ac-b3bb-9427da30f651"> | **Demo of the component in action** https://github.com/Shopify/polaris/assets/18447883/ce01be75-8368-46d8-8dc4-2ba4d7c12e74 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? - Adds subheader styling to rows when a `rowType` of `subheader` is set - Subheader UI was separated from the range selection UX because range selection is needed for broader use cases, including rows of type parent, child, or sibling in the product variant list (contribution [coming soon](https://github.com/Shopify/web/issues/101199)) - Adds support for selecting a range of rows when a single row is clicked if a `selectionRange` is set - Adds support to the `IndexTable.Cell` for rendering a `<th>` element - Adds support to the `IndexTable.Cell` for setting `scope` and `colSpan` attributes ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) - Play with and inspect the [With subheaders story](https://5d559397bae39100201eedc1-tsiyffygsx.chromatic.com/?path=/story/all-components-indextable--with-sub-headers) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Chloe Rice <[email protected]> Co-authored-by: Chloe Rice <[email protected]> Co-authored-by: Sam Rose <[email protected]>
1 parent 439fedc commit 4069237

File tree

20 files changed

+1131
-155
lines changed

20 files changed

+1131
-155
lines changed

‎.changeset/lovely-rings-enjoy.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
'@shopify/polaris': minor
3+
'polaris.shopify.com': patch
4+
---
5+
6+
IndexTable subheader support updates:
7+
- `IndexTable.Row`
8+
- Added the `header` prop to apply subheader styles
9+
- Added `indeterminate` value to `selected` prop
10+
- Added `selectionRange` prop to specify which rows in the range are selected when the row is selected
11+
- Added `rowType` prop to indicate the relationship or role of the row's contents (`data` or `subheader`)
12+
- `IndexTable.Cell`
13+
- Added the `header` prop to apply subheader styles
14+
- Added `as` prop to set as a `th` if it is serving as a subheading
15+
- Added `colSpan` prop to specify the number of the columns that the cell element should extend
16+
- Added `scope` prop to indicate which cells the `th` element relates
17+
- See the [With subheaders](https://polaris.shopify.com/components/tables/index-table) example on polaris.shopify.com for how to properly configure.

‎polaris-react/src/components/IndexTable/IndexTable.scss‎

Lines changed: 100 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -118,11 +118,14 @@ $loading-panel-height: 53px;
118118
}
119119

120120
// This is to bust specificity with .Table-scrolling and TableCell:first-child or TableCell:first-child + TableCell bg color above.
121-
#{$se23} & .TableRow-subdued {
122-
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 overrides
123-
.TableCell-first,
124-
.TableCell-first + .TableCell {
125-
background-color: var(--p-color-bg-subdued);
121+
#{$se23} & {
122+
// stylelint-disable-next-line selector-max-combinators -- se23 overrides
123+
.TableRow-subdued {
124+
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 overrides
125+
.TableCell-first,
126+
.TableCell-first + .TableCell {
127+
background-color: var(--p-color-bg-subdued);
128+
}
126129
}
127130
}
128131

@@ -220,19 +223,65 @@ $loading-panel-height: 53px;
220223
.TableCell-first,
221224
.TableCell-first + .TableCell {
222225
background-color: var(--p-color-bg-subdued);
226+
223227
#{$se23} & {
224228
color: var(--p-color-text-subdued);
225229
}
226230
}
227231
}
228232

229-
&.TableRow-hovered {
233+
&.TableRow-subheader {
234+
cursor: default;
235+
// stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
236+
&,
237+
.TableCell:first-child,
238+
.TableCell-first,
239+
.TableCell-first + .TableCell,
240+
.TableCell:last-child {
241+
color: var(--p-color-text-subdued);
242+
font-weight: var(--p-font-weight-medium);
243+
font-size: var(--p-font-size-75);
244+
background-color: var(--p-color-bg-subdued);
245+
border-top: var(--p-border-width-1) solid var(--p-color-border);
246+
border-bottom: var(--p-border-width-1) solid var(--p-color-border);
247+
}
248+
249+
#{$se23} & {
250+
/* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- generated by polaris-migrator DO NOT COPY */
251+
&,
252+
.TableCell:first-child,
253+
.TableCell-first,
254+
.TableCell-first + .TableCell,
255+
.TableCell:last-child {
256+
background-color: var(--p-color-bg-subdued);
257+
border-color: var(--p-color-border);
258+
}
259+
}
260+
}
261+
262+
&.TableRow-hovered:not(.TableRow-disabled) {
230263
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
231264
&,
232265
.TableCell-first,
233266
.TableCell-first + .TableCell {
234267
background-color: var(--p-color-bg-hover);
235268
}
269+
270+
// stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
271+
&.TableRow-subheader {
272+
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
273+
&,
274+
.TableCell:first-child,
275+
.TableCell-first,
276+
.TableCell-first + .TableCell,
277+
.TableCell:last-child {
278+
background-color: var(--p-color-bg-subdued);
279+
280+
#{$se23} & {
281+
background-color: var(--p-color-bg-subdued);
282+
}
283+
}
284+
}
236285
}
237286

238287
&.TableRow-selected {
@@ -248,11 +297,27 @@ $loading-panel-height: 53px;
248297
background-color: var(--p-color-bg-primary-subdued-selected);
249298
}
250299
}
300+
301+
/* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */
302+
&.TableRow-subheader {
303+
/* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
304+
&,
305+
.TableCell:first-child,
306+
.TableCell-first,
307+
.TableCell-first + .TableCell,
308+
.TableCell:last-child {
309+
background-color: var(--p-color-bg-subdued);
310+
311+
#{$se23} & {
312+
background-color: var(--p-color-bg-subdued);
313+
}
314+
}
315+
}
251316
}
252317

253318
// stylelint-disable-next-line no-duplicate-selectors -- se23 temporary styles
254319
#{$se23} & {
255-
&.TableRow-hovered {
320+
&.TableRow-hovered:not(.TableRow-disabled) {
256321
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 temporary styles
257322
&,
258323
.TableCell-first,
@@ -299,7 +364,7 @@ $loading-panel-height: 53px;
299364
}
300365
}
301366

302-
// stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
367+
/* stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY */
303368
&.TableRow-hovered.TableRow-selected {
304369
// stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
305370
&,
@@ -313,6 +378,18 @@ $loading-panel-height: 53px;
313378
background-color: var(--p-color-bg-primary-subdued-hover);
314379
}
315380
}
381+
382+
/* stylelint-disable-next-line selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
383+
&.TableRow-subheader {
384+
/* stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY */
385+
&,
386+
.TableCell:first-child,
387+
.TableCell-first,
388+
.TableCell-first + .TableCell,
389+
.TableCell:last-child {
390+
background-color: var(--p-color-bg-subdued);
391+
}
392+
}
316393
}
317394
}
318395

@@ -757,7 +834,17 @@ $loading-panel-height: 53px;
757834
}
758835
}
759836
}
837+
760838
#{$se23} & {
839+
/* stylelint-disable-next-line selector-max-combinators -- generated by polaris-migrator DO NOT COPY */
840+
.TableCell,
841+
.TableHeading {
842+
/* stylelint-disable-next-line selector-max-combinators -- generated by polaris-migrator DO NOT COPY */
843+
&:first-child {
844+
padding-left: var(--p-space-3);
845+
}
846+
}
847+
761848
// This is to bust specificity with Table-unselectable and TableCel:first-child bg color above.
762849
// stylelint-disable-next-line selector-max-combinators -- se23 override
763850
.TableRow-subdued:not(.TableRow-hovered) {
@@ -838,6 +925,7 @@ $loading-panel-height: 53px;
838925
.statusSubdued {
839926
.TableCell:last-child {
840927
background-color: var(--p-color-bg-subdued);
928+
841929
#{$se23} & {
842930
color: var(--p-color-text-subdued);
843931
}
@@ -860,11 +948,11 @@ $loading-panel-height: 53px;
860948
}
861949
}
862950

863-
#{$se23} & .TableRow-selected.TableRow-subdued {
864-
color: var(--p-color-text-subdued);
865-
}
866-
867951
#{$se23} & {
952+
.TableRow-selected.TableRow-subdued {
953+
color: var(--p-color-text-subdued);
954+
}
955+
868956
.TableRow-hovered {
869957
// stylelint-disable-next-line selector-max-compound-selectors -- se23 temporary styles
870958
.TableCell:last-child {

0 commit comments

Comments
 (0)