Skip to content

Commit c097f5d

Browse files
sroy3sroy3
authored
Simplify the import of icons (#1941)
1 parent 79a52d5 commit c097f5d

File tree

19 files changed

+65
-98
lines changed

19 files changed

+65
-98
lines changed

‎webview/src/experiments/components/table/TableHeader.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
import { MessagesMenu } from '../../../shared/components/messagesMenu/MessagesMenu'
2222
import { MessagesMenuOptionProps } from '../../../shared/components/messagesMenu/MessagesMenuOption'
2323
import { IconMenu } from '../../../shared/components/iconMenu/IconMenu'
24-
import { AllIcons } from '../../../shared/components/Icon'
24+
import { DownArrow, Lines, UpArrow } from '../../../shared/components/icons'
2525

2626
export enum SortOrder {
2727
ASCENDING = 'Sort Ascending',
@@ -119,14 +119,12 @@ const getIconMenuItems = (
119119
) => [
120120
{
121121
hidden: !sortEnabled || sortOrder === SortOrder.NONE,
122-
icon:
123-
(sortOrder === SortOrder.DESCENDING && AllIcons.DOWN_ARROW) ||
124-
AllIcons.UP_ARROW,
122+
icon: (sortOrder === SortOrder.DESCENDING && DownArrow) || UpArrow,
125123
tooltip: 'Table Sorted By'
126124
},
127125
{
128126
hidden: !hasFilter,
129-
icon: AllIcons.LINES,
127+
icon: Lines,
130128
tooltip: 'Table Filtered By'
131129
}
132130
]

‎webview/src/plots/components/DropTarget.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
11
import React from 'react'
22
import cx from 'classnames'
33
import styles from './styles.module.scss'
4-
import { AllIcons, Icon } from '../../shared/components/Icon'
4+
import { Icon } from '../../shared/components/Icon'
5+
import { GraphLine } from '../../shared/components/icons'
56

67
export const DropTarget: React.FC = () => (
78
<div
89
data-testid="plot_drop-target"
910
id="plot-drop-target"
1011
className={cx(styles.plot, styles.dropTarget)}
1112
>
12-
<Icon
13-
icon={AllIcons.GRAPH_LINE}
14-
className={styles.dropIcon}
15-
width={50}
16-
height={50}
17-
/>
13+
<Icon icon={GraphLine} className={styles.dropIcon} width={50} height={50} />
1814
</div>
1915
)

‎webview/src/plots/components/PlotsContainer.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,18 @@ import { PlotsSizeContext } from './PlotsSizeContext'
1010
import { PlotsPicker, PlotsPickerProps } from './PlotsPicker'
1111
import { SizePicker } from './SizePicker'
1212
import styles from './styles.module.scss'
13-
import { AllIcons, Icon } from '../../shared/components/Icon'
13+
import { Icon } from '../../shared/components/Icon'
1414
import { IconMenu } from '../../shared/components/iconMenu/IconMenu'
1515
import { IconMenuItemProps } from '../../shared/components/iconMenu/IconMenuItem'
1616
import { sendMessage } from '../../shared/vscode'
1717
import Tooltip from '../../shared/components/tooltip/Tooltip'
18+
import {
19+
ChevronDown,
20+
ChevronRight,
21+
Dots,
22+
Info,
23+
Lines
24+
} from '../../shared/components/icons'
1825

1926
export interface PlotsContainerProps {
2027
sectionCollapsed: SectionCollapsed
@@ -43,12 +50,7 @@ export const SectionDescription = {
4350
}
4451

4552
const InfoIcon = () => (
46-
<Icon
47-
icon={AllIcons.INFO}
48-
width={16}
49-
height={16}
50-
className={styles.infoIcon}
51-
/>
53+
<Icon icon={Info} width={16} height={16} className={styles.infoIcon} />
5254
)
5355

5456
export const PlotsContainer: React.FC<PlotsContainerProps> = ({
@@ -86,7 +88,7 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
8688
}
8789
const menuItems: IconMenuItemProps[] = [
8890
{
89-
icon: AllIcons.DOTS,
91+
icon: Dots,
9092
onClickNode: (
9193
<SizePicker currentSize={size} setSelectedSize={changeSize} />
9294
),
@@ -96,7 +98,7 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
9698

9799
if (menu) {
98100
menuItems.unshift({
99-
icon: AllIcons.LINES,
101+
icon: Lines,
100102
onClickNode: <PlotsPicker {...menu} />,
101103
tooltip: 'Select Plots'
102104
})
@@ -124,7 +126,7 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
124126
}}
125127
>
126128
<Icon
127-
icon={open ? AllIcons.CHEVRON_DOWN : AllIcons.CHEVRON_RIGHT}
129+
icon={open ? ChevronDown : ChevronRight}
128130
data-testid="plots-container-details-chevron"
129131
width={20}
130132
height={20}

‎webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import { MessageFromWebviewType } from 'dvc/src/webview/contract'
33
import React, { useState } from 'react'
44
import cx from 'classnames'
55
import styles from './styles.module.scss'
6-
import { AllIcons, Icon } from '../../../shared/components/Icon'
6+
import { Icon } from '../../../shared/components/Icon'
77
import { RefreshButton } from '../../../shared/components/button/RefreshButton'
88
import { sendMessage } from '../../../shared/vscode'
9+
import { ChevronDown, ChevronRight } from '../../../shared/components/icons'
910

1011
export interface ComparisonTableRowProps {
1112
path: string
@@ -29,9 +30,7 @@ export const ComparisonTableRow: React.FC<ComparisonTableRowProps> = ({
2930
<tr>
3031
<td className={cx({ [styles.pinnedColumnCell]: pinnedColumn })}>
3132
<button className={styles.rowToggler} onClick={toggleIsShownState}>
32-
<Icon
33-
icon={isShown ? AllIcons.CHEVRON_DOWN : AllIcons.CHEVRON_RIGHT}
34-
/>
33+
<Icon icon={isShown ? ChevronDown : ChevronRight} />
3534
{path}
3635
</button>
3736
</td>

‎webview/src/plots/components/comparisonTable/DropTarget.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react'
2-
import { AllIcons, Icon } from '../../../shared/components/Icon'
2+
import { Icon } from '../../../shared/components/Icon'
3+
import { Ellipsis } from '../../../shared/components/icons'
34
import styles from '../styles.module.scss'
45

56
export const DropTarget: React.FC = () => (
67
<div className={styles.dropTarget} data-testid="comparison-drop-target">
78
<Icon
8-
icon={AllIcons.ELLIPSIS}
9+
icon={Ellipsis}
910
className={styles.smallDropIcon}
1011
width={15}
1112
height={15}

‎webview/src/plots/components/ribbon/Ribbon.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { reorderObjectList } from 'dvc/src/util/array'
55
import styles from './styles.module.scss'
66
import { RibbonBlock } from './RibbonBlock'
77
import { sendMessage } from '../../../shared/vscode'
8-
import { AllIcons } from '../../../shared/components/Icon'
98
import { IconButton } from '../../../shared/components/button/IconButton'
109
import { performOrderedUpdate } from '../../../util/objects'
10+
import { Lines, Refresh } from '../../../shared/components/icons'
1111

1212
interface RibbonProps {
1313
revisions: Revision[]
@@ -47,14 +47,14 @@ export const Ribbon: React.FC<RibbonProps> = ({ revisions }) => {
4747
<li className={styles.buttonWrapper}>
4848
<IconButton
4949
onClick={selectRevisions}
50-
icon={AllIcons.LINES}
50+
icon={Lines}
5151
text={`${revisions.length} of ${MAX_NB_EXP}`}
5252
/>
5353
</li>
5454
<li className={styles.buttonWrapper}>
5555
<IconButton
5656
onClick={refreshRevisions}
57-
icon={AllIcons.REFRESH}
57+
icon={Refresh}
5858
text="Refresh All"
5959
appearance="secondary"
6060
/>

‎webview/src/plots/components/ribbon/RibbonBlock.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { Revision } from 'dvc/src/plots/webview/contract'
22
import React from 'react'
33
import styles from './styles.module.scss'
4-
import { AllIcons, Icon } from '../../../shared/components/Icon'
4+
import { Icon } from '../../../shared/components/Icon'
55
import Tooltip from '../../../shared/components/tooltip/Tooltip'
66
import { CopyButton } from '../../../shared/components/copyButton/CopyButton'
7+
import { Close } from '../../../shared/components/icons'
78

89
interface RibbonBlockProps {
910
revision: Revision
@@ -38,7 +39,7 @@ export const RibbonBlock: React.FC<RibbonBlockProps> = ({
3839
</div>
3940
<Tooltip content="Clear" placement="bottom" delay={500}>
4041
<button className={styles.clearButton} onClick={onClear}>
41-
<Icon icon={AllIcons.CLOSE} width={12} height={12} />
42+
<Icon icon={Close} width={12} height={12} />
4243
</button>
4344
</Tooltip>
4445
</li>

‎webview/src/plots/components/templatePlots/AddedSection.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import cx from 'classnames'
33
import { TemplatePlotSection } from 'dvc/src/plots/webview/contract'
44
import styles from '../styles.module.scss'
55
import { getIDWithoutIndex } from '../../../util/ids'
6-
import { AllIcons, Icon } from '../../../shared/components/Icon'
6+
import { Icon } from '../../../shared/components/Icon'
77
import { DragDropContext } from '../../../shared/components/dragDrop/DragDropContext'
8+
import { GraphLine } from '../../../shared/components/icons'
89

910
interface AddedSectionProps {
1011
id: string
@@ -57,7 +58,7 @@ export const AddedSection: React.FC<AddedSectionProps> = ({
5758
{isHovered && (
5859
<Icon
5960
data-testid={`${id}_drop-icon`}
60-
icon={AllIcons.GRAPH_LINE}
61+
icon={GraphLine}
6162
className={styles.dropIcon}
6263
width={50}
6364
height={50}

‎webview/src/shared/components/Icon.tsx‎

Lines changed: 3 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,8 @@
1-
import React from 'react'
2-
import {
3-
Add,
4-
Check,
5-
ChevronDown,
6-
ChevronRight,
7-
Close,
8-
Dots,
9-
DownArrow,
10-
Ellipsis,
11-
GraphLine,
12-
Gripper,
13-
Info,
14-
Lines,
15-
Refresh,
16-
UpArrow
17-
} from './icons'
18-
19-
export const AllIcons = {
20-
ADD: Add,
21-
CHECK: Check,
22-
CHEVRON_DOWN: ChevronDown,
23-
CHEVRON_RIGHT: ChevronRight,
24-
CLOSE: Close,
25-
DOTS: Dots,
26-
DOWN_ARROW: DownArrow,
27-
ELLIPSIS: Ellipsis,
28-
GRAPH_LINE: GraphLine,
29-
GRIPPER: Gripper,
30-
INFO: Info,
31-
LINES: Lines,
32-
REFRESH: Refresh,
33-
UP_ARROW: UpArrow
34-
}
35-
36-
type IconKeys = keyof typeof AllIcons
37-
export type IconValues = typeof AllIcons[IconKeys]
1+
import React, { SVGProps } from 'react'
382

3+
export type IconValue = (props: SVGProps<SVGSVGElement>) => JSX.Element
394
interface IconProps {
40-
icon: IconValues
5+
icon: IconValue
416
className?: string
427
width?: number
438
height?: number

‎webview/src/shared/components/button/IconButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react'
22
import { Button, ButtonProps } from './Button'
3-
import { Icon, IconValues } from '../Icon'
3+
import { Icon, IconValue } from '../Icon'
44

5-
export type IconButtonProps = ButtonProps & { icon: IconValues }
5+
export type IconButtonProps = ButtonProps & { icon: IconValue }
66

77
export const IconButton: React.FC<IconButtonProps> = ({
88
appearance,

0 commit comments

Comments
 (0)