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/.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-react/playground/DetailsPage.tsx b/polaris-react/playground/DetailsPage.tsx index 05f33f03559..c249a84a190 100644 --- a/polaris-react/playground/DetailsPage.tsx +++ b/polaris-react/playground/DetailsPage.tsx @@ -19,7 +19,6 @@ import { import { ActionList, Badge, - Caption, Card, ContextualSaveBar, DropZone, @@ -36,12 +35,12 @@ import { SkeletonDisplayText, SkeletonPage, Stack, + Text, TextContainer, TextField, Thumbnail, Toast, TopBar, - VisuallyHidden, } from '../src'; import styles from './DetailsPage.scss'; @@ -451,7 +450,7 @@ export function DetailsPage() { const loadingMarkup = isLoading ? : null; const skipToContentTarget = ( - + Page content - + ); const [title, setTitle] = useState( @@ -534,7 +533,10 @@ export function DetailsPage() { } />
- {file.name} {file.size} bytes + {file.name}{' '} + + {file.size} bytes +
))} 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}; } 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..1f17f83c8c4 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/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 diff --git a/polaris.shopify.com/content/components/visually-hidden.md b/polaris.shopify.com/content/components/visually-hidden.md index daf8451e65b..8e46813801c 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..59e594ad026 100644 --- a/polaris.shopify.com/pages/components/[component].tsx +++ b/polaris.shopify.com/pages/components/[component].tsx @@ -50,6 +50,14 @@ const Components = ({ } : undefined; + const componentExamples = Boolean(examples.length) && ( + + ); + const propsTable = + type && status?.value !== 'Deprecated' ? ( + + ) : null; + return ( @@ -57,10 +65,10 @@ const Components = ({ {typedStatus && } - + {componentExamples} - {type && } + {propsTable} 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);