Skip to content

Commit 773e684

Browse files
kangjoakangjoa
authored
Merge pull request #2971 from Shopify/Add_optional_fill_property_to_Icon_component
Update Icon props for name, size, tone
2 parents 01732d5 + 8ad7e6e commit 773e684

File tree

7 files changed

+210
-15
lines changed

7 files changed

+210
-15
lines changed

‎.changeset/shaggy-poets-punch.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/ui-extensions': minor
3+
'@shopify/ui-extensions-react': minor
4+
---
5+
6+
Icon - update to new icon names, sizing, and tone

‎packages/ui-extensions-react/src/surfaces/point-of-sale.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,9 @@ export type {
2020
EmailFieldProps,
2121
IconName,
2222
IconSize,
23+
IconTone,
24+
DeprecatedIconSize,
25+
DeprecatedIconName,
2326
IconProps,
2427
ImageProps,
2528
ImageSize,

‎packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/icon/default-example.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import {
1010

1111
export default extension('pos.home.modal.render', (root, api) => {
1212
const iconsData: {name: IconName; size: IconSize}[] = [
13-
{name: 'call', size: 'minor'},
14-
{name: 'card-reader', size: 'major'},
15-
{name: 'circle-cancel', size: 'spot'},
16-
{name: 'orders', size: 'caption'},
17-
{name: 'star', size: 'badge'},
13+
{name: 'call', size: 's', tone: 'icon-success'},
14+
{name: 'card-reader', size: 'l'},
15+
{name: 'circle-cancel', size: 'xl', tone: 'icon-critical'},
16+
{name: 'orders-filled', size: 's'},
17+
{name: 'star', size: 'm'},
1818
];
1919
const scrollView = root.createComponent(ScrollView);
2020

‎packages/ui-extensions/docs/surfaces/point-of-sale/reference/examples/icon/default-example.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,11 @@ const SmartGridModal = () => {
1313
<Navigator>
1414
<Screen name="Image" title="Image Example">
1515
<ScrollView>
16-
<Icon name="call" size="minor" />
17-
<Icon name="card-reader" size="major" />
18-
<Icon name="circle-cancel" size="spot" />
19-
<Icon name="orders" size="caption" />
20-
<Icon name="star" size="badge" />
16+
<Icon name="call" size="s" tone="icon-success" />
17+
<Icon name="card-reader" size="l" />
18+
<Icon name="circle-cancel" size="xl" tone="icon-critical" />
19+
<Icon name="orders-filled" size="s" />
20+
<Icon name="star" size="m" />
2121
</ScrollView>
2222
</Screen>
2323
</Navigator>

‎packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/pages/versions.doc.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,9 @@ Refer to the [migration guide](/docs/api/pos-ui-extensions/migrating) for more i
7171
- Added required \`variantId\` property to \`ProductApi\` interface.
7272
- Added optional \`taxLines\` property to \`ShippingLine\` interface.
7373
- Added optional \`onBlur\` handler to \`SearchBar\` component.
74+
- Added optional \`tone\` property to \`Icon\` component and expanded \`name\` and \`size\` options.
75+
- Deprecated \`'minor'\`, \`'major'\`, \`'spot'\`, \`'caption'\`, \`'badge'\` as values for the \`size\` prop in the [Icon](/docs/api/pos-ui-extensions/components/icon) component. Use \`'s'\`, \`'m'\`, \`'l'\`, \`'xl'\` instead.
76+
- Deprecated \`'arrow'\`, \`'available-at-other-locations'\`, \`'collections'\`, \`'connectivity-warning'\`, \`'delivery'\`, \`'home'\`, \`'image-placeholder'\`, \`'internet'\`, \`'menu'\`, \`'orders'\`, \`'products'\`, \`'shipment'\` as values for the \`name\` prop in the [Icon](/docs/api/pos-ui-extensions/components/icon) component. See the available icon list names in the \`name\` prop documentation.
7477
7578
**Developer Preview**:
7679
- Introduced a [Storage API](/docs/api/pos-ui-extensions/apis/storage-api). The Storage API gives the UI Extension access to store data on the POS device that the extension is running on.

‎packages/ui-extensions/src/surfaces/point-of-sale/components.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,10 @@ export {Icon} from './render/components/Icon/Icon';
2727
export type {
2828
IconProps,
2929
IconName,
30+
IconTone,
3031
IconSize,
32+
DeprecatedIconSize,
33+
DeprecatedIconName,
3134
} from './render/components/Icon/Icon';
3235
export {Image} from './render/components/Image/Image';
3336
export type {

‎packages/ui-extensions/src/surfaces/point-of-sale/render/components/Icon/Icon.ts

Lines changed: 185 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import {createRemoteComponent} from '@remote-ui/core';
22

3-
export type IconName =
3+
/**
4+
* @deprecated Use `IconName` instead. These deprecated icon names will be removed in 2025-10.
5+
*/
6+
export type DeprecatedIconName =
47
| 'add-customer'
58
| 'analytics'
69
| 'apps'
@@ -83,18 +86,195 @@ export type IconName =
8386
| 'delivery'
8487
| 'shop-pay';
8588

86-
export type IconSize = 'minor' | 'major' | 'spot' | 'caption' | 'badge';
89+
/**
90+
* @deprecated Use `IconSize` instead. These deprecated icon sizes will be removed in 2025-10.
91+
*/
92+
export type DeprecatedIconSize =
93+
| 'minor'
94+
| 'major'
95+
| 'spot'
96+
| 'caption'
97+
| 'badge';
98+
99+
export type IconName =
100+
| 'add-customer'
101+
| 'activity'
102+
| 'analytics'
103+
| 'apps'
104+
| 'arrow-down'
105+
| 'arrow-left'
106+
| 'arrow-right'
107+
| 'arrow-up'
108+
| 'backspace'
109+
| 'call'
110+
| 'cancel-fulfillment'
111+
| 'cancel'
112+
| 'card-reader'
113+
| 'caret-down'
114+
| 'caret-up'
115+
| 'cart-filled'
116+
| 'cart-outlined'
117+
| 'cash'
118+
| 'checklist'
119+
| 'checkmark'
120+
| 'checkmark-active'
121+
| 'checkmark-inactive'
122+
| 'chevron-down'
123+
| 'chevron-left'
124+
| 'chevron-right'
125+
| 'chevron-up'
126+
| 'circle-alert'
127+
| 'circle-cancel'
128+
| 'circle-checkmark'
129+
| 'circle-disconnected'
130+
| 'circle-info'
131+
| 'circle-outline'
132+
| 'clock'
133+
| 'collection'
134+
| 'connectivity'
135+
| 'connectivity-issue'
136+
| 'connectivity-critical-issue'
137+
| 'copy'
138+
| 'credit-card'
139+
| 'custom-payment'
140+
| 'custom-sale'
141+
| 'customer-filled'
142+
| 'customer-outlined'
143+
| 'delete'
144+
| 'desktop'
145+
| 'discount'
146+
| 'discount-automatic'
147+
| 'discount-code'
148+
| 'discount-custom'
149+
| 'discount-remove'
150+
| 'dockside'
151+
| 'draft-orders'
152+
| 'drawer'
153+
| 'exchange'
154+
| 'external-link'
155+
| 'fees'
156+
| 'flag'
157+
| 'flip-camera'
158+
| 'fulfillment-delivery'
159+
| 'fulfillment-shipment'
160+
| 'gallery-view'
161+
| 'gift-card'
162+
| 'help'
163+
| 'hide'
164+
| 'hide-keyboard'
165+
| 'home-filled'
166+
| 'home-outlined'
167+
| 'horizontal-dots'
168+
| 'image'
169+
| 'images'
170+
| 'inventory-adjustments'
171+
| 'inventory-counts'
172+
| 'inventory-po'
173+
| 'inventory-transfer'
174+
| 'keypad'
175+
| 'learn'
176+
| 'lightning'
177+
| 'link'
178+
| 'list'
179+
| 'list-view'
180+
| 'location'
181+
| 'lock'
182+
| 'low-battery'
183+
| 'mail'
184+
| 'maximize'
185+
| 'minimize'
186+
| 'minus'
187+
| 'mobile'
188+
| 'more-filled'
189+
| 'more-outlined'
190+
| 'no-internet'
191+
| 'note-report'
192+
| 'not-stocked'
193+
| 'orders-filled'
194+
| 'orders-outlined'
195+
| 'pencil'
196+
| 'play-button'
197+
| 'plus'
198+
| 'point-of-sale'
199+
| 'print'
200+
| 'pro'
201+
| 'products-filled'
202+
| 'products-outlined'
203+
| 'radio-active'
204+
| 'radio-inactive'
205+
| 'reassign-fulfillment'
206+
| 'rearrange'
207+
| 'receipt'
208+
| 'refresh'
209+
| 'register'
210+
| 'return'
211+
| 'retrieve-cart'
212+
| 'save-cart'
213+
| 'scan-barcode'
214+
| 'scan-qr-code'
215+
| 'search'
216+
| 'send'
217+
| 'send-cart'
218+
| 'settings'
219+
| 'shop-app'
220+
| 'shop-pay'
221+
| 'shopify-payments'
222+
| 'sort'
223+
| 'split-payment'
224+
| 'staff'
225+
| 'star'
226+
| 'store'
227+
| 'tablet-l'
228+
| 'tablet-s'
229+
| 'tap-to-pay'
230+
| 'unlock'
231+
| 'unordered-list'
232+
| 'variant'
233+
| 'view'
234+
| 'void-shipping-label';
235+
236+
export type IconSize = 's' | 'm' | 'l' | 'xl';
237+
238+
export type IconTone =
239+
| 'icon-primary'
240+
| 'icon-inverse'
241+
| 'icon-subdued'
242+
| 'icon-disabled'
243+
| 'icon-warning'
244+
| 'icon-critical'
245+
| 'icon-success'
246+
| 'icon-interactive'
247+
| 'icon-highlight'
248+
| 'icon-shoppay'
249+
| 'icon-static-light'
250+
| 'icon-static-dark'
251+
| 'icon-inactive'
252+
| 'icon-badge-neutral'
253+
| 'icon-search'
254+
| 'icon-tile-default'
255+
| 'icon-tile-stack'
256+
| 'icon-tile-disabled'
257+
| 'icon-tile-pink'
258+
| 'icon-tile-purple'
259+
| 'icon-tile-orange'
260+
| 'icon-subnavigation-inactive'
261+
| 'icon-primary-pressed';
87262

88263
export interface IconProps {
89264
/**
90265
* A name used to render the icon.
91266
*/
92-
name: IconName;
267+
name: IconName | DeprecatedIconName;
93268
/**
94269
* Size of the icon.
95-
* @defaultValue 'major'
270+
* @defaultValue 'l'
271+
*/
272+
size?: IconSize | DeprecatedIconSize;
273+
/**
274+
* Color of the icon.
275+
* @defaultValue 'icon-primary'
96276
*/
97-
size?: IconSize;
277+
tone?: IconTone;
98278
}
99279

100280
export const Icon = createRemoteComponent<'Icon', IconProps>('Icon');

0 commit comments

Comments
 (0)