Skip to content

Commit 36de144

Browse files
mrcthmsmrcthms
authored
[Icons] Fix incorrect icon names post-v8 icons uplift (#11446)
### WHY are these changes introduced? Builds are breaking currently due to some incorrect icon names still hanging around in stories within `polaris-react`. This PR updates all of those. ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent dd9cf5d commit 36de144

File tree

13 files changed

+52
-51
lines changed

13 files changed

+52
-51
lines changed

‎.changeset/angry-lamps-notice.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/polaris': patch
3+
'polaris.shopify.com': patch
4+
---
5+
6+
[Icons] Fixed references to incorrect icon imports that were causing Storybook to break

‎polaris-react/src/components/Box/Box.stories.tsx

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import type {ComponentMeta} from '@storybook/react';
33
import {BlockStack, Text, Box, Icon} from '@shopify/polaris';
4-
import {PaintBrushIcon} from '@shopify/polaris-icons';
4+
import {PaintBrushFlatIcon} from '@shopify/polaris-icons';
55

66
export default {
77
component: Box,
@@ -10,7 +10,7 @@ export default {
1010
export function Default() {
1111
return (
1212
<Box>
13-
<Icon source={PaintBrushIcon} tone="base" />
13+
<Icon source={PaintBrushFlatIcon} tone="base" />
1414
</Box>
1515
);
1616
}
@@ -102,7 +102,7 @@ export function WithOutline() {
102102
outlineWidth="025"
103103
outlineColor="border"
104104
>
105-
<Icon source={PaintBrushIcon} tone="base" />
105+
<Icon source={PaintBrushFlatIcon} tone="base" />
106106
</Box>
107107
<Box
108108
background="bg-surface"
@@ -111,23 +111,23 @@ export function WithOutline() {
111111
outlineStyle="dashed"
112112
outlineColor="border-secondary"
113113
>
114-
<Icon source={PaintBrushIcon} tone="base" />
114+
<Icon source={PaintBrushFlatIcon} tone="base" />
115115
</Box>
116116
<Box
117117
background="bg-surface"
118118
padding="400"
119119
outlineWidth="050"
120120
outlineColor="border-info"
121121
>
122-
<Icon source={PaintBrushIcon} tone="base" />
122+
<Icon source={PaintBrushFlatIcon} tone="base" />
123123
</Box>
124124
<Box
125125
background="bg-surface"
126126
padding="400"
127127
outlineWidth="100"
128128
outlineColor="border-caution"
129129
>
130-
<Icon source={PaintBrushIcon} tone="base" />
130+
<Icon source={PaintBrushFlatIcon} tone="base" />
131131
</Box>
132132
</BlockStack>
133133
);
@@ -136,7 +136,7 @@ export function WithOutline() {
136136
export function WithBorderRadius() {
137137
return (
138138
<Box background="bg-surface" padding="400" borderRadius="200">
139-
<Icon source={PaintBrushIcon} tone="info" />
139+
<Icon source={PaintBrushFlatIcon} tone="info" />
140140
</Box>
141141
);
142142
}
@@ -150,55 +150,55 @@ export function WithPadding() {
150150
borderWidth="050"
151151
borderColor="border-info"
152152
>
153-
<Icon source={PaintBrushMajor} tone="base" />
153+
<Icon source={PaintBrushFlatIcon} tone="base" />
154154
</Box>
155155
<Box
156156
background="bg-surface"
157157
paddingBlock="400"
158158
borderWidth="050"
159159
borderColor="border-info"
160160
>
161-
<Icon source={PaintBrushMajor} tone="base" />
161+
<Icon source={PaintBrushFlatIcon} tone="base" />
162162
</Box>
163163
<Box
164164
background="bg-surface"
165165
paddingBlockStart="400"
166166
borderWidth="050"
167167
borderColor="border-info"
168168
>
169-
<Icon source={PaintBrushMajor} tone="base" />
169+
<Icon source={PaintBrushFlatIcon} tone="base" />
170170
</Box>
171171
<Box
172172
background="bg-surface"
173173
paddingBlockEnd="400"
174174
borderWidth="050"
175175
borderColor="border-info"
176176
>
177-
<Icon source={PaintBrushMajor} tone="base" />
177+
<Icon source={PaintBrushFlatIcon} tone="base" />
178178
</Box>
179179
<Box
180180
background="bg-surface"
181181
paddingInline="400"
182182
borderWidth="050"
183183
borderColor="border-info"
184184
>
185-
<Icon source={PaintBrushMajor} tone="base" />
185+
<Icon source={PaintBrushFlatIcon} tone="base" />
186186
</Box>
187187
<Box
188188
background="bg-surface"
189189
paddingInlineStart="400"
190190
borderWidth="050"
191191
borderColor="border-info"
192192
>
193-
<Icon source={PaintBrushMajor} tone="base" />
193+
<Icon source={PaintBrushFlatIcon} tone="base" />
194194
</Box>
195195
<Box
196196
background="bg-surface"
197197
paddingInlineEnd="400"
198198
borderWidth="050"
199199
borderColor="border-info"
200200
>
201-
<Icon source={PaintBrushMajor} tone="base" />
201+
<Icon source={PaintBrushFlatIcon} tone="base" />
202202
</Box>
203203
</BlockStack>
204204
);
@@ -213,7 +213,7 @@ export function WithResponsivePadding() {
213213
borderWidth="025"
214214
borderColor="border"
215215
>
216-
<Icon source={PaintBrushIcon} tone="base" />
216+
<Icon source={PaintBrushFlatIcon} tone="base" />
217217
</Box>
218218
<Box
219219
background="bg-surface"
@@ -222,7 +222,7 @@ export function WithResponsivePadding() {
222222
borderWidth="025"
223223
borderColor="border"
224224
>
225-
<Icon source={PaintBrushIcon} tone="base" />
225+
<Icon source={PaintBrushFlatIcon} tone="base" />
226226
</Box>
227227
<Box
228228
background="bg-surface"
@@ -231,7 +231,7 @@ export function WithResponsivePadding() {
231231
borderWidth="025"
232232
borderColor="border"
233233
>
234-
<Icon source={PaintBrushIcon} tone="base" />
234+
<Icon source={PaintBrushFlatIcon} tone="base" />
235235
</Box>
236236
<Box
237237
background="bg-surface"
@@ -240,15 +240,15 @@ export function WithResponsivePadding() {
240240
borderWidth="025"
241241
borderColor="border"
242242
>
243-
<Icon source={PaintBrushIcon} tone="base" />
243+
<Icon source={PaintBrushFlatIcon} tone="base" />
244244
</Box>
245245
<Box
246246
background="bg-surface"
247247
paddingInlineEnd={{xs: '400', sm: '1000'}}
248248
borderWidth="025"
249249
borderColor="border"
250250
>
251-
<Icon source={PaintBrushIcon} tone="base" />
251+
<Icon source={PaintBrushFlatIcon} tone="base" />
252252
</Box>
253253
</BlockStack>
254254
);

‎polaris-react/src/components/Card/Card.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
ResourceList,
1818
Text,
1919
} from '@shopify/polaris';
20-
import {ProductsMinor} from '@shopify/polaris-icons';
20+
import {ProductIcon} from '@shopify/polaris-icons';
2121

2222
export default {
2323
component: Card,
@@ -609,7 +609,7 @@ export function WithCustomReactNodeTitle() {
609609
</Text>
610610
<BlockStack inlineAlign="start">
611611
<InlineStack gap="400">
612-
<Icon source={ProductsMinor} />
612+
<Icon source={ProductIcon} />
613613
<Text as="h3" variant="headingSm">
614614
New Products
615615
</Text>

‎polaris-react/src/components/Filters/components/SearchField/SearchField.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {useId} from 'react';
2-
import {XCircleIcon} from '@shopify/polaris-icons';
2+
import {SearchIcon} from '@shopify/polaris-icons';
33

44
import {Spinner} from '../../../Spinner';
55
import {Icon} from '../../../Icon';
@@ -62,7 +62,7 @@ export function SearchField({
6262
disabled={disabled}
6363
variant={borderlessQueryField ? 'borderless' : 'inherit'}
6464
size="slim"
65-
prefix={mdUp ? <Icon source={XCircleIcon} /> : undefined}
65+
prefix={mdUp ? <Icon source={SearchIcon} /> : undefined}
6666
suffix={
6767
loading ? (
6868
<div className={styles.Spinner}>

‎polaris-react/src/components/Icon/Icon.stories.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -97,31 +97,31 @@ export function WithToneInherit() {
9797
<BlockStack gap="200">
9898
<Text as="p" tone="caution" variant="bodyMd" alignment="center">
9999
Caution tone
100-
<Icon source={icons.CirclePlusMinor} tone="inherit" />
100+
<Icon source={icons.PlusCircleIcon} tone="inherit" />
101101
</Text>
102102
<Text as="p" tone="critical" variant="bodyMd" alignment="center">
103103
Critical tone
104-
<Icon source={icons.CirclePlusMinor} tone="inherit" />
104+
<Icon source={icons.PlusCircleIcon} tone="inherit" />
105105
</Text>
106106
<Text as="p" tone="magic" variant="bodyMd" alignment="center">
107107
Magic tone
108-
<Icon source={icons.CirclePlusMinor} tone="inherit" />
108+
<Icon source={icons.PlusCircleIcon} tone="inherit" />
109109
</Text>
110110
<Text as="p" tone="magic-subdued" variant="bodyMd" alignment="center">
111111
Magic subdued tone
112-
<Icon source={icons.CirclePlusMinor} tone="inherit" />
112+
<Icon source={icons.PlusCircleIcon} tone="inherit" />
113113
</Text>
114114
<Text as="p" tone="subdued" variant="bodyMd" alignment="center">
115115
Subdued tone
116-
<Icon source={icons.CirclePlusMinor} tone="inherit" />
116+
<Icon source={icons.PlusCircleIcon} tone="inherit" />
117117
</Text>
118118
<Text as="p" tone="success" variant="bodyMd" alignment="center">
119119
Success tone
120-
<Icon source={icons.CirclePlusMinor} tone="inherit" />
120+
<Icon source={icons.PlusCircleIcon} tone="inherit" />
121121
</Text>
122122
<Text as="p" tone="text-inverse" variant="bodyMd" alignment="center">
123123
Text inverse tone
124-
<Icon source={icons.CirclePlusMinor} tone="inherit" />
124+
<Icon source={icons.PlusCircleIcon} tone="inherit" />
125125
</Text>
126126
</BlockStack>
127127
);

‎polaris-react/src/components/IndexFilters/IndexFilters.stories.tsx

-5
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,6 @@ import {
1515
IndexFiltersMode,
1616
ButtonGroup,
1717
} from '@shopify/polaris';
18-
import {
19-
ViewIcon,
20-
DeleteIcon,
21-
MobileVerticalDotsIcon,
22-
} from '@shopify/polaris-icons';
2318

2419
import type {IndexFiltersProps} from './IndexFilters';
2520

‎polaris-react/src/components/InlineStack/InlineStack.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import type {ComponentMeta} from '@storybook/react';
33
import {Box, Badge, Icon, InlineStack, Thumbnail} from '@shopify/polaris';
4-
import {CapitalIcon, ImageIcon} from '@shopify/polaris-icons';
4+
import {FlowerIcon, ImageIcon} from '@shopify/polaris-icons';
55

66
export default {
77
component: InlineStack,
@@ -14,7 +14,7 @@ export function Default() {
1414
<Badge>Two</Badge>
1515
<Badge>Three</Badge>
1616
<Box>
17-
<Icon source={CapitalIcon} tone="primary" />
17+
<Icon source={FlowerIcon} tone="primary" />
1818
</Box>
1919
</InlineStack>
2020
);

‎polaris-react/src/components/Navigation/Navigation.stories.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
PlusCircleIcon,
77
PersonIcon,
88
HomeIcon,
9-
LogOutIcon,
9+
ExitIcon,
1010
TargetIcon,
1111
StoreOnlineIcon,
1212
OrderIcon,
@@ -15,10 +15,10 @@ import {
1515
ViewIcon,
1616
StarFilledIcon,
1717
StarIcon,
18-
OrdersFilledIcon,
18+
OrderFilledIcon,
1919
HomeFilledIcon,
20-
ProductsFilledIcon,
21-
MarketingFilledIcon,
20+
ProductFilledIcon,
21+
TargetFilledIcon,
2222
} from '@shopify/polaris-icons';
2323

2424
export default {
@@ -102,7 +102,7 @@ export function WithMultipleSecondaryNavigations() {
102102
{
103103
url: '#',
104104
label: 'Orders',
105-
icon: OrdersFilledIcon,
105+
icon: OrderFilledIcon,
106106
matchedItemIcon: OrderIcon,
107107
badge: '15',
108108
onClick: () => setSelected('orders'),
@@ -127,7 +127,7 @@ export function WithMultipleSecondaryNavigations() {
127127
{
128128
url: '#',
129129
label: 'Products',
130-
icon: ProductsFilledIcon,
130+
icon: ProductFilledIcon,
131131
matchedItemIcon: ProductIcon,
132132
onClick: () => setSelected('products'),
133133
matches: selected === 'products',
@@ -177,7 +177,7 @@ export function WithMultipleSecondaryNavigations() {
177177
{
178178
url: '#',
179179
label: 'Marketing',
180-
icon: MarketingFilledIcon,
180+
icon: TargetFilledIcon,
181181
matchedItemIcon: TargetIcon,
182182
onClick: () => setSelected('marketing'),
183183
matches: selected === 'marketing',
@@ -644,7 +644,7 @@ export function WithMultipleSecondaryActionsForAnItem() {
644644
url: '#',
645645
excludePaths: ['#'],
646646
label: 'Logout',
647-
icon: LogOutIcon,
647+
icon: ExitIcon,
648648
onClick: () => setSelected('logout'),
649649
matches: selected === 'logout',
650650
},

‎polaris-react/src/components/Page/Page.stories.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
ArrowDownIcon,
77
ExternalIcon,
88
ViewIcon,
9-
MobileVerticalDotsIcon,
9+
MenuVerticalIcon,
1010
} from '@shopify/polaris-icons';
1111
import {
1212
Badge,
@@ -47,7 +47,7 @@ export function Default() {
4747
actionGroups={[
4848
{
4949
title: 'Promote',
50-
icon: MobileVerticalDotsIcon,
50+
icon: MenuVerticalIcon,
5151
actions: [
5252
{
5353
content: 'Share on Facebook',

‎polaris.shopify.com/content/design/colors/using-color.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Color highlights important areas, communicates status, urgency, and
55
keywords:
66
- using color
77
- color use
8-
icon: PaintBrushIcon
8+
icon: PaintBrushFlatIcon
99
---
1010

1111
# Color &rarr; {frontmatter.title}

‎polaris.shopify.com/content/design/icons/using-icons.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Using icons
33
description: Icons enhance an experience by providing intuitive and efficient navigation, conveying information concisely, and making it more visually appealing.
4-
icon: PaintBrushIcon
4+
icon: PaintBrushFlatIcon
55
keywords:
66
- shopify icons
77
- icon sets

‎polaris.shopify.com/content/design/index.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Design
33
description: Design principles serve as guiding notions that shape the design of the Shopify admin, with Polaris providing support in implementing these principles effectively.
44
order: 3
55
status: New
6-
icon: PaintBrushIcon
6+
icon: PaintBrushFlatIcon
77
---
88

99
# {frontmatter.title}

‎polaris.shopify.com/content/design/pro-design-language.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
title: Pro design language
33
description: Efficiency, intuition, and style combined to empower merchants with data-rich views, action-driven interfaces, and dynamic interactions.
44
order: 1
5-
icon: PaintBrushIcon
5+
icon: PaintBrushFlatIcon
66
status: New
77
---
88

0 commit comments

Comments
 (0)