From 8aaf65bff23b3b367913ae4340874fef71907a92 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Tue, 23 Aug 2022 14:49:54 -0400 Subject: [PATCH 1/7] [Typography foundations] Deprecate existing typography components on polaris.shopify.com (#6915) --- .changeset/grumpy-donuts-agree.md | 5 ++ .../content/components/caption.md | 16 +++-- .../content/components/display-text.md | 48 +++++++++---- .../content/components/heading.md | 16 +++-- .../content/components/subheading.md | 16 +++-- .../content/components/text-style.md | 68 +++++++++++++------ .../content/components/visually-hidden.md | 21 ++++-- .../pages/components/[component].tsx | 19 ++---- .../pages/examples/caption-default.tsx | 18 ----- .../examples/display-text-extra-large.tsx | 9 --- .../pages/examples/display-text-large.tsx | 9 --- .../pages/examples/display-text-medium.tsx | 9 --- .../pages/examples/display-text-small.tsx | 9 --- .../pages/examples/heading-default.tsx | 9 --- .../pages/examples/subheading-default.tsx | 9 --- .../pages/examples/text-style-code.tsx | 15 ---- .../pages/examples/text-style-negative.tsx | 9 --- .../pages/examples/text-style-positive.tsx | 9 --- .../pages/examples/text-style-strong.tsx | 9 --- .../pages/examples/text-style-subdued.tsx | 9 --- .../pages/examples/text-style-warning.tsx | 9 --- .../examples/visually-hidden-default.tsx | 35 ---------- .../visually-hidden-table-headers.tsx | 36 ---------- 23 files changed, 145 insertions(+), 267 deletions(-) create mode 100644 .changeset/grumpy-donuts-agree.md delete mode 100644 polaris.shopify.com/pages/examples/caption-default.tsx delete mode 100644 polaris.shopify.com/pages/examples/display-text-extra-large.tsx delete mode 100644 polaris.shopify.com/pages/examples/display-text-large.tsx delete mode 100644 polaris.shopify.com/pages/examples/display-text-medium.tsx delete mode 100644 polaris.shopify.com/pages/examples/display-text-small.tsx delete mode 100644 polaris.shopify.com/pages/examples/heading-default.tsx delete mode 100644 polaris.shopify.com/pages/examples/subheading-default.tsx delete mode 100644 polaris.shopify.com/pages/examples/text-style-code.tsx delete mode 100644 polaris.shopify.com/pages/examples/text-style-negative.tsx delete mode 100644 polaris.shopify.com/pages/examples/text-style-positive.tsx delete mode 100644 polaris.shopify.com/pages/examples/text-style-strong.tsx delete mode 100644 polaris.shopify.com/pages/examples/text-style-subdued.tsx delete mode 100644 polaris.shopify.com/pages/examples/text-style-warning.tsx delete mode 100644 polaris.shopify.com/pages/examples/visually-hidden-default.tsx delete mode 100644 polaris.shopify.com/pages/examples/visually-hidden-table-headers.tsx diff --git a/.changeset/grumpy-donuts-agree.md b/.changeset/grumpy-donuts-agree.md new file mode 100644 index 00000000000..a2b393a9d72 --- /dev/null +++ b/.changeset/grumpy-donuts-agree.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': minor +--- + +Deprecated `DisplayText`, `Heading`, `Subheading`, `Caption`, `TextStyle`, and `VisuallyHidden` pages and removed examples diff --git a/polaris.shopify.com/content/components/caption.md b/polaris.shopify.com/content/components/caption.md index dd4df9d59cc..fa8381e0593 100644 --- a/polaris.shopify.com/content/components/caption.md +++ b/polaris.shopify.com/content/components/caption.md @@ -15,10 +15,18 @@ keywords: - time text - compact text - small text -examples: - - fileName: caption-default.tsx - title: Default - description: Use to provide details in situations where content is compact and space is tight. +status: + value: Deprecated + message: This component is no longer supported. Please use the Text component instead. +--- + +## Mapping to the Text component + +```diff +- Received April 21, 2017 ++ Received April 21, 2017 +``` + --- ## Best practices diff --git a/polaris.shopify.com/content/components/display-text.md b/polaris.shopify.com/content/components/display-text.md index eae7cfe7cdd..c981cf73fc6 100644 --- a/polaris.shopify.com/content/components/display-text.md +++ b/polaris.shopify.com/content/components/display-text.md @@ -23,19 +23,41 @@ keywords: - visual story telling - visual storytelling - visual statements -examples: - - fileName: display-text-extra-large.tsx - title: Extra large - description: Use this size sparingly and never multiple times on the same page. - - fileName: display-text-large.tsx - title: Large - description: Use for display text that’s more important than the medium size, but less important than extra large. - - fileName: display-text-medium.tsx - title: Medium - description: Use for display text that’s more important than the small size, but less important than large. - - fileName: display-text-small.tsx - title: Small - description: Use for text that would otherwise use body text, but that needs to scale with other display text. +status: + value: Deprecated + message: This component is no longer supported. Please use the Text component instead. +--- + +## Mapping to the Text component + +### Small + +```diff +- Sales this year ++ Sales this year +``` + +### Medium + +```diff +- Sales this year ++ Sales this year +``` + +### Large + +```diff +- Sales this year ++ Sales this year +``` + +### Extra large + +```diff +- Sales this year ++ Sales this year +``` + --- ## Best practices diff --git a/polaris.shopify.com/content/components/heading.md b/polaris.shopify.com/content/components/heading.md index 06cc0252819..1945d08a774 100644 --- a/polaris.shopify.com/content/components/heading.md +++ b/polaris.shopify.com/content/components/heading.md @@ -14,10 +14,18 @@ keywords: - section headings - heading text - heading font -examples: - - fileName: heading-default.tsx - title: Default - description: Use for the title of each top-level page section. +status: + value: Deprecated + message: This component is no longer supported. Please use the Text component instead. +--- + +## Mapping to the Text component + +```diff +- Online store dashboard ++ Online store dashboard +``` + --- ## Best practices diff --git a/polaris.shopify.com/content/components/subheading.md b/polaris.shopify.com/content/components/subheading.md index 5a3ae98b4c4..474d0af625c 100644 --- a/polaris.shopify.com/content/components/subheading.md +++ b/polaris.shopify.com/content/components/subheading.md @@ -10,10 +10,18 @@ keywords: - titles of sub-sections - subsection titles - titles of subsections -examples: - - fileName: subheading-default.tsx - title: Default - description: Used for the title of any sub-sections in top-level page sections. +status: + value: Deprecated + message: This component is no longer supported. Please use the Text component instead. +--- + +## Mapping to the Text component + +```diff +- Accounts ++ Accounts +``` + --- ## Best practices diff --git a/polaris.shopify.com/content/components/text-style.md b/polaris.shopify.com/content/components/text-style.md index 7c1e78d04a4..aaf14cc7398 100644 --- a/polaris.shopify.com/content/components/text-style.md +++ b/polaris.shopify.com/content/components/text-style.md @@ -19,25 +19,55 @@ keywords: - decrease - input - fields -examples: - - fileName: text-style-subdued.tsx - title: Subdued - description: Use to de-emphasize a piece of text that is less important to merchants than other nearby text. May also be used to indicate when normal content is absent, for example, “No supplier listed”. Don’t use only for aesthetic effect. - - fileName: text-style-strong.tsx - title: Strong - description: Use to mark text representing user input, or to emphasize the totals row in a price table. - - fileName: text-style-positive.tsx - title: Positive - description: Use in combination with a symbol showing an increasing value to indicate an upward trend. - - fileName: text-style-negative.tsx - title: Negative - description: Use in combination with a symbol showing a decreasing value to indicate a downward trend. - - fileName: text-style-warning.tsx - title: Warning - description: Use to denote something that needs attention, or that merchants need to take action on. - - fileName: text-style-code.tsx - title: Code - description: Use to display inline snippets of code or code-like text. +status: + value: Deprecated + message: This component is no longer supported. Please use the Text component instead. +--- + +## Mapping to the Text component + +### Subdued + +```diff +- No supplier listed ++ No supplier listed +``` + +### Strong + +```diff +- No supplier listed ++ No supplier listed +``` + +### Positive + +```diff +- No supplier listed ++ No supplier listed +``` + +### Negative + +```diff +- No supplier listed ++ No supplier listed +``` + +### Warning + +```diff +- No supplier listed ++ No supplier listed +``` + +### Code + +```diff +- No supplier listed ++ No supplier listed +``` + --- ## Best practices diff --git a/polaris.shopify.com/content/components/visually-hidden.md b/polaris.shopify.com/content/components/visually-hidden.md index daf8451e65b..c8ccd77242a 100644 --- a/polaris.shopify.com/content/components/visually-hidden.md +++ b/polaris.shopify.com/content/components/visually-hidden.md @@ -17,13 +17,20 @@ keywords: - accessibility - a11y - assistive technology -examples: - - fileName: visually-hidden-default.tsx - title: Default - description: Always provide a heading for a major page section such as a card. In rare cases the heading is visually redundant and the meaning is conveyed by context. Rather than omit the heading, wrap the heading in the visually hidden component. - - fileName: visually-hidden-table-headers.tsx - title: Table headers - description: Whenever one or more table columns has no need for a visible header, hide the header content rather than omitting it. Note that due to browser quirks the visually hidden component must go inside each ``. +status: + value: Deprecated + message: This component is no longer supported. Please use the Text component instead. +--- + +## Mapping to the Text component + +```diff +- +- Title and description +- ++ Title and description +``` + --- ## Best practices diff --git a/polaris.shopify.com/pages/components/[component].tsx b/polaris.shopify.com/pages/components/[component].tsx index a84372b869b..21347c6abb8 100644 --- a/polaris.shopify.com/pages/components/[component].tsx +++ b/polaris.shopify.com/pages/components/[component].tsx @@ -43,12 +43,9 @@ const Components = ({ type, editPageLinkPath, }: Props) => { - const typedStatus: Status | undefined = status - ? { - value: status.value.toLowerCase() as Status['value'], - message: status.message, - } - : undefined; + const statusBanner = status ? : null; + const propList = + type && status?.value !== 'Deprecated' ? : null; return ( @@ -56,13 +53,9 @@ const Components = ({ - {typedStatus && } - - - - {type && } - - + {statusBanner} + {Boolean(examples.length) && } + {propList} diff --git a/polaris.shopify.com/pages/examples/caption-default.tsx b/polaris.shopify.com/pages/examples/caption-default.tsx deleted file mode 100644 index 6d8213c9e7c..00000000000 --- a/polaris.shopify.com/pages/examples/caption-default.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import {List, Caption} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function Example() { - return ( - - - Order #1001 Received April 21, 2017 - - - Order #1002 Received April 22, 2017 - - - ); -} - -export default withPolarisExample(Example); diff --git a/polaris.shopify.com/pages/examples/display-text-extra-large.tsx b/polaris.shopify.com/pages/examples/display-text-extra-large.tsx deleted file mode 100644 index 72badab7445..00000000000 --- a/polaris.shopify.com/pages/examples/display-text-extra-large.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {DisplayText} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function DisplayExample() { - return Good evening, Dominic.; -} - -export default withPolarisExample(DisplayExample); diff --git a/polaris.shopify.com/pages/examples/display-text-large.tsx b/polaris.shopify.com/pages/examples/display-text-large.tsx deleted file mode 100644 index 65a370faf9b..00000000000 --- a/polaris.shopify.com/pages/examples/display-text-large.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {DisplayText} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function DisplayExample() { - return Good evening, Dominic.; -} - -export default withPolarisExample(DisplayExample); diff --git a/polaris.shopify.com/pages/examples/display-text-medium.tsx b/polaris.shopify.com/pages/examples/display-text-medium.tsx deleted file mode 100644 index d3eb5aac153..00000000000 --- a/polaris.shopify.com/pages/examples/display-text-medium.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {DisplayText} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function DisplayExample() { - return Good evening, Dominic.; -} - -export default withPolarisExample(DisplayExample); diff --git a/polaris.shopify.com/pages/examples/display-text-small.tsx b/polaris.shopify.com/pages/examples/display-text-small.tsx deleted file mode 100644 index 3e1781046a3..00000000000 --- a/polaris.shopify.com/pages/examples/display-text-small.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {DisplayText} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function DisplayExample() { - return Good evening, Dominic.; -} - -export default withPolarisExample(DisplayExample); diff --git a/polaris.shopify.com/pages/examples/heading-default.tsx b/polaris.shopify.com/pages/examples/heading-default.tsx deleted file mode 100644 index 2b39dc576d9..00000000000 --- a/polaris.shopify.com/pages/examples/heading-default.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {Heading} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function HeadingExample() { - return Online store dashboard; -} - -export default withPolarisExample(HeadingExample); diff --git a/polaris.shopify.com/pages/examples/subheading-default.tsx b/polaris.shopify.com/pages/examples/subheading-default.tsx deleted file mode 100644 index 16de6f3809a..00000000000 --- a/polaris.shopify.com/pages/examples/subheading-default.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {Subheading} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function Example() { - return Accounts; -} - -export default withPolarisExample(Example); diff --git a/polaris.shopify.com/pages/examples/text-style-code.tsx b/polaris.shopify.com/pages/examples/text-style-code.tsx deleted file mode 100644 index e90ecbc2f2f..00000000000 --- a/polaris.shopify.com/pages/examples/text-style-code.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import {TextStyle} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function TextStyleExample() { - return ( -

- New URL that visitors should be forwarded to. If you want your store’s - homepage, enter / (a forward - slash). -

- ); -} - -export default withPolarisExample(TextStyleExample); diff --git a/polaris.shopify.com/pages/examples/text-style-negative.tsx b/polaris.shopify.com/pages/examples/text-style-negative.tsx deleted file mode 100644 index 68d6a96d565..00000000000 --- a/polaris.shopify.com/pages/examples/text-style-negative.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {TextStyle} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function TextStyleExample() { - return Orders decreased; -} - -export default withPolarisExample(TextStyleExample); diff --git a/polaris.shopify.com/pages/examples/text-style-positive.tsx b/polaris.shopify.com/pages/examples/text-style-positive.tsx deleted file mode 100644 index ed3a68e562d..00000000000 --- a/polaris.shopify.com/pages/examples/text-style-positive.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {TextStyle} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function TextStyleExample() { - return Orders increased; -} - -export default withPolarisExample(TextStyleExample); diff --git a/polaris.shopify.com/pages/examples/text-style-strong.tsx b/polaris.shopify.com/pages/examples/text-style-strong.tsx deleted file mode 100644 index 59ab4e7f376..00000000000 --- a/polaris.shopify.com/pages/examples/text-style-strong.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {TextStyle} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function TextStyleExample() { - return Total; -} - -export default withPolarisExample(TextStyleExample); diff --git a/polaris.shopify.com/pages/examples/text-style-subdued.tsx b/polaris.shopify.com/pages/examples/text-style-subdued.tsx deleted file mode 100644 index f3f19563760..00000000000 --- a/polaris.shopify.com/pages/examples/text-style-subdued.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {TextStyle} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function TextStyleExample() { - return No supplier listed; -} - -export default withPolarisExample(TextStyleExample); diff --git a/polaris.shopify.com/pages/examples/text-style-warning.tsx b/polaris.shopify.com/pages/examples/text-style-warning.tsx deleted file mode 100644 index c416527262f..00000000000 --- a/polaris.shopify.com/pages/examples/text-style-warning.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import {TextStyle} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function TextStyleExample() { - return Scheduled maintenance; -} - -export default withPolarisExample(TextStyleExample); diff --git a/polaris.shopify.com/pages/examples/visually-hidden-default.tsx b/polaris.shopify.com/pages/examples/visually-hidden-default.tsx deleted file mode 100644 index cc5c4825186..00000000000 --- a/polaris.shopify.com/pages/examples/visually-hidden-default.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { - Card, - VisuallyHidden, - Heading, - FormLayout, - TextField, -} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function VisuallyHiddenExample() { - return ( - - - Title and description - - - {}} - autoComplete="off" - /> - {}} - autoComplete="off" - /> - - - ); -} - -export default withPolarisExample(VisuallyHiddenExample); diff --git a/polaris.shopify.com/pages/examples/visually-hidden-table-headers.tsx b/polaris.shopify.com/pages/examples/visually-hidden-table-headers.tsx deleted file mode 100644 index e1da3969156..00000000000 --- a/polaris.shopify.com/pages/examples/visually-hidden-table-headers.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import {VisuallyHidden} from '@shopify/polaris'; -import React from 'react'; -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function VisuallyHiddenExample() { - return ( - - - - - - - - - - - - - - - - - - - - - -
- Line item - - Value -
Subtotal$184.13
Tax$0.00
Total$184.13
- ); -} - -export default withPolarisExample(VisuallyHiddenExample); From de19332b8198cd2b3523ad33342214eea64b302a Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 27 Oct 2022 08:00:15 -0400 Subject: [PATCH 2/7] [polaris.shopify.com] Update `Components` to hide prop list for deprecated components --- .../pages/components/[component].tsx | 27 ++++++++++++++----- 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/polaris.shopify.com/pages/components/[component].tsx b/polaris.shopify.com/pages/components/[component].tsx index 21347c6abb8..59e594ad026 100644 --- a/polaris.shopify.com/pages/components/[component].tsx +++ b/polaris.shopify.com/pages/components/[component].tsx @@ -43,9 +43,20 @@ const Components = ({ type, editPageLinkPath, }: Props) => { - const statusBanner = status ? : null; - const propList = - type && status?.value !== 'Deprecated' ? : null; + const typedStatus: Status | undefined = status + ? { + value: status.value.toLowerCase() as Status['value'], + message: status.message, + } + : undefined; + + const componentExamples = Boolean(examples.length) && ( + + ); + const propsTable = + type && status?.value !== 'Deprecated' ? ( + + ) : null; return ( @@ -53,9 +64,13 @@ const Components = ({ - {statusBanner} - {Boolean(examples.length) && } - {propList} + {typedStatus && } + {componentExamples} + + + {propsTable} + + From b79cf0fa0dcd5156d41a7d867b19bccffba07167 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Wed, 2 Nov 2022 09:13:44 -0400 Subject: [PATCH 3/7] [Typography foundations] Add deprecation warnings for existing Text components (#6605) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ~~#### WARNING ⚠️~~ ~~https://polaris.shopify.com/components/text is not currently active~~ ~~Do Not Merge!~~ Fixes #6537 Add deprecation warnings to all of the following existing Text components: - TextStyle - DisplayText - Heading - Subheading - Caption - VisuallyHidden | Text component | `console.log` | | --- | --- | | Screen Shot 2022-07-12 at 10 12 53 AM | Screen Shot 2022-07-12 at 10 12 23 AM | Co-authored-by: Lo Kim --- .changeset/grumpy-cycles-explode.md | 5 +++++ polaris-react/playground/DetailsPage.tsx | 2 ++ polaris-react/src/components/Caption/Caption.tsx | 14 ++++++++++++++ .../components/Caption/tests/Caption.test.tsx | 1 + .../src/components/DisplayText/DisplayText.tsx | 14 ++++++++++++++ .../DisplayText/tests/DisplayText.test.tsx | 1 + polaris-react/src/components/Heading/Heading.tsx | 14 ++++++++++++++ .../components/Heading/tests/Heading.test.tsx | 1 + .../src/components/Subheading/Subheading.tsx | 16 +++++++++++++++- .../Subheading/tests/Subheading.test.tsx | 1 + .../src/components/TextField/TextField.tsx | 2 +- .../src/components/TextStyle/TextStyle.tsx | 15 +++++++++++++++ .../TextStyle/tests/TextStyle.test.tsx | 1 + .../components/VisuallyHidden/VisuallyHidden.tsx | 14 ++++++++++++++ 14 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 .changeset/grumpy-cycles-explode.md diff --git a/.changeset/grumpy-cycles-explode.md b/.changeset/grumpy-cycles-explode.md new file mode 100644 index 00000000000..cba7859105d --- /dev/null +++ b/.changeset/grumpy-cycles-explode.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Deprecated `DisplayText`, `Heading`, `Subheading`, `Caption`, `TextStyle`, and `VisuallyHidden` components diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx index 05f33f03559..1ed4bb36077 100644 --- a/polaris-react/playground/DetailsPage.tsx +++ b/polaris-react/playground/DetailsPage.tsx @@ -19,6 +19,7 @@ import { import { ActionList, Badge, + // eslint-disable-next-line import/no-deprecated Caption, Card, ContextualSaveBar, @@ -41,6 +42,7 @@ import { Thumbnail, Toast, TopBar, + // eslint-disable-next-line import/no-deprecated VisuallyHidden, } from '../src'; diff --git a/polaris-react/src/components/Caption/Caption.tsx b/polaris-react/src/components/Caption/Caption.tsx index 499fe3b3018..d58b223b44b 100644 --- a/polaris-react/src/components/Caption/Caption.tsx +++ b/polaris-react/src/components/Caption/Caption.tsx @@ -7,6 +7,20 @@ export interface CaptionProps { children?: React.ReactNode; } +/** + * @deprecated The Caption component will be removed in the next + * major version. Use the Text component instead. See the + * Polaris component guide on how to use Text. + * + * https://polaris.shopify.com/components/text + */ export function Caption({children}: CaptionProps) { + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: The `Caption` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text', + ); + } + return

{children}

; } diff --git a/polaris-react/src/components/Caption/tests/Caption.test.tsx b/polaris-react/src/components/Caption/tests/Caption.test.tsx index f43e86afff4..b04fdf4e93e 100644 --- a/polaris-react/src/components/Caption/tests/Caption.test.tsx +++ b/polaris-react/src/components/Caption/tests/Caption.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; +// eslint-disable-next-line import/no-deprecated import {Caption} from '../Caption'; describe('', () => { diff --git a/polaris-react/src/components/DisplayText/DisplayText.tsx b/polaris-react/src/components/DisplayText/DisplayText.tsx index 7dc182786d8..e4cff78a769 100644 --- a/polaris-react/src/components/DisplayText/DisplayText.tsx +++ b/polaris-react/src/components/DisplayText/DisplayText.tsx @@ -22,6 +22,13 @@ export interface DisplayTextProps { children?: React.ReactNode; } +/** + * @deprecated The DisplayText component will be removed in the next + * major version. Use the Text component instead. See the + * Polaris component guide on how to use Text. + * + * https://polaris.shopify.com/components/text + */ export function DisplayText({ element: Element = 'p', children, @@ -32,5 +39,12 @@ export function DisplayText({ size && styles[variationName('size', size)], ); + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: The `DisplayText` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text', + ); + } + return {children}; } diff --git a/polaris-react/src/components/DisplayText/tests/DisplayText.test.tsx b/polaris-react/src/components/DisplayText/tests/DisplayText.test.tsx index 62b7774ce1e..e1fc5169c88 100644 --- a/polaris-react/src/components/DisplayText/tests/DisplayText.test.tsx +++ b/polaris-react/src/components/DisplayText/tests/DisplayText.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; +// eslint-disable-next-line import/no-deprecated import {DisplayText} from '../DisplayText'; describe('', () => { diff --git a/polaris-react/src/components/Heading/Heading.tsx b/polaris-react/src/components/Heading/Heading.tsx index b91cf418933..c58326ad719 100644 --- a/polaris-react/src/components/Heading/Heading.tsx +++ b/polaris-react/src/components/Heading/Heading.tsx @@ -16,7 +16,21 @@ export interface HeadingProps { id?: string; } +/** + * @deprecated The Heading component will be removed in the next + * major version. Use the Text component instead. See the + * Polaris component guide on how to use Text. + * + * https://polaris.shopify.com/components/text + */ export function Heading({element: Element = 'h2', children, id}: HeadingProps) { + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: The `Heading` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text', + ); + } + return ( {children} diff --git a/polaris-react/src/components/Heading/tests/Heading.test.tsx b/polaris-react/src/components/Heading/tests/Heading.test.tsx index 652c9d2ab7e..e4851751985 100644 --- a/polaris-react/src/components/Heading/tests/Heading.test.tsx +++ b/polaris-react/src/components/Heading/tests/Heading.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; +// eslint-disable-next-line import/no-deprecated import {Heading} from '../Heading'; describe('', () => { diff --git a/polaris-react/src/components/Subheading/Subheading.tsx b/polaris-react/src/components/Subheading/Subheading.tsx index 603fe2d9b78..75b71fe90a5 100644 --- a/polaris-react/src/components/Subheading/Subheading.tsx +++ b/polaris-react/src/components/Subheading/Subheading.tsx @@ -13,12 +13,26 @@ export interface SubheadingProps { /** Text to display in subheading */ children?: React.ReactNode; } - +/** + * @deprecated The Subheading component will be removed in the next + * major version. Use the Text component instead. See the + * Polaris component guide on how to use Text. + * + * https://polaris.shopify.com/components/text + */ export function Subheading({ element: Element = 'h3', children, }: SubheadingProps) { const ariaLabel = typeof children === 'string' ? children : undefined; + + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: The `Subheading` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text', + ); + } + return ( {children} diff --git a/polaris-react/src/components/Subheading/tests/Subheading.test.tsx b/polaris-react/src/components/Subheading/tests/Subheading.test.tsx index efe29cb439a..0b159757114 100644 --- a/polaris-react/src/components/Subheading/tests/Subheading.test.tsx +++ b/polaris-react/src/components/Subheading/tests/Subheading.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; import {Button} from '../../Button'; +// eslint-disable-next-line import/no-deprecated import {Subheading} from '../Subheading'; describe('', () => { diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx index 0f200c8c707..1389b80b1eb 100644 --- a/polaris-react/src/components/TextField/TextField.tsx +++ b/polaris-react/src/components/TextField/TextField.tsx @@ -7,7 +7,6 @@ import React, { } from 'react'; import {CircleCancelMinor} from '@shopify/polaris-icons'; -import {Text} from '../Text'; import {classNames, variationName} from '../../utilities/css'; import {useI18n} from '../../utilities/i18n'; import {useUniqueId} from '../../utilities/unique-id'; @@ -16,6 +15,7 @@ import {Labelled, LabelledProps, helpTextID, labelID} from '../Labelled'; import {Connected} from '../Connected'; import {Error, Key} from '../../types'; import {Icon} from '../Icon'; +import {Text} from '../Text'; import {Resizer, Spinner, SpinnerProps} from './components'; import styles from './TextField.scss'; diff --git a/polaris-react/src/components/TextStyle/TextStyle.tsx b/polaris-react/src/components/TextStyle/TextStyle.tsx index a77543d26b6..badaf6c413d 100644 --- a/polaris-react/src/components/TextStyle/TextStyle.tsx +++ b/polaris-react/src/components/TextStyle/TextStyle.tsx @@ -28,11 +28,26 @@ export interface TextStyleProps { children?: React.ReactNode; } +/** + * @deprecated The TextStyle component will be removed in the next + * major version. Use the Text component instead. See the + * Polaris component guide on how to use Text. + * + * https://polaris.shopify.com/components/text + */ export function TextStyle({variation, children}: TextStyleProps) { const className = classNames( variation && styles[variationName('variation', variation)], variation === VariationValue.Code && styles.code, ); + + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: The `TextStyle` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text', + ); + } + const Element = variationElement(variation); return {children}; diff --git a/polaris-react/src/components/TextStyle/tests/TextStyle.test.tsx b/polaris-react/src/components/TextStyle/tests/TextStyle.test.tsx index 6502d5b6ba5..5515fa917d0 100644 --- a/polaris-react/src/components/TextStyle/tests/TextStyle.test.tsx +++ b/polaris-react/src/components/TextStyle/tests/TextStyle.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../TextStyle'; describe('', () => { diff --git a/polaris-react/src/components/VisuallyHidden/VisuallyHidden.tsx b/polaris-react/src/components/VisuallyHidden/VisuallyHidden.tsx index 2d6fb4e4ed3..d1620b284f2 100644 --- a/polaris-react/src/components/VisuallyHidden/VisuallyHidden.tsx +++ b/polaris-react/src/components/VisuallyHidden/VisuallyHidden.tsx @@ -7,6 +7,20 @@ export interface VisuallyHiddenProps { children?: React.ReactNode; } +/** + * @deprecated The VisuallyHidden component will be removed in the next + * major version. Use the Text component instead. See the + * Polaris component guide on how to use Text. + * + * https://polaris.shopify.com/components/text + */ export function VisuallyHidden({children}: VisuallyHiddenProps) { + if (process.env.NODE_ENV === 'development') { + // eslint-disable-next-line no-console + console.warn( + 'Deprecation: The VisuallyHidden` component has been deprecated. Use the `Text` component instead. See the Polaris component guide on how to use `Text`. https://polaris.shopify.com/components/text', + ); + } + return {children}; } From a9559db3cfa6b3ba3edfefd4f32bbda15ec1bea9 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 3 Nov 2022 17:10:48 -0400 Subject: [PATCH 4/7] Replace text in `DetailsPage` story --- polaris-react/playground/DetailsPage.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/polaris-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx index 1ed4bb36077..c249a84a190 100644 --- a/polaris-react/playground/DetailsPage.tsx +++ b/polaris-react/playground/DetailsPage.tsx @@ -19,8 +19,6 @@ import { import { ActionList, Badge, - // eslint-disable-next-line import/no-deprecated - Caption, Card, ContextualSaveBar, DropZone, @@ -37,13 +35,12 @@ import { SkeletonDisplayText, SkeletonPage, Stack, + Text, TextContainer, TextField, Thumbnail, Toast, TopBar, - // eslint-disable-next-line import/no-deprecated - VisuallyHidden, } from '../src'; import styles from './DetailsPage.scss'; @@ -453,7 +450,7 @@ export function DetailsPage() { const loadingMarkup = isLoading ? : null; const skipToContentTarget = ( - + Page content - + ); const [title, setTitle] = useState( @@ -536,7 +533,10 @@ export function DetailsPage() { } />
- {file.name} {file.size} bytes + {file.name}{' '} + + {file.size} bytes +
))} From 4e0ca62c5bf11e710606492049b14431ec760949 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 3 Nov 2022 17:49:51 -0400 Subject: [PATCH 5/7] Update font weight mapping for `` --- polaris.shopify.com/content/components/text-style.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris.shopify.com/content/components/text-style.md b/polaris.shopify.com/content/components/text-style.md index aaf14cc7398..1f17f83c8c4 100644 --- a/polaris.shopify.com/content/components/text-style.md +++ b/polaris.shopify.com/content/components/text-style.md @@ -37,7 +37,7 @@ status: ```diff - No supplier listed -+ No supplier listed ++ No supplier listed ``` ### Positive From 75ed7e0505d96404ffcd878ab4eae11565ab5601 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Thu, 3 Nov 2022 17:54:35 -0400 Subject: [PATCH 6/7] Update variant mapping for `VisuallyHidden` docs --- polaris.shopify.com/content/components/visually-hidden.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris.shopify.com/content/components/visually-hidden.md b/polaris.shopify.com/content/components/visually-hidden.md index c8ccd77242a..8e46813801c 100644 --- a/polaris.shopify.com/content/components/visually-hidden.md +++ b/polaris.shopify.com/content/components/visually-hidden.md @@ -28,7 +28,7 @@ status: - - Title and description - -+ Title and description ++ Title and description ``` --- From 3d6015395fe923f81a6b7d196ee70029ecc32705 Mon Sep 17 00:00:00 2001 From: Lo Kim Date: Fri, 4 Nov 2022 11:14:40 -0400 Subject: [PATCH 7/7] Add `beta` flag to `Text` in style guide --- polaris.shopify.com/content/components/text.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris.shopify.com/content/components/text.md b/polaris.shopify.com/content/components/text.md index 96547ca16ec..1b716f66953 100644 --- a/polaris.shopify.com/content/components/text.md +++ b/polaris.shopify.com/content/components/text.md @@ -20,7 +20,7 @@ keywords: - bold - list status: - value: Alpha + value: Beta message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution. examples: - fileName: text-heading.tsx