Skip to content

Conversation

@lgriffee
Copy link
Contributor

@lgriffee lgriffee commented Feb 21, 2024

WHY are these changes introduced?

Fixes #11632
Reverts changes made to mobile button styles in #11552

Styles between native mobile and web mobile are currently not aligned so if we add any native mobile styles into our design system they will create discrepancies with screens at the MD (768px) breakpoint and above. In this case, adding in native mobile button styles resulted in unexpected font styles (weight, size, line-height) below the MD breakpoint (768px) in web mobile.

WHAT is this pull request doing?

Before After
Screenshot 2024-02-21 at 9 12 26 AM Screenshot 2024-02-21 at 9 17 15 AM
Before After
button-styles-revert-before.mov
Screen.Recording.2024-02-21.at.9.17.30.AM.mov

How to 🎩

Toggle between 768px and 767px

🎩 checklist

@lgriffee
Copy link
Contributor Author

/snapit

@github-actions
Copy link
Contributor

Thanks @lgriffee! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/polaris-icons@0.0.0-snapshot-20240221153829
yarn add @shopify/polaris@0.0.0-snapshot-20240221153829

@lgriffee lgriffee marked this pull request as ready for review February 21, 2024 16:32
@lgriffee lgriffee added the #gsd:38846 Admin Quality Improvements (Q1 2024) label Feb 21, 2024
@lgriffee lgriffee merged commit b60ba07 into main Feb 21, 2024
@lgriffee lgriffee deleted the revert-light-mobile-flat-button-styles branch February 21, 2024 17:32
lgriffee pushed a commit that referenced this pull request Feb 22, 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-icons@8.5.0

### Minor Changes

- [#11639](#11639)
[`4db32af27`](4db32af)
Thanks [@ardakaracizmeli](https://github.com/ardakaracizmeli)! - Added a
new icon: ArrowDiagonal

### Patch Changes

- [#11633](#11633)
[`8a9225306`](8a92253)
Thanks [@heyjoethomas](https://github.com/heyjoethomas)! - Update mobile
icon design

## @shopify/polaris@12.18.0

### Minor Changes

- [#11625](#11625)
[`9aed8c18f`](9aed8c1)
Thanks [@sainihas](https://github.com/sainihas)! - Fix truncate issue
for text in ContextualSaveBar


- [#11604](#11604)
[`376e6ded7`](376e6de)
Thanks [@mrcthms](https://github.com/mrcthms)! - Updated IndexFilters to
better support a configuration of only search and sort


- [#11613](#11613)
[`92d02613b`](92d0261)
Thanks [@lgriffee](https://github.com/lgriffee)! - Deprecated
`heading2xl` and `heading3xl` variants in `Text` component


- [#11611](#11611)
[`b79741cf8`](b79741c)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added `size` prop
to `Tag`

### Patch Changes

- [#11624](#11624)
[`b60ba0710`](b60ba07)
Thanks [@lgriffee](https://github.com/lgriffee)! - Reverted application
of native mobile styles to Button component


- [#11628](#11628)
[`bef27c076`](bef27c0)
Thanks [@ardakaracizmeli](https://github.com/ardakaracizmeli)! - Fixed
an issue where a border displayed between the main content of the frame
and the sidebar

- Updated dependencies
\[[`4db32af27`](4db32af),
[`8a9225306`](8a92253)]:
    -   @shopify/polaris-icons@8.5.0

## polaris.shopify.com@0.63.1

### Patch Changes

- Updated dependencies
\[[`b60ba0710`](b60ba07),
[`4db32af27`](4db32af),
[`9aed8c18f`](9aed8c1),
[`376e6ded7`](376e6de),
[`8a9225306`](8a92253),
[`92d02613b`](92d0261),
[`b79741cf8`](b79741c),
[`bef27c076`](bef27c0)]:
    -   @shopify/polaris@12.18.0
    -   @shopify/polaris-icons@8.5.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
…fy#11624)

### WHY are these changes introduced?
Fixes Shopify#11632
Reverts changes made to mobile button styles in Shopify#11552

Styles between native mobile and web mobile are currently not aligned so
if we add any native mobile styles into our design system they will
create discrepancies with screens at the MD (768px) breakpoint and
above. In this case, adding in native mobile button styles resulted in
unexpected font styles (weight, size, line-height) below the MD
breakpoint (768px) in web mobile.



### WHAT is this pull request doing?
| Before | After | 
| -- | -- |
![Screenshot 2024-02-21 at 9 12
26 AM](https://github.com/Shopify/polaris/assets/21976492/9088cb69-2431-47dd-a956-90ce0606c089)|![Screenshot
2024-02-21 at 9 17
15 AM](https://github.com/Shopify/polaris/assets/21976492/ba3ebe8c-e17c-47d3-b5e6-d73c6c3fdd1f)|

| Before | After | 
| -- | -- |
| <video
src="https://github.com/Shopify/polaris/assets/21976492/05128504-ed1f-4289-a448-8ebec4015577"></video>|<video
src="https://github.com/Shopify/polaris/assets/21976492/41a3e932-7da5-457c-ab94-8c4a64313eb0"></video>|


### How to 🎩
_Toggle between 768px and 767px_
- Before:
https://admin.shopify.com/store/laura-griffee-test-store/dashboards
- After:
https://admin.web.button-revert.laura-griffee.us.spin.dev/store/shop1/dashboards

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

#gsd:38846 Admin Quality Improvements (Q1 2024)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Revert application of native mobile styles to Button component

3 participants