[Layout foundations] Update `get-props` script and refactor types in `Box` #7396

laurkim · 2022-10-13T20:05:04Z

WHY are these changes introduced?

Resolves #7337.
The styleguide wasn't parsing the type aliases for our layout components and displaying the TS logic instead of the typed value.

WHAT is this pull request doing?

Updates the get-props script in the style guide to check if the type reference node has UnionTypes in the type arguments and, if so, get the parsed type and convert it to a string.
Updates the types in Box to no longer use template literals and explicitly declare accepted values in the unions
Updates the types in Box with large unions to mitigate values being truncated in the styleguide

Box alpha page — before

Box alpha page — after

AlphaCard alpha page — before

AlphaCard alpha page — after

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

$ yarn && yarn build (in root polaris dir)
$ cd polaris.shopify.com
$ yarn && yarn dev

🎩 checklist

Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

github-actions · 2022-10-13T20:08:35Z

size-limit report 📦

Path	Size
polaris-react-cjs	209.13 KB (0%)
polaris-react-esm	135.6 KB (0%)
polaris-react-esnext	190.96 KB (0%)
polaris-react-css	41.52 KB (0%)

Co-authored-by: Aaron Casanova <[email protected]>

…`Box` (#7396) ### WHY are these changes introduced? Resolves #7337. The styleguide wasn't parsing the type aliases for our layout components and displaying the TS logic instead of the typed value. ### WHAT is this pull request doing? - Updates the `get-props` script in the style guide to check if the type reference node has `UnionTypes` in the type arguments and, if so, get the parsed type and convert it to a string. - Updates the types in `Box` to no longer use template literals and explicitly declare accepted values in the unions - Updates the types in `Box` with large unions to mitigate values being truncated in the styleguide <details> <summary>Box alpha page — before</summary> <img src="https://user-images.githubusercontent.com/26749317/195697635-45c75746-82bf-4da0-b7bb-00bfa6f4ce3d.png" alt="Box alpha page — before"> </details> <details> <summary>Box alpha page — after</summary> <img src="https://user-images.githubusercontent.com/26749317/195697634-fa3a3e54-44c9-432b-b3c5-4208ea66fa21.png" alt="Box alpha page — after"> </details> <details> <summary>AlphaCard alpha page — before</summary> <img src="https://user-images.githubusercontent.com/26749317/195697631-6e2a49ee-d051-491e-aa3b-4e87db429d5e.png" alt="AlphaCard alpha page — before"> </details> <details> <summary>AlphaCard alpha page — after</summary> <img src="https://user-images.githubusercontent.com/26749317/195697626-e117cf32-f0fe-4c2b-9456-47c664e07640.png" alt="AlphaCard alpha page — after"> </details>  ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ```script $ yarn && yarn build (in root polaris dir) $ cd polaris.shopify.com $ yarn && yarn dev ``` ### 🎩 checklist - [ ] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide Co-authored-by: Aaron Casanova <[email protected]>

@lgriffee

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/[email protected] ### Minor Changes - [#7342](#7342) [`dc2990acf`](dc2990a) Thanks [@lgriffee](https://github.com/lgriffee)! - Rename `replace-sass-length` migration to `replace-spacing-lengths` Add `gap` properties to `replace-sass-space` migration - [#7310](#7310) [`8fb215836`](8fb2158) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Add sass z-index migration - [#7335](#7335) [`699b70713`](699b707) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Add migration to `replace-typography-declarations` - [#7375](#7375) [`8194e174a`](8194e17) Thanks [@samrose3](https://github.com/samrose3)! - Add Sass color function migration - [#7387](#7387) [`a0fa96ed4`](a0fa96e) Thanks [@lgriffee](https://github.com/lgriffee)! - Added `replace-border-declarations` migration ### Patch Changes - [#7487](#7487) [`60191f353`](60191f3) Thanks [@lgriffee](https://github.com/lgriffee)! - Update numeric operator detection to check all node types - [#7412](#7412) [`6d82e8965`](6d82e89) Thanks [@samrose3](https://github.com/samrose3)! - Enhance Sass spacing migration to catch Sass interpolations - [#7423](#7423) [`0591db26a`](0591db2) Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Update `replace-typography-declarations` comment strategy - [#7459](#7459) [`933a9d71b`](933a9d7) Thanks [@lgriffee](https://github.com/lgriffee)! - Add missing values to borderRadius length map ## @shopify/[email protected] ### Minor Changes - [#7429](#7429) [`e87330f5b`](e87330f) Thanks [@aveline](https://github.com/aveline)! - Update `AlphaStack` to be polymorphic, add list reset styles and allow spacing to change based on breakpoint - [#7450](#7450) [`74237ebc5`](74237eb) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `minHeight` and `minWidth` on `Box` - [#7432](#7432) [`85c022033`](85c0220) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `overflowX`, `overflowY`, and `width` props to `Box` - [#7491](#7491) [`a9eff60e1`](a9eff60) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `section` element types to `Box` - [#7389](#7389) [`4f184c658`](4f184c6) Thanks [@aveline](https://github.com/aveline)! - Added `breakWord` prop to `Text` - [#7430](#7430) [`87981ac01`](87981ac) Thanks [@aveline](https://github.com/aveline)! - Added `legend` as supported element for `Text` component - [#7438](#7438) [`4b4411930`](4b44119) Thanks [@aveline](https://github.com/aveline)! - Simplify `AlphaCard` by removing `hasBorderRadius` prop and `shadow` prop ### Patch Changes - [#7405](#7405) [`ea2615881`](ea26158) Thanks [@laurkim](https://github.com/laurkim)! - Fixed how optional `id` prop rendered in `Text` - [#7434](#7434) [`62288755a`](6228875) Thanks [@laurkim](https://github.com/laurkim)! - Fixed reference to `width` custom property in `Box` - [#7396](#7396) [`3be27bae8`](3be27ba) Thanks [@laurkim](https://github.com/laurkim)! - Updated alias and scale types in `Box` with type tests to check they exist in our token groups. Updated `get-props` script to parse utility types with unions. - [#7435](#7435) [`4097d539b`](4097d53) Thanks [@kyledurand](https://github.com/kyledurand)! - Cleaned up styles on Box - [#7410](#7410) [`13546e344`](13546e3) Thanks [@kyledurand](https://github.com/kyledurand)! - Apply default value to Columns - [#7483](#7483) [`7a78e07bf`](7a78e07) Thanks [@laurkim](https://github.com/laurkim)! - Fixed missing `children` prop in `Columns` prop type - [#7492](#7492) [`612e02786`](612e027) Thanks [@henryyi](https://github.com/henryyi)! - Only apply scroll-lock with scrollbar when body is scrollable - [#7481](#7481) [`4f5f6cf50`](4f5f6cf) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed horizontal scroll bug in Scrollable - [#7471](#7471) [`2f16b2310`](2f16b23) Thanks [@kyledurand](https://github.com/kyledurand)! - Added viewport addon to storybook and matched values to our breakpoints - [#7433](#7433) [`90487fd70`](90487fd) Thanks [@kellymiller-shop](https://github.com/kellymiller-shop)! - fixed heading offset on IndexTable - [#7453](#7453) [`3191d13c0`](3191d13) Thanks [@AndrewMusgrave](https://github.com/AndrewMusgrave)! - Fixed IndexTable not rendering bulk actions on resize - [#7395](#7395) [`89fea23f7`](89fea23) Thanks [@AndrewMusgrave](https://github.com/AndrewMusgrave)! - Fixed scrolling performance for IndexTable on safari - [#7442](#7442) [`77057d5b6`](77057d5) Thanks [@kyledurand](https://github.com/kyledurand)! - Fix SkeletonPage actions layout ## @shopify/[email protected] ### Patch Changes - Updated dependencies \[[`dc2990acf`](dc2990a), [`8fb215836`](8fb2158), [`60191f353`](60191f3), [`6d82e8965`](6d82e89), [`0591db26a`](0591db2), [`699b70713`](699b707), [`8194e174a`](8194e17), [`933a9d71b`](933a9d7), [`a0fa96ed4`](a0fa96e)]: - @shopify/[email protected] ## [email protected] ### Minor Changes - [#7396](#7396) [`3be27bae8`](3be27ba) Thanks [@laurkim](https://github.com/laurkim)! - Updated alias and scale types in `Box` with type tests to check they exist in our token groups. Updated `get-props` script to parse utility types with unions. - [#7393](#7393) [`cd4577a3f`](cd4577a) Thanks [@martenbjork](https://github.com/martenbjork)! - Update markdown file structure to not require folders for each markdown page. Now you can simply create a markdown.md file and it will be rendered as a page. - [#7418](#7418) [`c5cfe9026`](c5cfe90) Thanks [@kyledurand](https://github.com/kyledurand)! - Support beta status components - [#7449](#7449) [`31437dfb2`](31437df) Thanks [@jjgali](https://github.com/jjgali)! - Removed duplicate image on error messages page. - [#7491](#7491) [`a9eff60e1`](a9eff60) Thanks [@laurkim](https://github.com/laurkim)! - Added support for `section` element types to `Box` - [#7441](#7441) [`0d446cb46`](0d446cb) Thanks [@jjgali](https://github.com/jjgali)! - Remove section on compositions vs patterns. - [#7420](#7420) [`d462e2e5d`](d462e2e) Thanks [@jjgali](https://github.com/jjgali)! - Clarify rules for formatting dates and times. ### Patch Changes - [#7398](#7398) [`c21ea83d4`](c21ea83) Thanks [@tracytees](https://github.com/tracytees)! - - Updated the "Getting started" and "Polaris 101" pages - Removed /design, /develop, /shared-resources, /patterns-components-and-tokens - [#7426](#7426) [`442d51ddf`](442d51d) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Fix nav bug - [#7452](#7452) [`8a05e840f`](8a05e84) Thanks [@gui-santos](https://github.com/gui-santos)! - fix visual bug in token page's navigation where text was breaking into two lines - [#7469](#7469) [`a8d80cfd5`](a8d80cf) Thanks [@chazdean](https://github.com/chazdean)! - Updated `AlphaStack` component docs - [#7483](#7483) [`7a78e07bf`](7a78e07) Thanks [@laurkim](https://github.com/laurkim)! - Fixed missing `children` prop in `Columns` prop type - [#7436](#7436) [`95a8ac0d2`](95a8ac0) Thanks [@laurkim](https://github.com/laurkim)! - Fix references to `Box` margin props in alpha layout examples - [#7444](#7444) [`e0d6b00ba`](e0d6b00) Thanks [@kyledurand](https://github.com/kyledurand)! - Fix tile image and increase example widths on alpha components - [#7427](#7427) [`25e70a8d9`](25e70a8) Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Declare sandbox nav in a more idiomatic fashion - [#7482](#7482) [`0ec6961aa`](0ec6961) Thanks [@alex-page](https://github.com/alex-page)! - Bump GitHub action versions and add p-map for gen-og-images CI failure - Updated dependencies \[[`ea2615881`](ea26158), [`62288755a`](6228875), [`3be27bae8`](3be27ba), [`4097d539b`](4097d53), [`e87330f5b`](e87330f), [`74237ebc5`](74237eb), [`85c022033`](85c0220), [`13546e344`](13546e3), [`7a78e07bf`](7a78e07), [`a9eff60e1`](a9eff60), [`4f184c658`](4f184c6), [`612e02786`](612e027), [`4f5f6cf50`](4f5f6cf), [`87981ac01`](87981ac), [`2f16b2310`](2f16b23), [`90487fd70`](90487fd), [`3191d13c0`](3191d13), [`89fea23f7`](89fea23), [`77057d5b6`](77057d5), [`4b4411930`](4b44119)]: - @shopify/[email protected] ## [email protected] ### Patch Changes - Updated dependencies \[[`ea2615881`](ea26158), [`62288755a`](6228875), [`3be27bae8`](3be27ba), [`4097d539b`](4097d53), [`e87330f5b`](e87330f), [`74237ebc5`](74237eb), [`85c022033`](85c0220), [`13546e344`](13546e3), [`7a78e07bf`](7a78e07), [`a9eff60e1`](a9eff60), [`4f184c658`](4f184c6), [`612e02786`](612e027), [`4f5f6cf50`](4f5f6cf), [`87981ac01`](87981ac), [`2f16b2310`](2f16b23), [`90487fd70`](90487fd), [`3191d13c0`](3191d13), [`89fea23f7`](89fea23), [`77057d5b6`](77057d5), [`4b4411930`](4b44119)]: - @shopify/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

laurkim added 3 commits October 13, 2022 11:30

[Box] Refactor BackgroundColorTokenScale to explictly define values

334427e

[Box] Refactor type aliases

bdd649a

[Box] Export types for testing

c7c7792

laurkim self-assigned this Oct 13, 2022

laurkim added #gsd:30116 polaris.shopify.com labels Oct 13, 2022

laurkim marked this pull request as ready for review October 13, 2022 20:19

laurkim requested review from aaronccasanova, alex-page and aveline October 13, 2022 20:20

aveline approved these changes Oct 13, 2022

View reviewed changes

laurkim and others added 4 commits October 14, 2022 09:45

[Box] Add tests for updated Box types to check against token groups

d472842

Co-authored-by: Aaron Casanova <[email protected]>

[polaris.shopify.com] Update get-props script to parse utility types

b853d99

[polaris.shopify.com] Run get-props script

c58a92d

Add changeset

b202856

laurkim force-pushed the lo/update-get-props-script branch from 326fb56 to b202856 Compare October 14, 2022 13:46

laurkim merged commit 3be27ba into main Oct 17, 2022

laurkim deleted the lo/update-get-props-script branch October 17, 2022 17:57

github-actions bot mentioned this pull request Oct 17, 2022

Version Packages #7406

Merged

github-actions bot mentioned this pull request Oct 21, 2022

Version Packages bekturfs/polaris#1

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Layout foundations] Update `get-props` script and refactor types in `Box` #7396

[Layout foundations] Update `get-props` script and refactor types in `Box` #7396

Uh oh!

laurkim commented Oct 13, 2022

Uh oh!

github-actions bot commented Oct 13, 2022 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

[Layout foundations] Update get-props script and refactor types in Box #7396

[Layout foundations] Update get-props script and refactor types in Box #7396

Uh oh!

Conversation

laurkim commented Oct 13, 2022

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

Uh oh!

github-actions bot commented Oct 13, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

[Layout foundations] Update `get-props` script and refactor types in `Box` #7396

[Layout foundations] Update `get-props` script and refactor types in `Box` #7396

github-actions bot commented Oct 13, 2022 •

edited

Loading