Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allows icons to be set on primary actions of Page component #11780

Merged
merged 2 commits into from
Mar 27, 2024

Conversation

itwasmattgregg
Copy link
Contributor

@itwasmattgregg itwasmattgregg commented Mar 25, 2024

WHY are these changes introduced?

Fixes an issue where icons are not shown on "primary" Page actions due to legacy code that hid them on desktop screen sizes.

WHAT is this pull request doing?

With newer guidance from UX that icons should be used more broadly for common actions, this change allows icon only buttons as well as icons with text buttons to be shown on desktop as primary Page actions while continuing to have the functionality of only displaying the icon and not the content text on mobile screens.

No changes to the interface here but the underlying Header component in Page now doesn't silently hide icons on desktop.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

@sarahill sarahill requested a review from a team March 25, 2024 17:45
@sarahill
Copy link
Contributor

Approved chromatic diffs for Page. There are some diffs for Icon too but not sure why. It doesn't look like this PR should affect Icon.

@itwasmattgregg
Copy link
Contributor Author

Approved chromatic diffs for Page. There are some diffs for Icon too but not sure why. It doesn't look like this PR should affect Icon.

It shouldn't at all...

@itwasmattgregg itwasmattgregg merged commit 4fffc2d into main Mar 27, 2024
13 of 14 checks passed
@itwasmattgregg itwasmattgregg deleted the primary-page-action-icons branch March 27, 2024 14:52
sam-b-rose pushed a commit that referenced this pull request Apr 1, 2024
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@12.24.0

### Minor Changes

- [#11547](#11547)
[`df5276317`](df52763)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Applied semantic
type styles using the `Text` component


- [#11728](#11728)
[`281c8f8e9`](281c8f8)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added new
AlphaPicker component


- [#11645](#11645)
[`b726dadbb`](b726dad)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
`useCopyToClipboard` hook for building copy actions matching common
actions guidelines


- [#11780](#11780)
[`4fffc2dcc`](4fffc2d)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - allows
icons to be displayed on primary actions on Page component


- [#11547](#11547)
[`df5276317`](df52763)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added
`base`,`inherit`, `disabled`, and `text-inverse` tone options for Text
component


- [#11547](#11547)
[`df5276317`](df52763)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Updated
plain/monochrome Button text size to bodySm for micro

### Patch Changes

- [#11789](#11789)
[`36df1aa6c`](36df1aa)
Thanks [@laurkim](https://github.com/laurkim)! - Fixed logo spacing on
`ContextualSaveBar`


- [#11794](#11794)
[`ffdcf1df7`](ffdcf1d)
Thanks [@kyledurand](https://github.com/kyledurand)! - Set default
scrollbar width to thin on scrollable


- [#11804](#11804)
[`d1b46c25c`](d1b46c2)
Thanks [@laurkim](https://github.com/laurkim)! - Fixed layout shift on
`EmptyState` when image is loading with skeleton image

## @shopify/stylelint-polaris@15.5.0

### Minor Changes

- [#11547](#11547)
[`df5276317`](df52763)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added warning for
`font-size`, `line-height`, and `font-weight` properties. Use the `Text`
component as a preferred option.

## @shopify/polaris-migrator@0.28.4

### Patch Changes

- Updated dependencies
\[[`df5276317`](df52763)]:
    -   @shopify/stylelint-polaris@15.5.0

## polaris.shopify.com@0.67.0

### Minor Changes

- [#11779](#11779)
[`86a6ba44a`](86a6ba4)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added
examples for `Card` and `Page` with icon actions

### Patch Changes

- [#11547](#11547)
[`df5276317`](df52763)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added page for
`typography/property-disallow-list` Stylelint rule

- Updated dependencies
\[[`df5276317`](df52763),
[`281c8f8e9`](281c8f8),
[`b726dadbb`](b726dad),
[`4fffc2dcc`](4fffc2d),
[`df5276317`](df52763),
[`36df1aa6c`](36df1aa),
[`df5276317`](df52763),
[`ffdcf1df7`](ffdcf1d),
[`d1b46c25c`](d1b46c2)]:
    -   @shopify/polaris@12.24.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
…11780)

### WHY are these changes introduced?

Fixes an issue where icons are not shown on "primary" `Page` actions due
to legacy code that hid them on desktop screen sizes.

### WHAT is this pull request doing?

With newer guidance from UX that icons should be used more broadly for
common actions, this change allows icon only buttons as well as icons
with text buttons to be shown on desktop as primary Page actions while
continuing to have the functionality of only displaying the icon and not
the content text on mobile screens.

No changes to the interface here but the underlying `Header` component
in `Page` now doesn't silently hide icons on desktop.

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

### 🎩 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)
- [x] 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants