feat(dropdown-item): updates spacing of icons

Esri · May 14, 2024 · 4cb60c4 · 4cb60c4
1 parent 079a03e
commit 4cb60c4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 28 deletions.
diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss
@@ -1,19 +1,22 @@
-.container--s {
-  @apply text-n2h py-1;
-  padding-inline-end: theme("padding.2");
-  padding-inline-start: theme("padding.6");
+:host([scale="s"]) {
+  .container {
+    @apply text-n2h py-1;
+    padding-inline: 8px;
+  }
 }
 
-.container--m {
-  @apply text-n1h py-2;
-  padding-inline-end: theme("padding.3");
-  padding-inline-start: theme("padding.8");
+:host([scale="m"]) {
+  .container {
+    @apply text-n1h py-2;
+    padding-inline: 12px;
+  }
 }
 
-.container--l {
-  @apply text-0h py-2.5;
-  padding-inline-end: theme("padding.4");
-  padding-inline-start: theme("padding.10");
+:host([scale="l"]) {
+  .container {
+    @apply text-0h py-2.5;
+    padding-inline: 16px;
+  }
 }
 
 // none-selection mode
@@ -64,8 +67,6 @@
 
 .dropdown-item-content {
   @apply flex-auto py-0.5;
-  padding-inline-end: theme("margin.auto");
-  padding-inline-start: theme("margin.1");
 }
 
 //focus
@@ -132,23 +133,23 @@
 
 // item icon
 .dropdown-item-icon {
-  @apply absolute
+  @apply relative
     opacity-0
     duration-150
     ease-in-out;
   transform: scale(0.9);
 }
 
 .container--s .dropdown-item-icon {
-  inset-inline-start: theme("spacing.1");
+  padding-inline-end: 8px;
 }
 
 .container--m .dropdown-item-icon {
-  inset-inline-start: theme("spacing.2");
+  padding-inline-end: 12px;
 }
 
 .container--l .dropdown-item-icon {
-  inset-inline-start: theme("spacing.3");
+  padding-inline-end: 16px;
 }
 
 :host(:hover:not([disabled])) .dropdown-item-icon {
@@ -164,31 +165,28 @@
 // icon start & end
 .container--s {
   .dropdown-item-icon-start {
-    margin-inline-end: theme("margin.2");
-    margin-inline-start: theme("margin.1");
+    padding-inline-end: 8px;
   }
   .dropdown-item-icon-end {
-    margin-inline-start: theme("margin.2");
+    padding-inline-start: 8px;
   }
 }
 
 .container--m {
   .dropdown-item-icon-start {
-    margin-inline-end: theme("margin.3");
-    margin-inline-start: theme("margin.1");
+    padding-inline-end: 12px;
   }
   .dropdown-item-icon-end {
-    margin-inline-start: theme("margin.3");
+    padding-inline-start: 12px;
   }
 }
 
 .container--l {
   .dropdown-item-icon-start {
-    margin-inline-end: theme("margin.4");
-    margin-inline-start: theme("margin.1");
+    padding-inline-end: 16px;
   }
   .dropdown-item-icon-end {
-    margin-inline-start: theme("margin.4");
+    padding-inline-start: 16px;
   }
 }
 

diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -125,7 +125,7 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
    *
    * @internal
    */
-  @Prop() scale: Scale = "m";
+  @Prop({ reflect: true }) scale: Scale = "m";
 
   //--------------------------------------------------------------------------
   //