Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[AppProvider] Disable calt font ligatures (#10871)
<!-- ☝️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? The Inter font has several configurable font settings. By default, `calt` ligatures are not disabled. This causes unwanted change in the presentation of letters to be symbols, e.g., "x" appearing as a multiply symbol when between numbers like `7x8`. This is a problem for automated unique identifiers, like Hydrogen deploy hashes in the `/custom-storefronts` section of the admin: https://github.com/Shopify/polaris/assets/18447883/e8c4d2a1-9d22-42a7-a585-a158e9dcb1b5 <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? This PR disables `calt` ligatures in the base styles of the `AppProvider`. | Before | After | |--------|--------| | <img width="239" alt="Screenshot 2023-10-04 at 2 25 05 PM" src="https://github.com/Shopify/polaris/assets/18447883/346bc486-866c-4d64-8fd2-1d13bcad8a0c">| <img width="237" alt="Screenshot 2023-10-04 at 2 24 50 PM" src="https://github.com/Shopify/polaris/assets/18447883/fc9f8cc4-d3bc-4d86-8ba4-dd466ed1f4ed"> | <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. 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> --> <!-- ℹ️ Delete the following for small / trivial changes --> ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [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) <!-- Give as much information as needed to experiment with the component in the playground. --> <details> <summary>Copy-paste this code in <code>playground/Playground.tsx</code>:</summary> ```jsx import React from 'react'; import {Page, Text} from '../src'; export function Playground() { return ( <Page title="Discounts"> <Text as="p">xguxh880x9klaslojoffihghgthslohfijkl</Text> </Page> ); } ``` </details> ### 🎩 checklist - [ ] 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
- Loading branch information