Remove deprecation from Grid

.changeset/shy-plums-give.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Remove deprecation from `Grid` component

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<GridProps> & {
-  // 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<GridProps> & {
     '--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: <Grid /> is deprecated. This component will be removed in a future major version of Polaris. Use <Columns /> instead or a combination of <Columns />, <Inline />, and <AlphaStack />',
-      );
-    }
-  }, []);
-
   return (
     <div className={styles.Grid} style={style}>
       {children}
@@ -71,5 +60,4 @@ export function formatAreas(areas?: string[]) {
   return `'${areas?.join(`' '`)}'`;
 }
 
-// eslint-disable-next-line import/no-deprecated
 Grid.Cell = Cell;

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,

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('<Cell />', () => {

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('<Grid />', () => {

polaris.shopify.com/content/components/deprecated/grid.md → 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

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',