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

fixed background-color for unselectable tabel first-child cell #10960

Merged
merged 1 commit into from
Oct 13, 2023
Merged

fixed background-color for unselectable tabel first-child cell #10960

merged 1 commit into from
Oct 13, 2023

Conversation

oksanashopify
Copy link
Contributor

@oksanashopify oksanashopify commented Oct 11, 2023 •
edited
Loading

WHY are these changes introduced?

After @shopify/polaris@12.0.0 has been shipped I noticed that on main Polaris branch IndexTable with Sub Headers does not have proper background-color for unselectable table first-child cell.
image

WHAT is this pull request doing?

I added new story "With Sub Headers Non Selectable" and fixed styles in this PR

How it was before:
image

How it looks now:
image

Storybook link

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx: 
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}

🎩 checklist

@oksanashopify oksanashopify marked this pull request as ready for review October 11, 2023 16:50
@oksanashopify oksanashopify self-assigned this Oct 11, 2023
@oksanashopify oksanashopify marked this pull request as draft October 11, 2023 17:03
chloerice
chloerice reviewed Oct 11, 2023
View reviewed changes
chloerice
chloerice approved these changes Oct 11, 2023
View reviewed changes
Copy link
Member

@chloerice chloerice left a comment

Choose a reason for hiding this comment

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

Thanks @oksanashopify! 🙌🏽

m4thieulavoie
m4thieulavoie approved these changes Oct 11, 2023
View reviewed changes
Copy link
Contributor

@m4thieulavoie m4thieulavoie left a comment

Choose a reason for hiding this comment

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

🚀

@oksanashopify oksanashopify marked this pull request as ready for review October 11, 2023 18:25
@oksanashopify oksanashopify mentioned this pull request Oct 12, 2023
Merged
5 tasks
@oksanashopify
Copy link
Contributor Author

Hi @m4thieulavoie ! Thank you for reviewing my PR! Could you suggest me what I can do with failing CI pipelines, please, they seems to be not related to my changes. Thank you!

chloerice
chloerice reviewed Oct 13, 2023
View reviewed changes
@chloerice chloerice added Contribution Component Bug Something is broken and not working as intended in the system. and removed 🤖Skip Major Check labels Oct 13, 2023
@oksanashopify oksanashopify force-pushed the oa-fix-subheader-cell-background branch 2 times, most recently from 342f9a4 to 4891985 Compare October 13, 2023 15:13
@oksanashopify
fixed bg color for non selectable first child cell and hovering disab…
bc06e12 
…led rows in an unselectable table

fixed disabled rows in an unselectable table gives the first cell a hover state

removed migrator comment DO NOT COPY

fixed lint issues

fixed one of lint issues

specified changeset

disabled lines for stylelint

added fix for stylelint rule, line 787

added missing stylelint rules

changed PR to target patch

refactored back styles nesting under stylelint rule

moved stylelint rule

added stylelint rule
@oksanashopify oksanashopify force-pushed the oa-fix-subheader-cell-background branch from a953424 to bc06e12 Compare October 13, 2023 17:30
@oksanashopify
Copy link
Contributor Author

/shipit

@oksanashopify oksanashopify merged commit d7e4aa7 into main Oct 13, 2023
@oksanashopify oksanashopify deleted the oa-fix-subheader-cell-background branch October 13, 2023 18:31
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Oct 13, 2023
Merged
chloerice pushed a commit that referenced this pull request Oct 25, 2023
@shopify-github-actions-access @github-actions
Version Packages (#10967)
bb5e37e 
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-migrator@0.26.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](f1d256f)]:
    -   @shopify/polaris-tokens@8.0.1
    -   @shopify/stylelint-polaris@15.0.1

## @shopify/polaris@12.0.1

### Patch Changes

- [#10792](#10792)
[`2980e9d26`](2980e9d)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [#10960](#10960)
[`d7e4aa7f9`](d7e4aa7)
Thanks [@oksanashopify](https://github.com/oksanashopify)! - fixed
background-color for unselectable tabel first-child cell


- [#10975](#10975)
[`00952a33a`](00952a3)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed loading
button spinner color


- [#10935](#10935)
[`8568e5141`](8568e51)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed an issue
with the `primary` variant styles conflicting with the `tertiary`
variant in `Button`


- [#10934](#10934)
[`de419ba2b`](de419ba)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed disabled
state for `monochromePlain` variant in `Button`


- [#10993](#10993)
[`fb508b91c`](fb508b9)
Thanks [@FCalabria](https://github.com/FCalabria)! - Fixed incompatible
type between IndexTable and useIndexResourceState


- [#10998](#10998)
[`bb310cd3a`](bb310cd)
Thanks [@alisterdev](https://github.com/alisterdev)! - Update
SkeletonThumbnail size values to correspond to Thumbnail


- [#10999](#10999)
[`e34a4db32`](e34a4db)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated
`Checkbox` icon to use tokens vs hard coded value


- [#10910](#10910)
[`65998488f`](6599848)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed negative
margin of `segmented` `ButtonGroup.Item` when child `Button` is
`primary`


- [#11028](#11028)
[`9fb367afd`](9fb367a)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `buttonFrom`
utility function not mapping boolean variant properties to `variant` and
`tone`

- Updated dependencies
\[[`f1d256fce`](f1d256f)]:
    -   @shopify/polaris-tokens@8.0.1

## @shopify/polaris-tokens@8.0.1

### Patch Changes

- [#10976](#10976)
[`f1d256fce`](f1d256f)
Thanks [@sarahill](https://github.com/sarahill)! - Added descriptions to
color tokens

## @shopify/stylelint-polaris@15.0.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](f1d256f)]:
    -   @shopify/polaris-tokens@8.0.1

## polaris.shopify.com@0.59.0

### Minor Changes

- [#11030](#11030)
[`f55a84ce7`](f55a84c)
Thanks [@lgriffee](https://github.com/lgriffee)! - Update
stylelint-polaris version matchups chart

### Patch Changes

- [#10792](#10792)
[`2980e9d26`](2980e9d)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [#10974](#10974)
[`2b3b61069`](2b3b610)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Removed autoplay
from all videos on Motion design guidance pages


- [#10925](#10925)
[`4590fd828`](4590fd8)
Thanks [@MohammedEsafi](https://github.com/MohammedEsafi)! - Improved
the visibility of shadows in Dark Mode for token previews

- Updated dependencies
\[[`2980e9d26`](2980e9d),
[`d7e4aa7f9`](d7e4aa7),
[`00952a33a`](00952a3),
[`8568e5141`](8568e51),
[`de419ba2b`](de419ba),
[`fb508b91c`](fb508b9),
[`bb310cd3a`](bb310cd),
[`e34a4db32`](e34a4db),
[`f1d256fce`](f1d256f),
[`65998488f`](6599848),
[`9fb367afd`](9fb367a)]:
    -   @shopify/polaris@12.0.1
    -   @shopify/polaris-tokens@8.0.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
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
@oksanashopify
fixed background-color for unselectable tabel first-child cell (Shopi…
78b5348 
…fy#10960)

### WHY are these changes introduced?
After @shopify/polaris@12.0.0 [has been
shipped](https://shopify.slack.com/archives/C4Y8N30KD/p1696832186682759)
I noticed that on `main` Polaris branch IndexTable with Sub Headers does
not have proper `background-color` for unselectable table first-child
cell.
<img width="1498" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/e9d0a920-c74b-4b1f-baf6-204d6d8f7144">



### WHAT is this pull request doing?

I added new story "With Sub Headers Non Selectable" and fixed styles in
this PR

How it was before:

![image](https://github.com/Shopify/polaris/assets/104942025/3a69331f-3b67-49aa-8ea6-bf4bbd43b1f2)


How it looks now:
<img width="1501" alt="image"
src="https://github.com/Shopify/polaris/assets/104942025/0e315958-467d-4643-84a4-dda88b7cff2a">

[Storybook
link](https://5d559397bae39100201eedc1-kabdrxeayi.chromatic.com/?path=/story/all-components-indextable--with-sub-headers-non-selectable)


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

### 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)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] N/A Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] N/A Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] N/A Updated the component's `README.md` with documentation changes
- [x] N/A [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
@shopify-github-actions-access @github-actions
Version Packages (Shopify#10967)
2a5527a 
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-migrator@0.26.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](Shopify@79c5c6a)]:
    -   @shopify/polaris-tokens@8.0.1
    -   @shopify/stylelint-polaris@15.0.1

## @shopify/polaris@12.0.1

### Patch Changes

- [Shopify#10792](Shopify#10792)
[`2980e9d26`](Shopify@7b237af)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [Shopify#10960](Shopify#10960)
[`d7e4aa7f9`](Shopify@78b5348)
Thanks [@oksanashopify](https://github.com/oksanashopify)! - fixed
background-color for unselectable tabel first-child cell


- [Shopify#10975](Shopify#10975)
[`00952a33a`](Shopify@818bfeb)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed loading
button spinner color


- [Shopify#10935](Shopify#10935)
[`8568e5141`](Shopify@c483172)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed an issue
with the `primary` variant styles conflicting with the `tertiary`
variant in `Button`


- [Shopify#10934](Shopify#10934)
[`de419ba2b`](Shopify@d095f27)
Thanks [@gazjones00](https://github.com/gazjones00)! - Fixed disabled
state for `monochromePlain` variant in `Button`


- [Shopify#10993](Shopify#10993)
[`fb508b91c`](Shopify@922f3fd)
Thanks [@FCalabria](https://github.com/FCalabria)! - Fixed incompatible
type between IndexTable and useIndexResourceState


- [Shopify#10998](Shopify#10998)
[`bb310cd3a`](Shopify@e9cee43)
Thanks [@alisterdev](https://github.com/alisterdev)! - Update
SkeletonThumbnail size values to correspond to Thumbnail


- [Shopify#10999](Shopify#10999)
[`e34a4db32`](Shopify@50c5fc8)
Thanks [@kyledurand](https://github.com/kyledurand)! - Updated
`Checkbox` icon to use tokens vs hard coded value


- [Shopify#10910](Shopify#10910)
[`65998488f`](Shopify@bcda058)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed negative
margin of `segmented` `ButtonGroup.Item` when child `Button` is
`primary`


- [Shopify#11028](Shopify#11028)
[`9fb367afd`](Shopify@06d61a1)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `buttonFrom`
utility function not mapping boolean variant properties to `variant` and
`tone`

- Updated dependencies
\[[`f1d256fce`](Shopify@79c5c6a)]:
    -   @shopify/polaris-tokens@8.0.1

## @shopify/polaris-tokens@8.0.1

### Patch Changes

- [Shopify#10976](Shopify#10976)
[`f1d256fce`](Shopify@79c5c6a)
Thanks [@sarahill](https://github.com/sarahill)! - Added descriptions to
color tokens

## @shopify/stylelint-polaris@15.0.1

### Patch Changes

- Updated dependencies
\[[`f1d256fce`](Shopify@79c5c6a)]:
    -   @shopify/polaris-tokens@8.0.1

## polaris.shopify.com@0.59.0

### Minor Changes

- [Shopify#11030](Shopify#11030)
[`f55a84ce7`](Shopify@5e9235a)
Thanks [@lgriffee](https://github.com/lgriffee)! - Update
stylelint-polaris version matchups chart

### Patch Changes

- [Shopify#10792](Shopify#10792)
[`2980e9d26`](Shopify@7b237af)
Thanks [@SMAKSS](https://github.com/SMAKSS)! - Fixed typos and
`editOnGithubUrl` in docs


- [Shopify#10974](Shopify#10974)
[`2b3b61069`](Shopify@9dc0ea7)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Removed autoplay
from all videos on Motion design guidance pages


- [Shopify#10925](Shopify#10925)
[`4590fd828`](Shopify@5ca919a)
Thanks [@MohammedEsafi](https://github.com/MohammedEsafi)! - Improved
the visibility of shadows in Dark Mode for token previews

- Updated dependencies
\[[`2980e9d26`](Shopify@7b237af),
[`d7e4aa7f9`](Shopify@78b5348),
[`00952a33a`](Shopify@818bfeb),
[`8568e5141`](Shopify@c483172),
[`de419ba2b`](Shopify@d095f27),
[`fb508b91c`](Shopify@922f3fd),
[`bb310cd3a`](Shopify@e9cee43),
[`e34a4db32`](Shopify@50c5fc8),
[`f1d256fce`](Shopify@79c5c6a),
[`65998488f`](Shopify@bcda058),
[`9fb367afd`](Shopify@06d61a1)]:
    -   @shopify/polaris@12.0.1
    -   @shopify/polaris-tokens@8.0.1

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
2 more reviewers

@chloerice chloerice chloerice approved these changes

@m4thieulavoie m4thieulavoie m4thieulavoie approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees

@oksanashopify oksanashopify

Labels
2023 Contribution tracking for 2023 Bug Something is broken and not working as intended in the system. Component Contribution Tracking contribution in conjuction with year and type, e.g., "Component" + "Contribution" + "2023"
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@oksanashopify @chloerice @m4thieulavoie