[IndexTable.Row] Fix `tone` interaction states; remove `subdued` and `status` #10705

chloerice · 2023-09-26T23:54:18Z

WHY are these changes introduced?

This PR removes the deprecated status and subdued props. It also fixes the missing and buggy interaction states when IndexTable.Row has a tone.

Before	After
row-tone-states-before.mp4	row-tone-states-after.mp4

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

chloerice · 2023-10-02T23:25:25Z

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

@@ -825,60 +858,6 @@ $loading-panel-height: 53px;
      z-index: auto;
    }
  }
-
-  // stylelint-disable selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY


Styling the sticky cell down here causes unwanted specificity that requires unnecessary redundancy. Added :last-child to the decls for the various interaction states.

polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md

polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx

…to-v12.md Co-authored-by: Jess Telford <jess.telford@shopify.com>

…ow.test.tsx Co-authored-by: Jess Telford <jess.telford@shopify.com>

@chloerice

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 next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ # Releases ## @shopify/polaris@12.0.0-beta.2 ### Major Changes - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` ### Minor Changes - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 ## @shopify/polaris-tokens@8.0.0-beta.1 ### Major Changes - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values ### Minor Changes - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer ## @shopify/stylelint-polaris@14.1.2-beta.1 ### Patch Changes - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

…`status` (#10705)  ### WHY are these changes introduced? This PR removes the deprecated `status` and `subdued` props. It also fixes the missing and buggy interaction states when `IndexTable.Row` has a `tone`. | Before | After | |--------|--------| |<video src="https://github.com/Shopify/polaris/assets/18447883/2f2e2f76-adbc-4bed-a18b-c09a23b7542e"/>|<video src="https://github.com/Shopify/polaris/assets/18447883/4b097d18-4c0c-4fec-b561-9fc9ba2c55b9"/>| ### 🎩 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) - [ ] 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: Jess Telford <jess.telford@shopify.com>

@chloerice

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 next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

…`status` (#10705)  ### WHY are these changes introduced? This PR removes the deprecated `status` and `subdued` props. It also fixes the missing and buggy interaction states when `IndexTable.Row` has a `tone`. | Before | After | |--------|--------| |<video src="https://github.com/Shopify/polaris/assets/18447883/2f2e2f76-adbc-4bed-a18b-c09a23b7542e"/>|<video src="https://github.com/Shopify/polaris/assets/18447883/4b097d18-4c0c-4fec-b561-9fc9ba2c55b9"/>| ### 🎩 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) - [ ] 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: Jess Telford <jess.telford@shopify.com>

@chloerice

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 next, this PR will be updated. ⚠️

⚠️

⚠️ `next` is currently in **pre mode** so this branch has prereleases rather than normal releases. If you want to exit prereleases, run `changeset pre exit` on `next`. ⚠️

⚠️

⚠️ - [#10705](#10705) [`c7c2312f7`](c7c2312) Thanks [@chloerice](https://github.com/chloerice)! - - Removed the `subdued` and `status` props from `IndexTable.Row`. Use `tone` instead. - [#10778](#10778) [`b126f64e6`](b126f64) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `shadow` custom properties from v11 to v12 - [#10762](#10762) [`1ef71164c`](1ef7116) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `font` custom properties from v11 to v12 - [#10741](#10741) [`2c2bb0e09`](2c2bb0e) Thanks [@laurkim](https://github.com/laurkim)! - - Migrated `border` custom properties from v11 to v12 - Removed backwards compatibility for v11 border tokens on `Tooltip` component `BorderRadius` type - Updated JSDoc prop type descriptions to include updated `border` custom properties on `Divider` and `Tooltip` components - [#10744](#10744) [`a4f5e7df3`](a4f5e7d) Thanks [@mrcthms](https://github.com/mrcthms)! - Removed deprecated `disable1Password` prop from `TextField`. - [#10727](#10727) [`179b481d7`](179b481) Thanks [@laurkim](https://github.com/laurkim)! - Migrated `space` custom properties from v11 to v12 Removed backwards compatibility for v11 border tokens on `Tooltip` component `Padding` type Updated JSDoc prop type descriptions to include updated `padding` custom properties on `Box` component - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - [#10745](#10745) [`a4205eee1`](a4205ee) Thanks [@mrcthms](https://github.com/mrcthms)! - [IndexFilters] Remove IndexFiltersManager in AppProvider - [#10773](#10773) [`f6bc29ade`](f6bc29a) Thanks [@laurkim](https://github.com/laurkim)! - Removed support for `headingXs` and `heading4xl` variants and replaced usage with `headingSm` and `heading3xl` - [#10722](#10722) [`14a94967d`](14a9496) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `emphasis` and `text` tones on `Icon` and migrated `primary` and `subdued` tone color tokens - [#10788](#10788) [`82f10e830`](82f10e8) Thanks [@mrcthms](https://github.com/mrcthms)! - Deprecated the IndexFiltersManager component - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 - [#10760](#10760) [`2a467249f`](2a46724) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `shadow` token values - [#10801](#10801) [`2cdc59f88`](2cdc59f) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Deprecated a collection of types, utils, and JSON exports - [#10673](#10673) [`08aaf11ec`](08aaf11) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated `font-size` and `font-weight` token values - [#10669](#10669) [`794d1f5e4`](794d1f5) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `border-radius` semantic layer - Updated dependencies \[[`2a467249f`](2a46724), [`2cdc59f88`](2cdc59f), [`794d1f5e4`](794d1f5), [`08aaf11ec`](08aaf11)]: - @shopify/polaris-tokens@8.0.0-beta.1 --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Sophie Schneider <thesophieschneider@gmail.com>

pamelahicks · 2023-10-16T17:17:23Z

/snapit

…`status` (Shopify#10705)  ### WHY are these changes introduced? This PR removes the deprecated `status` and `subdued` props. It also fixes the missing and buggy interaction states when `IndexTable.Row` has a `tone`. | Before | After | |--------|--------| |<video src="https://github.com/Shopify/polaris/assets/18447883/2f2e2f76-adbc-4bed-a18b-c09a23b7542e"/>|<video src="https://github.com/Shopify/polaris/assets/18447883/4b097d18-4c0c-4fec-b561-9fc9ba2c55b9"/>| ### 🎩 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) - [ ] 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: Jess Telford <jess.telford@shopify.com>

chloerice added the #gsd:36579 label Sep 26, 2023

chloerice force-pushed the fix-status-row-interaction-states branch 4 times, most recently from d7be516 to 03cbf89 Compare September 27, 2023 20:15

chloerice changed the base branch from main to next September 27, 2023 20:15

chloerice added 🤖Skip Major Check next Track all things related to next major release 🤖Skip Comment Check Skip the migrator comment CI check labels Sep 27, 2023

chloerice force-pushed the fix-status-row-interaction-states branch from 03cbf89 to 8865ad0 Compare September 28, 2023 16:47

chloerice marked this pull request as ready for review September 28, 2023 17:28

chloerice requested review from a team as code owners September 28, 2023 17:28

chloerice requested review from kyledurand and sophschneider September 28, 2023 17:40

chloerice changed the title ~~[IndexTable] Fix interaction states of Row with status~~ [IndexTable] Fix tone interaction states; remove subdued and status props Sep 28, 2023

chloerice changed the title ~~[IndexTable] Fix tone interaction states; remove subdued and status props~~ [IndexTable.Row] Fix tone interaction states; remove subdued and status props Sep 28, 2023

chloerice changed the title ~~[IndexTable.Row] Fix tone interaction states; remove subdued and status props~~ [IndexTable.Row] Fix tone interaction states; remove subdued and status Sep 28, 2023

chloerice force-pushed the fix-status-row-interaction-states branch 2 times, most recently from 1fb9e0b to 404c3a6 Compare September 29, 2023 18:21

chloerice added 9 commits October 2, 2023 17:11

[IndexTable] Fix Row with status interaction states

5a37b8b

[IndexTable.Row] Remove subdued and status props

9dd003b

edit change log entry

96b2331

add tests

a589ec7

Update tone prop description

157f92e

rebase fixes

87dc9bc

update prop use in story

6e3f2dc

Add migration steps for IndexTable.Row

0f5ea0f

more story cleanup

82e2275

chloerice force-pushed the fix-status-row-interaction-states branch from 9982dc0 to 29084c8 Compare October 2, 2023 21:15

post rebase

e68ae74

chloerice force-pushed the fix-status-row-interaction-states branch from 29084c8 to e68ae74 Compare October 2, 2023 23:10

update a11y section to refer to renamed prop

32c6b6d

chloerice force-pushed the fix-status-row-interaction-states branch from 0132b2b to 32c6b6d Compare October 2, 2023 23:21

chloerice commented Oct 2, 2023

View reviewed changes

jesstelford reviewed Oct 3, 2023

View reviewed changes

polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.md Outdated Show resolved Hide resolved

jesstelford reviewed Oct 3, 2023

View reviewed changes

polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx Outdated Show resolved Hide resolved

jesstelford reviewed Oct 3, 2023

View reviewed changes

polaris-react/src/components/IndexTable/components/Row/tests/Row.test.tsx Outdated Show resolved Hide resolved

chloerice and others added 3 commits October 3, 2023 11:39

Update polaris.shopify.com/content/version-guides/migrating-from-v11-…

3921d7b

…to-v12.md Co-authored-by: Jess Telford <jess.telford@shopify.com>

Update polaris-react/src/components/IndexTable/components/Row/tests/R…

3afd187

…ow.test.tsx Co-authored-by: Jess Telford <jess.telford@shopify.com>

Update polaris-react/src/components/IndexTable/components/Row/tests/R…

caea22d

…ow.test.tsx Co-authored-by: Jess Telford <jess.telford@shopify.com>

chloerice requested a review from a team October 3, 2023 16:07

Add diff to What's new page

e8c3367

chloerice force-pushed the fix-status-row-interaction-states branch from 9606d8a to e8c3367 Compare October 3, 2023 18:04

sophschneider approved these changes Oct 3, 2023

View reviewed changes

chloerice merged commit c7c2312 into next Oct 3, 2023
12 checks passed

chloerice deleted the fix-status-row-interaction-states branch October 3, 2023 18:28

shopify-github-actions-access bot mentioned this pull request Oct 3, 2023

Version Packages (beta) #10718

Merged

shopify-github-actions-access bot mentioned this pull request Oct 9, 2023

Version Packages #10931

Merged

fatimasajadi mentioned this pull request Nov 6, 2023

[Polaris] Fix hover state for Indextable without checkboxes #11118

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[IndexTable.Row] Fix `tone` interaction states; remove `subdued` and `status` #10705

[IndexTable.Row] Fix `tone` interaction states; remove `subdued` and `status` #10705

chloerice commented Sep 26, 2023 •

edited

Loading

chloerice Oct 2, 2023 •

edited

Loading

pamelahicks commented Oct 16, 2023

[IndexTable.Row] Fix tone interaction states; remove subdued and status #10705

[IndexTable.Row] Fix tone interaction states; remove subdued and status #10705

Conversation

chloerice commented Sep 26, 2023 • edited Loading

WHY are these changes introduced?

🎩 checklist

chloerice Oct 2, 2023 • edited Loading

Choose a reason for hiding this comment

pamelahicks commented Oct 16, 2023

[IndexTable.Row] Fix `tone` interaction states; remove `subdued` and `status` #10705

[IndexTable.Row] Fix `tone` interaction states; remove `subdued` and `status` #10705

chloerice commented Sep 26, 2023 •

edited

Loading

chloerice Oct 2, 2023 •

edited

Loading