Skip to content

Conversation

@laurkim
Copy link
Contributor

@laurkim laurkim commented Sep 22, 2022

WHY are these changes introduced?

Resolves #7256.
We are planning on shipping the layout-foundations-prototype page and need pages in the style guide that clearly designates the layout components are still in alpha.

WHAT is this pull request doing?

Adds alpha pages and examples for Box, Inline, Columns, AlphaStack, and Tile.


AlphaStack alpha page
AlphaStack alpha page


Box alpha page
Box alpha page


Columns alpha page
Columns alpha page


Inline alpha page
Inline alpha page


Tile alpha page
Tile alpha page

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

In your terminal:

// in `polaris` root directory
$ yarn && yarn build
$ cd polaris.shopify.com
$ yarn && yarn dev

🎩 checklist

@laurkim laurkim self-assigned this Sep 22, 2022
@laurkim laurkim added #gsd:30116 polaris.shopify.com 🤖Skip Changelog Causes CI to ignore changelog update check. labels Sep 22, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Sep 22, 2022

size-limit report 📦

Path Size
polaris-react-cjs 204.55 KB (+0.03% 🔺)
polaris-react-esm 130.96 KB (+0.04% 🔺)
polaris-react-esnext 186.04 KB (+0.04% 🔺)
polaris-react-css 41.32 KB (+0.04% 🔺)

@laurkim laurkim force-pushed the lo/add-styleguide-pages branch 2 times, most recently from 85f3761 to 1f74ffb Compare September 22, 2022 21:08
@laurkim
Copy link
Contributor Author

laurkim commented Sep 22, 2022

/snapit

@github-actions
Copy link
Contributor

🫰✨ Thanks @laurkim! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]
yarn add @shopify/[email protected]

@laurkim laurkim force-pushed the lo/add-styleguide-pages branch 3 times, most recently from c9575cb to 101df9f Compare September 22, 2022 23:04
@laurkim laurkim changed the title [WIP][Layout foundations] Add alpha pages in style guide for Box, Inline, Columns, Stack, and Tiles [Layout foundations] Add alpha pages in style guide for Box, Inline, Columns, Stack, and Tile Sep 22, 2022
@laurkim laurkim force-pushed the lo/add-styleguide-pages branch from 101df9f to b378498 Compare September 22, 2022 23:22
@laurkim laurkim removed the 🤖Skip Changelog Causes CI to ignore changelog update check. label Sep 22, 2022
@laurkim laurkim marked this pull request as ready for review September 22, 2022 23:41
Copy link
Contributor

@sarahill sarahill left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These feel good! I'm taking a deeper look and will create an issue with any suggestions to follow this up with ✅

@laurkim laurkim force-pushed the lo/add-styleguide-pages branch from b378498 to 00466d2 Compare September 26, 2022 15:01
@laurkim laurkim force-pushed the lo/add-styleguide-pages branch from 00466d2 to 5ad5538 Compare September 26, 2022 15:03
@laurkim laurkim force-pushed the lo/add-styleguide-pages branch from 5ad5538 to 883b790 Compare September 26, 2022 15:04
@laurkim laurkim merged commit b0aa73b into layout-foundations-prototype Sep 26, 2022
@laurkim laurkim deleted the lo/add-styleguide-pages branch September 26, 2022 15:20
laurkim added a commit that referenced this pull request Sep 30, 2022
…Columns, Stack, and Tile (#7261)

Resolves #7256.
We are planning on shipping the `layout-foundations-prototype` page and
need pages in the style guide that clearly designates the layout
components are still in alpha.

Adds alpha pages and examples for Box, Inline, Columns, AlphaStack, and
Tile.
    <details>
      <summary>AlphaStack alpha page</summary>
<img
src="https://user-images.githubusercontent.com/26749317/191867995-8dc31ad2-9c2c-4a0e-8480-dbbac5b52034.gif"
alt="AlphaStack alpha page">
    </details>
    <details>
      <summary>Box alpha page</summary>
<img
src="https://user-images.githubusercontent.com/26749317/191868352-8bc6681e-8cf1-41bd-8af2-3d4b5794e14a.gif"
alt="Box alpha page">
    </details>
    <details>
      <summary>Columns alpha page</summary>
<img
src="https://user-images.githubusercontent.com/26749317/191868186-bbe37c93-a12d-4ba4-8ef8-1272db7e3c9e.gif"
alt="Columns alpha page">
    </details>
    <details>
      <summary>Inline alpha page</summary>
<img
src="https://user-images.githubusercontent.com/26749317/191868199-92827ca0-9eb0-49f4-b4b5-2c20b9360b79.gif"
alt="Inline alpha page">
    </details>
    <details>
      <summary>Tile alpha page</summary>
<img
src="https://user-images.githubusercontent.com/26749317/191868218-6e537b86-321c-472f-a559-f75e815e0ec2.gif"
alt="Tile alpha page">
    </details>

<!-- ℹ️ Delete the following for small / trivial changes -->

🖥 [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)

In your terminal:
```script
// in `polaris` root directory
$ yarn && yarn build
$ cd polaris.shopify.com
$ yarn && yarn dev
```

- [ ] 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants