Bug Report: Divider Component Size Variants Not Rendering in UI Extensions

Extensions
,
1

The Problem

When using the Divider component in Shopify UI Extensions with different size variants, only the size="small" variant renders correctly. All other size variants (base, large, extraLarge) appear to have 0px height and are effectively invisible.

image
image1057×807 72.6 KB

Code to Reproduce

import { View, TextBlock, Divider } from '@shopify/ui-extensions-react/customer-account';

function MyExtension() {
  return (
    <>
      <View>
        <TextBlock>Size small</TextBlock>
        <Divider size="small" />
      </View>

      <View>
        <TextBlock>Size base</TextBlock>
        <Divider size="base" />
      </View>

      <View>
        <TextBlock>Size large</TextBlock>
        <Divider size="large" />
      </View>

      <View>
        <TextBlock>Size extra large</TextBlock>
        <Divider size="extraLarge" />
      </View>
    </>
  );
}

Expected Behavior

All divider variants should render with their respective heights:

  • size="small" - Thin divider line
  • size="base" - Default/medium divider line
  • size="large" - Thicker divider line
  • size="extraLarge" - Thickest divider line

Actual Behavior

  • :white_check_mark: size="small" renders correctly
  • :cross_mark: size="base" has 0px height (invisible)
  • :cross_mark: size="large" has 0px height (invisible)
  • :cross_mark: size="extraLarge" has 0px height (invisible)

Investigation

The issue appears to be missing CSS styles for the larger divider variants. When inspecting the DOM, the divider elements are present but lack the proper height/styling that would make them visible.

Environment

  • Extension Type: Customer Account UI Extension
  • Package: @shopify/ui-extensions-react
  • Component: Divider
  • Context: All customer account extension surfaces

Impact

This bug prevents proper visual separation in UI extensions, forcing developers to either:

  1. Use only the small variant (limiting design options)
  2. Implement custom divider solutions (inconsistent with Shopify’s design system)
  3. Use workarounds like empty View components with border styles

Request

Please investigate and fix the missing styles for Divider size variants base, large, and extraLarge in UI Extensions. This should be a straightforward CSS fix to ensure all documented size variants work as expected.

Having consistent divider styling is essential for building professional-looking extensions that align with Shopify’s design system.

2

Hey @muchisx , thanks for flagging this and for the repro example code there. Are you seeing this happen in all types of UI extensions? Just want to confirm where you’re seeing this pop up so that I can replicate correctly and reach out to some folks internally on my end here.

Hope to hear from you soon.

3

Hi @Alan_G ! Thanks for reaching back about the issue.

I’ve only tested in this target:
customer-account.order-index.block.render

4

Thanks for confirming @muchisx and no worries. I’ll try to replicate the issue on my end here and reach out internally to investigate further. I’ll loop back with you here once I have more info on our end to share :slight_smile:

5

Just looping back here to confirm @muchisx - here’s what I’m seeing when I use your repro code there:

image
image710×206 1.96 KB

Here’s how I adapted the code:

import { reactExtension, View, TextBlock, Divider } from "@shopify/ui-extensions-react/customer-account";

export default reactExtension(
  "customer-account.order-index.block.render",
  () => <MyExtension />
);

function MyExtension() {
  return (
    <>
      <View>
        <TextBlock>Size small</TextBlock>
        <Divider size="small" />
      </View>

      <View>
        <TextBlock>Size base</TextBlock>
        <Divider size="base" />
      </View>

      <View>
        <TextBlock>Size large</TextBlock>
        <Divider size="large" />
      </View>

      <View>
        <TextBlock>Size extra large</TextBlock>
        <Divider size="extraLarge" />
      </View>
    </>
  );
}

Just want to confirm if this is what you’re seeing since I think I was able to replicate this on my end. Once I hear back from you, I’ll get in touch with our product team so we can look into this further.

6

Hi @Alan_G

I confirm that you’ve reproduced the issue.

Thank you for your valuable work!

7

Thanks @muchisx, no worries, appreciate you confirming here as well (just wasn’t sure if I was seeing the same error, good to know I was!), I’ll get in touch with our product team for you right away now and be back in touch once I have more to share :smiley: