APP-5548: add toggle icons, fix icon name type-checking (viamrobotics…

…#542)
ethanlookpotts · Jul 23, 2024 · 66a98b0 · 66a98b0
1 parent 09d4b4f
commit 66a98b0
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 9 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.133",
+  "version": "0.0.134",
   "publishConfig": {
     "access": "public"
   },

diff --git a/packages/core/src/lib/icon/icon.svelte b/packages/core/src/lib/icon/icon.svelte
@@ -52,7 +52,7 @@ $: {
   } else if (Array.isArray(pathValue)) {
     allPaths = pathValue.map((icon) => ({
       path: icon.path,
-      opacity: icon.opacity,
+      opacity: 'opacity' in icon ? icon.opacity : undefined,
     }));
   }
 }

diff --git a/packages/core/src/lib/icon/icons.ts b/packages/core/src/lib/icon/icons.ts
@@ -13,7 +13,7 @@ export type IconPath = Path | CustomIcon[];
  * Keys should match MDI name
  * e.g. 'account-multiple' for MDI.mdiAccountMultiple
  */
-export const paths: Record<string, IconPath> = {
+export const paths = {
   'account-group-outline': MDI.mdiAccountGroupOutline,
   'account-multiple': MDI.mdiAccountMultiple,
   'alert-circle-outline': MDI.mdiAlertCircleOutline,
@@ -125,6 +125,8 @@ export const paths: Record<string, IconPath> = {
   sync: MDI.mdiSync,
   tools: MDI.mdiTools,
   'trash-can-outline': MDI.mdiTrashCanOutline,
+  'toggle-switch-outline': MDI.mdiToggleSwitchOutline,
+  'toggle-switch-off-outline': MDI.mdiToggleSwitchOffOutline,
   twitter: MDI.mdiTwitter,
   undo: MDI.mdiUndo,
   'unfold-less-horizontal': MDI.mdiUnfoldLessHorizontal,

diff --git a/packages/core/src/lib/pill.svelte b/packages/core/src/lib/pill.svelte
@@ -34,7 +34,7 @@ export let disabled = false;
 export let removable = true;
 
 /** The icon shown in the button. */
-export let icon: IconName = '';
+export let icon: IconName | undefined = undefined;
 
 /** Additional CSS classes to pass to the pill. */
 let extraClasses: cx.Argument = '';

diff --git a/packages/core/src/lib/select/__tests__/searchable-select.spec.ts b/packages/core/src/lib/select/__tests__/searchable-select.spec.ts
@@ -14,13 +14,13 @@ const detailedOptions = [
     value: 'opt-1',
     label: 'Gale',
     description: 'Wizard',
-    icon: 'viam-process',
+    icon: 'viam-process' as const,
   },
   {
     value: 'opt-2',
     label: 'Karlach',
     description: 'Barbarian',
-    icon: 'language-cpp',
+    icon: 'language-cpp' as const,
   },
 ];
 const stringOptions = ['hello from', 'the other side'];
@@ -364,7 +364,7 @@ describe('SearchableSelect', () => {
     const newOptions = [
       { value: 'New Option 1' },
       { value: 'opt1', label: 'New Option 2' },
-      { value: 'opt3', label: 'New Option 3', icon: 'apple' },
+      { value: 'opt3', label: 'New Option 3', icon: 'apple' as const },
     ];
 
     // Update the options prop

diff --git a/packages/storybook/src/stories/icon.stories.svelte b/packages/storybook/src/stories/icon.stories.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
 import { Meta, Story } from '@storybook/addon-svelte-csf';
-import { Icon, Tooltip } from '@viamrobotics/prime-core';
+import { Icon, Tooltip, type IconName } from '@viamrobotics/prime-core';
 
 import { paths } from '../../../core/src/lib/icon/icons';
 
-const pathsKeys = Object.keys(paths);
+const pathsKeys = Object.keys(paths) as IconName[];
 </script>
 
 <Meta title="Elements/Icon" />