[ResourceItem] Fix broken focus ring styles #10268

laurkim · 2023-08-29T17:51:53Z

WHY are these changes introduced?

Resolves #10175.

Focus ring was broken on ResourceItem prior to uplift and was flagged during se23 clean up.

WHAT is this pull request doing?

Fixes minor issue on ResourceList.stories.tsx where LegacyCard was not using the correct border radius on xs screens (should match IndexTable where border-radius is set to 0 for xs screens).

Fixes focus ring styles by opting to use offset property as opposed to the focus-ring mixin.

ResourceItem focus state — before

ResourceItem focus state — after

How to 🎩

ResourceItem Storybook
ResourceItem Prod Storybook

BulkActions Storybook
BulkActions Prod Storybook

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 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

laurkim · 2023-08-29T17:55:31Z

.changeset/light-seahorses-sit.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch


Since this bug existed prior to se23, I've added a changeset to track the fix.

laurkim · 2023-08-29T17:58:21Z

polaris-react/src/components/ResourceItem/ResourceItem.stories.tsx

@@ -78,6 +78,22 @@ export function SelectableWithMedia() {
            name: 'Yi So-Yeon',
            location: 'Gwangju, South Korea',
          },
+          {


Added more items to test focus ring border styles for first/second/last children for ResourceItem.

laurkim · 2023-08-29T18:05:12Z

polaris-react/src/components/ResourceList/ResourceList.stories.tsx

@@ -20,7 +20,7 @@ export default {

 export function Default() {
  return (
-    <Card padding="0">
+    <Card padding="0" roundedAbove="sm">


Added roundedAbove="sm" prop to ResourceList stories to match styling on IndexTable.

laurkim · 2023-08-30T12:18:44Z

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

@@ -120,38 +120,59 @@
    @include item-separator;
  }

-  &:not(.hasBulkActions):not(.selectMode) {


Refactored this logic since we're no longer relying on ::after and moved hasBulkActions focus ring styles to inside .focused class.

laurkim · 2023-08-30T12:21:47Z

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

+        }
+
+        // stylelint-disable-next-line -- set border radius for last selectable item to match BulkActions border radius
+        &.hasBulkActions {


Verified refactoring this displays proper focus on selectable ResourceItems but resets border bottom radius to 0 specifically to match styling when BulkActions are rendered:

sam-b-rose

Awesome refactor and clean up @laurkim 💯 looks great

### WHY are these changes introduced? Resolves #10175. Focus ring was broken on ResourceItem prior to uplift and was flagged during se23 clean up. ### WHAT is this pull request doing? Fixes minor issue on ResourceList.stories.tsx where LegacyCard was not using the correct border radius on xs screens (should match IndexTable where border-radius is set to `0` for xs screens). Fixes focus ring styles by opting to use `offset` property as opposed to the `focus-ring` mixin. <details> <summary>ResourceItem focus state — before</summary> <img src="https://github.com/Shopify/polaris/assets/26749317/0f2fc337-34d5-483d-b62b-df907277ff22" alt="ResourceItem focus state — before"> </details> <details> <summary>ResourceItem focus state — after</summary> <img src="https://github.com/Shopify/polaris/assets/26749317/383eb27e-0c2b-40d4-ab90-52205312ce73" alt="ResourceItem focus state — after"> </details> ### How to 🎩 [ResourceItem Storybook](https://5d559397bae39100201eedc1-egkosgfazl.chromatic.com/?path=/story/all-components-resourceitem--default) [ResourceItem Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-resourceitem--default&globals=polarisSummerEditions2023:true) [BulkActions Storybook](https://5d559397bae39100201eedc1-egkosgfazl.chromatic.com/?path=/story/all-components-resourcelist--with-bulk-actions) [BulkActions Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-resourcelist--with-bulk-actions&globals=polarisSummerEditions2023:true) 🖥 [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) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

@aveline

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.1 ### Major Changes - [#10122](#10122) [`43b42aefed`](43b42ae) Thanks [@aveline](https://github.com/aveline)! - Removed `shape` prop on `Avatar` component - [#10270](#10270) [`b9bcaef41`](b9bcaef) Thanks [@kyledurand](https://github.com/kyledurand)! - Changed `spacing` prop to `gap` on `List` and `DescriptionList` - [#9997](#9997) [`b59fc9e27`](b59fc9e) Thanks [@yurm04](https://github.com/yurm04)! - [ButtonGroup] Removed `segmented` boolean prop and replaced with `variant`. Replaced `spacing` prop with `gap` - [#10100](#10100) [`4c7b2d4858`](4c7b2d4) Thanks [@kyledurand](https://github.com/kyledurand)! - Updated `borderRadius` props to match web spec - [#10051](#10051) [`69edd97ceb`](69edd97) Thanks [@aveline](https://github.com/aveline)! - Renamed `color` prop to `tone` for `ProgressBar` component - [#10182](#10182) [`e814c0ee1a`](e814c0e) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed connectedDislosure prop on button - [#10283](#10283) [`42ee9f407`](42ee9f4) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Renamed `size` prop values for the Avatar component. See the following table for the new prop mappings. | Before | After | | ------------------------- | ----------- | | `size="extraSmall"` | `size="xs"` | | `size="small"` | `size="sm"` | | `size="medium"` | `size="md"` | | `size="large"` | `size="lg"` | | `size="xl-experimental"` | `size="xl"` | | `size="2xl-experimental"` | `size="xl"` | - [#10232](#10232) [`eb2c2035c`](eb2c203) Thanks [@laurkim](https://github.com/laurkim)! - Removed `divider` prop from `Page` component - [#10271](#10271) [`1125087b5`](1125087) Thanks [@kyledurand](https://github.com/kyledurand)! - Removed deprecated additionalNavigation prop on Page Header - [#10164](#10164) [`af9f264b9a`](af9f264) Thanks [@aveline](https://github.com/aveline)! - Renamed `destructive` prop to `tone` for `Button` component - [#10261](#10261) [`abeef7ad0`](abeef7a) Thanks [@kyledurand](https://github.com/kyledurand)! - Replaced `small`, `large`, and `fullScreen` props with `size` prop - [#10206](#10206) [`dad09bde9`](dad09bd) Thanks [@kyledurand](https://github.com/kyledurand)! - Changed `status` prop on `Banner` to `tone` - [#10220](#10220) [`2b0cdb2fbf`](2b0cdb2) Thanks [@kyledurand](https://github.com/kyledurand)! - Changed `color` prop on `Icon` to `tone` - [#10036](#10036) [`359614cf83`](359614c) Thanks [@kyledurand](https://github.com/kyledurand)! - Replaced `borderless` prop with `variant` on TextField Migration: `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="TextField" --from="borderless" --to="variant" --newValue="borderless"` - [#10635](#10635) [`340e36e7d`](340e36e) Thanks [@laurkim](https://github.com/laurkim)! - Removed `polarisSummerEditions2023` feature flag from AppProvider context - [#10090](#10090) [`4caed28a77`](4caed28) Thanks [@aveline](https://github.com/aveline)! - Consolidated boolean `Button` props into `variant` prop - [#10041](#10041) [`8f927f7622`](8f927f7) Thanks [@kyledurand](https://github.com/kyledurand)! - Replaced boolean props: `secondary`, `fullWidth`, `oneHalf`, `oneThird` on Layout.Section with `variant` - [#10266](#10266) [`22a51eae2`](22a51ea) Thanks [@kyledurand](https://github.com/kyledurand)! - Renamed `color` prop on Text to `tone` - [#9993](#9993) [`66f5c8df3e`](66f5c8d) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Removed Summer Editions experimental styles and code for the following components: `AppProvider`, `Avatar`, `AccountConnection`, `ActionList`, `ActionMenu`, `Autocomplete`, `Badge`, `Banner`, `Breadcrumbs`, `BulkActions`, `Button`, `ButtonGroup`, `CalloutCard`, `Card`, `CheckableButton`, `Checkbox`, `Choice`, `Connected`, `DataTable`, `DatePicker`, `DropZone`, `EmptyState`, `Filters`, `FormLayout`, `Frame`, `FullscreenBar`, `IndexFilters`, `IndexTable`, `InlineError`, `KeyboardKey`, `Labelled`, `Layout`, `LegacyCard`, `LegacyFilters`, `LegacyTabs`, `Link`, `List`, `Listbox`, `MediaCard`, `Modal`, `Navigation`, `OptionList`, `Page`, `PageActions`, `Pagination`, `Popover`, `ProgressBar`, `RadioButton`, `ResourceItem`, `ResourceList`, `Select`, `SettingAction`, `ShadowBevel`, `SkeletonPage`, `SkeletonThumbnail`, `Spinner`, `Tabs`, `Tag`, `Text`, `TextField`, `Thumbnail`, `TooltipOverlay`, `TopBar`, and `VideoThumbnail` - [#10232](#10232) [`eb2c2035c`](eb2c203) Thanks [@laurkim](https://github.com/laurkim)! - Removed `optionRole` prop from `OptionList` component ### Minor Changes - [#10238](#10238) [`b17d23d69`](b17d23d) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Add a search field to filter ActionList that have more than 10 items ### Patch Changes - [#10228](#10228) [`e18ca907e`](e18ca90) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - `Filters` Remove unused disabled states in `FilterPill` - [#10268](#10268) [`dbe3d9ece`](dbe3d9e) Thanks [@laurkim](https://github.com/laurkim)! - Fixed broken focus ring styles on `ResourceItem` component - [#10238](#10238) [`b17d23d69`](b17d23d) Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Ensure Avatar has no background color if an source prop is passed in to allow for transparent images - [#10230](#10230) [`a573e55d0`](a573e55) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - `IndexFilter` remove custom `FilterButton` in favor of directly invoking the Polaris `Button` component. - Updated dependencies \[[`86d4040c0`](86d4040)]: - @shopify/polaris-tokens@7.13.0-beta.0 ## @shopify/polaris-tokens@7.13.0-beta.0 ### Minor Changes - [#10382](#10382) [`86d4040c0`](86d4040) Thanks [@laurkim](https://github.com/laurkim)! - Renamed `ThemeVariant` to `Theme` and exposed `Theme` type ## @shopify/stylelint-polaris@14.1.2-beta.0 ### Patch Changes - Updated dependencies \[[`86d4040c0`](86d4040)]: - @shopify/polaris-tokens@7.13.0-beta.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

### WHY are these changes introduced? Resolves Shopify#10175. Focus ring was broken on ResourceItem prior to uplift and was flagged during se23 clean up. ### WHAT is this pull request doing? Fixes minor issue on ResourceList.stories.tsx where LegacyCard was not using the correct border radius on xs screens (should match IndexTable where border-radius is set to `0` for xs screens). Fixes focus ring styles by opting to use `offset` property as opposed to the `focus-ring` mixin. <details> <summary>ResourceItem focus state — before</summary> <img src="https://github.com/Shopify/polaris/assets/26749317/0f2fc337-34d5-483d-b62b-df907277ff22" alt="ResourceItem focus state — before"> </details> <details> <summary>ResourceItem focus state — after</summary> <img src="https://github.com/Shopify/polaris/assets/26749317/383eb27e-0c2b-40d4-ab90-52205312ce73" alt="ResourceItem focus state — after"> </details> ### How to 🎩 [ResourceItem Storybook](https://5d559397bae39100201eedc1-egkosgfazl.chromatic.com/?path=/story/all-components-resourceitem--default) [ResourceItem Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-resourceitem--default&globals=polarisSummerEditions2023:true) [BulkActions Storybook](https://5d559397bae39100201eedc1-egkosgfazl.chromatic.com/?path=/story/all-components-resourcelist--with-bulk-actions) [BulkActions Prod Storybook](https://storybook.polaris.shopify.com/?path=/story/all-components-resourcelist--with-bulk-actions&globals=polarisSummerEditions2023:true) 🖥 [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) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide

laurkim added 3 commits August 29, 2023 13:43

[ResourceList] Fix border radius for xs screens in stories

8717c60

[ResourceItem] Update story with more list items

f91f9cd

[ResourceItem] Fix broken focus ring styles

777e296

laurkim force-pushed the lo/fix-resource-item-focus branch from 5689bc5 to af25e28 Compare August 29, 2023 17:54

Add changeset

b332eb7

laurkim force-pushed the lo/fix-resource-item-focus branch from af25e28 to b332eb7 Compare August 29, 2023 17:55

laurkim commented Aug 29, 2023

View reviewed changes

laurkim commented Aug 30, 2023

View reviewed changes

laurkim added the #gsd:36579 label Aug 30, 2023

laurkim self-assigned this Aug 30, 2023

[ResourceItem] Fix focus styles for BulkActions

76d9c8a

laurkim force-pushed the lo/fix-resource-item-focus branch from 712f08f to 76d9c8a Compare August 30, 2023 12:29

laurkim marked this pull request as ready for review August 30, 2023 12:49

laurkim requested review from sam-b-rose and chloerice August 30, 2023 12:49

sam-b-rose approved these changes Aug 30, 2023

View reviewed changes

laurkim merged commit dbe3d9e into next Aug 30, 2023
12 checks passed

laurkim deleted the lo/fix-resource-item-focus branch August 30, 2023 18:23

shopify-github-actions-access bot mentioned this pull request Aug 30, 2023

Version Packages (beta) #10264

Merged

sam-b-rose mentioned this pull request Sep 19, 2023

Remove nav level rule #10568

Merged

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

Version Packages #10931

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ResourceItem] Fix broken focus ring styles #10268

[ResourceItem] Fix broken focus ring styles #10268

laurkim commented Aug 29, 2023 •

edited

Loading

laurkim Aug 29, 2023

laurkim Aug 29, 2023

laurkim Aug 29, 2023

laurkim Aug 30, 2023

laurkim Aug 30, 2023

sam-b-rose left a comment

[ResourceItem] Fix broken focus ring styles #10268

[ResourceItem] Fix broken focus ring styles #10268

Conversation

laurkim commented Aug 29, 2023 • edited Loading

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

laurkim Aug 29, 2023

Choose a reason for hiding this comment

laurkim Aug 29, 2023

Choose a reason for hiding this comment

laurkim Aug 29, 2023

Choose a reason for hiding this comment

laurkim Aug 30, 2023

Choose a reason for hiding this comment

laurkim Aug 30, 2023

Choose a reason for hiding this comment

sam-b-rose left a comment

Choose a reason for hiding this comment

laurkim commented Aug 29, 2023 •

edited

Loading