feat(List): add a new large size for VList

gitsindonesia · Jun 9, 2023 · 3279e04 · 3279e04
1 parent 753e859
commit 3279e04
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 deletions.
diff --git a/packages/list/src/List.stories.ts b/packages/list/src/List.stories.ts
@@ -96,23 +96,27 @@ export const Small: Story = (args) => ({
   template: `
     <p>Default</p>
     <List v-bind="args" hover>
-      <ListItem>Item 1</ListItem>
-      <ListItem>Item 2</ListItem>
-      <ListItemDivider />
-      <ListItem>Item 3</ListItem>
-      <ListItemDivider />
-      <ListItem>Item 4</ListItem>
-      <ListItem>Item 5</ListItem>
-    </List>
+      <ListItem prepend-icon="ri:home-line">Item 1</ListItem>
+      <ListItem prepend-icon="ri:home-line">Item 2</ListItem>
+      <ListItem prepend-icon="ri:home-line">Item 3</ListItem>
+      </List>
     <p>Small</p>
     <List v-bind="args" small hover>
-      <ListItem>Item 1</ListItem>
-      <ListItem>Item 2</ListItem>
-      <ListItemDivider />
-      <ListItem>Item 3</ListItem>
-      <ListItemDivider />
-      <ListItem>Item 4</ListItem>
-      <ListItem>Item 5</ListItem>
+      <ListItem prepend-icon="ri:home-line">Item 1</ListItem>
+      <ListItem prepend-icon="ri:home-line">Item 2</ListItem>
+      <ListItem prepend-icon="ri:home-line">Item 3</ListItem>
+    </List>
+    <p>Dense</p>
+    <List v-bind="args" dense hover>
+      <ListItem prepend-icon="ri:home-line">Item 1</ListItem>
+      <ListItem prepend-icon="ri:home-line">Item 2</ListItem>
+      <ListItem prepend-icon="ri:home-line">Item 3</ListItem>
+    </List>
+    <p>Large</p>
+    <List v-bind="args" large hover>
+      <ListItem prepend-icon="ri:home-line">Item 1</ListItem>
+      <ListItem prepend-icon="ri:home-line">Item 2</ListItem>
+      <ListItem prepend-icon="ri:home-line">Item 3</ListItem>
     </List>
   `,
 });

diff --git a/packages/list/src/List.vue b/packages/list/src/List.vue
@@ -9,6 +9,7 @@ type Props = {
   flush?: boolean;
   dense?: boolean;
   small?: boolean;
+  large?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -28,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
       'v-list--flush': flush,
       'v-list--dense': dense,
       'v-list--small': small,
+      'v-list--large': large,
     }"
   >
     <slot v-bind="props" />

diff --git a/packages/themes/src/morpheme/_list.scss b/packages/themes/src/morpheme/_list.scss
@@ -200,10 +200,24 @@
   /* small */
   &--small &-item,
   &-item--small {
-    --v-list-item-padding-y: var(--size-spacing-1);
+    --v-list-item-padding-y: var(--size-spacing-2);
     --v-list-item-padding-x: var(--size-spacing-2);
     --v-list-item-gap: var(--size-spacing-2);
     --v-list-item-font-size: var(--size-font-sm);
     --v-list-item-line-height: var(--size-font-md);
+    --v-list-item-icon-width: var(--size-spacing-4);
+    --v-list-item-icon-height: var(--size-spacing-4);
+  }
+
+  /* large */
+  &--large &-item,
+  &-item--large {
+    --v-list-item-padding-y: var(--size-spacing-3);
+    --v-list-item-padding-x: var(--size-spacing-4);
+    --v-list-item-gap: var(--size-spacing-3);
+    --v-list-item-font-size: var(--size-font-md);
+    --v-list-item-line-height: var(--size-font-lg);
+    --v-list-item-icon-width: var(--size-spacing-5);
+    --v-list-item-icon-height: var(--size-spacing-5);
   }
 }