feat(dropdown-item): update spacing of icons (#9330)

**Related Issue:** #7095 ## Summary Updates spacing of icons in `calcite-dropdown-item`.
Esri · May 17, 2024 · c2e5a99 · c2e5a99
1 parent 4be8254
commit c2e5a99
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 125 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,43 +1,3 @@
-.container--s {
-  @apply text-n2h py-1;
-  padding-inline-end: theme("padding.2");
-  padding-inline-start: theme("padding.6");
-}
-
-.container--m {
-  @apply text-n1h py-2;
-  padding-inline-end: theme("padding.3");
-  padding-inline-start: theme("padding.8");
-}
-
-.container--l {
-  @apply text-0h py-2.5;
-  padding-inline-end: theme("padding.4");
-  padding-inline-start: theme("padding.10");
-}
-
-// none-selection mode
-.container--s.container--none-selection {
-  padding-inline-start: theme("padding.1");
-  & .dropdown-link {
-    padding-inline-start: theme("padding.0");
-  }
-}
-
-.container--m.container--none-selection {
-  padding-inline-start: theme("padding.2");
-  & .dropdown-link {
-    padding-inline-start: theme("padding.0");
-  }
-}
-
-.container--l.container--none-selection {
-  padding-inline-start: theme("padding.3");
-  & .dropdown-link {
-    padding-inline-start: theme("padding.0");
-  }
-}
-
 @mixin itemStyling {
   @apply text-color-3
     relative
@@ -54,53 +14,88 @@
   @apply relative
     flex
     flex-grow
-    items-center;
+    items-center
+    focus-base;
 }
 
 .container {
   @include itemStyling;
-  text-align: start;
+  @apply text-start;
 }
 
 .dropdown-item-content {
   @apply flex-auto py-0.5;
-  padding-inline-end: theme("margin.auto");
-  padding-inline-start: theme("margin.1");
 }
 
-//focus
-:host,
-.container--link a {
-  @apply focus-base;
-}
-:host(:focus) {
-  @apply focus-inset outline-none;
+// item icon
+.dropdown-item-icon {
+  @apply relative
+    opacity-0
+    duration-150
+    ease-in-out;
+  transform: scale(0.9);
 }
 
-// when used as link move styling anchor
+// when used as link remove styling anchor
 .container--link {
-  @apply p-0;
   & a {
     @include itemStyling;
+    @apply focus-base;
   }
 }
 
-.container--s .dropdown-link {
-  @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 px-2;
+  }
+
+  .dropdown-item-icon,
+  .dropdown-item-icon-start {
+    padding-inline-end: var(--calcite-spacing-sm);
+  }
+
+  .dropdown-item-icon-end {
+    padding-inline-start: var(--calcite-spacing-sm);
+  }
 }
 
-.container--m .dropdown-link {
-  @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 px-3;
+  }
+
+  .dropdown-item-icon,
+  .dropdown-item-icon-start {
+    padding-inline-end: var(--calcite-spacing-md);
+  }
+
+  .dropdown-item-icon-end {
+    padding-inline-start: var(--calcite-spacing-md);
+  }
 }
 
-.container--l .dropdown-link {
-  @apply text-0h py-3;
-  padding-inline-end: theme("padding.4");
-  padding-inline-start: theme("padding.10");
+:host([scale="l"]) {
+  .container {
+    @apply text-0h py-2.5 px-4;
+  }
+
+  .dropdown-item-icon,
+  .dropdown-item-icon-start {
+    padding-inline-end: var(--calcite-spacing-xl);
+  }
+
+  .dropdown-item-icon-end {
+    padding-inline-start: var(--calcite-spacing-xl);
+  }
+}
+
+//focus
+:host(:focus) {
+  @apply focus-inset outline-none;
+
+  .container {
+    @apply text-color-1 no-underline;
+  }
 }
 
 :host(:hover:not([disabled])),
@@ -118,10 +113,6 @@
   @apply bg-foreground-3;
 }
 
-:host(:focus) .container {
-  @apply text-color-1 no-underline;
-}
-
 :host([selected]) .container:not(.container--none-selection),
 :host([selected]) .container--link .dropdown-link {
   @apply text-color-1 font-medium;
@@ -130,27 +121,6 @@
   }
 }
 
-// item icon
-.dropdown-item-icon {
-  @apply absolute
-    opacity-0
-    duration-150
-    ease-in-out;
-  transform: scale(0.9);
-}
-
-.container--s .dropdown-item-icon {
-  inset-inline-start: theme("spacing.1");
-}
-
-.container--m .dropdown-item-icon {
-  inset-inline-start: theme("spacing.2");
-}
-
-.container--l .dropdown-item-icon {
-  inset-inline-start: theme("spacing.3");
-}
-
 :host(:hover:not([disabled])) .dropdown-item-icon {
   color: theme("borderColor.color.1");
   @apply opacity-100;
@@ -161,36 +131,5 @@
   @apply opacity-100;
 }
 
-// icon start & end
-.container--s {
-  .dropdown-item-icon-start {
-    margin-inline-end: theme("margin.2");
-    margin-inline-start: theme("margin.1");
-  }
-  .dropdown-item-icon-end {
-    margin-inline-start: theme("margin.2");
-  }
-}
-
-.container--m {
-  .dropdown-item-icon-start {
-    margin-inline-end: theme("margin.3");
-    margin-inline-start: theme("margin.1");
-  }
-  .dropdown-item-icon-end {
-    margin-inline-start: theme("margin.3");
-  }
-}
-
-.container--l {
-  .dropdown-item-icon-start {
-    margin-inline-end: theme("margin.4");
-    margin-inline-start: theme("margin.1");
-  }
-  .dropdown-item-icon-end {
-    margin-inline-start: theme("margin.4");
-  }
-}
-
 @include base-component();
 @include disabled();
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";
 
   //--------------------------------------------------------------------------
   //
@@ -151,7 +151,7 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
   }
 
   render(): VNode {
-    const { href, selectionMode, label, iconFlipRtl, scale } = this;
+    const { href, selectionMode, label, iconFlipRtl } = this;
 
     const iconStartEl = (
       <calcite-icon
@@ -223,7 +223,6 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
             class={{
               [CSS.container]: true,
               [CSS.containerLink]: !!href,
-              [`${CSS.container}--${scale}`]: true,
               [CSS.containerMulti]: selectionMode === "multiple",
               [CSS.containerSingle]: selectionMode === "single",
               [CSS.containerNone]: selectionMode === "none",

diff --git a/packages/calcite-components/src/components/dropdown-item/resources.ts b/packages/calcite-components/src/components/dropdown-item/resources.ts
@@ -1,9 +1,9 @@
 export const CSS = {
   container: "container",
+  containerNone: "container--none-selection",
   containerLink: "container--link",
   containerMulti: "container--multi-selection",
   containerSingle: "container--single-selection",
-  containerNone: "container--none-selection",
   icon: "dropdown-item-icon",
   iconEnd: "dropdown-item-icon-end",
   iconStart: "dropdown-item-icon-start",