Skip to content

Commit 214c490

Browse files
ggdouglasggdouglas
committed
Use next icons internally in components
1 parent 96cb743 commit 214c490

19 files changed

Lines changed: 79 additions & 73 deletions

File tree

‎packages/core/src/components/breadcrumbs/_breadcrumbs.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222

2323
&::after {
2424
background: svg-icon(
25-
"16px/chevron-right.svg",
25+
"next/outlined/chevron-right.svg",
2626
(
2727
path: (
2828
fill: $pt-icon-color,
@@ -92,7 +92,7 @@
9292

9393
&::before {
9494
background: svg-icon(
95-
"16px/more.svg",
95+
"next/outlined/dots-three.svg",
9696
(
9797
path: (
9898
fill: $pt-icon-color,
@@ -121,7 +121,7 @@
121121

122122
.#{$ns}-breadcrumbs > li::after {
123123
background: svg-icon(
124-
"16px/chevron-right.svg",
124+
"next/outlined/chevron-right.svg",
125125
(
126126
path: (
127127
fill: $pt-dark-icon-color,
@@ -144,7 +144,7 @@
144144

145145
&::before {
146146
background: svg-icon(
147-
"16px/more.svg",
147+
"next/outlined/dots-three.svg",
148148
(
149149
path: (
150150
fill: $pt-dark-icon-color,

‎packages/core/src/components/callout/callout.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616

1717
import classNames from "classnames";
1818

19-
import { Error, type IconName, InfoSign, type SVGIconProps, Tick, WarningSign } from "@blueprintjs/icons";
19+
import type { IconName, SVGIconProps } from "@blueprintjs/icons";
20+
import { CheckIcon, CircleExclamationIcon, CircleInfoIcon, TriangleExclamationIcon } from "@blueprintjs/icons/next";
2021

2122
import {
2223
Classes,
@@ -118,13 +119,13 @@ const renderIcon = (icon?: CalloutProps["icon"], intent?: Intent): IconName | Ma
118119
// 3. icon specified by intent prop
119120
switch (intent) {
120121
case Intent.DANGER:
121-
return <Error {...iconProps} />;
122+
return <CircleExclamationIcon {...iconProps} />;
122123
case Intent.PRIMARY:
123-
return <InfoSign {...iconProps} />;
124+
return <CircleInfoIcon {...iconProps} />;
124125
case Intent.WARNING:
125-
return <WarningSign {...iconProps} />;
126+
return <TriangleExclamationIcon {...iconProps} />;
126127
case Intent.SUCCESS:
127-
return <Tick {...iconProps} />;
128+
return <CheckIcon {...iconProps} />;
128129
default:
129130
return undefined;
130131
}

‎packages/core/src/components/dialog/dialog.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
import classNames from "classnames";
1818
import { useMemo, useRef } from "react";
1919

20-
import { type IconName, IconSize, SmallCross } from "@blueprintjs/icons";
20+
import { type IconName, IconSize } from "@blueprintjs/icons";
21+
import { XIcon } from "@blueprintjs/icons/next";
2122

2223
import { Classes, DISPLAYNAME_PREFIX, type MaybeElement, mergeRefs, type Props } from "../../common";
2324
import * as Errors from "../../common/errors";
@@ -175,7 +176,7 @@ export const Dialog: React.FC<DialogProps> & { displayName?: string } = props =>
175176
<Button
176177
aria-label="Close"
177178
className={Classes.DIALOG_CLOSE_BUTTON}
178-
icon={<SmallCross size={IconSize.STANDARD} />}
179+
icon={<XIcon />}
179180
onClick={onClose}
180181
variant="minimal"
181182
/>

‎packages/core/src/components/drawer/drawer.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@
1616

1717
import classNames from "classnames";
1818

19-
import { type IconName, IconSize, SmallCross } from "@blueprintjs/icons";
19+
import { type IconName, IconSize } from "@blueprintjs/icons";
20+
import { XIcon } from "@blueprintjs/icons/next";
2021

2122
import { AbstractPureComponent, Classes, type Props } from "../../common";
2223
import * as Errors from "../../common/errors";
@@ -167,7 +168,7 @@ export class Drawer extends AbstractPureComponent<DrawerProps> {
167168
<Button
168169
aria-label="Close"
169170
className={Classes.DIALOG_CLOSE_BUTTON}
170-
icon={<SmallCross size={IconSize.LARGE} />}
171+
icon={<XIcon size={IconSize.LARGE} />}
171172
onClick={this.props.onClose}
172173
variant="minimal"
173174
/>

‎packages/core/src/components/entity-title/entityTitle.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
import classNames from "classnames";
1818
import { createElement, forwardRef, useMemo } from "react";
1919

20-
import { type IconName, IconNames } from "@blueprintjs/icons";
20+
import { type IconName } from "@blueprintjs/icons";
21+
import { SquareIcon } from "@blueprintjs/icons/next";
2122

2223
import { Classes, DISPLAYNAME_PREFIX, type MaybeElement, type Props } from "../../common";
2324
import { H1, H2, H3, H4, H5, H6 } from "../html/html";
@@ -151,7 +152,7 @@ export const EntityTitle: React.FC<EntityTitleProps> = forwardRef<HTMLDivElement
151152
<Icon
152153
aria-hidden={true}
153154
className={classNames(Classes.TEXT_MUTED, { [Classes.SKELETON]: loading })}
154-
icon={loading ? IconNames.SQUARE : icon}
155+
icon={loading ? <SquareIcon /> : icon}
155156
tabIndex={-1}
156157
/>
157158
</div>

‎packages/core/src/components/forms/_controls.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ $control-indicator-spacing: $pt-spacing * 2 !default;
248248
// embed SVG icon image as backgroud-image above gradient.
249249
// the SVG image content is inlined into the CSS, so use this sparingly.
250250
background-image: svg-icon(
251-
"16px/#{$icon}.svg",
251+
"next/outlined/#{$icon}.svg",
252252
(
253253
path: (
254254
fill: $fill-color,
@@ -266,11 +266,11 @@ $control-indicator-spacing: $pt-spacing * 2 !default;
266266
}
267267

268268
input:checked ~ .#{$ns}-control-indicator {
269-
@include indicator-inline-icon("small-tick");
269+
@include indicator-inline-icon("check-small");
270270
}
271271

272272
input:indeterminate ~ .#{$ns}-control-indicator {
273-
@include indicator-inline-icon("small-minus");
273+
@include indicator-inline-icon("minus-small");
274274
}
275275

276276
input:disabled ~ .#{$ns}-control-indicator::before {
@@ -279,11 +279,11 @@ $control-indicator-spacing: $pt-spacing * 2 !default;
279279

280280
@media (forced-colors: active) and (prefers-color-scheme: dark) {
281281
input:checked:not(:disabled) ~ .#{$ns}-control-indicator {
282-
@include indicator-inline-icon("small-tick", $black);
282+
@include indicator-inline-icon("check-small", $black);
283283
}
284284

285285
input:indeterminate:not(:disabled) ~ .#{$ns}-control-indicator {
286-
@include indicator-inline-icon("small-minus", $black);
286+
@include indicator-inline-icon("minus-small", $black);
287287
}
288288

289289
input:disabled ~ .#{$ns}-control-indicator {

‎packages/core/src/components/forms/numericInput.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
import classNames from "classnames";
1818

19-
import { ChevronDown, ChevronUp } from "@blueprintjs/icons";
19+
import { ChevronDownIcon, ChevronUpIcon } from "@blueprintjs/icons/next";
2020

2121
import {
2222
AbstractPureComponent,
@@ -439,15 +439,15 @@ export class NumericInput extends AbstractPureComponent<
439439
aria-label="increment"
440440
aria-controls={this.numericInputId}
441441
disabled={disabled || isIncrementDisabled}
442-
icon={<ChevronUp />}
442+
icon={<ChevronUpIcon />}
443443
intent={intent}
444444
{...this.incrementButtonHandlers}
445445
/>
446446
<Button
447447
aria-label="decrement"
448448
aria-controls={this.numericInputId}
449449
disabled={disabled || isDecrementDisabled}
450-
icon={<ChevronDown />}
450+
icon={<ChevronDownIcon />}
451451
intent={intent}
452452
{...this.decrementButtonHandlers}
453453
/>

‎packages/core/src/components/hotkeys/keyComboTag.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,35 @@ import classNames from "classnames";
1818
import { Fragment, memo, useCallback } from "react";
1919

2020
import {
21-
ArrowDown,
22-
ArrowLeft,
23-
ArrowRight,
24-
ArrowUp,
25-
KeyCommand,
26-
KeyControl,
27-
KeyDelete,
28-
KeyEnter,
29-
KeyOption,
30-
KeyShift,
31-
} from "@blueprintjs/icons";
21+
ArrowDownIcon,
22+
ArrowLeftIcon,
23+
ArrowRightIcon,
24+
ArrowTurnBottomLeftIcon,
25+
ArrowUpIcon,
26+
KeyCommandIcon,
27+
KeyControlIcon,
28+
KeyDeleteIcon,
29+
KeyOptionIcon,
30+
KeyShiftIcon,
31+
} from "@blueprintjs/icons/next";
3232

3333
import { Classes, DISPLAYNAME_PREFIX, type Props } from "../../common";
3434
import { Icon } from "../icon/icon";
3535

3636
import { isMac, normalizeKeyCombo } from "./hotkeyParser";
3737

3838
const KEY_ICONS: Record<string, { icon: React.JSX.Element; iconTitle: string; isMacOnly?: boolean }> = {
39-
alt: { icon: <KeyOption />, iconTitle: "Alt/Option key", isMacOnly: true },
40-
arrowdown: { icon: <ArrowDown />, iconTitle: "Down key" },
41-
arrowleft: { icon: <ArrowLeft />, iconTitle: "Left key" },
42-
arrowright: { icon: <ArrowRight />, iconTitle: "Right key" },
43-
arrowup: { icon: <ArrowUp />, iconTitle: "Up key" },
44-
cmd: { icon: <KeyCommand />, iconTitle: "Command key", isMacOnly: true },
45-
ctrl: { icon: <KeyControl />, iconTitle: "Control key", isMacOnly: true },
46-
delete: { icon: <KeyDelete />, iconTitle: "Delete key" },
47-
enter: { icon: <KeyEnter />, iconTitle: "Enter key" },
48-
meta: { icon: <KeyCommand />, iconTitle: "Command key", isMacOnly: true },
49-
shift: { icon: <KeyShift />, iconTitle: "Shift key", isMacOnly: true },
39+
alt: { icon: <KeyOptionIcon />, iconTitle: "Alt/Option key", isMacOnly: true },
40+
arrowdown: { icon: <ArrowDownIcon />, iconTitle: "Down key" },
41+
arrowleft: { icon: <ArrowLeftIcon />, iconTitle: "Left key" },
42+
arrowright: { icon: <ArrowRightIcon />, iconTitle: "Right key" },
43+
arrowup: { icon: <ArrowUpIcon />, iconTitle: "Up key" },
44+
cmd: { icon: <KeyCommandIcon />, iconTitle: "Command key", isMacOnly: true },
45+
ctrl: { icon: <KeyControlIcon />, iconTitle: "Control key", isMacOnly: true },
46+
delete: { icon: <KeyDeleteIcon />, iconTitle: "Delete key" },
47+
enter: { icon: <ArrowTurnBottomLeftIcon />, iconTitle: "Enter key" },
48+
meta: { icon: <KeyCommandIcon />, iconTitle: "Command key", isMacOnly: true },
49+
shift: { icon: <KeyShiftIcon />, iconTitle: "Shift key", isMacOnly: true },
5050
};
5151

5252
/** Reverse table of some CONFIG_ALIASES fields, for display by KeyComboTag */

‎packages/core/src/components/html-select/htmlSelect.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
import classNames from "classnames";
1818
import { forwardRef } from "react";
1919

20-
import { CaretDown, DoubleCaretVertical, type IconName, type SVGIconProps } from "@blueprintjs/icons";
20+
import type { IconName, SVGIconProps } from "@blueprintjs/icons";
21+
import { CaretDownIcon, CaretsVerticalIcon } from "@blueprintjs/icons/next";
2122

2223
import { DISABLED, FILL, HTML_SELECT, LARGE, MINIMAL } from "../../common/classes";
2324
import { DISPLAYNAME_PREFIX, type OptionProps } from "../../common/props";
@@ -109,9 +110,9 @@ export const HTMLSelect: React.FC<HTMLSelectProps> = forwardRef((props, ref) =>
109110
const iconTitle = "Open dropdown";
110111
const endIcon =
111112
iconName === "double-caret-vertical" ? (
112-
<DoubleCaretVertical title={iconTitle} {...iconProps} />
113+
<CaretsVerticalIcon title={iconTitle} {...iconProps} />
113114
) : (
114-
<CaretDown title={iconTitle} {...iconProps} />
115+
<CaretDownIcon title={iconTitle} {...iconProps} />
115116
);
116117

117118
const optionChildren = options.map(option => {

‎packages/core/src/components/menu/menuItem.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
import classNames from "classnames";
1818
import { createElement, forwardRef } from "react";
1919

20-
import { CaretRight, SmallTick } from "@blueprintjs/icons";
20+
import { CaretRightIcon, CheckSmallIcon } from "@blueprintjs/icons/next";
2121

2222
import { Classes } from "../../common";
2323
import { type ActionProps, DISPLAYNAME_PREFIX, removeNonHTMLProps } from "../../common/props";
@@ -264,7 +264,7 @@ export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuI
264264
...(disabled ? DISABLED_PROPS : {}),
265265
className: anchorClasses,
266266
},
267-
isSelected ? <SmallTick className={Classes.MENU_ITEM_SELECTED_ICON} /> : undefined,
267+
isSelected ? <CheckSmallIcon className={Classes.MENU_ITEM_SELECTED_ICON} /> : undefined,
268268
hasIcon ? (
269269
// wrap icon in a <span> in case `icon` is a custom element rather than a built-in icon identifier,
270270
// so that we always render this class and hide it from a screen reader
@@ -276,7 +276,7 @@ export const MenuItem: React.FC<MenuItemProps> = forwardRef<HTMLLIElement, MenuI
276276
{text}
277277
</Text>,
278278
maybeLabel,
279-
hasSubmenu ? <CaretRight className={Classes.MENU_SUBMENU_ICON} title="Open sub menu" /> : undefined,
279+
hasSubmenu ? <CaretRightIcon className={Classes.MENU_SUBMENU_ICON} title="Open sub menu" /> : undefined,
280280
);
281281

282282
const liClasses = classNames({ [Classes.MENU_SUBMENU]: hasSubmenu });

0 commit comments

Comments
 (0)