Adapts Blankslate to render proportionally in narrow areas

[mperrotti]

Relates to https://github.com/github/primer/issues/2678

Before:

After:

Changelog

New

Nothing new

Changed

• Upgrades styled-components so we can use the @container rule block
• Adds container queries to adapt the sizing and spacing based on the available area
• Uses Primer Primitives instead of relying on browser-native styles for text elements

Removed

Nothing removed

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan

Testing & Reviewing

• Open any Blankslate story and resize the viewport so the Blankslate is < 545px
• Confirm that the sizing and spacing shrinks
• Confirm that no colors have changed

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: d2367ab

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Uh oh! @mperrotti, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[mperrotti]

We don't have the new Primitives colors yet, so we need to provide fallbacks using JS.

[github-actions]

size-limit report 📦

Path	Size
dist/browser.esm.js	105.15 KB (0%)
dist/browser.umd.js	105.68 KB (0%)

[siddharthkp]

Good news: This is the first component in primer/react (outside of drafts) that uses css modules. ✨

To get the css into dotcom, we need to import a single css file for primer/react (similar to primer/css)

Bad news:

This is a breaking change because now we require you to include a css file for an existing component that we didn't earlier? Without that stylesheet, existing BlankSlate instances would become unstyled.

(New components get a free pass because it's a new component with a new import statement, but tricker to change existing components like this)

Probably still fine to squeeze into dotcom, but not for open source?

---

The ideal order for us would be to add the one primer/react css file requirement in v36. Once that's done, we can keep adding more css bundled to that file, no worries

@joshblack @langermank Is there a workaround for this that comes to mind? 🤔

[mperrotti]

Do you think there's any way we can use BaseStyles to import CSS modules?

If this has to be a breaking change, should we hold off on this until the next major release?

[siddharthkp]

Do you think there's any way we can use BaseStyles to import CSS modules?

We can't use BaseStyles to import CSS modules, buuuut we could use it as a temporary place to add global css for components! 😈

If this has to be a breaking change, should we hold off on this until the next major release?

For the css files, yes. But we could break this into 2 parts:

1. one that adds styles for narrow areas but still uses styled-components (not breaking change)
2. another that moves the styled-components to a css file that needs import (breaking change)

To release the 2nd PR (breaking), our options are:

1. Add it to v36 (not recommended this late in the release)
2. Don't migrate styles to css files for Blankslate right now, continue using the sx prop until the next major release (usually, we would do this)
3. Do a quick v37 release right after v36 with this change and related primitive changes (i don't mind this at all)

[mperrotti]

one that adds styles for narrow areas but still uses styled-components (not breaking change)

This isn't going to be possible since styled-components doesn't recognize @container, and it will get stripped out.

---

I think doing a quick v37 release right after v36 is the best path forward. I don't think there's any way to handle these updates without introducing a breaking change.

[siddharthkp]

This isn't going to be possible since styled-components doesn't recognize @container, and it will get stripped out.

As far as I know, styled-components doesn't validate syntax though and strip it out. Here's an example of container queries with styled-components: https://codesandbox.io/s/zen-hill-v939m3?file=/src/App.js

[mperrotti]

@siddharthkp - so your official suggestion is to add <style type="text/css">{ContainerQuery}</style> inline?

[siddharthkp]

To unblock this PR: It sounds icky but Yes 😅 (hoping that dotcom doesn't have any problems with that)

Follow up would be to start collecting candidates for v37 where we can make a css file import required.

Of course, we also have the option of pausing this PR and releasing with it the next major release. But, I'm honestly don't know what the timeline for that would look like.

[joshblack]

Sorry if I missed this in the thread earlier, but would another option here be to use createGlobalStyle? e.g.

import { createGlobalStyle } from 'styled-components';

const ContainerQueryStyles = createGlobalStyle`
  .BlankspaceContainer {
    container: blankslate / inline-size;
  }

  @container blankslate (min-width: 34rem) {
    /* ... */
  }
`;

function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
  return (
    <>
      <ContainerQueryStyles />
      <StyledBlankslate data-border={border} data-narrow={narrow} data-spacious={spacious}>
        {children}
      </StyledBlankslate>
    </>
  );
}

Was curious if this ended up working as expected. I think this has an advantage of having a shared stylesheet instead of having a <style> tag per instance of Blankslate (if it works, that is 😅)

[mperrotti]

@joshblack - I think using createGlobalStyle would still results in @container (max-width:600px) getting written without an open curly brace. Check out @siddharthkp 's comment above for more context.

[joshblack]

Ah, makes sense! Thanks @mperrotti for clarifying

[siddharthkp]

Found a tiny bug, otherwise looks good!

Should test this visually in dotcom once before merging just to make sure the container query works as expected

[mperrotti]

@siddharthkp - I used this integration test PR and confirmed everything works as expected.

I checked using the Blankslate that appears when your custom property filter doesn't return any matches. The path is /organizations/actions/settings/custom-properties?tab=set-values.

[siddharthkp]

• No breaking changes
• Mike has tested our hack works with dotcom

ship it!