Layout fixes (#283)

packages/legacy/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "license": "Apache-2.0",
   "type": "module",
   "files": [

packages/legacy/src/elements/button/button.svelte

@@ -49,7 +49,7 @@ const handleParentClick = (event: PointerEvent) => {
   event.stopImmediatePropagation();
 };
 
-let fill = 'black';
+let fill = 'gray-6';
 
 $: {
   switch (variant) {

packages/legacy/src/elements/collapse.svelte

@@ -55,7 +55,6 @@ const handleClick = (event: Event) => {
           'rotate-180': isOpen,
         })}
         name="chevron-down"
-        size="2xl"
       />
     </div>
   </div>

packages/legacy/src/elements/context-menu/context-menu-item.svelte

@@ -18,7 +18,7 @@ const handleSelect = (event: Event) => {
 <button
   role="menuitem"
   aria-labelledby={label}
-  class="flex flex-row gap-1 px-2 py-1.5 hover:bg-light w-full text-left"
+  class="flex items-center gap-1 px-2 py-1.5 hover:bg-light w-full text-left"
   on:click={handleSelect}
 >
   {#if icon && variant === 'primary'}

packages/legacy/src/elements/icon/icon.svelte

@@ -15,11 +15,11 @@ const sizes: Record<Size, string> = {
   xs: 'w-3 h-3',
   sm: 'w-3.5 h-3.5',
   base: 'w-4 h-4',
-  lg: 'w-4.5 h-4.5',
-  xl: 'w-5 h-5',
-  '2xl': 'w-6 h-6',
-  '3xl': 'w-7 h-7',
-  '4xl': 'w-8 h-8',
+  lg: 'w-5 h-5',
+  xl: 'w-6 h-6',
+  '2xl': 'w-7 h-7',
+  '3xl': 'w-8 h-8',
+  '4xl': 'w-9 h-9',
 };
 
 export let size: Size = 'base';

packages/legacy/src/elements/select/multiselect.svelte

@@ -251,21 +251,25 @@ let icon = '';
 $: {
   switch (state) {
     case 'warn': {
-      fill = 'warning-dark';
-      icon = 'information-outline';
+      fill = 'warning-bright';
+      icon = 'alert-circle-outline';
       break;
     }
     case 'info': {
-      fill = 'gray-4';
+      fill = 'gray-6';
       icon = 'information-outline';
       break;
     }
     case 'error': {
       fill = 'danger-dark';
-      icon = 'alert-circle';
+      icon = 'alert-circle-outline';
       break;
     }
   }
+
+  if (isDisabled) {
+    fill = 'disabled-dark';
+  }
 }
 </script>
 
@@ -332,7 +336,7 @@ $: {
                   state === 'error',
                 'border-warning-bright -outline-offset-1 outline-[2px] outline-warning-bright':
                   state === 'warn',
-                'pointer-events-none bg-disabled-light text-disabled-dark border-disabled-light':
+                'pointer-events-none !bg-disabled-light text-disabled-dark border-disabled-light':
                   isDisabled || isReadonly,
               }
             )}
@@ -351,13 +355,7 @@ $: {
               }
             )}
           >
-            <v-icon
-              class={cx('flex', {
-                'text-disabled-dark': isDisabled,
-                'text-gray-6': !isDisabled,
-              })}
-              name="chevron-down"
-            />
+            <v-icon {fill} name="chevron-down" />
           </button>
         </div>
 

packages/legacy/src/elements/select/select.svelte

@@ -229,21 +229,25 @@ $: {
 
   switch (state) {
     case 'warn': {
-      fill = 'warning-dark';
-      icon = 'information-outline';
+      fill = 'warning-bright';
+      icon = 'alert-circle-outline';
       break;
     }
     case 'info': {
-      fill = 'gray-4';
+      fill = 'gray-6';
       icon = 'information-outline';
       break;
     }
     case 'error': {
       fill = 'danger-dark';
-      icon = 'alert-circle';
+      icon = 'alert-circle-outline';
       break;
     }
   }
+
+  if (isDisabled) {
+    fill = 'disabled-dark';
+  }
 }
 </script>
 
@@ -321,13 +325,7 @@ $: {
             }
           )}
         >
-          <v-icon
-            class={cx('flex', {
-              'text-disabled-dark': isDisabled,
-              'text-gray-6': !isDisabled,
-            })}
-            name="chevron-down"
-          />
+          <v-icon {fill} name="chevron-down" />
         </button>
       </div>
     </div>

packages/legacy/src/stories/icon.stories.mdx

@@ -29,9 +29,9 @@ import { paths } from '../elements/icon/icons';
   <Story
     name='Icon'
     args={{
-      name: 'alert-circle',
+      name: 'check-circle',
       size: '4xl',
-      fill: 'danger-dark',
+      fill: 'success-dark',
     }}
   >
     {({ name, size, fill }) => `

packages/legacy/src/stories/multiselect.stories.mdx

@@ -232,7 +232,7 @@ Dropdown that allows the user to select multiple choices.
       options: 'Option 1, Option 2, Option 3',
       disabled: 'true',
       tooltip: 'This is disabled.',
-      state: 'error',
+      state: 'info',
     }}
   >
     {({ label, options, disabled, tooltip, state }) => `

packages/legacy/tests/icon.spec.ts

@@ -46,38 +46,38 @@ test('Renders and icon as the large size if size attribute is specified as lg',
   page,
 }) => {
   await expect(page.getByTestId('icon-size-lg').locator('svg')).toHaveClass(
-    /w-4.5 h-4.5/u
+    /w-5 h-5/u
   );
 });
 
 test('Renders and icon as the extra large size if size attribute is specified as xl', async ({
   page,
 }) => {
   await expect(page.getByTestId('icon-size-xl').locator('svg')).toHaveClass(
-    /w-5 h-5/u
+    /w-6 h-6/u
   );
 });
 
 test('Renders and icon as the 2xl size if size attribute is specified as 2xl', async ({
   page,
 }) => {
   await expect(page.getByTestId('icon-size-2xl').locator('svg')).toHaveClass(
-    /w-6 h-6/u
+    /w-7 h-7/u
   );
 });
 
 test('Renders and icon as the 3xl size if size attribute is specified as 3xl', async ({
   page,
 }) => {
   await expect(page.getByTestId('icon-size-3xl').locator('svg')).toHaveClass(
-    /w-7 h-7/u
+    /w-8 h-8/u
   );
 });
 
 test('Renders and icon as the 4xl size if size attribute is specified as 4xl', async ({
   page,
 }) => {
   await expect(page.getByTestId('icon-size-4xl').locator('svg')).toHaveClass(
-    /w-8 h-8/u
+    /w-9 h-9/u
   );
 });