Issue with responsive value for display on `s-box` and `s-grid-item`

Polaris
1

Has anyone run into responsive values not applying correctly to the display attribute on <s-box> or <s-grid-item> components?

The docs indicate display supports responsive values. Here’s a minimal example of what I’m doing:

<s-section>
  <s-query-container>
    <s-grid
      columnGap="base"
      gridTemplateColumns="@container (inline-size < 500px) 1fr, 1fr 12%"
    >
      <!-- Text content -->
      <s-grid-item>
        <s-stack gap="base">
          <s-heading>Lorem ipsum dolor sit amet</s-heading>
          <s-paragraph>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </s-paragraph>
          <s-button href="/lorem/ipsum">Lorem ipsum</s-button>
        </s-stack>
      </s-grid-item>

      <!-- Illustration -->
      <s-grid-item
        maxBlockSize="7.25rem"
        maxInlineSize="7.25rem"
        display="@container (inline-size < 500px) none, auto"
      >
        <s-image
          src="/lorem/ipsum.svg"
          alt="Lorem ipsum."
          accessibilityRole="presentation"
        ></s-image>
      </s-grid-item>
    </s-grid>
  </s-query-container>
</s-section>

On the same <s-grid-item>, a responsive padding value works as expected, but display doesn’t seem to work the responsive value.

Has anyone else hit this, or have tips to get display responsive values working here?

2

I find that s-grid-item ignores the display attribute entirely. This makes it impossible to remove grid cells that span multiple rows/columns responsively. Is there a place to file bugs? @Liz-Shopify or @Liam-Shopify ?

3

Confirmed that s-grid-item is not responding to the display property. We’ll look into it and let you know when there’s an update. Thanks for reporting this!

1 Like
4

@Anthony_Frehner Thank you!

6

@Anthony_Frehner Thanks for looking into this. Question: are these forums the best place to report bugs, or is there a GitHub repo where we should put issues?

7

These forums are the best!

1 Like
8

Fix is live. Thanks!

1 Like