Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions UNRELEASED.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f

### Dependency upgrades

- Upgrade to `@shopify/polaris-icons` v2.0.0 ([#982](https://github.com/Shopify/polaris-react/pull/982))

### Code quality

- Now using `import styles from './foo.scss';` instead of non-standard `import * as styles from './foo.scss';` when importing scss files ([#929](https://github.com/Shopify/polaris-react/pull/929))
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@
"@shopify/app-bridge": "^1.0.3",
"@shopify/images": "^1.1.0",
"@shopify/javascript-utilities": "^2.2.1",
"@shopify/polaris-icons": "1.0.0-beta.5",
"@shopify/polaris-icons": "^2.0.0",
"@shopify/polaris-tokens": "^2.1.1",
"@shopify/react-compose": "^0.1.6",
"@shopify/react-utilities": "^2.0.3",
Expand Down
208 changes: 104 additions & 104 deletions src/components/Icon/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,58 +4,58 @@ import {classNames, variationName} from '@shopify/react-utilities/styles';
import {withAppProvider, WithAppProviderProps} from '../AppProvider';

import {
add,
alert,
arrowDown,
arrowLeft,
arrowRight,
arrowUp,
arrowUpDown,
calendar,
cancel,
cancelSmall,
caretDown,
caretUp,
checkmark,
chevronDown,
chevronLeft,
chevronRight,
chevronUp,
circleCancel,
circleChevronDown,
circleChevronLeft,
circleChevronRight,
circleChevronUp,
circleInformation,
circlePlus,
circlePlusOutline,
conversation,
deleteIcon,
disable,
dispute,
duplicate,
embed,
exportIcon,
external,
help,
home,
horizontalDots,
importIcon,
logOut,
menu,
notes,
notification,
onlineStore,
orders,
print,
products,
profile,
refresh,
risk,
save,
search,
subtract,
view,
addMinor,
alertMinor,
arrowDownMinor,
arrowLeftMinor,
arrowRightMinor,
arrowUpMinor,
arrowUpDownMinor,
calendarMinor,
cancelMajor,
cancelSmallMinor,
caretDownMinor,
caretUpMinor,
checkmarkMinor,
chevronDownMinor,
chevronLeftMinor,
chevronRightMinor,
chevronUpMinor,
circleCancelMinor,
circleChevronDownMinor,
circleChevronLeftMinor,
circleChevronRightMinor,
circleChevronUpMinor,
circleInformationMajor,
circlePlusMinor,
circlePlusOutlineMinor,
conversationMinor,
deleteMinor,
disableMinor,
disputeMinor,
duplicateMinor,
embedMinor,
exportMinor,
externalMinor,
helpMajor,
homeMajor,
horizontalDotsMinor,
importMinor,
logOutMinor,
menuMajor,
notesMinor,
notificationMajor,
onlineStoreMajor,
ordersMajor,
printMinor,
productsMajor,
profileMinor,
subtractMinor,
refreshMinor,
riskMinor,
saveMinor,
searchMinor,
viewMinor,
} from '../../icons';

import styles from './Icon.scss';
Expand Down Expand Up @@ -99,58 +99,58 @@ export type Color =
| 'purple';

export const BUNDLED_ICONS = {
add,
alert,
arrowDown,
arrowLeft,
arrowRight,
arrowUp,
arrowUpDown,
calendar,
cancel,
cancelSmall,
caretDown,
caretUp,
checkmark,
chevronDown,
chevronLeft,
chevronRight,
chevronUp,
circleCancel,
circleChevronDown,
circleChevronLeft,
circleChevronRight,
circleChevronUp,
circleInformation,
circlePlus,
circlePlusOutline,
conversation,
delete: deleteIcon,
disable,
dispute,
duplicate,
embed,
export: exportIcon,
external,
help,
home,
horizontalDots,
import: importIcon,
logOut,
menu,
notes,
notification,
onlineStore,
orders,
print,
products,
profile,
refresh,
risk,
save,
search,
subtract,
view,
add: addMinor,
alert: alertMinor,
arrowDown: arrowDownMinor,
arrowLeft: arrowLeftMinor,
arrowRight: arrowRightMinor,
arrowUp: arrowUpMinor,
arrowUpDown: arrowUpDownMinor,
calendar: calendarMinor,
cancel: cancelMajor,
cancelSmall: cancelSmallMinor,
caretDown: caretDownMinor,
caretUp: caretUpMinor,
checkmark: checkmarkMinor,
chevronDown: chevronDownMinor,
chevronLeft: chevronLeftMinor,
chevronRight: chevronRightMinor,
chevronUp: chevronUpMinor,
circleCancel: circleCancelMinor,
circleChevronDown: circleChevronDownMinor,
circleChevronLeft: circleChevronLeftMinor,
circleChevronRight: circleChevronRightMinor,
circleChevronUp: circleChevronUpMinor,
circleInformation: circleInformationMajor,
circlePlus: circlePlusMinor,
circlePlusOutline: circlePlusOutlineMinor,
conversation: conversationMinor,
delete: deleteMinor,
disable: disableMinor,
dispute: disputeMinor,
duplicate: duplicateMinor,
embed: embedMinor,
export: exportMinor,
external: externalMinor,
help: helpMajor,
home: homeMajor,
horizontalDots: horizontalDotsMinor,
import: importMinor,
logOut: logOutMinor,
menu: menuMajor,
notes: notesMinor,
notification: notificationMajor,
onlineStore: onlineStoreMajor,
orders: ordersMajor,
print: printMinor,
products: productsMajor,
profile: profileMinor,
refresh: refreshMinor,
risk: riskMinor,
save: saveMinor,
search: searchMinor,
subtract: subtractMinor,
view: viewMinor,
};

const COLORS_WITH_BACKDROPS = [
Expand Down
108 changes: 54 additions & 54 deletions src/icons/index.ts
Original file line number Diff line number Diff line change
@@ -1,54 +1,54 @@
import POLARIS_ICONS from '@shopify/polaris-icons';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This whole file could all be replaced with just export * from '@shopify/polaris-icons' but IIRC @amrocha and I decided that it's best to be explicit.

I'm still kinda tempted to 🔥 this file entirely and just import icons direct within the Icon component but we can decide if we want to do that later

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like we discussed, I believe having an index file creates good habits. Prune a list of icons down to the ones you need and use them, instead of potentially adding a new icon every time

On the export * side though, I talked to Kaelig and it sounds like there's only a few icons that are problematic, so I'm gonna put something together soon, run it by Jesse and see if we can get it merged. If we do then what I said above doesn't apply anymore and we can get rid of this file


export const add = POLARIS_ICONS.add;
export const alert = POLARIS_ICONS.alert;
export const arrowDown = POLARIS_ICONS.arrowDown;
export const arrowLeft = POLARIS_ICONS.arrowLeft;
export const arrowRight = POLARIS_ICONS.arrowRight;
export const arrowUp = POLARIS_ICONS.arrowUp;
export const arrowUpDown = POLARIS_ICONS.arrowUpDown;
export const calendar = POLARIS_ICONS.calendar;
export const cancel = POLARIS_ICONS.cancel;
export const cancelSmall = POLARIS_ICONS.cancelSmall;
export const caretDown = POLARIS_ICONS.caretDown;
export const caretUp = POLARIS_ICONS.caretUp;
export const checkmark = POLARIS_ICONS.checkmark;
export const chevronDown = POLARIS_ICONS.chevronDown;
export const chevronLeft = POLARIS_ICONS.chevronLeft;
export const chevronRight = POLARIS_ICONS.chevronRight;
export const chevronUp = POLARIS_ICONS.chevronUp;
export const circleCancel = POLARIS_ICONS.circleCancel;
export const circleChevronDown = POLARIS_ICONS.circleChevronDown;
export const circleChevronLeft = POLARIS_ICONS.circleChevronLeft;
export const circleChevronRight = POLARIS_ICONS.circleChevronRight;
export const circleChevronUp = POLARIS_ICONS.circleChevronUp;
export const circleInformation = POLARIS_ICONS.circleInformation;
export const circlePlus = POLARIS_ICONS.circlePlus;
export const circlePlusOutline = POLARIS_ICONS.circlePlusOutline;
export const conversation = POLARIS_ICONS.conversation;
export const deleteIcon = POLARIS_ICONS.deleteIcon;
export const disable = POLARIS_ICONS.disable;
export const dispute = POLARIS_ICONS.dispute;
export const duplicate = POLARIS_ICONS.duplicate;
export const embed = POLARIS_ICONS.embed;
export const exportIcon = POLARIS_ICONS.exportIcon;
export const external = POLARIS_ICONS.external;
export const help = POLARIS_ICONS.help;
export const home = POLARIS_ICONS.home;
export const horizontalDots = POLARIS_ICONS.horizontalDots;
export const importIcon = POLARIS_ICONS.importIcon;
export const logOut = POLARIS_ICONS.logOut;
export const menu = POLARIS_ICONS.menu;
export const notes = POLARIS_ICONS.notes;
export const notification = POLARIS_ICONS.notification;
export const onlineStore = POLARIS_ICONS.onlineStore;
export const orders = POLARIS_ICONS.orders;
export const print = POLARIS_ICONS.print;
export const products = POLARIS_ICONS.products;
export const profile = POLARIS_ICONS.profile;
export const subtract = POLARIS_ICONS.subtract;
export const refresh = POLARIS_ICONS.refresh;
export const risk = POLARIS_ICONS.risk;
export const save = POLARIS_ICONS.save;
export const search = POLARIS_ICONS.search;
export const view = POLARIS_ICONS.view;
export {
addMinor,
alertMinor,
arrowDownMinor,
arrowLeftMinor,
arrowRightMinor,
arrowUpMinor,
arrowUpDownMinor,
calendarMinor,
cancelMajor,
cancelSmallMinor,
caretDownMinor,
caretUpMinor,
checkmarkMinor,
chevronDownMinor,
chevronLeftMinor,
chevronRightMinor,
chevronUpMinor,
circleCancelMinor,
circleChevronDownMinor,
circleChevronLeftMinor,
circleChevronRightMinor,
circleChevronUpMinor,
circleInformationMajor,
circlePlusMinor,
circlePlusOutlineMinor,
conversationMinor,
deleteMinor,
disableMinor,
disputeMinor,
duplicateMinor,
embedMinor,
exportMinor,
externalMinor,
helpMajor,
homeMajor,
horizontalDotsMinor,
importMinor,
logOutMinor,
menuMajor,
notesMinor,
notificationMajor,
onlineStoreMajor,
ordersMajor,
printMinor,
productsMajor,
profileMinor,
subtractMinor,
refreshMinor,
riskMinor,
saveMinor,
searchMinor,
viewMinor,
} from '@shopify/polaris-icons';
8 changes: 4 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1136,10 +1136,10 @@
mime-types "2.1.12"
request "2.78.0"

"@shopify/polaris-icons@1.0.0-beta.5":
version "1.0.0-beta.5"
resolved "https://registry.yarnpkg.com/@shopify/polaris-icons/-/polaris-icons-1.0.0-beta.5.tgz#61e691aebd4234ff1daacf1a60936c55a584c0f9"
integrity sha512-wpmTryRRITTTmM7axBQnWMbdzxQl9hVcMOKqSDWiPV42OHCYyjCf7zpE2FiK/fuok9YDDHJVoTxf2DganjhvTw==
"@shopify/polaris-icons@^2.0.0":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@shopify/polaris-icons/-/polaris-icons-2.0.0.tgz#bcba806f930bb9efaff7be1ee95d1bde0c4f3f0f"
integrity sha512-J/rn5ftl/KV3ibeXHEgTT/rFcM3Rq+L76ZK+I3gHpU8W/LwsWeb4nmlUIFxkU8GJk+grWi4G8hr8o/ys451Ovw==

"@shopify/polaris-tokens@^2.1.1":
version "2.1.1"
Expand Down