Adjust margins to match other drop menus

owncloud · Feb 3, 2023 · a1f6119 · a1f6119
1 parent 8b0da21
commit a1f6119
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 15 deletions.
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -18,6 +18,7 @@
       :toggle="'#' + id"
       class="oc-filter-chip-drop"
       mode="click"
+      padding-size="small"
       @hide-drop="$emit('hideDrop')"
       @show-drop="$emit('showDrop')"
     >

diff --git a/packages/design-system/src/components/OcFilterChip/__snapshots__/OcFilterChip.spec.ts.snap b/packages/design-system/src/components/OcFilterChip/__snapshots__/OcFilterChip.spec.ts.snap
@@ -12,7 +12,7 @@ exports[`OcFilterChip renders the filterName when no selected item has been give
     </span>
   </button>
   <div class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop" id="oc-drop-2">
-    <div class="oc-card oc-card-body oc-background-secondary oc-p-m"></div>
+    <div class="oc-card oc-card-body oc-background-secondary oc-p-s"></div>
   </div>
   <!--v-if-->
 </div>
@@ -30,7 +30,7 @@ exports[`OcFilterChip renders the first selected item name when selected items h
     <!--v-if-->
   </button>
   <div class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop" id="oc-drop-4">
-    <div class="oc-card oc-card-body oc-background-secondary oc-p-m"></div>
+    <div class="oc-card oc-card-body oc-background-secondary oc-p-s"></div>
   </div>
   <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-filter-chip-clear oc-px-xs" type="button">
     <!-- @slot Content of the button -->

diff --git a/packages/web-pkg/src/components/ItemFilter.vue b/packages/web-pkg/src/components/ItemFilter.vue
@@ -11,15 +11,15 @@
           v-if="showFilter && filterableAttributes.length"
           ref="filterInputRef"
           v-model="filterTerm"
-          class="item-filter-input oc-mb-m"
+          class="item-filter-input oc-mb-m oc-mt-s"
           autocomplete="off"
           :placeholder="$gettext('Filter')"
         />
         <oc-list class="item-filter-list">
-          <li v-for="item in displayedItems" :key="item.key" class="oc-mt-s">
+          <li v-for="item in displayedItems" :key="item.key" class="oc-my-xs">
             <component
               :is="isSelectionAllowed(item) ? 'oc-button' : 'div'"
-              class="item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1"
+              class="item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs"
               justify-content="left"
               appearance="raw"
               @click="toggleItemSelection(item)"

diff --git a/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap b/packages/web-pkg/tests/unit/components/__snapshots__/ItemFilter.spec.ts.snap
@@ -13,11 +13,11 @@ exports[`ItemFilter can use a custom attribute as display name 1`] = `
       </span>
     </button>
     <div class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop" id="oc-drop-6">
-      <div class="oc-card oc-card-body oc-background-secondary oc-p-m">
+      <div class="oc-card oc-card-body oc-background-secondary oc-p-s">
         <!--v-if-->
         <ul class="oc-list oc-my-rm oc-mx-rm item-filter-list">
-          <li class="oc-mt-s">
-            <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1" type="button">
+          <li class="oc-my-xs">
+            <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs" type="button">
               <!-- @slot Content of the button -->
               <div>
                 <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-7" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>
@@ -26,8 +26,8 @@ exports[`ItemFilter can use a custom attribute as display name 1`] = `
               <div>Albert Einstein</div>
             </button>
           </li>
-          <li class="oc-mt-s">
-            <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1" type="button">
+          <li class="oc-my-xs">
+            <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs" type="button">
               <!-- @slot Content of the button -->
               <div>
                 <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-8" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>
@@ -57,11 +57,11 @@ exports[`ItemFilter renders all items 1`] = `
       </span>
     </button>
     <div class="oc-drop oc-box-shadow-medium oc-rounded oc-filter-chip-drop" id="oc-drop-2">
-      <div class="oc-card oc-card-body oc-background-secondary oc-p-m">
+      <div class="oc-card oc-card-body oc-background-secondary oc-p-s">
         <!--v-if-->
         <ul class="oc-list oc-my-rm oc-mx-rm item-filter-list">
-          <li class="oc-mt-s">
-            <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1" type="button">
+          <li class="oc-my-xs">
+            <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs" type="button">
               <!-- @slot Content of the button -->
               <div>
                 <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-3" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>
@@ -70,8 +70,8 @@ exports[`ItemFilter renders all items 1`] = `
               <div>Albert Einstein</div>
             </button>
           </li>
-          <li class="oc-mt-s">
-            <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1" type="button">
+          <li class="oc-my-xs">
+            <button class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-passive oc-button-passive-raw item-filter-list-item oc-flex oc-flex-left oc-flex-middle oc-width-1-1 oc-p-xs" type="button">
               <!-- @slot Content of the button -->
               <div>
                 <oc-checkbox-stub class="item-filter-checkbox" disabled="false" hidelabel="true" id="oc-checkbox-4" label="Toggle selection" modelvalue="false" outline="false" size="large"></oc-checkbox-stub>