maxWidth prop can't use theme values such as `medium` in v13.1.0

[acknosyn]

Issue

Description

The maxWidth prop from the styled-system LAYOUT props does not translate the received maxWidths theme key into the its value.

With version 13.0.0, using maxWidth with a theme size like medium will correctly translate into its pixel value, 768px.

In versions 13.1.0 and up, maxWidth no longer translates the theme's maxWidths keys into its pixel value. In Chrome DevTools, you can see the maxWidths key string 'medium' is used in the CSS instead of the key's value.

You can see the maxWidths values which are apart of primer's theme here: https://github.com/primer/components/blob/master/src/theme.js#L163

Using a string for a literal CSS value still works. E.g., maxWidth="200px".

Version

The issue starts happening in @primer/components version 13.1.0, the issue is not present in version 13.0.0. The issue is still present in the latest version, 16.0.0.

Version 13.1.0 included an upgrade to Styled System v5. Maybe this has something to do with this changelog item:

The new theme.sizes scale replaces heights, minHeights, maxHeights, minWidths, and maxWidths; and is used for the width prop

Preview

1. maxWidth issue.

@primer/components version: 13.1.0 and up

maxWidth prop can't use theme values such as medium.

2. maxWidth working as expected.

@primer/components version: 13.0.0

maxWidth prop can use theme values such as medium.

---

I've updated my Primer test repo to demonstrate this issue for easy replication. Install instructions are in the README.

https://github.com/acknosyn/Testing-Primer-Components

The demo is in the index page.

Cheers

[emplums]

Hey @acknosyn that will be fixed in the next major release: #717

We had to bundle it up with a major release because it required us to rename the object in our theme which is a breaking change

[acknosyn]

Oh that's awesome, good to hear. Sorry I didn't find that, I only searched in the issues.

Thanks for the work 👍