Skip to content

Commit 2551729

Browse files
authored
[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 https://github.com/Shopify/core-workflows/issues/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
1 parent 9833c5d commit 2551729

File tree

2 files changed

+10
-0
lines changed

2 files changed

+10
-0
lines changed

.changeset/nervous-forks-know.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': minor
3+
---
4+
5+
Updated `Navigation.Item` button to have pointer cursor and no background

polaris-react/src/components/Navigation/Navigation.module.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -684,6 +684,11 @@
684684
}
685685
}
686686

687+
.SecondaryAction[type='button'] {
688+
cursor: pointer;
689+
background: none;
690+
}
691+
687692
.SecondaryAction {
688693
display: flex;
689694
align-items: center;

0 commit comments

Comments
 (0)