fix(list): spacing prop wasn't working on list

therealokoro · Feb 17, 2023 · d9f3763 · d9f3763
1 parent 6cf77ae
commit d9f3763
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 21 deletions.
diff --git a/docs/components/demos/list/DemoListSlots.vue b/docs/components/demos/list/DemoListSlots.vue
@@ -16,7 +16,7 @@ const items = [
       >
         <!-- 👉 Slot: Before -->
         <template #before>
-          <AInput class="m-$a-list-item-padding" />
+          <AInput class="my-2 mx-4" />
         </template>
 
         <!-- 👉 Slot: Append -->
@@ -28,7 +28,7 @@ const items = [
             :states="false"
             :spacing="50"
           >
-            &#8984; + {{ index + 1 }}
+            &#8984; {{ index + 1 }}
           </ABtn>
         </template>
 

diff --git a/docs/guide/components/list.md b/docs/guide/components/list.md
@@ -26,10 +26,12 @@ You can also use `default` slot to render your custom content if you don't want
 </template>
 ```
 
-Below is available CSS variable you can override:
+:::
 
-<<< @/../packages/preset-theme-default/src/scss/index.scss#a-list-css-vars
+:::warning
+When you override the list item via CSS variable, it's up to you to handle `--a-spacing` CSS var. For example, you are overriding list gap and don't want to consider the `--a-spacing` variable then you can simply override it via `[--a-spacing:1rem]`. However, if you want to allow spacing modification then write `[--a-spacing:calc(1rem*var(--a-spacing))]`
 
+For in library example you can check `.a-list-items-pill` class styles.
 :::
 
 <!-- 👉 Slots -->

diff --git a/packages/anu-vue/src/components/list-item/AListItem.vue b/packages/anu-vue/src/components/list-item/AListItem.vue
@@ -43,7 +43,7 @@ const { styles, classes } = getLayerClasses(
 <template>
   <li
     :style="styles"
-    class="a-list-item flex items-center gap-$a-list-item-gap m-$a-list-item-margin p-$a-list-item-padding min-h-$a-list-item-min-height"
+    class="a-list-item flex items-center"
     :class="[
       { 'opacity-50 pointer-events-none': props.disabled },
       props.value !== undefined || $attrs.onClick

diff --git a/packages/anu-vue/src/components/list/AList.vue b/packages/anu-vue/src/components/list/AList.vue
@@ -46,7 +46,7 @@ const handleListItemClick = (item: ListPropItems[number]) => {
 
 <template>
   <ul
-    class="a-list grid gap-$a-list-gap"
+    class="a-list grid"
     :style="[{ '--a-spacing': spacing / 100 }]"
   >
     <!-- 👉 Slot: before -->

diff --git a/packages/preset-theme-default/src/scss/index.scss b/packages/preset-theme-default/src/scss/index.scss
@@ -67,17 +67,6 @@ $body-color: hsla(var(--a-base-c), 0.68);
       As this will be always on light background we will keep it static and choose color from light scheme
     */
     --a-switch-icon-color: hsla(0, 10%, 20%, 0.68);
-
-    // 👉 List
-    // ℹ️ We might not need `--a-list-gap` this if we are using just `AList`, however when we use list inside another component this will be helpful
-    // #region a-list-css-vars
-    --a-list-gap: calc(0em * var(--a-spacing));
-    --a-list-item-gap: calc(0.75em * var(--a-spacing));
-    --a-list-item-padding: calc(0.5em * var(--a-spacing)) calc(1em * var(--a-spacing));
-    --a-list-item-margin: calc(0em * var(--a-spacing));
-    --a-list-item-min-height: calc(2.5em * var(--a-spacing));
-    // #endregion a-list-css-vars
-
     // #endregion all-css-vars
 
     // !SECTION

diff --git a/packages/preset-theme-default/src/shortcuts.ts b/packages/preset-theme-default/src/shortcuts.ts
@@ -109,14 +109,15 @@ const shortcuts: Exclude<Preset['shortcuts'], undefined | StaticShortcutMap> = [
     'a-input-type-file': 'all-[.a-base-input-child]-file:(rounded-lg border-none mr-4 px-4 py-3 text-gray-500 rounded-r-none bg-[hsla(var(--a-base-c),0.05)]) !all-[.a-base-input-input-wrapper]-px-0',
 
     // 👉 List
-    'a-list': 'em:spacing:rounded-lg em:spacing:my-2',
+    'a-list': 'em:spacing:rounded-lg m-[var(--a-list-margin,calc(0.5em*var(--a-spacing))_0)] gap-[var(--a-list-gap)]',
+    'a-list-item': 'gap-[var(--a-list-item-gap,calc(0.75em*var(--a-spacing)))] p-[var(--a-list-item-padding,calc(0.5em*var(--a-spacing))_calc(1em*var(--a-spacing)))] m-[var(--a-list-item-margin)] min-h-[var(--a-list-item-min-height,calc(2.5em*var(--a-spacing)))]',
+
+    // Helper class to create pill shaped list items
+    'a-list-items-pill': '[--a-list-margin:calc(0.75em*var(--a-spacing))_0] em:spacing:children-[.a-list-item]-rounded-lg [--a-list-item-margin:calc(0.18em*var(--a-spacing))_calc(0.75em*var(--a-spacing))] [--a-list-item-padding:calc(0.5em*var(--a-spacing))_calc(0.75em*var(--a-spacing))]',
 
     // 👉 Loader
     'a-loader': '[&.a-loader-full-page]-text-4xl',
 
-    // Helper class to create pill shaped list items
-    'a-list-items-pill': 'em:spacing:my-[0.65em] em:spacing:children-[.a-list-item]-rounded-lg [--a-list-item-margin:0.18em_0.75em] [--a-list-item-padding:0.5em_0.75em]',
-
     // 👉 Menu
     'a-menu': 'z-[51] shadow-xl [--a-transition-slide-up-transform:10px]',