feat(List): add new variant mini

gitsindonesia · Jun 20, 2023 · 2acc37b · 2acc37b
1 parent 0641f14
commit 2acc37b
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/packages/list/src/List.stories.ts b/packages/list/src/List.stories.ts
@@ -169,6 +169,11 @@ export const Small: Story = (args) => ({
   `,
 });
 
+export const Mini = Small.bind({})
+Mini.args = {
+  mini: true,
+}
+
 export const Shaped: Story = (args) => ({
   components: {
     List,

diff --git a/packages/list/src/List.vue b/packages/list/src/List.vue
@@ -16,6 +16,7 @@ type Props = {
   hideText?: boolean;
   activeVariant?: "filled" | "bordered" | "filled-bordered";
   activeBorderPosition?: "top" | "right" | "bottom" | "left";
+  mini?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -51,6 +52,7 @@ const isBorderedVariant = computed(() => {
         'v-list--small': small,
         'v-list--large': large,
         'v-list--hide-text': hideText,
+        'v-list--mini': mini,
         [`v-list--active-${activeVariant}-${activeBorderPosition}`]: isBorderedVariant,
       },
     ]"

diff --git a/packages/themes/src/morpheme/_list.scss b/packages/themes/src/morpheme/_list.scss
@@ -76,6 +76,20 @@
   flex-direction: column;
   overflow: hidden;
 
+  &--mini {
+    max-width: var(--nav-drawer-mini-width, 64px);
+
+    .v-list-item {
+      justify-content: center;
+      min-height: 44px;
+
+      &-append,
+      &-content {
+        display: none;
+      }
+    }
+  }
+
   &-item {
     padding: var(--v-list-item-padding-y) var(--v-list-item-padding-x);
     gap: var(--v-list-item-gap);