Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

Conversation

ssetem
Copy link
Contributor

@ssetem ssetem commented Aug 31, 2023

WHY are these changes introduced?

Fixes an issue where Desktop Safari has a font scale which is too small.

WHAT is this pull request doing?

We are wrapping the use of font: -apple-system-body within the mobile breakpoint to address the issue.

How to 🎩

Desktop

  1. Visit storybook in Desktop Safari
  2. Open the Text Story
  3. Ensure that the text size is normal
  4. Double check with inspector and ensure font:-apple-system-body is not being applied

Mobile

  1. Visit storybook in iOS Simulator
  2. Open the Text Story
  3. Within the inspector verify that font: -apple-system-body is being applied
  4. Change the accessibility font size and verify text size updates correctly

🎩 checklist

@ssetem ssetem marked this pull request as ready for review August 31, 2023 16:15
@ssetem ssetem requested a review from kyledurand August 31, 2023 16:23
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.

Changes in Safari look good

@ssetem ssetem merged commit cd15782 into main Aug 31, 2023
@ssetem ssetem deleted the dynamic-text/ignore-desktop branch August 31, 2023 16:28
kyledurand pushed a commit that referenced this pull request Aug 31, 2023
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-migrator@0.21.0

### Minor Changes

- [#10246](#10246)
[`1947b4691`](1947b46)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added the ability
to migrate prop values

### Patch Changes

- [#10215](#10215)
[`e4a6d47ab`](e4a6d47)
Thanks [@aveline](https://github.com/aveline)! - Fixed a bug in the
rename prop migration

## @shopify/polaris@11.14.0

### Minor Changes

- [#9907](#9907)
[`ef7ddb4ac`](ef7ddb4)
Thanks [@MaxCloutier](https://github.com/MaxCloutier)! - Add a search
field to filter ActionList that have more than 10 items

### Patch Changes

- [#10288](#10288)
[`cd1578230`](cd15782)
Thanks [@ssetem](https://github.com/ssetem)! - Only apply apple dynamic
text to mobile breakpoint


- [#10292](#10292)
[`72f55e32f`](72f55e3)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added check for
string type before calling string method


- [#10211](#10211)
[`ac044b3c9`](ac044b3)
Thanks [@peterlazzarino](https://github.com/peterlazzarino)! - Ensure
Avatar has no background color if an source prop is passed in to allow
for transparent images


- [#10287](#10287)
[`9b14e231a`](9b14e23)
Thanks [@laurkim](https://github.com/laurkim)! - Fixed focus ring and
input text styles on `ActionList.SearchField` component

## polaris.shopify.com@0.57.2

### Patch Changes

- Updated dependencies
\[[`ef7ddb4ac`](ef7ddb4),
[`cd1578230`](cd15782),
[`72f55e32f`](72f55e3),
[`ac044b3c9`](ac044b3),
[`9b14e231a`](9b14e23)]:
    -   @shopify/polaris@11.14.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
<!--
  ☝️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
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

Fixes an issue where Desktop Safari has a font scale which is too small.

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

We are wrapping the use of `font: -apple-system-body` within the mobile
breakpoint to address the issue.
<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

**Desktop**
1. Visit
[storybook](https://5d559397bae39100201eedc1-jcrahhpmju.chromatic.com/?path=/story/all-components-text--variants)
in Desktop Safari
2. Open the Text Story
3. Ensure that the text size is normal
4. Double check with inspector and ensure `font:-apple-system-body` is
not being applied

**Mobile**
1. Visit
[storybook](https://5d559397bae39100201eedc1-jcrahhpmju.chromatic.com/?path=/story/all-components-text--variants)
in iOS Simulator
2. Open the Text Story
3. Within the inspector verify that `font: -apple-system-body` is being
applied
4. Change the accessibility font size and verify text size updates
correctly


### 🎩 checklist

- [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)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide
ascherkus pushed a commit to ascherkus/polaris that referenced this pull request Feb 19, 2025
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-migrator@0.21.0

### Minor Changes

- [Shopify#10246](Shopify#10246)
[`1947b4691`](Shopify@6c32424)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added the ability
to migrate prop values

### Patch Changes

- [Shopify#10215](Shopify#10215)
[`e4a6d47ab`](Shopify@3d4ef92)
Thanks [@aveline](https://github.com/aveline)! - Fixed a bug in the
rename prop migration

## @shopify/polaris@11.14.0

### Minor Changes

- [Shopify#9907](Shopify#9907)
[`ef7ddb4ac`](Shopify@b621532)
Thanks [@MaxCloutier](https://github.com/MaxCloutier)! - Add a search
field to filter ActionList that have more than 10 items

### Patch Changes

- [Shopify#10288](Shopify#10288)
[`cd1578230`](Shopify@68ea269)
Thanks [@ssetem](https://github.com/ssetem)! - Only apply apple dynamic
text to mobile breakpoint


- [Shopify#10292](Shopify#10292)
[`72f55e32f`](Shopify@1a74207)
Thanks [@kyledurand](https://github.com/kyledurand)! - Added check for
string type before calling string method


- [Shopify#10211](Shopify#10211)
[`ac044b3c9`](Shopify@7a8d4ff)
Thanks [@peterlazzarino](https://github.com/peterlazzarino)! - Ensure
Avatar has no background color if an source prop is passed in to allow
for transparent images


- [Shopify#10287](Shopify#10287)
[`9b14e231a`](Shopify@b9ff765)
Thanks [@laurkim](https://github.com/laurkim)! - Fixed focus ring and
input text styles on `ActionList.SearchField` component

## polaris.shopify.com@0.57.2

### Patch Changes

- Updated dependencies
\[[`ef7ddb4ac`](Shopify@b621532),
[`cd1578230`](Shopify@68ea269),
[`72f55e32f`](Shopify@1a74207),
[`ac044b3c9`](Shopify@7a8d4ff),
[`9b14e231a`](Shopify@b9ff765)]:
    -   @shopify/polaris@11.14.0

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants