diff --git a/.changeset/shy-plums-give.md b/.changeset/shy-plums-give.md new file mode 100644 index 00000000000..821b57720e9 --- /dev/null +++ b/.changeset/shy-plums-give.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Remove deprecation from `Grid` component diff --git a/polaris-react/src/components/Grid/Grid.tsx b/polaris-react/src/components/Grid/Grid.tsx index 2dcb24f3ee9..f51e65a0bc8 100644 --- a/polaris-react/src/components/Grid/Grid.tsx +++ b/polaris-react/src/components/Grid/Grid.tsx @@ -1,6 +1,5 @@ -import React, {useEffect} from 'react'; +import React from 'react'; -// eslint-disable-next-line import/no-deprecated import {Cell} from './components'; import styles from './Grid.scss'; @@ -27,9 +26,8 @@ export interface GridProps { gap?: Gap; children?: React.ReactNode; } -/** @deprecated Use `Columns` instead or a combination of layout primitives (`Columns`, `Inline`, and `AlphaStack`) */ + export const Grid: React.FunctionComponent & { - // eslint-disable-next-line import/no-deprecated Cell: typeof Cell; } = function Grid({gap, areas, children, columns}: GridProps) { const style = { @@ -50,15 +48,6 @@ export const Grid: React.FunctionComponent & { '--pc-grid-areas-xl': formatAreas(areas?.xl), } as React.CSSProperties; - useEffect(() => { - if (process.env.NODE_ENV === 'development') { - // eslint-disable-next-line no-console - console.warn( - 'Deprecation: is deprecated. This component will be removed in a future major version of Polaris. Use instead or a combination of , , and ', - ); - } - }, []); - return (
{children} @@ -71,5 +60,4 @@ export function formatAreas(areas?: string[]) { return `'${areas?.join(`' '`)}'`; } -// eslint-disable-next-line import/no-deprecated Grid.Cell = Cell; diff --git a/polaris-react/src/components/Grid/components/Cell/Cell.tsx b/polaris-react/src/components/Grid/components/Cell/Cell.tsx index 35882f8e3ee..6910b7785fc 100644 --- a/polaris-react/src/components/Grid/components/Cell/Cell.tsx +++ b/polaris-react/src/components/Grid/components/Cell/Cell.tsx @@ -30,7 +30,7 @@ export interface CellProps { row?: Cell; children?: React.ReactNode; } -/** @deprecated Use `Columns` instead or a combination of layout primitives (`Columns`, `Inline`, and `AlphaStack`) */ + export function Cell({ area: gridArea, column, diff --git a/polaris-react/src/components/Grid/components/Cell/tests/Cell.test.tsx b/polaris-react/src/components/Grid/components/Cell/tests/Cell.test.tsx index 3f05de04cce..462fd0c5c2c 100644 --- a/polaris-react/src/components/Grid/components/Cell/tests/Cell.test.tsx +++ b/polaris-react/src/components/Grid/components/Cell/tests/Cell.test.tsx @@ -1,7 +1,6 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; -// eslint-disable-next-line import/no-deprecated import {Cell} from '../Cell'; describe('', () => { diff --git a/polaris-react/src/components/Grid/tests/Grid.test.tsx b/polaris-react/src/components/Grid/tests/Grid.test.tsx index 0b27b4ec222..326a68563f1 100644 --- a/polaris-react/src/components/Grid/tests/Grid.test.tsx +++ b/polaris-react/src/components/Grid/tests/Grid.test.tsx @@ -2,7 +2,6 @@ import React from 'react'; import {matchMedia, timer} from '@shopify/jest-dom-mocks'; import {mountWithApp} from 'tests/utilities'; -// eslint-disable-next-line import/no-deprecated import {formatAreas, Grid} from '../Grid'; describe('', () => { diff --git a/polaris.shopify.com/content/components/deprecated/grid.md b/polaris.shopify.com/content/components/layout-and-structure/grid.md similarity index 80% rename from polaris.shopify.com/content/components/deprecated/grid.md rename to polaris.shopify.com/content/components/layout-and-structure/grid.md index ed996c7f7b8..83384df4c4e 100644 --- a/polaris.shopify.com/content/components/deprecated/grid.md +++ b/polaris.shopify.com/content/components/layout-and-structure/grid.md @@ -1,7 +1,7 @@ --- title: Grid description: Create complex layouts based on [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid). -category: Deprecated +category: Layout and structure keywords: - one column - two column @@ -14,10 +14,8 @@ keywords: - full width containers - css grid status: - value: Deprecated - message: >- - Grid was built prior to layout primitives like columns, inline, and alpha stack. Comparatively, grid 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. + value: Alpha + message: This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our [component lifecycles](/getting-started/components-lifecycle). examples: - fileName: grid-two-column.tsx title: Two column diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js index 53bb3329b3c..734c2a10485 100644 --- a/polaris.shopify.com/next.config.js +++ b/polaris.shopify.com/next.config.js @@ -191,11 +191,6 @@ const deprecated = [ destination: '/components/deprecated/display-text', permanent: false, }, - { - source: '/components/grid', - destination: '/components/deprecated/grid', - permanent: false, - }, { source: '/components/heading', destination: '/components/deprecated/heading', @@ -395,6 +390,11 @@ const layoutAndStructure = [ destination: '/components/layout-and-structure/form-layout', permanent: false, }, + { + source: '/components/grid', + destination: '/components/layout-and-structure/grid', + permanent: false, + }, { source: '/components/inline', destination: '/components/layout-and-structure/inline', diff --git a/polaris.shopify.com/public/images/components/deprecated/grid.png b/polaris.shopify.com/public/images/components/layout-and-structure/grid.png similarity index 100% rename from polaris.shopify.com/public/images/components/deprecated/grid.png rename to polaris.shopify.com/public/images/components/layout-and-structure/grid.png