Skip to content

[Layout foundations] Deprecate grid component #8418

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 7 commits into from
Feb 23, 2023
Merged

[Layout foundations] Deprecate grid component #8418

merged 7 commits into from
Feb 23, 2023

Conversation

@kyledurand
Copy link
Member

Closes: #7741

@kyledurand kyledurand self-assigned this Feb 17, 2023
@kyledurand kyledurand mentioned this pull request Feb 17, 2023
Closed
3 tasks
jjgali
jjgali reviewed Feb 17, 2023
View reviewed changes
polaris.shopify.com/content/components/deprecated/grid.md Outdated
value: Deprecated
message: >-
Grid was built before we had primitive layout tools like Columns, Inline, and AlphaStack. It is difficult to learn, document, and understand its usage in a codebase.
The new layout primitives should be used in combination to achieve similar results to Grid.
Copy link
Contributor

Choose a reason for hiding this comment

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

@kyledurand idk if this is live yet, but when we have documentation on how to compose those layout primitives, it would be nice to link to that! Just a note for down the road.

laurkim
laurkim approved these changes Feb 22, 2023
View reviewed changes
Copy link
Contributor

@laurkim laurkim left a comment •
edited
Loading

Choose a reason for hiding this comment

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

LGTM! Small note, should we also deprecate Grid.tsx and Cell.tsx and include console warnings since it's not used as frequently as TextContainer and won't flood the console?
Also probably need to update URL for redirects

@github-actions
Copy link
Contributor

github-actions bot commented Feb 22, 2023 •
edited
Loading

size-limit report 📦

Path Size
polaris-react-cjs 220.31 KB (+0.01% 🔺)
polaris-react-esm 140.05 KB (+0.01% 🔺)
polaris-react-esnext 195.87 KB (+0.01% 🔺)
polaris-react-css 42.38 KB (0%)

@kyledurand kyledurand changed the title Deprecate grid component [Layout foundations] Deprecate grid component Feb 22, 2023
@kyledurand kyledurand force-pushed the deprecate-grid-component branch 4 times, most recently from 8cdf3f1 to 2d0fe3c Compare February 23, 2023 19:22
@kyledurand kyledurand force-pushed the deprecate-grid-component branch from 2d0fe3c to 01a34fc Compare February 23, 2023 19:38
@kyledurand kyledurand merged commit 4018ee2 into main Feb 23, 2023
@kyledurand kyledurand deleted the deprecate-grid-component branch February 23, 2023 20:03
@shopify-github-actions-access shopify-github-actions-access bot mentioned this pull request Feb 23, 2023
Merged
chazdean pushed a commit that referenced this pull request Feb 27, 2023
@shopify-github-actions-access @github-actions
Version Packages (#8453)
213e79f 
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/stylelint-polaris@8.0.0

### Major Changes

- [#8467](#8467)
[`9ab93132a`](9ab9313)
Thanks [@chloerice](https://github.com/chloerice)! - Configured
`selector-disallowed-list` to disallow Polaris component class name
overrides

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](0e9fa84),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-migrator@0.14.0

### Minor Changes

- [#8071](#8071)
[`319479143`](3194791)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added a
migration for updating the Page component `breadcrumbs` prop to use an
object instead of an array

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](0e9fa84),
[`9ab93132a`](9ab9313),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1
    -   @shopify/stylelint-polaris@8.0.0

## @shopify/polaris@10.32.0

### Minor Changes

- [#8454](#8454)
[`4799b6550`](4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [#8484](#8484)
[`cbbb5648c`](cbbb564)
Thanks [@aveline](https://github.com/aveline)! - Removed default `gap`
from `Columns`


- [#8135](#8135)
[`c60617518`](c606175)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! -
Deprecated the `Page` `breadcrumbs` prop in favor of the new
`backAction` prop.


- [#8441](#8441)
[`3537b3aeb`](3537b3a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
TextContainer in favor of AlphaStack


- [#8418](#8418)
[`4018ee268`](4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [#8413](#8413)
[`7bbe096e4`](7bbe096)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - updating bulk
actions strings

### Patch Changes

- [#8387](#8387)
[`7f0f2cad1`](7f0f2ca)
Thanks [@aveline](https://github.com/aveline)! - Updated `Columns` to
accept columns aliases


- [#8115](#8115)
[`cc706f4ce`](cc706f4)
Thanks [@mrcthms](https://github.com/mrcthms)! - Grouped PageActions
actions at the trailing edge of the container


- [#8470](#8470)
[`f5e450357`](f5e4503)
Thanks [@aveline](https://github.com/aveline)! - Removed default margin
from `Bleed`

- Updated dependencies
\[[`0e9fa8433`](0e9fa84),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-cli@0.1.13

### Patch Changes

- Updated dependencies
\[[`319479143`](3194791)]:
    -   @shopify/polaris-migrator@0.14.0

## @shopify/polaris-tokens@6.6.1

### Patch Changes

- [#8456](#8456)
[`0e9fa8433`](0e9fa84)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
`border-caution-subdued` and `border-success-subdued` tokens to improve
color contrast


- [#8483](#8483)
[`b1768f037`](b1768f0)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Adjusted
colors to meet color contrast requirements

## polaris.shopify.com@0.37.0

### Minor Changes

- [#8454](#8454)
[`4799b6550`](4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [#7843](#7843)
[`3840f49e9`](3840f49)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - ## Reboot
Pattern Guidance

    -   New layout primitives `Stack`, `Box`, `Grid`, `Row`.
    -   Playroom patched to support larger code snippets.
- New designs and content for the
[patterns](https://polaris.shopify.com/patterns) pages.
    -   Deprecated old patterns:
        ||Old|New|
        \|--\|--\|--\|
        \|**design-patterns** \| `/patterns/design-patterns` \| `404`\|
        \|**page-layouts** \| `/patterns/page-layouts` \| `404`\|
\|**error-messages** \| `/patterns/error-messages` \|
`/content/error-messages`\|
\|**help-content** \| `/patterns/help-content` \|
`/content/help-content`\|
\|**loading** \| `/patterns/loading` \| `/patterns-legacy/loading`\|
\|**new-badge** \| `/patterns/new-badge` \|
`/patterns-legacy/new-badge`\|
\|**pickers** \| `/patterns/pickers` \| `/patterns-legacy/pickers`\|
\|**text-fields** \| `/patterns/text-fields` \|
`/patterns-legacy/text-fields`\|
- Page padding and max-width adjusted such that live previews for
components and patterns always display the desktop breakpoint.


- [#8466](#8466)
[`3b32f3477`](3b32f34)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Adds
documentation for the Page breadcrumbs migration

### Patch Changes

- [#8475](#8475)
[`ba7280068`](ba72800)
Thanks [@chloerice](https://github.com/chloerice)! - Added documentation
for `selector-disallowed-list` `@shopify/stylelint/polaris` rule


- [#8474](#8474)
[`00028952d`](0002895)
Thanks [@jesstelford](https://github.com/jesstelford)! - Refactor
hideFromNav logic to support breadcrumbs


- [#8490](#8490)
[`16f5a3638`](16f5a36)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add caveats to
code examples in Patterns


- [#8491](#8491)
[`39704dccf`](39704dc)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add 'New'
status badge to Patterns nav item


- [#8422](#8422)
[`3975668a2`](3975668)
Thanks [@kyledurand](https://github.com/kyledurand)! - Organized
categories on components page


- [#8473](#8473)
[`597b78ba2`](597b78b)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Remove draft
pattern pages from PatternsPage


- [#8477](#8477)
[`c67d1a5b6`](c67d1a5)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fix global types
file


- [#8418](#8418)
[`4018ee268`](4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [#8489](#8489)
[`0a525643d`](0a52564)
Thanks [@raquelbreternitz](https://github.com/raquelbreternitz)! - Add
new page on alt text


- [#8410](#8410)
[`2312cbb6a`](2312cbb)
Thanks [@kellydanma](https://github.com/kellydanma)! - Use Close instead
of OK

- Updated dependencies
\[[`7f0f2cad1`](7f0f2ca),
[`4799b6550`](4799b65),
[`cbbb5648c`](cbbb564),
[`c60617518`](c606175),
[`cc706f4ce`](cc706f4),
[`f5e450357`](f5e4503),
[`3537b3aeb`](3537b3a),
[`0e9fa8433`](0e9fa84),
[`4018ee268`](4018ee2),
[`7bbe096e4`](7bbe096),
[`b1768f037`](b1768f0)]:
    -   @shopify/polaris@10.32.0
    -   @shopify/polaris-tokens@6.6.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@kyledurand @jjgali @juzser
[Layout foundations] Deprecate grid component (Shopify#8418)
2e6a5e0 
Closes: Shopify#7741

---------

Co-authored-by: jjgali <77791660+jjgali@users.noreply.github.com>
juzser pushed a commit to juzser/polaris that referenced this pull request Jul 27, 2023
@shopify-github-actions-access @github-actions @juzser
Version Packages (Shopify#8453)
49f507e 
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/stylelint-polaris@8.0.0

### Major Changes

- [Shopify#8467](Shopify#8467)
[`9ab93132a`](Shopify@9ab9313)
Thanks [@chloerice](https://github.com/chloerice)! - Configured
`selector-disallowed-list` to disallow Polaris component class name
overrides

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](Shopify@0e9fa84),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-migrator@0.14.0

### Minor Changes

- [Shopify#8071](Shopify#8071)
[`319479143`](Shopify@3194791)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Added a
migration for updating the Page component `breadcrumbs` prop to use an
object instead of an array

### Patch Changes

- Updated dependencies
\[[`0e9fa8433`](Shopify@0e9fa84),
[`9ab93132a`](Shopify@9ab9313),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1
    -   @shopify/stylelint-polaris@8.0.0

## @shopify/polaris@10.32.0

### Minor Changes

- [Shopify#8454](Shopify#8454)
[`4799b6550`](Shopify@4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [Shopify#8484](Shopify#8484)
[`cbbb5648c`](Shopify@cbbb564)
Thanks [@aveline](https://github.com/aveline)! - Removed default `gap`
from `Columns`


- [Shopify#8135](Shopify#8135)
[`c60617518`](Shopify@c606175)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! -
Deprecated the `Page` `breadcrumbs` prop in favor of the new
`backAction` prop.


- [Shopify#8441](Shopify#8441)
[`3537b3aeb`](Shopify@3537b3a)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated
TextContainer in favor of AlphaStack


- [Shopify#8418](Shopify#8418)
[`4018ee268`](Shopify@4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [Shopify#8413](Shopify#8413)
[`7bbe096e4`](Shopify@7bbe096)
Thanks [@zakwarsame](https://github.com/zakwarsame)! - updating bulk
actions strings

### Patch Changes

- [Shopify#8387](Shopify#8387)
[`7f0f2cad1`](Shopify@7f0f2ca)
Thanks [@aveline](https://github.com/aveline)! - Updated `Columns` to
accept columns aliases


- [Shopify#8115](Shopify#8115)
[`cc706f4ce`](Shopify@cc706f4)
Thanks [@mrcthms](https://github.com/mrcthms)! - Grouped PageActions
actions at the trailing edge of the container


- [Shopify#8470](Shopify#8470)
[`f5e450357`](Shopify@f5e4503)
Thanks [@aveline](https://github.com/aveline)! - Removed default margin
from `Bleed`

- Updated dependencies
\[[`0e9fa8433`](Shopify@0e9fa84),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris-tokens@6.6.1

## @shopify/polaris-cli@0.1.13

### Patch Changes

- Updated dependencies
\[[`319479143`](Shopify@3194791)]:
    -   @shopify/polaris-migrator@0.14.0

## @shopify/polaris-tokens@6.6.1

### Patch Changes

- [Shopify#8456](Shopify#8456)
[`0e9fa8433`](Shopify@0e9fa84)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Updated
`border-caution-subdued` and `border-success-subdued` tokens to improve
color contrast


- [Shopify#8483](Shopify#8483)
[`b1768f037`](Shopify@b1768f0)
Thanks [@aaronccasanova](https://github.com/aaronccasanova)! - Adjusted
colors to meet color contrast requirements

## polaris.shopify.com@0.37.0

### Minor Changes

- [Shopify#8454](Shopify#8454)
[`4799b6550`](Shopify@4799b65)
Thanks [@chazdean](https://github.com/chazdean)! - Removed default
spacing from `Inline`


- [Shopify#7843](Shopify#7843)
[`3840f49e9`](Shopify@3840f49)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - ## Reboot
Pattern Guidance

    -   New layout primitives `Stack`, `Box`, `Grid`, `Row`.
    -   Playroom patched to support larger code snippets.
- New designs and content for the
[patterns](https://polaris.shopify.com/patterns) pages.
    -   Deprecated old patterns:
        ||Old|New|
        \|--\|--\|--\|
        \|**design-patterns** \| `/patterns/design-patterns` \| `404`\|
        \|**page-layouts** \| `/patterns/page-layouts` \| `404`\|
\|**error-messages** \| `/patterns/error-messages` \|
`/content/error-messages`\|
\|**help-content** \| `/patterns/help-content` \|
`/content/help-content`\|
\|**loading** \| `/patterns/loading` \| `/patterns-legacy/loading`\|
\|**new-badge** \| `/patterns/new-badge` \|
`/patterns-legacy/new-badge`\|
\|**pickers** \| `/patterns/pickers` \| `/patterns-legacy/pickers`\|
\|**text-fields** \| `/patterns/text-fields` \|
`/patterns-legacy/text-fields`\|
- Page padding and max-width adjusted such that live previews for
components and patterns always display the desktop breakpoint.


- [Shopify#8466](Shopify#8466)
[`3b32f3477`](Shopify@3b32f34)
Thanks [@itwasmattgregg](https://github.com/itwasmattgregg)! - Adds
documentation for the Page breadcrumbs migration

### Patch Changes

- [Shopify#8475](Shopify#8475)
[`ba7280068`](Shopify@ba72800)
Thanks [@chloerice](https://github.com/chloerice)! - Added documentation
for `selector-disallowed-list` `@shopify/stylelint/polaris` rule


- [Shopify#8474](Shopify#8474)
[`00028952d`](Shopify@0002895)
Thanks [@jesstelford](https://github.com/jesstelford)! - Refactor
hideFromNav logic to support breadcrumbs


- [Shopify#8490](Shopify#8490)
[`16f5a3638`](Shopify@16f5a36)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add caveats to
code examples in Patterns


- [Shopify#8491](Shopify#8491)
[`39704dccf`](Shopify@39704dc)
Thanks [@jesstelford](https://github.com/jesstelford)! - Add 'New'
status badge to Patterns nav item


- [Shopify#8422](Shopify#8422)
[`3975668a2`](Shopify@3975668)
Thanks [@kyledurand](https://github.com/kyledurand)! - Organized
categories on components page


- [Shopify#8473](Shopify#8473)
[`597b78ba2`](Shopify@597b78b)
Thanks [@gwyneplaine](https://github.com/gwyneplaine)! - Remove draft
pattern pages from PatternsPage


- [Shopify#8477](Shopify#8477)
[`c67d1a5b6`](Shopify@c67d1a5)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fix global types
file


- [Shopify#8418](Shopify#8418)
[`4018ee268`](Shopify@4018ee2)
Thanks [@kyledurand](https://github.com/kyledurand)! - Deprecated Grid
component
    Update documentation for deprecated components


- [Shopify#8489](Shopify#8489)
[`0a525643d`](Shopify@0a52564)
Thanks [@raquelbreternitz](https://github.com/raquelbreternitz)! - Add
new page on alt text


- [Shopify#8410](Shopify#8410)
[`2312cbb6a`](Shopify@2312cbb)
Thanks [@kellydanma](https://github.com/kellydanma)! - Use Close instead
of OK

- Updated dependencies
\[[`7f0f2cad1`](Shopify@7f0f2ca),
[`4799b6550`](Shopify@4799b65),
[`cbbb5648c`](Shopify@cbbb564),
[`c60617518`](Shopify@c606175),
[`cc706f4ce`](Shopify@cc706f4),
[`f5e450357`](Shopify@f5e4503),
[`3537b3aeb`](Shopify@3537b3a),
[`0e9fa8433`](Shopify@0e9fa84),
[`4018ee268`](Shopify@4018ee2),
[`7bbe096e4`](Shopify@7bbe096),
[`b1768f037`](Shopify@b1768f0)]:
    -   @shopify/polaris@10.32.0
    -   @shopify/polaris-tokens@6.6.1

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@laurkim laurkim laurkim approved these changes

@chazdean chazdean Awaiting requested review from chazdean

@yurm04 yurm04 Awaiting requested review from yurm04

+2 more reviewers

@jjgali jjgali jjgali left review comments

@aveline aveline aveline approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@kyledurand kyledurand

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Layout foundations] Deprecate Grid and update style guide to suggest Columns

4 participants

@kyledurand @aveline @laurkim @jjgali