Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Navigation Item] Update pin icon button styles (#11972)
<!-- ☝️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 - Open it as a draft if it’s a work in progress --> ### WHY are these changes introduced? Fixes Shopify/core-workflows#1095 The pin icon on the navigation item should have a pointer cursor and not have a background color. It already has this behaviour for links (which conditionally renders if you provide a `url` prop), hence the button targeting. <!-- Context about the problem that’s being addressed. --> | Before | After | | ------------- |:-------------:| | <img width="810" alt="screenshot" src="https://screenshot.click/02-16-69404-99751.png"> | <img width="810" alt="screenshot" src="https://github.com/Shopify/polaris/assets/42528878/8cf5975e-b0ab-49d2-9a09-68668b277541"> | ### WHAT is this pull request doing? <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. Include a video if your changes include interactive content. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> Updates the `.SecondaryAction` button's styles ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [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) > [!TIP] > This codesandbox contains this PR's snapshot. To compare with `main` you can change `@shopify/polaris` version to "latest" in the `package.json` Codesandbox: https://codesandbox.io/p/sandbox/compassionate-wilson-tn6ss3?file=%2FApp.tsx%3A50%2C28 1. Notice that the background of the selected item's secondary action has no background + has cursor `pointer` ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [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
- Loading branch information