Move to @oxide/design-system icons (#1765)

* Install new ds and use that for icons * Remove old icon workflow * Update to metrics icon * Fix tsx extension import error * fix icon imports, I think * uninstall jscodeshift. best day of my life * don't need the figma-export things either --------- Co-authored-by: David Crespo <[email protected]>
oxidecomputer · Oct 4, 2023 · 8c9513c · 8c9513c
1 parent 0314fd7
commit 8c9513c
Show file tree

Hide file tree

Showing 193 changed files with 54 additions and 10,542 deletions.
diff --git a/.figmaexportrc.js b/.figmaexportrc.js
diff --git a/.gitattributes b/.gitattributes
diff --git a/.github/workflows/update-icons.yaml b/.github/workflows/update-icons.yaml
diff --git a/app/layouts/SiloLayout.tsx b/app/layouts/SiloLayout.tsx
@@ -8,13 +8,7 @@
 import { useMemo } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
-import {
-  Access16Icon,
-  Divider,
-  Folder16Icon,
-  Images16Icon,
-  Snapshots16Icon,
-} from '@oxide/ui'
+import { Access16Icon, Divider, Folder16Icon, Images16Icon, Metrics16Icon } from '@oxide/ui'
 
 import { DocsLinkItem, NavLinkItem, Sidebar } from 'app/components/Sidebar'
 import { TopBar } from 'app/components/TopBar'
@@ -69,7 +63,7 @@ export function SiloLayout() {
             <Images16Icon /> Images
           </NavLinkItem>
           <NavLinkItem to={pb.siloUtilization()}>
-            <Snapshots16Icon /> Utilization
+            <Metrics16Icon /> Utilization
           </NavLinkItem>
           <NavLinkItem to={pb.siloAccess()}>
             <Access16Icon /> Access & IAM

diff --git a/app/layouts/SystemLayout.tsx b/app/layouts/SystemLayout.tsx
@@ -12,8 +12,8 @@ import { apiQueryClient } from '@oxide/api'
 import {
   Cloud16Icon,
   Divider,
+  Metrics16Icon,
   Settings16Icon,
-  Snapshots16Icon,
   Storage16Icon,
 } from '@oxide/ui'
 
@@ -104,7 +104,7 @@ export default function SystemLayout() {
             <Instances16Icon /> Issues
           </NavLinkItem> */}
           <NavLinkItem to={pb.systemUtilization()}>
-            <Snapshots16Icon /> Utilization
+            <Metrics16Icon /> Utilization
           </NavLinkItem>
           <NavLinkItem to={pb.sledInventory()}>
             <Storage16Icon /> Inventory

diff --git a/app/pages/SiloUtilizationPage.tsx b/app/pages/SiloUtilizationPage.tsx
@@ -10,7 +10,7 @@ import { useIsFetching } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
 
 import { apiQueryClient, usePrefetchedApiQuery } from '@oxide/api'
-import { Divider, Listbox, PageHeader, PageTitle, Snapshots24Icon } from '@oxide/ui'
+import { Divider, Listbox, Metrics24Icon, PageHeader, PageTitle } from '@oxide/ui'
 import { bytesToGiB, bytesToTiB } from '@oxide/util'
 
 import { useIntervalPicker } from 'app/components/RefetchIntervalPicker'
@@ -63,7 +63,7 @@ export function SiloUtilizationPage() {
   return (
     <>
       <PageHeader>
-        <PageTitle icon={<Snapshots24Icon />}>Capacity &amp; Utilization</PageTitle>
+        <PageTitle icon={<Metrics24Icon />}>Capacity &amp; Utilization</PageTitle>
       </PageHeader>
 
       <div className="flex justify-between gap-3">

diff --git a/app/pages/system/CapacityUtilizationPage.tsx b/app/pages/system/CapacityUtilizationPage.tsx
@@ -14,10 +14,10 @@ import {
   Cpu16Icon,
   Divider,
   Listbox,
+  Metrics24Icon,
   PageHeader,
   PageTitle,
   Ram16Icon,
-  Snapshots24Icon,
   Ssd16Icon,
 } from '@oxide/ui'
 import { bytesToGiB, bytesToTiB } from '@oxide/util'
@@ -85,7 +85,7 @@ export function CapacityUtilizationPage() {
   return (
     <>
       <PageHeader>
-        <PageTitle icon={<Snapshots24Icon />}>Capacity &amp; Utilization</PageTitle>
+        <PageTitle icon={<Metrics24Icon />}>Capacity &amp; Utilization</PageTitle>
       </PageHeader>
 
       <div className="mb-12 flex min-w-min flex-col gap-3 lg+:flex-row">

diff --git a/codemods/add-responsive-viewbox.icons.js b/codemods/add-responsive-viewbox.icons.js
diff --git a/codemods/fix-title-and-fill.icons.js b/codemods/fix-title-and-fill.icons.js
diff --git a/codemods/remove-import-extensions.icons.js b/codemods/remove-import-extensions.icons.js
diff --git a/libs/ui/index.ts b/libs/ui/index.ts
@@ -23,7 +23,7 @@ export * from './lib/dropdown-menu/DropdownMenu'
 export * from './lib/file-input/FileInput'
 export * from './lib/empty-message/EmptyMessage'
 export * from './lib/field-label/FieldLabel'
-export * from './lib/icons'
+
 export * from './lib/identicon/Identicon'
 export * from './lib/message/Message'
 export * from './lib/listbox/Listbox'
@@ -48,3 +48,5 @@ export * from './lib/toast/Toast'
 export * from './lib/tooltip/Tooltip'
 export * from './lib/truncate/Truncate'
 export * from './util/wrap'
+
+export * from '@oxide/design-system/icons/react'
diff --git a/libs/ui/lib/ModalLinks.tsx b/libs/ui/lib/ModalLinks.tsx
@@ -7,7 +7,7 @@
  */
 import type { ReactNode } from 'react'
 
-import { OpenLink12Icon } from './icons'
+import { OpenLink12Icon } from '@oxide/design-system/icons/react'
 
 export const ModalLinks = ({
   heading,

diff --git a/libs/ui/lib/action-menu/ActionMenu.tsx b/libs/ui/lib/action-menu/ActionMenu.tsx
@@ -10,7 +10,7 @@ import cn from 'classnames'
 import { matchSorter } from 'match-sorter'
 import React, { useState } from 'react'
 
-import { Close12Icon } from '@oxide/ui'
+import { Close12Icon } from '@oxide/design-system/icons/react'
 import { classed, groupBy } from '@oxide/util'
 
 import { useSteppedScroll } from '../hooks/use-stepped-scroll'

diff --git a/libs/ui/lib/checkbox/Checkbox.tsx b/libs/ui/lib/checkbox/Checkbox.tsx
@@ -7,7 +7,7 @@
  */
 import cn from 'classnames'
 
-import { Checkmark12Icon } from '@oxide/ui'
+import { Checkmark12Icon } from '@oxide/design-system/icons/react'
 import { classed } from '@oxide/util'
 
 const Check = () => (

diff --git a/libs/ui/lib/date-picker/DatePicker.tsx b/libs/ui/lib/date-picker/DatePicker.tsx
@@ -15,7 +15,8 @@ import { useDateFormatter } from 'react-aria'
 import { useDatePickerState } from 'react-stately'
 import type { DatePickerStateOptions } from 'react-stately'
 
-import { Calendar16Icon, Error12Icon } from '../icons'
+import { Calendar16Icon, Error12Icon } from '@oxide/design-system/icons/react'
+
 import { Calendar } from './Calendar'
 import { TimeField } from './DateField'
 import { Dialog } from './Dialog'

diff --git a/libs/ui/lib/date-picker/DateRangePicker.tsx b/libs/ui/lib/date-picker/DateRangePicker.tsx
@@ -14,7 +14,8 @@ import { useDateFormatter } from 'react-aria'
 import { useDateRangePickerState } from 'react-stately'
 import type { DateRangePickerStateOptions } from 'react-stately'
 
-import { Calendar16Icon, Error12Icon } from '../icons'
+import { Calendar16Icon, Error12Icon } from '@oxide/design-system/icons/react'
+
 import { TimeField } from './DateField'
 import { Dialog } from './Dialog'
 import { Popover } from './Popover'

diff --git a/libs/ui/lib/date-picker/RangeCalendar.tsx b/libs/ui/lib/date-picker/RangeCalendar.tsx
@@ -15,7 +15,8 @@ import { useLocale, useRangeCalendar } from 'react-aria'
 import { useRangeCalendarState } from 'react-stately'
 import type { CalendarState, RangeCalendarState } from 'react-stately'
 
-import { DirectionLeftIcon, DirectionRightIcon } from '../icons'
+import { DirectionLeftIcon, DirectionRightIcon } from '@oxide/design-system/icons/react'
+
 import { CalendarGrid } from './CalendarGrid'
 
 export function RangeCalendar(props: RangeCalendarProps<DateValue>) {

diff --git a/libs/ui/lib/empty-message/EmptyMessage.stories.tsx b/libs/ui/lib/empty-message/EmptyMessage.stories.tsx
@@ -5,7 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
-import { Instances24Icon } from '../icons'
+import { Instances24Icon } from '@oxide/design-system/icons/react'
+
 import { EmptyMessage } from './EmptyMessage'
 
 export const Default = () => (