refactor: menu and footer to follow button component style practices

acronis · Nov 22, 2024 · 22b591b · 22b591b
1 parent 78a43cd
commit 22b591b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 18 deletions.
diff --git a/packages/ui/src/components/menu-item/menuItem.vue b/packages/ui/src/components/menu-item/menuItem.vue
@@ -74,7 +74,7 @@
         </div>
         <div
           v-else
-          class="acv-text--ellipsis"
+          class="ellipsis"
         >
           <slot />
         </div>
@@ -107,23 +107,23 @@
       </template>
       <span
         v-if="slots.title || slots.subtitle"
-        class="acv-text--ellipsis"
+        class="ellipsis"
       >
         <span
           v-if="slots.title"
-          class="acv-menu-item__title acv-text acv-text--body-24 acv-text--ellipsis"
+          class="title ellipsis"
         >
           <slot name="title" />
         </span>
         <span
           v-if="$slots.subtitle"
-          class="acv-menu-item__subtitle acv-text--caption acv-text--ellipsis acv-text--color-fixed-light"
+          class="text-caption ellipsis"
         >
           <slot name="subtitle" />
         </span>
       </span>
       <div
-        class="acv-text acv-text--body-24 acv-text--ellipsis"
+        class="text ellipsis"
         :class="{ clamp }"
       >
         <slot />
@@ -178,6 +178,36 @@
       background-color: var(--acv-menu-item-hover-bg);
     }
 
+    .title {
+      margin: 0;
+      font-size: var(--acv-font-size-accent);
+      line-height: var(--acv-font-line-height-regular);
+      font-weight: var(--acv-font-weight-regular);
+    }
+
+    .ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      min-width: 0;
+      max-width: 100%;
+      vertical-align: middle;
+      display: inline-block;
+    }
+
+    .text-caption {
+      font-size: var(--acv-font-size-caption);
+      font-weight: var(--acv-font-weight-regular);
+      line-height: var(--acv-font-line-height-x-small);
+    }
+
+    .text {
+      margin: 0;
+      font-size: var(--acv-font-size-accent);
+      line-height: var(--acv-font-line-height-regular);
+      font-weight: var(--acv-font-weight-regular);
+    }
+
     .clamp {
       flex: 0 0 80%;
       /* stylelint-disable-next-line value-no-vendor-prefix */

diff --git a/packages/ui/src/components/menu/menu.ts b/packages/ui/src/components/menu/menu.ts
@@ -92,10 +92,4 @@ export interface AcvMenuInjection {
 
 const MENU_KEY = Symbol('MENU_KEY') as InjectionKey<AcvMenuInjection>;
 
-export interface AcvMenuSlots {
-  prepend?: () => any
-  append?: () => any
-  default: () => any
-}
-
 export { MENU_KEY };
diff --git a/packages/ui/src/components/menu/menu.vue b/packages/ui/src/components/menu/menu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import type { Ref } from 'vue';
-  import type { AcvMenuEvents, AcvMenuProps, AcvMenuSlots } from './menu.ts';
+  import type { AcvMenuEvents, AcvMenuProps } from './menu.ts';
   import AcvButton from '@/components/button/button.vue';
   import { useLevel } from '@/components/menu-item/useLevel.ts';
   import { useNested } from '@/components/menu-item/useNested.ts';
@@ -23,7 +23,6 @@
     type: 'primary',
   });
   const emit = defineEmits<AcvMenuEvents>();
-  const slots = defineSlots<AcvMenuSlots>();
   const menuRef = ref<HTMLElement | null>(null);
   const menuBarRef = ref<HTMLElement | null>(null);
   const isOverflow = ref(false);
@@ -70,12 +69,14 @@
     class="acv-menu"
     :class="menuClasses"
   >
+    <!-- @slot Left side slot content. Usually for icon -->
     <slot name="prepend" />
     <menu
       ref="menuBarRef"
       class="menubar acv-scrollbar"
       role="menubar"
     >
+      <!-- @slot Default slot content. Usually for text -->
       <slot />
     </menu>
     <div
@@ -97,9 +98,10 @@
       </AcvButton>
     </div>
     <menu
-      v-if="slots.append"
+      v-if="$slots.append"
       class="append"
     >
+      <!-- @slot Right side slot content. Usually for icon -->
       <slot name="append" />
     </menu>
   </nav>
@@ -194,23 +196,25 @@
     }
 
     &:deep(.acv-menu-item:hover:before) {
+      --acv-menu-item-selected-bg: var(--acv-color-primary-lightest, hsl(215deg 68% 46% / 0.05));
       z-index: var(--acv-z-index-negative);
       content: '';
       width: calc(100% + 16px);
       left:-8px;
       height: 32px;
-      background-color: var(--acv-color-nav-hover-secondary, hsl(215deg 68% 46% / 0.1));
+      background-color: var(--acv-menu-item-selected-bg);
       border-radius: 4px;
       position: absolute;
     }
 
     &:deep(.acv-menu-item:active:before) {
+      --acv-menu-item-selected-bg: var(--acv-menu-item-active-color);
       z-index: var(--acv-z-index-negative);
       content: '';
       width: calc(100% + 16px);
       left:-8px;
       height: 32px;
-      background-color: var(--acv-color-nav-active-secondary, hsl(215deg 68% 46% / 0.2));
+      background-color: var(--acv-menu-item-selected-bg);
       border-radius: 4px;
       position: absolute;
     }
@@ -247,12 +251,12 @@
     --acv-menu-color-text: var(--acv-color-red);
     --acv-menu-item-color: var(--acv-color-link-primary);
     --acv-menu-item-selected-bg: var(--acv-color-primary-lightest, hsl(215deg 68% 46% / 0.05));
-    --acv-menu-item-selected-color: var(--acv-color-text-primary, hsl(215deg 30% 20%));
+    --acv-menu-item-selected-color: var(--acv-color-text-primary);
     grid-template-rows: auto;
     grid-template-columns: 256px;
 
     &:deep(.acv-menu-item) {
-      border-bottom: 1px solid var(--acv-color-form-disabled-primary, hsl(215deg 68% 46% / 0.1));
+      border-bottom: 1px solid var(--acv-color-form-disabled-primary);
       width: 100%;
     }
   }