Design maintenance prime 14 feb 2024 (viamrobotics#483)

micheal-parks · Feb 14, 2024 · 3d04186 · 3d04186
1 parent 01ef668
commit 3d04186
Show file tree

Hide file tree

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

diff --git a/packages/core/src/lib/button/__tests__/icon-button.spec.ts b/packages/core/src/lib/button/__tests__/icon-button.spec.ts
@@ -21,6 +21,11 @@ describe('IconButton', () => {
     );
   });
 
+  it('Renders a button in the style of the secondary variant if variant is specified as secondary', () => {
+    render(IconButton, { ...common, variant: 'secondary' });
+    expect(screen.getByRole('button')).toHaveClass('border-light', 'bg-light');
+  });
+
   it('Renders a button in the style of danger if the variant is specified as danger', () => {
     render(IconButton, { ...common, variant: 'danger' });
     expect(screen.getByRole('button')).toHaveClass(

diff --git a/packages/core/src/lib/button/icon-button.svelte b/packages/core/src/lib/button/icon-button.svelte
@@ -27,7 +27,7 @@ export let disabled = false;
 export let type: 'button' | 'submit' | 'reset' = 'button';
 
 /** The communicated action type to the user. */
-export let variant: 'primary' | 'danger' = 'primary';
+export let variant: 'primary' | 'secondary' | 'danger' = 'primary';
 
 /** Additional CSS classes to pass to the button. */
 let extraClasses: cx.Argument = '';
@@ -48,6 +48,8 @@ $: handleDisabled = preventHandler(disabled);
       'cursor-not-allowed text-gray-4': disabled,
       'hover:text-gray-7 active:text-gray-8':
         variant === 'primary' && !disabled,
+      'border-light bg-light hover:border-medium hover:bg-medium active:border-medium active:bg-gray-2':
+        variant === 'secondary' && !disabled,
       'hover:bg-danger-dark hover:bg-opacity-[0.08] hover:text-danger-dark active:bg-[rgba(190,53,54,0.16)] active:text-danger-dark':
         variant === 'danger' && !disabled,
     },

diff --git a/packages/core/src/lib/code-snippet.svelte b/packages/core/src/lib/code-snippet.svelte
@@ -192,5 +192,6 @@ figure pre[class*='language-'] {
 
 figure pre[class*='language-'] > code[class*='language-'] {
   font-family: 'Roboto Mono Variable', 'Roboto Mono', ui-monospace, monospace;
+  font-size: 1em;
 }
 </style>
diff --git a/packages/storybook/src/stories/icon-button.mdx b/packages/storybook/src/stories/icon-button.mdx
@@ -15,6 +15,10 @@ import { IconButton } from '@viamrobotics/prime-core';
   <Story of={IconButtonStories.Primary} />
 </Canvas>
 
+<Canvas>
+  <Story of={IconButtonStories.Secondary} />
+</Canvas>
+
 <Canvas>
   <Story of={IconButtonStories.Danger} />
 </Canvas>

diff --git a/packages/storybook/src/stories/icon-button.stories.svelte b/packages/storybook/src/stories/icon-button.stories.svelte
@@ -12,6 +12,14 @@ import { IconButton } from '@viamrobotics/prime-core';
   />
 </Story>
 
+<Story name="Secondary">
+  <IconButton
+    icon="plus"
+    label="Add secondary object"
+    variant="secondary"
+  />
+</Story>
+
 <Story name="Danger">
   <IconButton
     icon="trash-can-outline"