search

Shopify / ui-extensions

MIT License
267 stars 36 forks source link

Checkout Editor: Emphasis variable definitions are undefined #1694

Open kpeatt opened 8 months ago

kpeatt commented 8 months ago

Please list the package(s) involved in the issue, and include the version you are using

Using: "@shopify/ui-extensions-react": "2024.1.1"

Describe the bug

Text is not bolded when using <Text emphasis="bold">. It looks like the CSS variables are being set to undefined instead of the correct weight value.

Steps to reproduce the behavior:

  1. Add a component with the attribute of emphasis="bold"
  2. Open the Checkout Editor and add your block.
  3. Inspect the rendered span and dig in on the --x-typography-primary-weight-bold variable definition.

Expected behavior

  1. Text component renders as bold in Checkout Editor

Screenshots

image

jonasivy commented 7 months ago

Also having the same problem.

image

Is there an alternative to make this work?

gil-- commented 6 months ago

Can confirm same problem. Is this a regression? I don't recall this happening until rather recently? I reset my checkout branding styles to the default and it's still happening. It's specific to the editor as the bold font emphasis works fine in the actual checkout.