Text component doesn't respect fontWeight="light-300" or fontStyle="italic" in @shopify/ui-extensions-react/admin

Extensions
1

Hi Shopify team! :waving_hand:

I’m using the Text component from @shopify/ui-extensions-react/admin, and I noticed that some props aren’t being applied as expected. Here’s a simplified example:

import {Text, BlockStack} from '@shopify/ui-extensions-react/admin';

<BlockStack>
  <Text>Default</Text>
  <Text fontWeight="bold">Bold</Text>
  <Text fontWeight="light-300">Light</Text>
  <Text fontStyle="italic">Italic</Text>
</BlockStack>

Issue:

  • :white_check_mark: Default and Bold render correctly.
  • :cross_mark: Light and Italic don’t apply the expected styles.
  • The output HTML shows all Text components rendered with Polaris-Text--regular, even when setting fontWeight="light-300" or fontStyle="italic".

Here’s a screenshot for clarity:

image
image470×208 2.79 KB

image

Question:
Is this expected behavior or a known limitation? If not, could it be a bug or documentation gap?

I believe this is also happen to other props/component.

Thanks in advance for the help! :folded_hands:

2

Thank you for pointing this out. You’ve found a limitation in how early UI Extensions font weights mapped to Polaris styles. Since the Text component from @shopify/polaris only supports regular, medium, semibold, and bold, the UI Extensions weights are mapped as follows:

  • All “light” variants → regular (which is why light-300 looks the same as default)
  • bold → medium
  • bold-200 → semibold
  • bold-300 → bold

Additionally, fontStyle="italic" is not supported - you should see a warning about this in your browser console (see attached screenshot).

These are design constraints rather than bugs - Polaris doesn’t have lighter weight variants or italic styles.

For now, use bold, bold-200, or bold-300 to get different font weights.

Let me know if you have any questions!

Screenshot

image
image3248×2112 315 KB

1 Like
3

Thanks so much, @Bill-Shopify ! Quick follow-up: is there a way in an admin extension to use something like <Text tone="subdued">Example</Text>

image
image1328×300 18.9 KB

or customize the fontSize? I tried using Paragraph (ref) but didn’t have much luck. Appreciate any guidance!