Update icons for content pages to v8 naming (#11457)

Fixes missing icons on Foundations, Design, Content, Tools, and Version guides pages. | Before | After | | --- | --- | | <img width="1300" alt="before" src="https://github.com/Shopify/polaris/assets/11774595/6fb007d3-7af3-4f5c-8de9-4232add0b4c5"> | <img width="1300" alt="after" src="https://github.com/Shopify/polaris/assets/11774595/fde5c93d-47dd-41d2-83ec-d5d485439a0e"> |
Shopify · Jan 17, 2024 · 966d190 · 966d190
1 parent f1b44ab
commit 966d190
Show file tree

Hide file tree

Showing 16 changed files with 23 additions and 15 deletions.
diff --git a/.changeset/fuzzy-foxes-drive.md b/.changeset/fuzzy-foxes-drive.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Added fallback to no active icon on Icons page when not a valid icon name is used in the search param
diff --git a/polaris.shopify.com/content/content/grammar-and-mechanics.mdx b/polaris.shopify.com/content/content/grammar-and-mechanics.mdx
@@ -1,7 +1,7 @@
 ---
 title: Grammar and mechanics
 description: This guide is to help designers, developers, recruiters, UX-ers, product managers, support advisors, or anyone who writes public-facing text for Shopify.
-icon: GrammarIcon
+icon: TextGrammarIcon
 keywords:
   - writing instructions
   - writing rules

diff --git a/polaris.shopify.com/content/content/inclusive-language.mdx b/polaris.shopify.com/content/content/inclusive-language.mdx
@@ -1,7 +1,7 @@
 ---
 title: Inclusive language
 description: Make commerce better for everyone by writing inclusively.
-icon: AccessibilityIcon
+icon: EyeCheckMarkIcon
 keywords:
   - copy instructions
   - copy rules

diff --git a/polaris.shopify.com/content/content/product-content.mdx b/polaris.shopify.com/content/content/product-content.mdx
@@ -1,7 +1,7 @@
 ---
 title: Product content
 description: Thoughtful, consistent interface content is a core element of a well-designed user experience.
-icon: ColumnWithTextIcon
+icon: TextInColumnsIcon
 keywords:
   - content standards
   - content guidelines

diff --git a/polaris.shopify.com/content/design/colors/index.mdx b/polaris.shopify.com/content/design/colors/index.mdx
@@ -1,7 +1,7 @@
 ---
 title: Color
 description: Color highlights important areas, communicates status, urgency, and directs attention.
-icon: ColorsIcon
+icon: ColorIcon
 order: 2
 keywords:
   - color role

diff --git a/polaris.shopify.com/content/design/illustrations.mdx b/polaris.shopify.com/content/design/illustrations.mdx
@@ -5,7 +5,7 @@ order: 9
 keywords:
   - drawings
   - pictures
-icon: IllustrationIcon
+icon: PaintBrushRoundIcon
 ---
 
 ![The illustration of a chair, in simples straight lines, followed by a version with curves and some color, followed by a final version with filled shapes and shadows.](/images/design/illustrations/illustrations-intro@2x.png)

diff --git a/polaris.shopify.com/content/design/interaction-states.mdx b/polaris.shopify.com/content/design/interaction-states.mdx
@@ -1,7 +1,7 @@
 ---
 title: Interaction states
 description: Interaction states communicate the status of an element in the interface, establish confidence once an action is taken, and suggest the ability (or inability) to interact with the element.
-icon: BuyButtonIcon
+icon: ButtonPressIcon
 order: 10
 keywords:
   - visual patterns

diff --git a/polaris.shopify.com/content/design/layout/index.mdx b/polaris.shopify.com/content/design/layout/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Layout
-icon: TemplateIcon
+icon: ThemeTemplateIcon
 order: 5
 showTOC: true
 keywords:

diff --git a/polaris.shopify.com/content/design/motion/index.mdx b/polaris.shopify.com/content/design/motion/index.mdx
@@ -3,7 +3,7 @@ title: Motion
 description: Motion brings dynamism to an interface, offers visual feedback, and aids merchants understanding the outcomes of their actions.
 order: 6
 showTOC: true
-icon: ShipmentIcon
+icon: DeliveryIcon
 keywords:
   - animation
   - motion

diff --git a/polaris.shopify.com/content/design/typography/index.mdx b/polaris.shopify.com/content/design/typography/index.mdx
@@ -7,7 +7,7 @@ keywords:
   - type styles
   - font sizes
   - fonts
-icon: TypeIcon
+icon: TextFontIcon
 hideChildren: true
 status: New
 ---

diff --git a/polaris.shopify.com/content/foundations/accessibility.mdx b/polaris.shopify.com/content/foundations/accessibility.mdx
@@ -1,7 +1,7 @@
 ---
 title: Accessibility
 description: Making commerce better for everyone means caring deeply about making quality products. A quality product should have a fantastic user experience (UX).
-icon: AccessibilityIcon
+icon: EyeCheckMarkIcon
 keywords:
   - a11y
   - universal design

diff --git a/polaris.shopify.com/content/foundations/index.mdx b/polaris.shopify.com/content/foundations/index.mdx
@@ -3,7 +3,7 @@ title: Foundations
 order: 2
 description: Polaris is the design system for the Shopify admin. It’s the shared language that guides how we build high-quality merchant experiences.
 newSection: true
-icon: VocabularyIcon
+icon: BookOpenIcon
 ---
 
 # {frontmatter.title}

diff --git a/polaris.shopify.com/content/foundations/information-architecture.mdx b/polaris.shopify.com/content/foundations/information-architecture.mdx
@@ -1,7 +1,7 @@
 ---
 title: Information architecture
 description: Everything we create at Shopify has an underlying foundation of information architecture. If you’re a designer, a content strategist, or a UX developer, you’re already doing IA work.
-icon: AnalyticsCohortIcon
+icon: ChartCohortIcon
 keywords:
   - IA principles
   - info architecture

diff --git a/polaris.shopify.com/content/tools/polaris-for-vscode.mdx b/polaris.shopify.com/content/tools/polaris-for-vscode.mdx
@@ -2,7 +2,7 @@
 title: Polaris for VS Code
 navTitle: VS Code
 description: Official VS Code extension for building with the Shopify Polaris design system.
-icon: HintIcon
+icon: LightbulbIcon
 order: 1
 ---
 

diff --git a/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.mdx b/polaris.shopify.com/content/version-guides/migrating-from-v11-to-v12.mdx
@@ -2,7 +2,7 @@
 title: Migrating from v11 to v12
 description: Polaris v12.0.0 prop replacement, removal of components, renamed components, and token changes.
 navTitle: v12
-icon: ColorsIcon
+icon: ColorIcon
 collapsibleTOC: true
 order: 1
 ---

diff --git a/polaris.shopify.com/src/components/IconsPage/IconsPage.tsx b/polaris.shopify.com/src/components/IconsPage/IconsPage.tsx
@@ -67,9 +67,12 @@ function IconsPage() {
   const useModal = useMedia('screen and (max-width: 1400px)');
   const [searchText, setSearchText] = useState('');
   const [icons, setIcons] = useState<IconType[]>([]);
-  const activeIcon = Array.isArray(router.query.icon)
+  const iconQueryParam = Array.isArray(router.query.icon)
     ? router.query.icon[0]
     : router.query.icon ?? '';
+  const activeIcon = Object.keys(iconMetadata).includes(iconQueryParam)
+    ? iconQueryParam
+    : '';
   const currentSearchText = router.query.q ? `${router.query.q}` : '';
 
   useEffect(() => {