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/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx index 0810bb83c14..1e5adc6740d 100644 --- a/polaris-react/src/components/AccountConnection/AccountConnection.tsx +++ b/polaris-react/src/components/AccountConnection/AccountConnection.tsx @@ -5,6 +5,7 @@ import {Avatar} from '../Avatar'; import {buttonFrom} from '../Button'; import {Card} from '../Card'; import {Stack} from '../Stack'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../TextStyle'; import {SettingAction} from '../SettingAction'; diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx index 0d56d5a34a9..8417dbd0dec 100644 --- a/polaris-react/src/components/ActionList/components/Item/Item.tsx +++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx @@ -6,6 +6,7 @@ import {Scrollable} from '../../../Scrollable'; import {Icon} from '../../../Icon'; import {UnstyledLink} from '../../../UnstyledLink'; import {Badge} from '../../../Badge'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../../TextStyle'; import styles from '../../ActionList.scss'; import {handleMouseUpByBlurring} from '../../../../utilities/focus'; diff --git a/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx b/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx index 533a91bafb9..997093014a4 100644 --- a/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx +++ b/polaris-react/src/components/ActionList/components/Item/tests/Item.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; import {Item} from '../Item'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../../../TextStyle'; import {UnstyledLink} from '../../../../UnstyledLink'; @@ -54,6 +55,7 @@ describe('', () => { it('renders helpText when the helpText prop is defined', () => { const helpText = 'Foo'; const item = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(item.find(TextStyle)).toContainReactText(helpText); }); diff --git a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx index 8175a440e71..dab52cb0dd9 100644 --- a/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx +++ b/polaris-react/src/components/Autocomplete/components/MappedAction/MappedAction.tsx @@ -6,6 +6,7 @@ import {classNames} from '../../../../utilities/css'; import {MappedActionContext} from '../../../../utilities/autocomplete'; import {Listbox} from '../../../Listbox'; import {Icon} from '../../../Icon'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../../TextStyle'; import {useI18n} from '../../../../utilities/i18n'; diff --git a/polaris-react/src/components/Badge/Badge.tsx b/polaris-react/src/components/Badge/Badge.tsx index 793f4a403f3..65cfa917b51 100644 --- a/polaris-react/src/components/Badge/Badge.tsx +++ b/polaris-react/src/components/Badge/Badge.tsx @@ -3,6 +3,7 @@ import React, {useContext} from 'react'; import {classNames, variationName} from '../../utilities/css'; import {useI18n} from '../../utilities/i18n'; import {WithinFilterContext} from '../../utilities/within-filter-context'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../VisuallyHidden'; import {Icon} from '../Icon'; import type {IconSource} from '../../types'; diff --git a/polaris-react/src/components/Badge/components/Pip/Pip.tsx b/polaris-react/src/components/Badge/components/Pip/Pip.tsx index d0a96b3b5bf..97ef9e0f52a 100644 --- a/polaris-react/src/components/Badge/components/Pip/Pip.tsx +++ b/polaris-react/src/components/Badge/components/Pip/Pip.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {classNames, variationName} from '../../../../utilities/css'; import type {Progress, Status} from '../../types'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../../VisuallyHidden'; import {useI18n} from '../../../../utilities/i18n'; import {getDefaultAccessibilityLabel} from '../../utils'; diff --git a/polaris-react/src/components/Badge/tests/Badge.test.tsx b/polaris-react/src/components/Badge/tests/Badge.test.tsx index e73ad674ea5..e5bf8223039 100644 --- a/polaris-react/src/components/Badge/tests/Badge.test.tsx +++ b/polaris-react/src/components/Badge/tests/Badge.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; import {GlobeMinor} from '@shopify/polaris-icons'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../VisuallyHidden'; import {Icon} from '../../Icon'; import {Badge} from '../Badge'; @@ -14,11 +15,13 @@ describe('', () => { it('accepts a status prop and renders a visually hidden label', () => { const badge = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden); }); it('accepts a progress prop and renders a visually hidden label', () => { const badge = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden); }); @@ -27,6 +30,7 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponentTimes(VisuallyHidden, 1, { children: 'Attention Incomplete', }); @@ -87,6 +91,7 @@ describe('', () => { />, ); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden, { children: mockAccessibilityLabel, }); @@ -102,6 +107,7 @@ describe('', () => { />, ); + // eslint-disable-next-line import/no-deprecated expect(badge).not.toContainReactComponent(VisuallyHidden, { children: 'Attention Incomplete', }); @@ -112,24 +118,28 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden, { children: 'Attention Incomplete', }); badge = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden, { children: 'Incomplete', }); badge = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden, { children: 'Attention', }); badge = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(badge).not.toContainReactComponent(VisuallyHidden); }); }); @@ -140,24 +150,28 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden, { children: 'Attention Incomplete', }); badge = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden, { children: 'Partially complete', }); badge = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden, { children: 'Attention Complete', }); badge = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(badge).toContainReactComponent(VisuallyHidden, { children: 'Complete', }); diff --git a/polaris-react/src/components/Banner/Banner.tsx b/polaris-react/src/components/Banner/Banner.tsx index eb3dc1875d2..f3742833615 100644 --- a/polaris-react/src/components/Banner/Banner.tsx +++ b/polaris-react/src/components/Banner/Banner.tsx @@ -19,6 +19,7 @@ import {useUniqueId} from '../../utilities/unique-id'; import {useI18n} from '../../utilities/i18n'; import type {Action, DisableableAction, LoadableAction} from '../../types'; import {Button} from '../Button'; +// eslint-disable-next-line import/no-deprecated import {Heading} from '../Heading'; import {ButtonGroup} from '../ButtonGroup'; import {UnstyledButton, unstyledButtonFrom} from '../UnstyledButton'; diff --git a/polaris-react/src/components/Banner/tests/Banner.test.tsx b/polaris-react/src/components/Banner/tests/Banner.test.tsx index f6cf3e3042b..417311c69e2 100644 --- a/polaris-react/src/components/Banner/tests/Banner.test.tsx +++ b/polaris-react/src/components/Banner/tests/Banner.test.tsx @@ -9,6 +9,7 @@ import { import {mountWithApp} from 'tests/utilities'; import {Button} from '../../Button'; +// eslint-disable-next-line import/no-deprecated import {Heading} from '../../Heading'; import {Icon} from '../../Icon'; import {Spinner} from '../../Spinner'; @@ -21,11 +22,13 @@ import {Banner, BannerHandles} from '../Banner'; describe('', () => { it('renders a title', () => { const banner = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(banner.find(Heading)).toContainReactText('Banner title'); }); it('passes a p element to Heading', () => { const banner = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(banner).toContainReactComponent(Heading, {element: 'p'}); }); diff --git a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx index 6401d34a770..7a706bb6d19 100644 --- a/polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx +++ b/polaris-react/src/components/Breadcrumbs/Breadcrumbs.tsx @@ -5,6 +5,7 @@ import {Icon} from '../Icon'; import {UnstyledLink} from '../UnstyledLink'; import type {CallbackAction, LinkAction} from '../../types'; import {handleMouseUpByBlurring} from '../../utilities/focus'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../VisuallyHidden'; import styles from './Breadcrumbs.scss'; diff --git a/polaris-react/src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx b/polaris-react/src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx index a830c7c3b03..84b8e842775 100644 --- a/polaris-react/src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx +++ b/polaris-react/src/components/Breadcrumbs/tests/Breadcrumbs.test.tsx @@ -3,6 +3,7 @@ import {mountWithApp} from 'tests/utilities'; import type {CallbackAction, LinkAction} from '../../../types'; import {Breadcrumbs} from '../Breadcrumbs'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../VisuallyHidden'; describe('', () => { @@ -103,6 +104,7 @@ describe('', () => { it('renders breadcrumb content as a visually hidden label when the new design language is enabled', () => { const wrapper = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(wrapper).toContainReactComponent(VisuallyHidden, { children: 'Products', }); diff --git a/polaris-react/src/components/CalloutCard/CalloutCard.tsx b/polaris-react/src/components/CalloutCard/CalloutCard.tsx index d39a2e49a49..7bb747d632e 100644 --- a/polaris-react/src/components/CalloutCard/CalloutCard.tsx +++ b/polaris-react/src/components/CalloutCard/CalloutCard.tsx @@ -7,6 +7,7 @@ import {Card} from '../Card'; import {TextContainer} from '../TextContainer'; import {ButtonGroup} from '../ButtonGroup'; import {Button, buttonFrom} from '../Button'; +// eslint-disable-next-line import/no-deprecated import {Heading} from '../Heading'; import {Image} from '../Image'; 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/Card/components/Header/Header.tsx b/polaris-react/src/components/Card/components/Header/Header.tsx index 3daf4f562da..8f50480ee94 100644 --- a/polaris-react/src/components/Card/components/Header/Header.tsx +++ b/polaris-react/src/components/Card/components/Header/Header.tsx @@ -4,6 +4,7 @@ import type {DisableableAction} from '../../../../types'; import {buttonsFrom} from '../../../Button'; import {ButtonGroup} from '../../../ButtonGroup'; import {Stack} from '../../../Stack'; +// eslint-disable-next-line import/no-deprecated import {Heading} from '../../../Heading'; import styles from '../../Card.scss'; diff --git a/polaris-react/src/components/Card/components/Header/tests/Header.test.tsx b/polaris-react/src/components/Card/components/Header/tests/Header.test.tsx index a786f9ba102..edb0822a8c3 100644 --- a/polaris-react/src/components/Card/components/Header/tests/Header.test.tsx +++ b/polaris-react/src/components/Card/components/Header/tests/Header.test.tsx @@ -3,6 +3,7 @@ import {mountWithApp} from 'tests/utilities'; import {buttonsFrom} from '../../../../Button'; import {ButtonGroup} from '../../../../ButtonGroup'; +// eslint-disable-next-line import/no-deprecated import {Heading} from '../../../../Heading'; import {Header} from '../Header'; @@ -17,12 +18,14 @@ describe('
', () => { describe('title', () => { it('renders a heading when defined', () => { const header = mountWithApp(
); + // eslint-disable-next-line import/no-deprecated expect(header).toContainReactComponent(Heading); }); it('renders the title directly if its a valid React element', () => { const title =
Staff accounts
; const header = mountWithApp(
); + // eslint-disable-next-line import/no-deprecated expect(header).not.toContainReactComponent(Heading); expect(header).toContainReactComponent('div', { children: 'Staff accounts', @@ -32,6 +35,7 @@ describe('
', () => { it('is used as the content for the heading', () => { const title = 'Staff accounts'; const header = mountWithApp(
); + // eslint-disable-next-line import/no-deprecated expect(header.find(Heading)).toContainReactText(title); }); }); diff --git a/polaris-react/src/components/Card/components/Section/Section.tsx b/polaris-react/src/components/Card/components/Section/Section.tsx index d58b9a1bddc..d26cadbb479 100644 --- a/polaris-react/src/components/Card/components/Section/Section.tsx +++ b/polaris-react/src/components/Card/components/Section/Section.tsx @@ -5,6 +5,7 @@ import type {ComplexAction} from '../../../../types'; import {buttonsFrom} from '../../../Button'; import {Stack} from '../../../Stack'; import {ButtonGroup} from '../../../ButtonGroup'; +// eslint-disable-next-line import/no-deprecated import {Subheading} from '../../../Subheading'; import styles from '../../Card.scss'; diff --git a/polaris-react/src/components/Card/components/Section/tests/Section.test.tsx b/polaris-react/src/components/Card/components/Section/tests/Section.test.tsx index 897d2719da9..522bd33ba58 100644 --- a/polaris-react/src/components/Card/components/Section/tests/Section.test.tsx +++ b/polaris-react/src/components/Card/components/Section/tests/Section.test.tsx @@ -4,6 +4,7 @@ import {mountWithApp} from 'tests/utilities'; import {Badge} from '../../../../Badge'; import {Button} from '../../../../Button'; import {ButtonGroup} from '../../../../ButtonGroup'; +// eslint-disable-next-line import/no-deprecated import {Subheading} from '../../../../Subheading'; import {Section} from '../Section'; @@ -28,6 +29,7 @@ describe('', () => { it('wraps plain string titles in a ', () => { const titleString = 'Online store'; const card = mountWithApp(
); + // eslint-disable-next-line import/no-deprecated expect(card.find(Subheading)).toContainReactText(titleString); }); 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/DropZone/DropZone.tsx b/polaris-react/src/components/DropZone/DropZone.tsx index ed5685a48a3..b04d047e65c 100755 --- a/polaris-react/src/components/DropZone/DropZone.tsx +++ b/polaris-react/src/components/DropZone/DropZone.tsx @@ -15,8 +15,11 @@ import {classNames, variationName} from '../../utilities/css'; import {capitalize} from '../../utilities/capitalize'; import {Icon} from '../Icon'; import {Stack} from '../Stack'; +// eslint-disable-next-line import/no-deprecated import {Caption} from '../Caption'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../TextStyle'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../VisuallyHidden'; import {Labelled, LabelledProps} from '../Labelled'; import {useI18n} from '../../utilities/i18n'; diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx index b548c2281f3..4e9f0763efd 100755 --- a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx +++ b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx @@ -3,7 +3,9 @@ import React, {useContext} from 'react'; import {classNames} from '../../../../utilities/css'; import {capitalize} from '../../../../utilities/capitalize'; import {Stack} from '../../../Stack'; +// eslint-disable-next-line import/no-deprecated import {Caption} from '../../../Caption'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../../TextStyle'; import {uploadArrow} from '../../images'; import {DropZoneContext} from '../../context'; diff --git a/polaris-react/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx b/polaris-react/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx index fd7ce5af573..e25b121def6 100755 --- a/polaris-react/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx +++ b/polaris-react/src/components/DropZone/components/FileUpload/tests/FileUpload.test.tsx @@ -1,7 +1,9 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; +// eslint-disable-next-line import/no-deprecated import {Caption} from '../../../../Caption'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../../../TextStyle'; import {DropZoneContext} from '../../../context'; import {FileUpload} from '../FileUpload'; @@ -50,7 +52,9 @@ describe('', () => { expect(fileUpload).not.toContainReactComponent('img', { src: uploadArrowImage, }); + // eslint-disable-next-line import/no-deprecated expect(fileUpload).not.toContainReactComponent(Caption); + // eslint-disable-next-line import/no-deprecated expect(fileUpload).not.toContainReactComponent(TextStyle); expect(fileUpload).toContainReactComponent('div', { @@ -71,7 +75,9 @@ describe('', () => { expect(fileUpload).not.toContainReactComponent('img', { src: uploadArrowImage, }); + // eslint-disable-next-line import/no-deprecated expect(fileUpload).not.toContainReactComponent(Caption); + // eslint-disable-next-line import/no-deprecated expect(fileUpload).not.toContainReactComponent(TextStyle); expect(fileUpload).toContainReactComponent('div', { @@ -88,7 +94,9 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(fileUpload).not.toContainReactComponent(Caption); + // eslint-disable-next-line import/no-deprecated expect(fileUpload).not.toContainReactComponent(TextStyle); expect(fileUpload).toContainReactComponentTimes('img', 1); @@ -117,7 +125,9 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(fileUpload).toContainReactComponent(Caption); + // eslint-disable-next-line import/no-deprecated expect(fileUpload).toContainReactComponent(TextStyle); expect(fileUpload).toContainReactText('Hint'); }); diff --git a/polaris-react/src/components/DropZone/tests/DropZone.test.tsx b/polaris-react/src/components/DropZone/tests/DropZone.test.tsx index e263ba8e416..831d9e0e33f 100755 --- a/polaris-react/src/components/DropZone/tests/DropZone.test.tsx +++ b/polaris-react/src/components/DropZone/tests/DropZone.test.tsx @@ -3,9 +3,11 @@ import {act} from 'react-dom/test-utils'; import {clock} from '@shopify/jest-dom-mocks'; import {mountWithApp, CustomRoot} from 'tests/utilities'; +// eslint-disable-next-line import/no-deprecated import {Caption} from '../../Caption'; import {Label} from '../../Label'; import {Labelled} from '../../Labelled'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../TextStyle'; import {DropZone, DropZoneFileType} from '../DropZone'; import {DropZoneContext} from '../context'; @@ -237,6 +239,7 @@ describe('', () => { dropZone.forceUpdate(); + // eslint-disable-next-line import/no-deprecated expect(dropZone).toContainReactComponent(TextStyle, { children: expectedTextStyle, }); @@ -321,7 +324,9 @@ describe('', () => { setBoundingClientRect('small'); const dropZone = mountWithApp(); fireEvent({wrapper: dropZone, eventType: 'dragenter'}); + // eslint-disable-next-line import/no-deprecated expect(dropZone).not.toContainReactComponent(TextStyle); + // eslint-disable-next-line import/no-deprecated expect(dropZone).not.toContainReactComponent(Caption); }); @@ -329,6 +334,7 @@ describe('', () => { setBoundingClientRect('medium'); const dropZone = mountWithApp(); fireEvent({wrapper: dropZone, eventType: 'dragenter'}); + // eslint-disable-next-line import/no-deprecated const captionText = dropZone.find(Caption); expect(captionText).toContainReactText(overlayText); }); @@ -337,6 +343,7 @@ describe('', () => { setBoundingClientRect('large'); const dropZone = mountWithApp(); fireEvent({wrapper: dropZone, eventType: 'dragenter'}); + // eslint-disable-next-line import/no-deprecated const captionText = dropZone.find(Caption); expect(captionText).toContainReactText(overlayText); }); @@ -347,6 +354,7 @@ describe('', () => { , ); fireEvent({wrapper: dropZone, eventType: 'dragenter'}); + // eslint-disable-next-line import/no-deprecated const textStyle = dropZone.find(TextStyle); expect(textStyle).toContainReactText(overlayText); }); @@ -361,7 +369,9 @@ describe('', () => { , ); fireEvent({wrapper: dropZone, eventType: 'dragenter'}); + // eslint-disable-next-line import/no-deprecated expect(dropZone).not.toContainReactComponent(TextStyle); + // eslint-disable-next-line import/no-deprecated expect(dropZone).not.toContainReactComponent(Caption); }); @@ -371,6 +381,7 @@ describe('', () => { , ); fireEvent({wrapper: dropZone, eventType: 'dragenter'}); + // eslint-disable-next-line import/no-deprecated const captionText = dropZone.find(Caption); expect(captionText).toContainReactText(errorOverlayText); }); @@ -381,6 +392,7 @@ describe('', () => { , ); fireEvent({wrapper: dropZone, eventType: 'dragenter'}); + // eslint-disable-next-line import/no-deprecated const captionText = dropZone.find(Caption); expect(captionText).toContainReactText(errorOverlayText); @@ -396,6 +408,7 @@ describe('', () => { />, ); fireEvent({wrapper: dropZone, eventType: 'dragenter'}); + // eslint-disable-next-line import/no-deprecated const textStyle = dropZone.find(TextStyle); expect(textStyle).toContainReactText(errorOverlayText); }); diff --git a/polaris-react/src/components/EmptySearchResult/EmptySearchResult.tsx b/polaris-react/src/components/EmptySearchResult/EmptySearchResult.tsx index c2676633c50..402bf4d1ef1 100644 --- a/polaris-react/src/components/EmptySearchResult/EmptySearchResult.tsx +++ b/polaris-react/src/components/EmptySearchResult/EmptySearchResult.tsx @@ -1,7 +1,9 @@ import React from 'react'; import {useI18n} from '../../utilities/i18n'; +// eslint-disable-next-line import/no-deprecated import {DisplayText} from '../DisplayText'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../TextStyle'; import {Image} from '../Image'; import {Stack} from '../Stack'; diff --git a/polaris-react/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx b/polaris-react/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx index dcd61e3fd36..3b79eb2c0b6 100644 --- a/polaris-react/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx +++ b/polaris-react/src/components/EmptySearchResult/tests/EmptySearchResult.test.tsx @@ -1,7 +1,9 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; +// eslint-disable-next-line import/no-deprecated import {DisplayText} from '../../DisplayText'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../TextStyle'; import {EmptySearchResult} from '../EmptySearchResult'; import {emptySearch} from '../illustrations'; @@ -10,9 +12,11 @@ describe('', () => { it("displays the title with style 'Display Small'", () => { const wrapper = mountWithApp(); const displaySmalls = wrapper.findWhere( + // eslint-disable-next-line import/no-deprecated (wrap) => wrap.is(DisplayText) && wrap.prop('size') === 'small', ); + // eslint-disable-next-line import/no-deprecated expect(wrapper).toContainReactComponent(DisplayText, {size: 'small'}); expect(displaySmalls).toContainReactText('Foo'); }); @@ -22,8 +26,10 @@ describe('', () => { , ); const subdued = wrapper.findWhere( + // eslint-disable-next-line import/no-deprecated (wrap) => wrap.is(TextStyle) && wrap.prop('variation') === 'subdued', ); + // eslint-disable-next-line import/no-deprecated expect(wrapper).toContainReactComponent(TextStyle, {variation: 'subdued'}); expect(subdued).toContainReactText('Bar'); }); diff --git a/polaris-react/src/components/EmptyState/EmptyState.tsx b/polaris-react/src/components/EmptyState/EmptyState.tsx index da6f921f541..42be76a29d2 100644 --- a/polaris-react/src/components/EmptyState/EmptyState.tsx +++ b/polaris-react/src/components/EmptyState/EmptyState.tsx @@ -7,6 +7,7 @@ import {Image} from '../Image'; import {buttonFrom} from '../Button'; import {Stack} from '../Stack'; import {TextContainer} from '../TextContainer'; +// eslint-disable-next-line import/no-deprecated import {DisplayText} from '../DisplayText'; import styles from './EmptyState.scss'; diff --git a/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx b/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx index ebef6787f64..d5e513325d4 100644 --- a/polaris-react/src/components/EmptyState/tests/EmptyState.test.tsx +++ b/polaris-react/src/components/EmptyState/tests/EmptyState.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 {DisplayText} from '../../DisplayText'; import {Image} from '../../Image'; import {Stack} from '../../Stack'; @@ -151,6 +152,7 @@ describe('', () => { const emptyState = mountWithApp( , ); + // eslint-disable-next-line import/no-deprecated const displayText = emptyState.find(DisplayText)!; expect(displayText).toHaveReactProps({size: 'medium'}); @@ -164,6 +166,7 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(emptyStateInContentContext).toContainReactComponent(DisplayText, { size: 'small', }); diff --git a/polaris-react/src/components/Filters/Filters.tsx b/polaris-react/src/components/Filters/Filters.tsx index c8d4e25df9b..07f211062ed 100644 --- a/polaris-react/src/components/Filters/Filters.tsx +++ b/polaris-react/src/components/Filters/Filters.tsx @@ -13,6 +13,7 @@ import {useMediaQuery} from '../../utilities/media-query'; import {focusFirstFocusableNode} from '../../utilities/focus'; import {WithinFilterContext} from '../../utilities/within-filter-context'; import {Button} from '../Button'; +// eslint-disable-next-line import/no-deprecated import {DisplayText} from '../DisplayText'; import {Collapsible} from '../Collapsible'; import {Scrollable} from '../Scrollable'; @@ -20,6 +21,7 @@ import {ScrollLock} from '../ScrollLock'; import {Icon} from '../Icon'; import {TextField} from '../TextField'; import {Tag} from '../Tag'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../TextStyle'; import {Badge} from '../Badge'; import {Focus} from '../Focus'; diff --git a/polaris-react/src/components/Filters/components/TagsWrapper/TagsWrapper.tsx b/polaris-react/src/components/Filters/components/TagsWrapper/TagsWrapper.tsx index 711e1c19c02..1427ada8bf1 100644 --- a/polaris-react/src/components/Filters/components/TagsWrapper/TagsWrapper.tsx +++ b/polaris-react/src/components/Filters/components/TagsWrapper/TagsWrapper.tsx @@ -1,5 +1,6 @@ import React from 'react'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../../VisuallyHidden'; interface Props { diff --git a/polaris-react/src/components/Filters/components/TagsWrapper/tests/TagsWrapper.test.tsx b/polaris-react/src/components/Filters/components/TagsWrapper/tests/TagsWrapper.test.tsx index 68bdb2fb371..736a5774e48 100644 --- a/polaris-react/src/components/Filters/components/TagsWrapper/tests/TagsWrapper.test.tsx +++ b/polaris-react/src/components/Filters/components/TagsWrapper/tests/TagsWrapper.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; import {TagsWrapper} from '../TagsWrapper'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../../../VisuallyHidden'; const MockChild = () =>
; @@ -14,7 +15,9 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(tagsWrapper).toContainReactComponent(VisuallyHidden); + // eslint-disable-next-line import/no-deprecated expect(tagsWrapper.find(VisuallyHidden)).toContainReactComponent(MockChild); }); @@ -25,6 +28,7 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(tagsWrapper).not.toContainReactComponent(VisuallyHidden); expect(tagsWrapper).toContainReactComponent(MockChild); }); diff --git a/polaris-react/src/components/Filters/tests/Filters.test.tsx b/polaris-react/src/components/Filters/tests/Filters.test.tsx index bb8d081e84a..63d111fde49 100644 --- a/polaris-react/src/components/Filters/tests/Filters.test.tsx +++ b/polaris-react/src/components/Filters/tests/Filters.test.tsx @@ -9,6 +9,7 @@ import {Popover} from '../../Popover'; import {Sheet} from '../../Sheet'; import {Tag} from '../../Tag'; import {TextField} from '../../TextField'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../TextStyle'; import {WithinFilterContext} from '../../../utilities/within-filter-context'; import {Filters, FiltersProps} from '../Filters'; @@ -640,6 +641,7 @@ describe('', () => { id: `${filter.key}ToggleButton`, }); + // eslint-disable-next-line import/no-deprecated expect(toggleButton!).toContainReactComponent(TextStyle, { variation: 'subdued', }); @@ -673,6 +675,7 @@ describe('', () => { id: `${filter.key}ToggleButton`, }); + // eslint-disable-next-line import/no-deprecated expect(toggleButton).toContainReactComponent(TextStyle, { variation: 'subdued', }); @@ -693,6 +696,7 @@ describe('', () => { id: `${filter.key}ToggleButton`, }); + // eslint-disable-next-line import/no-deprecated expect(toggleButton).toContainReactComponent(TextStyle, { variation: undefined, }); @@ -712,6 +716,7 @@ describe('', () => { id: 'FiltersHelpText', }); expect(helpTextMarkup).toHaveLength(1); + // eslint-disable-next-line import/no-deprecated expect(helpTextMarkup[0]).toContainReactComponent(TextStyle, { children: helpText, }); diff --git a/polaris-react/src/components/Form/Form.tsx b/polaris-react/src/components/Form/Form.tsx index 67b448047b5..4570c7ee875 100644 --- a/polaris-react/src/components/Form/Form.tsx +++ b/polaris-react/src/components/Form/Form.tsx @@ -1,5 +1,6 @@ import React, {useCallback} from 'react'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../VisuallyHidden'; import {useI18n} from '../../utilities/i18n'; 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/Icon/Icon.tsx b/polaris-react/src/components/Icon/Icon.tsx index b95f8f864d4..f9893b3f229 100644 --- a/polaris-react/src/components/Icon/Icon.tsx +++ b/polaris-react/src/components/Icon/Icon.tsx @@ -1,5 +1,6 @@ import React from 'react'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../VisuallyHidden'; import {classNames, variationName} from '../../utilities/css'; import type {IconSource} from '../../types'; diff --git a/polaris-react/src/components/Icon/tests/Icon.test.tsx b/polaris-react/src/components/Icon/tests/Icon.test.tsx index 2bf6fd67dbd..8dd7ecbb07c 100644 --- a/polaris-react/src/components/Icon/tests/Icon.test.tsx +++ b/polaris-react/src/components/Icon/tests/Icon.test.tsx @@ -3,6 +3,7 @@ import {PlusMinor} from '@shopify/polaris-icons'; import {mountWithApp} from 'tests/utilities'; import {Icon} from '../Icon'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../VisuallyHidden'; describe('', () => { @@ -13,6 +14,7 @@ describe('', () => { , ).find('span'); + // eslint-disable-next-line import/no-deprecated expect(element).toContainReactComponent(VisuallyHidden, { children: label, }); diff --git a/polaris-react/src/components/IndexTable/IndexTable.tsx b/polaris-react/src/components/IndexTable/IndexTable.tsx index 67795e3f831..5e004899fc3 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.tsx +++ b/polaris-react/src/components/IndexTable/IndexTable.tsx @@ -18,6 +18,7 @@ import {EventListener} from '../EventListener'; import {Stack} from '../Stack'; import {Sticky} from '../Sticky'; import {Spinner} from '../Spinner'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../VisuallyHidden'; import {Button} from '../Button'; import {Tooltip} from '../Tooltip'; diff --git a/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx b/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx index 189a6c9eed2..312c38d97f1 100644 --- a/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx +++ b/polaris-react/src/components/IndexTable/tests/IndexTable.test.tsx @@ -11,6 +11,7 @@ import {Sticky} from '../../Sticky'; import {Button} from '../../Button'; import {Checkbox} from '../../Checkbox'; import {Badge} from '../../Badge'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../VisuallyHidden'; import {BulkActions} from '../../BulkActions'; import {IndexTable, IndexTableProps} from '../IndexTable'; @@ -327,6 +328,7 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(index).toContainReactComponent(VisuallyHidden, {children: title}); }); @@ -376,6 +378,7 @@ describe('', () => { expect(index).toContainReactComponent('table', { className: 'Table Table-sticky Table-sticky-last', }); + // eslint-disable-next-line import/no-deprecated expect(index).toContainReactComponent(VisuallyHidden, { children: title, }); diff --git a/polaris-react/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx b/polaris-react/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx index 54ba6d8b081..aeaedfcb9eb 100644 --- a/polaris-react/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx +++ b/polaris-react/src/components/Layout/components/AnnotatedSection/AnnotatedSection.tsx @@ -1,5 +1,6 @@ import React from 'react'; +// eslint-disable-next-line import/no-deprecated import {Heading} from '../../../Heading'; import {TextContainer} from '../../../TextContainer'; import styles from '../../Layout.scss'; diff --git a/polaris-react/src/components/Layout/tests/Layout.test.tsx b/polaris-react/src/components/Layout/tests/Layout.test.tsx index 5d563560c65..ff53a43fd83 100644 --- a/polaris-react/src/components/Layout/tests/Layout.test.tsx +++ b/polaris-react/src/components/Layout/tests/Layout.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'; import {TextContainer} from '../../TextContainer'; import {Section} from '../components'; @@ -45,6 +46,7 @@ describe('', () => { const annotatedSection = mountWithApp( , ); + // eslint-disable-next-line import/no-deprecated expect(annotatedSection.find(Heading, {id: 'someId'})).toContainReactText( title, ); @@ -104,6 +106,7 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(layout).toContainReactComponent(Heading, {id: 'MySection'}); }); }); diff --git a/polaris-react/src/components/Listbox/Listbox.tsx b/polaris-react/src/components/Listbox/Listbox.tsx index ed11a0fd8cd..351a2982594 100644 --- a/polaris-react/src/components/Listbox/Listbox.tsx +++ b/polaris-react/src/components/Listbox/Listbox.tsx @@ -20,6 +20,7 @@ import { } from '../../utilities/listbox'; import {Key} from '../../types'; import {KeypressListener} from '../KeypressListener'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../VisuallyHidden'; import {scrollable} from '../shared'; diff --git a/polaris-react/src/components/Listbox/tests/Listbox.test.tsx b/polaris-react/src/components/Listbox/tests/Listbox.test.tsx index ed40c5ba864..7c27586827a 100644 --- a/polaris-react/src/components/Listbox/tests/Listbox.test.tsx +++ b/polaris-react/src/components/Listbox/tests/Listbox.test.tsx @@ -9,6 +9,7 @@ import { import {Key} from '../../../types'; import {KeypressListener} from '../../KeypressListener'; import {Scrollable} from '../../Scrollable'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../VisuallyHidden'; import {Listbox, AutoSelection} from '../Listbox'; import {ListboxContext} from '../../../utilities/listbox'; @@ -269,12 +270,14 @@ describe('', () => { it('render a visually hidden container', () => { const listbox = mountWithApp(Child); + // eslint-disable-next-line import/no-deprecated expect(listbox).toContainReactComponentTimes(VisuallyHidden, 1); }); it('render an aria-live="polite" container', () => { const listbox = mountWithApp(Child); + // eslint-disable-next-line import/no-deprecated expect(listbox.find(VisuallyHidden)).toContainReactComponent('div', { 'aria-live': 'polite', }); @@ -283,6 +286,7 @@ describe('', () => { it('renders an empty loading container by default', () => { const listbox = mountWithApp(Child); + // eslint-disable-next-line import/no-deprecated expect(listbox.find(VisuallyHidden)).not.toContainReactText( loadingMessage, ); @@ -295,6 +299,7 @@ describe('', () => { , ); + // eslint-disable-next-line import/no-deprecated expect(listbox.find(VisuallyHidden)).toContainReactText(loadingMessage); }); }); diff --git a/polaris-react/src/components/MediaCard/MediaCard.tsx b/polaris-react/src/components/MediaCard/MediaCard.tsx index b30771bd5d0..6fa64d6279a 100644 --- a/polaris-react/src/components/MediaCard/MediaCard.tsx +++ b/polaris-react/src/components/MediaCard/MediaCard.tsx @@ -7,6 +7,7 @@ import {useI18n} from '../../utilities/i18n'; import type {ActionListItemDescriptor, ComplexAction} from '../../types'; import {Card} from '../Card'; import {Button, buttonFrom} from '../Button'; +// eslint-disable-next-line import/no-deprecated import {Heading} from '../Heading'; import {Popover} from '../Popover'; import {ActionList} from '../ActionList'; diff --git a/polaris-react/src/components/MediaCard/tests/MediaCard.test.tsx b/polaris-react/src/components/MediaCard/tests/MediaCard.test.tsx index 2565f64bb20..2061eac4eca 100644 --- a/polaris-react/src/components/MediaCard/tests/MediaCard.test.tsx +++ b/polaris-react/src/components/MediaCard/tests/MediaCard.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'; import {Popover} from '../../Popover'; import {Button} from '../../Button'; @@ -24,6 +25,7 @@ describe('', () => { const title = 'Getting Started'; const videoCard = mountWithApp(); + // eslint-disable-next-line import/no-deprecated expect(videoCard).toContainReactComponent(Heading, {children: title}); }); diff --git a/polaris-react/src/components/Modal/components/Header/Header.tsx b/polaris-react/src/components/Modal/components/Header/Header.tsx index 7b8f08399e5..9015e346e6b 100644 --- a/polaris-react/src/components/Modal/components/Header/Header.tsx +++ b/polaris-react/src/components/Modal/components/Header/Header.tsx @@ -1,5 +1,6 @@ import React from 'react'; +// eslint-disable-next-line import/no-deprecated import {DisplayText} from '../../../DisplayText'; import {CloseButton} from '../CloseButton'; diff --git a/polaris-react/src/components/Page/components/Header/Header.tsx b/polaris-react/src/components/Page/components/Header/Header.tsx index 91a8c5b8333..e70aa25f504 100644 --- a/polaris-react/src/components/Page/components/Header/Header.tsx +++ b/polaris-react/src/components/Page/components/Header/Header.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {classNames} from '../../../../utilities/css'; import {buttonFrom} from '../../../Button'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../../TextStyle'; import {Tooltip} from '../../../Tooltip'; import {useMediaQuery} from '../../../../utilities/media-query'; diff --git a/polaris-react/src/components/Page/components/Header/components/Title/tests/Title.test.tsx b/polaris-react/src/components/Page/components/Header/components/Title/tests/Title.test.tsx index df7f4ecdf25..2badf47d60d 100644 --- a/polaris-react/src/components/Page/components/Header/components/Title/tests/Title.test.tsx +++ b/polaris-react/src/components/Page/components/Header/components/Title/tests/Title.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; import {Badge} from '../../../../../../Badge'; +// eslint-disable-next-line import/no-deprecated import {DisplayText} from '../../../../../../DisplayText'; import {Title} from '../Title'; @@ -20,6 +21,7 @@ describe('', () => { it('does not render a title when not defined', () => { const pageTitle = mountWithApp(<Title />); + // eslint-disable-next-line import/no-deprecated expect(pageTitle).not.toContainReactComponent(DisplayText); }); }); diff --git a/polaris-react/src/components/Pagination/Pagination.tsx b/polaris-react/src/components/Pagination/Pagination.tsx index 7d876d3ab6f..27f4ca20382 100644 --- a/polaris-react/src/components/Pagination/Pagination.tsx +++ b/polaris-react/src/components/Pagination/Pagination.tsx @@ -7,6 +7,7 @@ import {isInputFocused} from '../../utilities/is-input-focused'; import {Button} from '../Button'; import {ButtonGroup} from '../ButtonGroup'; import {KeypressListener} from '../KeypressListener'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../TextStyle'; import {Tooltip} from '../Tooltip'; diff --git a/polaris-react/src/components/Pagination/tests/Pagination.test.tsx b/polaris-react/src/components/Pagination/tests/Pagination.test.tsx index 247a4a435b9..5352aa3288f 100644 --- a/polaris-react/src/components/Pagination/tests/Pagination.test.tsx +++ b/polaris-react/src/components/Pagination/tests/Pagination.test.tsx @@ -7,6 +7,7 @@ import {Pagination} from '../Pagination'; import {Button} from '../../Button'; import {ButtonGroup} from '../../ButtonGroup'; import {TextField} from '../../TextField'; +// eslint-disable-next-line import/no-deprecated import {TextStyle} from '../../TextStyle'; import {Tooltip} from '../../Tooltip'; import en from '../../../../locales/en.json'; @@ -150,6 +151,7 @@ describe('<Pagination />', () => { it('has subdued text without next and previous pages', () => { const pagination = mountWithApp(<Pagination label="test" />); + // eslint-disable-next-line import/no-deprecated expect(pagination).toContainReactComponent(TextStyle, { variation: 'subdued', }); diff --git a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx index 7c4e60f1a9c..cd083f5467b 100644 --- a/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx +++ b/polaris-react/src/components/SkeletonPage/tests/SkeletonPage.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; import {Card} from '../../Card'; +// eslint-disable-next-line import/no-deprecated import {DisplayText} from '../../DisplayText'; import {Layout} from '../../Layout'; import {SkeletonBodyText} from '../../SkeletonBodyText'; @@ -38,6 +39,7 @@ describe('<SkeletonPage />', () => { const skeletonPage = mountWithApp(<SkeletonPage title="Products" />); expect(skeletonPage).toContainReactComponent('h1', {className: 'Title'}); + // eslint-disable-next-line import/no-deprecated expect(skeletonPage).not.toContainReactComponent(DisplayText); }); diff --git a/polaris-react/src/components/Spinner/Spinner.tsx b/polaris-react/src/components/Spinner/Spinner.tsx index dd77b24ed8e..8d20e7ef2f1 100644 --- a/polaris-react/src/components/Spinner/Spinner.tsx +++ b/polaris-react/src/components/Spinner/Spinner.tsx @@ -1,6 +1,7 @@ import React from 'react'; import {classNames, variationName} from '../../utilities/css'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../VisuallyHidden'; import {useIsAfterInitialMount} from '../../utilities/use-is-after-initial-mount'; diff --git a/polaris-react/src/components/Spinner/tests/Spinner.test.tsx b/polaris-react/src/components/Spinner/tests/Spinner.test.tsx index 1e71afc2f3b..431b6602360 100644 --- a/polaris-react/src/components/Spinner/tests/Spinner.test.tsx +++ b/polaris-react/src/components/Spinner/tests/Spinner.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {mountWithApp} from 'tests/utilities'; import {Spinner} from '../Spinner'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../VisuallyHidden'; describe('<Spinner />', () => { @@ -10,6 +11,7 @@ describe('<Spinner />', () => { const spinner = mountWithApp( <Spinner accessibilityLabel="Content is loading" />, ); + // eslint-disable-next-line import/no-deprecated expect(spinner.find(VisuallyHidden)).toContainReactText( 'Content is loading', ); 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 ( <Element aria-label={ariaLabel} className={styles.Subheading}> {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('<Subheading />', () => { diff --git a/polaris-react/src/components/TextField/TextField.tsx b/polaris-react/src/components/TextField/TextField.tsx index 2f417794b83..37c64758fc2 100644 --- a/polaris-react/src/components/TextField/TextField.tsx +++ b/polaris-react/src/components/TextField/TextField.tsx @@ -7,6 +7,7 @@ import React, { } from 'react'; import {CircleCancelMinor} from '@shopify/polaris-icons'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../VisuallyHidden'; import {classNames, variationName} from '../../utilities/css'; import {useI18n} from '../../utilities/i18n'; 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 <Element className={className}>{children}</Element>; 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('<TextStyle />', () => { diff --git a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx index 983e993cf5b..fc45c90eaec 100644 --- a/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx +++ b/polaris-react/src/components/TopBar/components/Menu/components/Message/Message.tsx @@ -2,6 +2,7 @@ import React from 'react'; import {Badge, BadgeProps} from '../../../../../Badge'; import {Button} from '../../../../../Button'; +// eslint-disable-next-line import/no-deprecated import {Heading} from '../../../../../Heading'; import {Link} from '../../../../../Link'; import {Popover} from '../../../../../Popover'; diff --git a/polaris-react/src/components/TopBar/components/SearchField/SearchField.tsx b/polaris-react/src/components/TopBar/components/SearchField/SearchField.tsx index 481a130e1e8..f5f0face61c 100644 --- a/polaris-react/src/components/TopBar/components/SearchField/SearchField.tsx +++ b/polaris-react/src/components/TopBar/components/SearchField/SearchField.tsx @@ -5,6 +5,7 @@ import {classNames} from '../../../../utilities/css'; import {useI18n} from '../../../../utilities/i18n'; import {useUniqueId} from '../../../../utilities/unique-id'; import {Icon} from '../../../Icon'; +// eslint-disable-next-line import/no-deprecated import {VisuallyHidden} from '../../../VisuallyHidden'; import styles from './SearchField.scss'; 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 <span className={styles.VisuallyHidden}>{children}</span>; }