diff --git a/.changeset/nice-points-confess.md b/.changeset/nice-points-confess.md new file mode 100644 index 00000000000..019322e6df9 --- /dev/null +++ b/.changeset/nice-points-confess.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': minor +'polaris.shopify.com': patch +--- + +Deprecated `Stack` and `Stack.Item` and updated documentation on style guide diff --git a/polaris-react/src/components/Stack/Stack.tsx b/polaris-react/src/components/Stack/Stack.tsx index c353143c52b..5d41a7db0d9 100644 --- a/polaris-react/src/components/Stack/Stack.tsx +++ b/polaris-react/src/components/Stack/Stack.tsx @@ -3,6 +3,7 @@ import React, {memo, NamedExoticComponent} from 'react'; import {classNames, variationName} from '../../utilities/css'; import {elementChildren, wrapWithComponent} from '../../utilities/components'; +// eslint-disable-next-line import/no-deprecated import {Item} from './components'; import styles from './Stack.scss'; @@ -39,6 +40,7 @@ export interface StackProps { distribution?: Distribution; } +/** @deprecated Use LegacyStack or AlphaStack instead. */ export const Stack = memo(function Stack({ children, vertical, @@ -47,6 +49,13 @@ export const Stack = memo(function Stack({ alignment, wrap, }: StackProps) { + 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 or instead.', + ); + } + const className = classNames( styles.Stack, vertical && styles.vertical, @@ -58,12 +67,15 @@ export const Stack = memo(function Stack({ const itemMarkup = elementChildren(children).map((child, index) => { const props = {key: index}; + // eslint-disable-next-line import/no-deprecated return wrapWithComponent(child, Item, props); }); return
{itemMarkup}
; }) as NamedExoticComponent & { + // eslint-disable-next-line import/no-deprecated Item: typeof Item; }; +// eslint-disable-next-line import/no-deprecated Stack.Item = Item; diff --git a/polaris-react/src/components/Stack/components/Item/Item.tsx b/polaris-react/src/components/Stack/components/Item/Item.tsx index 404ba97c457..360ab3967c0 100644 --- a/polaris-react/src/components/Stack/components/Item/Item.tsx +++ b/polaris-react/src/components/Stack/components/Item/Item.tsx @@ -13,7 +13,15 @@ export interface ItemProps { */ } +/** @deprecated Use LegacyStack or AlphaStack instead. */ export function Item({children, fill}: ItemProps) { + 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 or instead.', + ); + } + const className = classNames(styles.Item, fill && styles['Item-fill']); return
{children}
; diff --git a/polaris-react/src/components/Stack/tests/Stack.test.tsx b/polaris-react/src/components/Stack/tests/Stack.test.tsx index a710bd8055a..d095fff3ebb 100644 --- a/polaris-react/src/components/Stack/tests/Stack.test.tsx +++ b/polaris-react/src/components/Stack/tests/Stack.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; +// eslint-disable-next-line import/no-deprecated import {Stack} from '../Stack'; describe('', () => { @@ -9,6 +10,7 @@ describe('', () => { it('renders its children', () => { const stack = mountWithApp({renderChildren()}); + // eslint-disable-next-line import/no-deprecated expect(stack).toContainReactComponentTimes(Stack.Item, 2); }); }); diff --git a/polaris.shopify.com/content/components/layout-and-structure/stack.md b/polaris.shopify.com/content/components/deprecated/stack.md similarity index 93% rename from polaris.shopify.com/content/components/layout-and-structure/stack.md rename to polaris.shopify.com/content/components/deprecated/stack.md index c77a096df09..352a29f3e0f 100644 --- a/polaris.shopify.com/content/components/layout-and-structure/stack.md +++ b/polaris.shopify.com/content/components/deprecated/stack.md @@ -1,7 +1,7 @@ --- title: Stack description: Use to lay out a horizontal row of components or to achieve no-fuss vertical centering. A stack is made of flexible items that wrap each of the stack’s children. Options provide control of the wrapping, spacing, and relative size of the items in the stack. -category: Layout and structure +category: Deprecated keywords: - rows - vertical centering @@ -17,6 +17,11 @@ keywords: - right-aligned stack - stack layout - layout +status: + value: Deprecated + message: >- + Stack was built prior to layout primitives like box, inline, and alpha stack. + The new layout primitives can be used in combination to achieve similar results to stack, or the existing legacy stack. examples: - fileName: stack-default.tsx title: Default diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js index c9c5cf7762a..ad5dd4c667e 100644 --- a/polaris.shopify.com/next.config.js +++ b/polaris.shopify.com/next.config.js @@ -211,6 +211,11 @@ const deprecated = [ destination: '/components/deprecated/sheet', permanent: false, }, + { + source: '/components/stack', + destination: '/components/deprecated/stack', + permanent: false, + }, { source: '/components/subheading', destination: '/components/deprecated/subheading', @@ -340,11 +345,6 @@ const layoutAndStructure = [ destination: '/components/layout-and-structure/alpha-card', permanent: false, }, - { - source: '/components/structure/stack', - destination: '/components/layout-and-structure/alpha-stack', - permanent: false, - }, { source: '/components/alpha-stack', destination: '/components/layout-and-structure/alpha-stack', diff --git a/polaris.shopify.com/public/images/components/layout-and-structure/stack.png b/polaris.shopify.com/public/images/components/deprecated/stack.png similarity index 100% rename from polaris.shopify.com/public/images/components/layout-and-structure/stack.png rename to polaris.shopify.com/public/images/components/deprecated/stack.png