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.

Sign up for GitHub

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

Jump to bottom

Apply smaller focus ring to plain and monochrome buttons #11473

Merged
merged 1 commit into from
Jan 21, 2024
Merged

Apply smaller focus ring to plain and monochrome buttons #11473

merged 1 commit into from
Jan 21, 2024

Conversation

sam-b-rose
Copy link
Member

Closes #11422

Reduces the focus ring closer to the original size for the plain and plainMonochrome button variants. This PR also applied the underline text decoration styles when focused for the plain varaint.

plain

plain.mov

plainMonochrome

plainMonochrome.mov

kyledurand
kyledurand approved these changes Jan 19, 2024
View reviewed changes
Copy link
Member

@kyledurand kyledurand left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code and storybook look good 👍

If you have a spin link and there's something specific you want tophatted there let me know

chloerice
chloerice approved these changes Jan 19, 2024
View reviewed changes
Copy link
Member

@chloerice chloerice left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙌🏽 🚀

@sam-b-rose sam-b-rose merged commit 6579537 into main Jan 21, 2024
12 checks passed
@sam-b-rose sam-b-rose deleted the button-focus-plain branch January 21, 2024 19:53
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Jan 21, 2024
Merged
chloerice pushed a commit that referenced this pull request Jan 26, 2024
@shopify-github-actions-access @github-actions
Version Packages (#11454)
138e1aa 
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-icons@8.1.0

### Minor Changes

- [#11478](#11478)
[`b786bb93c`](b786bb9)
Thanks [@Rusty-UX](https://github.com/Rusty-UX)! - Added
DatabaseConnectIcon

## @shopify/polaris@12.11.0

### Minor Changes

- [#11474](#11474)
[`26b3afb3d`](26b3afb)
Thanks [@mrcthms](https://github.com/mrcthms)! - [BulkActions and
SelectAllActions] Ensure backwards compatibilility after prop
reorganisation between components


- [#11497](#11497)
[`d50cc6d91`](d50cc6d)
Thanks [@mrcthms](https://github.com/mrcthms)! - Improved test
reliability for non-rolled up actions in `ActionMenu`


- [#10981](#10981)
[`2dcc73f1a`](2dcc73f)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the sticky
behaviour of BulkActions, SelectAllActions, and Pagination for our
tables and lists


- [#11441](#11441)
[`74174b6c1`](74174b6)
Thanks [@mrcthms](https://github.com/mrcthms)! - Improved the logic of
action rollup and calculation of available space in `ActionMenu` and
`Tabs`


- [#11491](#11491)
[`ac004fc97`](ac004fc)
Thanks [@lgriffee](https://github.com/lgriffee)! - [`Button`] Remove
underline from `monochromePlain` default state


- [#11486](#11486)
[`02a6d9b18`](02a6d9b)
Thanks
[@translation-platform](https://github.com/apps/translation-platform)! -
Updated translations for SearchField suffix within IndexFilters


- [#11344](#11344)
[`c9abd3c0c`](c9abd3c)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
Polaris Tokens for Mobile typography


- [#11412](#11412)
[`f1b44ab57`](f1b44ab)
Thanks [@mrcthms](https://github.com/mrcthms)! - [TextField] Updated the
TextField with new `autoSize` and `loading` props


- [#11431](#11431)
[`f9b9fa4e8`](f9b9fa4)
Thanks [@lone-star](https://github.com/lone-star)! - Added `tone`,
`icon`, and `onClick` props to `Toast`

### Patch Changes

- [#11464](#11464)
[`2ee7dbd30`](2ee7dbd)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Updated `Button`
shadow tokens and replaced hardcoded box-shadow values


- [#11504](#11504)
[`1910c6975`](1910c69)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated Page Header to
only ensure no wrapping of the title when the title is relatively short


- [#11473](#11473)
[`6579537e4`](6579537)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Fixed focus ring
size for plain and plain monochrome Button variants


- [#11487](#11487)
[`4aabf7c1a`](4aabf7c)
Thanks [@yurm04](https://github.com/yurm04)! - [Modal] Fixed Footer
position to bottom of container


- [#11466](#11466)
[`1953b6935`](1953b69)
Thanks [@mrcthms](https://github.com/mrcthms)! - [TextField] Fixed
positional issue of loading indicator when no clear button is present


- [#11462](#11462)
[`2febd60f1`](2febd60)
Thanks [@sophschneider](https://github.com/sophschneider)! - Lowered the
z-index of `Filter`s container to be below `Card` shadow bevel


- [#11467](#11467)
[`75cbcd70b`](75cbcd7)
Thanks [@kyledurand](https://github.com/kyledurand)! - Increased
contrast on Tooltip underline


- [#11482](#11482)
[`59371946c`](5937194)
Thanks
[@translation-platform](https://github.com/apps/translation-platform)! -
[SearchField] Updated translation

- Updated dependencies
\[[`2ee7dbd30`](2ee7dbd),
[`c9abd3c0c`](c9abd3c),
[`b786bb93c`](b786bb9)]:
    -   @shopify/polaris-tokens@8.6.0
    -   @shopify/polaris-icons@8.1.0

## @shopify/polaris-tokens@8.6.0

### Minor Changes

- [#11344](#11344)
[`c9abd3c0c`](c9abd3c)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Added
Polaris Tokens for Mobile typography

### Patch Changes

- [#11464](#11464)
[`2ee7dbd30`](2ee7dbd)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Updated `Button`
shadow tokens and replaced hardcoded box-shadow values

## @shopify/stylelint-polaris@15.1.0

### Minor Changes

- [#11344](#11344)
[`c9abd3c0c`](c9abd3c)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
`typography` `declaration-property-value-disallowed-list` to support
Polaris Tokens `text` variants

### Patch Changes

- Updated dependencies
\[[`2ee7dbd30`](2ee7dbd),
[`c9abd3c0c`](c9abd3c)]:
    -   @shopify/polaris-tokens@8.6.0

## @shopify/polaris-migrator@0.27.1

### Patch Changes

- Updated dependencies
\[[`c9abd3c0c`](c9abd3c),
[`2ee7dbd30`](2ee7dbd),
[`c9abd3c0c`](c9abd3c)]:
    -   @shopify/stylelint-polaris@15.1.0
    -   @shopify/polaris-tokens@8.6.0

## polaris.shopify.com@0.62.0

### Minor Changes

- [#11506](#11506)
[`c19b0f638`](c19b0f6)
Thanks [@lgriffee](https://github.com/lgriffee)! - Added ability to mark
prop values as deprecated

### Patch Changes

- [#11457](#11457)
[`966d1901e`](966d190)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added fallback to
no active icon on Icons page when not a valid icon name is used in the
search param


- [#11466](#11466)
[`1953b6935`](1953b69)
Thanks [@mrcthms](https://github.com/mrcthms)! - [TextField] Fixed
positional issue of loading indicator when no clear button is present


- [#11461](#11461)
[`d26df7eb0`](d26df7e)
Thanks [@sam-b-rose](https://github.com/sam-b-rose)! - Added deprecation
warning to old icon names informing users to use the new icon name


- [#11467](#11467)
[`75cbcd70b`](75cbcd7)
Thanks [@kyledurand](https://github.com/kyledurand)! - Increased
contrast on Tooltip underline

- Updated dependencies
\[[`26b3afb3d`](26b3afb),
[`2ee7dbd30`](2ee7dbd),
[`1910c6975`](1910c69),
[`d50cc6d91`](d50cc6d),
[`6579537e4`](6579537),
[`2dcc73f1a`](2dcc73f),
[`74174b6c1`](74174b6),
[`4aabf7c1a`](4aabf7c),
[`ac004fc97`](ac004fc),
[`1953b6935`](1953b69),
[`02a6d9b18`](02a6d9b),
[`c9abd3c0c`](c9abd3c),
[`2febd60f1`](2febd60),
[`b786bb93c`](b786bb9),
[`75cbcd70b`](75cbcd7),
[`f1b44ab57`](f1b44ab),
[`f9b9fa4e8`](f9b9fa4),
[`59371946c`](5937194)]:
    -   @shopify/polaris@12.11.0
    -   @shopify/polaris-tokens@8.6.0
    -   @shopify/polaris-icons@8.1.0

## polaris-for-vscode@0.9.4

### Patch Changes

- Updated dependencies
\[[`2ee7dbd30`](2ee7dbd),
[`c9abd3c0c`](c9abd3c)]:
    -   @shopify/polaris-tokens@8.6.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
@sam-b-rose
Apply smaller focus ring to plain and monochrome buttons (Shopify#11473)
ccd7983 
Closes Shopify#11422

Reduces the focus ring closer to the original size for the `plain` and
`plainMonochrome` button variants. This PR also applied the underline
text decoration styles when focused for the `plain` varaint.

### `plain`


https://github.com/Shopify/polaris/assets/11774595/a46629d5-d0e5-414d-8296-7caba60d0831

### `plainMonochrome`


https://github.com/Shopify/polaris/assets/11774595/785757b2-7b9b-4f15-b3b0-53b0b2ce8285
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chloerice chloerice chloerice approved these changes

@kyledurand kyledurand kyledurand approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Button] plain and plainMonochrome variant focus state regression?
3 participants
@sam-b-rose @kyledurand @chloerice