diff --git a/.changeset/modern-carrots-yell.md b/.changeset/modern-carrots-yell.md new file mode 100644 index 00000000000..ad197525170 --- /dev/null +++ b/.changeset/modern-carrots-yell.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Added deprecation warning to old icon names informing users to use the new icon name diff --git a/polaris.shopify.com/src/components/IconDetails/IconDetails.tsx b/polaris.shopify.com/src/components/IconDetails/IconDetails.tsx index edca05799e6..78385af8a0d 100644 --- a/polaris.shopify.com/src/components/IconDetails/IconDetails.tsx +++ b/polaris.shopify.com/src/components/IconDetails/IconDetails.tsx @@ -8,7 +8,7 @@ import * as polarisIcons from '@shopify/polaris-icons'; interface Props { fileName: string; iconData: { - name: string; + id: string; description: string; keywords: string[]; }; @@ -31,7 +31,7 @@ function IconDetails({fileName, iconData}: Props) { if (!fileName) return ; - const {description, name, keywords} = iconData; + const {id, description, keywords} = iconData; const reactExamples = { imports: `import {\n ${fileName}\n} from '@shopify/polaris-icons';`, @@ -54,7 +54,7 @@ function IconDetails({fileName, iconData}: Props) { -

{name}

+

{id}

{description !== 'N/A' && (

diff --git a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx index 7f5f85f0d80..b40501315a2 100644 --- a/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx +++ b/polaris.shopify.com/src/components/IconGrid/IconGrid.tsx @@ -8,14 +8,12 @@ import * as polarisIcons from '@shopify/polaris-icons'; import SearchResultHighlight from '../SearchResultHighlight'; interface IconGridProps { - title?: string; children: React.ReactNode; } -function IconGrid({title, children}: IconGridProps) { +function IconGrid({children}: IconGridProps) { return ( <> - {title ?

{title}

: null}
    {children}
@@ -42,7 +40,7 @@ function IconGridItem({ searchTerm, uuid, }: IconGridItemProps) { - const {id, name} = icon; + const {id} = icon; const searchAttributes = useGlobalSearchResult(); return ( @@ -74,7 +72,7 @@ function IconGridItem({ > -

{name}

+

{id}

diff --git a/polaris.shopify.com/src/components/IconsPage/IconsPage.module.scss b/polaris.shopify.com/src/components/IconsPage/IconsPage.module.scss index ff4af38303c..59ef7f89ae8 100644 --- a/polaris.shopify.com/src/components/IconsPage/IconsPage.module.scss +++ b/polaris.shopify.com/src/components/IconsPage/IconsPage.module.scss @@ -9,6 +9,12 @@ align-items: flex-start; } +.IconGrids { + display: flex; + flex-direction: column; + gap: 2rem; +} + .Modal { position: fixed; top: 2rem; diff --git a/polaris.shopify.com/src/components/IconsPage/IconsPage.tsx b/polaris.shopify.com/src/components/IconsPage/IconsPage.tsx index e19189ac56a..6f73e6e1227 100644 --- a/polaris.shopify.com/src/components/IconsPage/IconsPage.tsx +++ b/polaris.shopify.com/src/components/IconsPage/IconsPage.tsx @@ -14,6 +14,8 @@ import IconDetails from '../IconDetails'; import PageMeta from '../PageMeta'; import {className} from '../../utils/various'; import Page from '../Page'; +import StatusBanner from '../StatusBanner'; +import {iconRenamesV7toV8} from './icon-renames-v7-to-v8'; const fuse = new Fuse(Object.values(iconMetadata), { threshold: 0.25, @@ -70,8 +72,12 @@ function IconsPage() { const iconQueryParam = Array.isArray(router.query.icon) ? router.query.icon[0] : router.query.icon ?? ''; - const activeIcon = Object.keys(iconMetadata).includes(iconQueryParam) - ? iconQueryParam + const isRenamedIcon = Object.keys(iconRenamesV7toV8).includes(iconQueryParam); + const iconName = isRenamedIcon + ? iconRenamesV7toV8[iconQueryParam as keyof typeof iconRenamesV7toV8] + : iconQueryParam; + const activeIcon = Object.keys(iconMetadata).includes(iconName) + ? iconName : ''; const currentSearchText = router.query.q ? `${router.query.q}` : ''; @@ -120,8 +126,15 @@ function IconsPage() { placeholder="Search icons" /> + {isRenamedIcon ? ( + + The {iconQueryParam} icon is no longer supported. + Please use the {iconName} icon instead. + + ) : null} + {icons.length > 0 && ( - + {icons.map((icon) => (