Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

[IndexTable] Add support for subheaders and range selection #9445

Merged
merged 24 commits into from
Sep 20, 2023
Merged

[IndexTable] Add support for subheaders and range selection #9445

merged 24 commits into from
Sep 20, 2023

Conversation

m4thieulavoie
Copy link
Contributor

@m4thieulavoie m4thieulavoie commented Jun 12, 2023 •
edited by chloerice
Loading

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

Storybook

Current Experimental
Screenshot 2023-06-30 at 11 37 57 AM Screenshot 2023-06-30 at 11 37 43 AM

Demo of the component in action

indextable-with-subheader-rows.mp4

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)
  • 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
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

@m4thieulavoie m4thieulavoie self-assigned this Jun 12, 2023
m4thieulavoie
m4thieulavoie commented Jun 12, 2023
View reviewed changes
polaris-react/src/utilities/index-table/context.ts
interface RowContextType {
itemId?: string;
selected?: boolean;
selected?: boolean | 'indeterminate';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change requires us to add the indeterminate value to the checkbox of the row

@m4thieulavoie m4thieulavoie force-pushed the feat/indextable-subheader branch from 069331b to fe053fd Compare June 13, 2023 19:15
@m4thieulavoie m4thieulavoie marked this pull request as ready for review June 13, 2023 19:15
@m4thieulavoie m4thieulavoie requested a review from chloerice June 13, 2023 19:15
chloerice
chloerice reviewed Jun 15, 2023
View reviewed changes
@m4thieulavoie m4thieulavoie force-pushed the feat/indextable-subheader branch from fd06b48 to 9e0bc4c Compare June 15, 2023 18:17
@m4thieulavoie m4thieulavoie requested a review from chloerice June 15, 2023 18:17
@chloerice chloerice requested review from a user and removed request for a user June 15, 2023 22:01
@chloerice chloerice force-pushed the feat/indextable-subheader branch 2 times, most recently from 4c5a865 to 7b9dd22 Compare June 26, 2023 17:06
@chloerice chloerice added the 🤖Skip Comment Check Skip the migrator comment CI check label Jun 26, 2023
@chloerice chloerice force-pushed the feat/indextable-subheader branch 3 times, most recently from d0a4651 to 6654834 Compare June 26, 2023 18:33
@m4thieulavoie m4thieulavoie force-pushed the feat/indextable-subheader branch from 98d5020 to 00b89f0 Compare June 28, 2023 20:37
@chloerice chloerice force-pushed the feat/indextable-subheader branch 2 times, most recently from 26d6f29 to 0493846 Compare June 30, 2023 15:36
@chloerice chloerice requested review from a team and bernardojoaogarcia June 30, 2023 15:37
@chloerice chloerice force-pushed the feat/indextable-subheader branch from 0493846 to 8c0b40d Compare June 30, 2023 16:31
@chloerice chloerice changed the title Introduce a subheader in Index Table Row [IndexTable] Introduce a subheader support Jun 30, 2023
@chloerice chloerice force-pushed the feat/indextable-subheader branch from f43abe6 to 4d24285 Compare June 30, 2023 16:51
@chloerice
[IndexTable] Add documentation for the subheader feature support
9d48799
@chloerice
Only add headers to relevant cells
03313b4
@chloerice
A11y fixes for heading cell id and association
00f9fd8
@chloerice
revert rebase conflict resolution error
357dbfd
@chloerice
Fix row checkbox unique id
bb86a2f
@chloerice
[IndexTable][Checkbox] Add accessibilityLabel test
7680c9a
@chloerice
[IndexTable] Remove interaction states from subheader rows
84104b4
@chloerice
[IndexTable] Add heading level border to subheader rows
f5d2e22
@chloerice
[IndexTable] Use default cursor for subheader rows
1e0a8f9
@chloerice
[IndexTable][Storybook] Disable subheader rows if all associated rows…
ac31945 
… are disabled
@chloerice
[IndexTable] Prevent selection on click of subheader rows
9c3da78
@chloerice
[IndexTable][Row] Update test coverage for subheader row interaction …
aef3026 
…behavior
@chloerice
[IndexTable] Detach range selection UX from subheader UI to broaden s…
a28d26c 
…upport
@chloerice
Update props table to reflect updated API changes
d59a30d
@chloerice chloerice force-pushed the feat/indextable-subheader branch from fb0cf92 to d59a30d Compare September 19, 2023 22:12
@chloerice @sam-b-rose
Update .changeset/lovely-rings-enjoy.md to fully describe the API cha…
97b405f 
…nges

Co-authored-by: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>
@chloerice chloerice force-pushed the feat/indextable-subheader branch from 6935371 to ba5bee3 Compare September 19, 2023 23:30
@chloerice chloerice force-pushed the feat/indextable-subheader branch from ba5bee3 to fca3a5c Compare September 19, 2023 23:31
@chloerice chloerice merged commit 7be9c24 into main Sep 20, 2023
@chloerice chloerice deleted the feat/indextable-subheader branch September 20, 2023 15:20
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Sep 20, 2023
Merged
laurkim pushed a commit that referenced this pull request Sep 22, 2023
@shopify-github-actions-access @github-actions
Version Packages (#10495)
68712c7 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris@11.20.0

### Minor Changes

- [#10477](#10477)
[`790a001cd`](790a001)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
semantic `color` tokens


- [#10478](#10478)
[`8be227e0c`](8be227e)
Thanks [@MaxCloutier](https://github.com/MaxCloutier)! - Added
`allowFiltering` prop on `ActionList`, and `filterActions` prop on Page
Header


- [#9445](#9445)
[`7be9c243a`](7be9c24)
Thanks [@m4thieulavoie](https://github.com/m4thieulavoie)! - Added
support for subheaders and selection of a range of `IndexTable.Rows` --
See the [With
subheaders](https://polaris.shopify.com/components/tables/index-table)
example on polaris.shopify.com for how to properly configure
    -   `IndexTable.Row`
- Added support for setting the `indeterminate` value on the `selected`
prop
- Added the `selectionRange` prop to specify a range of other
consecutive, related rows selected when the row is selected
- Added the `rowType` prop to indicate the relationship or role of the
row's contents (defaults to `data`, `subheader` renders the row to look
and behave like the table header row)
Added support for setting accessibility attributes on `IndexTable.Cell`
    -   `IndexTable.Cell`
- Added the `as` prop to support rendering the cell as a `th` element if
it is serving as a subheading cell
- Added support for the `headers` attribute to manually associate all
headers when the cell is described by more than its column heading
- Added support for the `colSpan` attribute to specify the number of the
columns that the cell element should extend to
- Added support for the `scope` attribute to indicate whether the `th`
is a header for a column, row, or group of columns or rows


- [#10490](#10490)
[`863f15ff2`](863f15f)
Thanks [@mrcthms](https://github.com/mrcthms)! - Add new
`IndexFiltersManager` for allowing disabling of Page Header actions when
in Filtering or EditingColumns mode


- [#10566](#10566)
[`9fed74317`](9fed743)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed a bug in
`Filters` where changes to the `appliedFilters` prop were not being
handled

### Patch Changes

- [#10404](#10404)
[`5acfcec04`](5acfcec)
Thanks [@jesstelford](https://github.com/jesstelford)! - Scoped CSS
variables for non-responsive props on `Tooltip`, `RangeSlider`,
`ProgressBar`, and `HorizontalStack`.


- [#10582](#10582)
[`3efbc1b4e`](3efbc1b)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed the focus states
of actions within the Page Header component


- [#10492](#10492)
[`d5ff72dec`](d5ff72d)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated Storybook
stories to be wrapped with an empty FrameContext.Provider

- Updated dependencies
\[[`fe1aac1b5`](fe1aac1),
[`790a001cd`](790a001),
[`63cf3ad24`](63cf3ad),
[`120e96eae`](120e96e)]:
    -   @shopify/polaris-tokens@7.10.0

## @shopify/polaris-tokens@7.10.0

### Minor Changes

- [#10465](#10465)
[`fe1aac1b5`](fe1aac1)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
private primitive `colors`


- [#10477](#10477)
[`790a001cd`](790a001)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
semantic `color` tokens


- [#10600](#10600)
[`63cf3ad24`](63cf3ad)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive and semantic `shadow` token scales

### Patch Changes

- [#10485](#10485)
[`120e96eae`](120e96e)
Thanks [@lgriffee](https://github.com/lgriffee)! - Updated public
primitive `base` and `light-uplift` theme scales

## @shopify/polaris-migrator@0.22.5

### Patch Changes

- [#10575](#10575)
[`ea6b54284`](ea6b542)
Thanks [@aveline](https://github.com/aveline)! - Handled `buttonFrom`
and `buttonsFrom` functions in `Button` migration

- Updated dependencies
\[[`fe1aac1b5`](fe1aac1),
[`790a001cd`](790a001),
[`63cf3ad24`](63cf3ad),
[`120e96eae`](120e96e)]:
    -   @shopify/polaris-tokens@7.10.0
    -   @shopify/stylelint-polaris@14.0.5

## @shopify/stylelint-polaris@14.0.5

### Patch Changes

- Updated dependencies
\[[`fe1aac1b5`](fe1aac1),
[`790a001cd`](790a001),
[`63cf3ad24`](63cf3ad),
[`120e96eae`](120e96e)]:
    -   @shopify/polaris-tokens@7.10.0

## polaris.shopify.com@0.57.8

### Patch Changes

- [#10605](#10605)
[`9748b0838`](9748b08)
Thanks [@laurkim](https://github.com/laurkim)! - Updated logic for
rendering `color` custom property previews in `TokenList`


- [#10573](#10573)
[`da09e0b8c`](da09e0b)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated copy url
to change browser url

- Updated dependencies
\[[`fe1aac1b5`](fe1aac1),
[`5acfcec04`](5acfcec),
[`790a001cd`](790a001),
[`8be227e0c`](8be227e),
[`63cf3ad24`](63cf3ad),
[`7be9c243a`](7be9c24),
[`863f15ff2`](863f15f),
[`3efbc1b4e`](3efbc1b),
[`d5ff72dec`](d5ff72d),
[`120e96eae`](120e96e),
[`9fed74317`](9fed743)]:
    -   @shopify/polaris-tokens@7.10.0
    -   @shopify/polaris@11.20.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
@oksanashopify oksanashopify mentioned this pull request Sep 25, 2023
Merged
5 tasks
oksanashopify added a commit that referenced this pull request Nov 15, 2023
@oksanashopify
[VF][Polaris] Update IndexTable Row to support indentation for nested…
b721986 
… child rows (#10599)

<!--
  ☝️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?

Resolves first acceptance criteria from
https://github.com/Shopify/web/issues/104243 - "IndexTable rows with a
rowType of child are indented to represent the nested structure".

Depends on #9445
Issue with IndexTable with Sub Headers does not have proper
background-color for unselectable table first-child cell will be fixed
in separate [PR.](#10960)
 

### WHAT is this pull request doing?

1. Adds New type `child` for a `rowType` to represent the nested
structure for child rows
2. Adds Styles (indentation) for child rows
3. Adds stories to tophat changes on different tables

**These changes will allow us to integrate design for new Variants card
and also will help other Polaris consumers visually distinct child rows
under the sub headers**
 
New Variants card Design: [Figma
](https://www.figma.com/file/PKcKNWig5d7yMoq4iR6nlH/%F0%9F%92%AF-250-Variants-UX?node-id=2835%3A82451&mode=dev)

Desktop:
<img width="284" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/66b01e51-d3a4-47b9-9771-cdf1b57f9ab4">

Mobile:
<img width="323" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/60f37202-bdac-4e44-ae18-52f048bf58ab">

How current snapshot looks on PDP new Variants Card:
<img width="668" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/7f70f98e-7501-44c0-9c82-03ecc5708e76">
[Spin with latest
snapshot](https://admin.web.oa-test-polaris-nested-rows.oksana-azarova.us.spin.dev/store/shop1/products/1)
[Draft PR with latest snapshot and child
rows](Shopify/web#109999)

Updated website examples and documentation:
<img width="1209" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/cf712738-ad55-4ec5-b895-e2ecab045250">

<img width="908" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/4a415f95-6135-4b06-8082-f6ab6a57e0b4">



<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩
I would recommend start reviewing from the last two stories, to
understand better our initial idea :)

**_Special test case to test UI changes for new Variants Card design_**
1.  Open Storybook:
<img width="785" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/0e3ae182-7566-49b8-a0f4-fb1998afc248">

4. Scroll to last two stories 
<img width="398" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/060144ea-30e6-414a-8d84-d5d236bacfd1">

5. See how Image and Name located in one cell. This is how currently new
Variants card is built
6. Test Desktop UI with `With Nested Rows With Thumbnails One Cell
Selectable` story
Desktop:
[Figma](https://www.figma.com/file/PKcKNWig5d7yMoq4iR6nlH/%F0%9F%92%AF-250-Variants-UX?node-id=4827%3A146409&mode=dev)

7. Test mobile version with `With Nested Rows With Thumbnails One Cell
Selectable` story. In Admin on PDP for single location store we switch
to unselectable table with thumbnails for mobile version on consumer
level. So that's why I created separate story for that UI
Mobile:
[Figma](https://www.figma.com/file/PKcKNWig5d7yMoq4iR6nlH/%F0%9F%92%AF-250-Variants-UX?node-id=4827%3A149172&mode=dev)

8. See how current changes work on web:
[Spin with latest
snapshot](https://admin.web.oa-test-polaris-nested-rows.oksana-azarova.us.spin.dev/store/shop1/products/1)
Shopify/web#109999


**General test case:**
1. Open Storybook:
<img width="785" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/6b269773-3c58-471a-8c4b-2a2c53a809d4">

2. Go through each story related to nested child rows:
<img width="389" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/108d174d-c164-4774-bae2-5a53bcb8af3a">

3. Check nested row in the following stories (select, hover rows):

- With Row Status
- With Zebra Striping



5. Test different responsive dimensions.


🖥 [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)

 
### 🎩 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
@chloerice chloerice added 2023 Contribution tracking for 2023 Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023" labels Dec 5, 2023
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
@m4thieulavoie @chloerice @sam-b-rose
[IndexTable] Add support for subheaders and range selection (Shopify#…
4069237 
…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 <chloe.rice@shopify.com>
Co-authored-by: Chloe Rice <chloerice@users.noreply.github.com>
Co-authored-by: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@shopify-github-actions-access @github-actions
Version Packages (Shopify#10495)
3c9804f 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/polaris@11.20.0

### Minor Changes

- [Shopify#10477](Shopify#10477)
[`790a001cd`](Shopify@be6914d)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
semantic `color` tokens


- [Shopify#10478](Shopify#10478)
[`8be227e0c`](Shopify@b588f20)
Thanks [@MaxCloutier](https://github.com/MaxCloutier)! - Added
`allowFiltering` prop on `ActionList`, and `filterActions` prop on Page
Header


- [Shopify#9445](Shopify#9445)
[`7be9c243a`](Shopify@4069237)
Thanks [@m4thieulavoie](https://github.com/m4thieulavoie)! - Added
support for subheaders and selection of a range of `IndexTable.Rows` --
See the [With
subheaders](https://polaris.shopify.com/components/tables/index-table)
example on polaris.shopify.com for how to properly configure
    -   `IndexTable.Row`
- Added support for setting the `indeterminate` value on the `selected`
prop
- Added the `selectionRange` prop to specify a range of other
consecutive, related rows selected when the row is selected
- Added the `rowType` prop to indicate the relationship or role of the
row's contents (defaults to `data`, `subheader` renders the row to look
and behave like the table header row)
Added support for setting accessibility attributes on `IndexTable.Cell`
    -   `IndexTable.Cell`
- Added the `as` prop to support rendering the cell as a `th` element if
it is serving as a subheading cell
- Added support for the `headers` attribute to manually associate all
headers when the cell is described by more than its column heading
- Added support for the `colSpan` attribute to specify the number of the
columns that the cell element should extend to
- Added support for the `scope` attribute to indicate whether the `th`
is a header for a column, row, or group of columns or rows


- [Shopify#10490](Shopify#10490)
[`863f15ff2`](Shopify@07246bc)
Thanks [@mrcthms](https://github.com/mrcthms)! - Add new
`IndexFiltersManager` for allowing disabling of Page Header actions when
in Filtering or EditingColumns mode


- [Shopify#10566](Shopify#10566)
[`9fed74317`](Shopify@3fb446f)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed a bug in
`Filters` where changes to the `appliedFilters` prop were not being
handled

### Patch Changes

- [Shopify#10404](Shopify#10404)
[`5acfcec04`](Shopify@5cdd787)
Thanks [@jesstelford](https://github.com/jesstelford)! - Scoped CSS
variables for non-responsive props on `Tooltip`, `RangeSlider`,
`ProgressBar`, and `HorizontalStack`.


- [Shopify#10582](Shopify#10582)
[`3efbc1b4e`](Shopify@d47089b)
Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed the focus states
of actions within the Page Header component


- [Shopify#10492](Shopify#10492)
[`d5ff72dec`](Shopify@8057862)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated Storybook
stories to be wrapped with an empty FrameContext.Provider

- Updated dependencies
\[[`fe1aac1b5`](Shopify@a4f7ed7),
[`790a001cd`](Shopify@be6914d),
[`63cf3ad24`](Shopify@d4e6bd4),
[`120e96eae`](Shopify@fe98b0b)]:
    -   @shopify/polaris-tokens@7.10.0

## @shopify/polaris-tokens@7.10.0

### Minor Changes

- [Shopify#10465](Shopify#10465)
[`fe1aac1b5`](Shopify@a4f7ed7)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
private primitive `colors`


- [Shopify#10477](Shopify#10477)
[`790a001cd`](Shopify@be6914d)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
semantic `color` tokens


- [Shopify#10600](Shopify#10600)
[`63cf3ad24`](Shopify@d4e6bd4)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added public
primitive and semantic `shadow` token scales

### Patch Changes

- [Shopify#10485](Shopify#10485)
[`120e96eae`](Shopify@fe98b0b)
Thanks [@lgriffee](https://github.com/lgriffee)! - Updated public
primitive `base` and `light-uplift` theme scales

## @shopify/polaris-migrator@0.22.5

### Patch Changes

- [Shopify#10575](Shopify#10575)
[`ea6b54284`](Shopify@9761c8a)
Thanks [@aveline](https://github.com/aveline)! - Handled `buttonFrom`
and `buttonsFrom` functions in `Button` migration

- Updated dependencies
\[[`fe1aac1b5`](Shopify@a4f7ed7),
[`790a001cd`](Shopify@be6914d),
[`63cf3ad24`](Shopify@d4e6bd4),
[`120e96eae`](Shopify@fe98b0b)]:
    -   @shopify/polaris-tokens@7.10.0
    -   @shopify/stylelint-polaris@14.0.5

## @shopify/stylelint-polaris@14.0.5

### Patch Changes

- Updated dependencies
\[[`fe1aac1b5`](Shopify@a4f7ed7),
[`790a001cd`](Shopify@be6914d),
[`63cf3ad24`](Shopify@d4e6bd4),
[`120e96eae`](Shopify@fe98b0b)]:
    -   @shopify/polaris-tokens@7.10.0

## polaris.shopify.com@0.57.8

### Patch Changes

- [Shopify#10605](Shopify#10605)
[`9748b0838`](Shopify@a21aca4)
Thanks [@laurkim](https://github.com/laurkim)! - Updated logic for
rendering `color` custom property previews in `TokenList`


- [Shopify#10573](Shopify#10573)
[`da09e0b8c`](Shopify@439fedc)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated copy url
to change browser url

- Updated dependencies
\[[`fe1aac1b5`](Shopify@a4f7ed7),
[`5acfcec04`](Shopify@5cdd787),
[`790a001cd`](Shopify@be6914d),
[`8be227e0c`](Shopify@b588f20),
[`63cf3ad24`](Shopify@d4e6bd4),
[`7be9c243a`](Shopify@4069237),
[`863f15ff2`](Shopify@07246bc),
[`3efbc1b4e`](Shopify@d47089b),
[`d5ff72dec`](Shopify@8057862),
[`120e96eae`](Shopify@fe98b0b),
[`9fed74317`](Shopify@3fb446f)]:
    -   @shopify/polaris-tokens@7.10.0
    -   @shopify/polaris@11.20.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@oksanashopify
[VF][Polaris] Update IndexTable Row to support indentation for nested…
7abcc49 
… child rows (Shopify#10599)

<!--
  ☝️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?

Resolves first acceptance criteria from
https://github.com/Shopify/web/issues/104243 - "IndexTable rows with a
rowType of child are indented to represent the nested structure".

Depends on Shopify#9445
Issue with IndexTable with Sub Headers does not have proper
background-color for unselectable table first-child cell will be fixed
in separate [PR.](Shopify#10960)
 

### WHAT is this pull request doing?

1. Adds New type `child` for a `rowType` to represent the nested
structure for child rows
2. Adds Styles (indentation) for child rows
3. Adds stories to tophat changes on different tables

**These changes will allow us to integrate design for new Variants card
and also will help other Polaris consumers visually distinct child rows
under the sub headers**
 
New Variants card Design: [Figma
](https://www.figma.com/file/PKcKNWig5d7yMoq4iR6nlH/%F0%9F%92%AF-250-Variants-UX?node-id=2835%3A82451&mode=dev)

Desktop:
<img width="284" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/66b01e51-d3a4-47b9-9771-cdf1b57f9ab4">

Mobile:
<img width="323" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/60f37202-bdac-4e44-ae18-52f048bf58ab">

How current snapshot looks on PDP new Variants Card:
<img width="668" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/7f70f98e-7501-44c0-9c82-03ecc5708e76">
[Spin with latest
snapshot](https://admin.web.oa-test-polaris-nested-rows.oksana-azarova.us.spin.dev/store/shop1/products/1)
[Draft PR with latest snapshot and child
rows](Shopify/web#109999)

Updated website examples and documentation:
<img width="1209" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/cf712738-ad55-4ec5-b895-e2ecab045250">

<img width="908" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/4a415f95-6135-4b06-8082-f6ab6a57e0b4">



<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩
I would recommend start reviewing from the last two stories, to
understand better our initial idea :)

**_Special test case to test UI changes for new Variants Card design_**
1.  Open Storybook:
<img width="785" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/0e3ae182-7566-49b8-a0f4-fb1998afc248">

4. Scroll to last two stories 
<img width="398" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/060144ea-30e6-414a-8d84-d5d236bacfd1">

5. See how Image and Name located in one cell. This is how currently new
Variants card is built
6. Test Desktop UI with `With Nested Rows With Thumbnails One Cell
Selectable` story
Desktop:
[Figma](https://www.figma.com/file/PKcKNWig5d7yMoq4iR6nlH/%F0%9F%92%AF-250-Variants-UX?node-id=4827%3A146409&mode=dev)

7. Test mobile version with `With Nested Rows With Thumbnails One Cell
Selectable` story. In Admin on PDP for single location store we switch
to unselectable table with thumbnails for mobile version on consumer
level. So that's why I created separate story for that UI
Mobile:
[Figma](https://www.figma.com/file/PKcKNWig5d7yMoq4iR6nlH/%F0%9F%92%AF-250-Variants-UX?node-id=4827%3A149172&mode=dev)

8. See how current changes work on web:
[Spin with latest
snapshot](https://admin.web.oa-test-polaris-nested-rows.oksana-azarova.us.spin.dev/store/shop1/products/1)
Shopify/web#109999


**General test case:**
1. Open Storybook:
<img width="785" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/6b269773-3c58-471a-8c4b-2a2c53a809d4">

2. Go through each story related to nested child rows:
<img width="389" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/108d174d-c164-4774-bae2-5a53bcb8af3a">

3. Check nested row in the following stories (select, hover rows):

- With Row Status
- With Zebra Striping



5. Test different responsive dimensions.


🖥 [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)

 
### 🎩 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
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@bernardojoaogarcia bernardojoaogarcia Awaiting requested review from bernardojoaogarcia

@tjonx tjonx Awaiting requested review from tjonx

@jesstelford jesstelford Awaiting requested review from jesstelford

@ksvihar ksvihar Awaiting requested review from ksvihar

@oliviatruong oliviatruong Awaiting requested review from oliviatruong

3 more reviewers

@chloerice chloerice chloerice approved these changes

@sarahill sarahill sarahill approved these changes

@sam-b-rose sam-b-rose sam-b-rose approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees

@m4thieulavoie m4thieulavoie

Labels
2023 Contribution tracking for 2023 Component Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023" 🤖Skip Comment Check Skip the migrator comment CI check
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@m4thieulavoie @jesstelford @chloerice @oksanashopify @sarahill @sam-b-rose