refactor(dropdown-item): remove unused css classes (#9349)

**Related Issue:** # N/A ## Summary Removes unused CSS classes. _Note_: Suggested to install after #9330
Esri · May 17, 2024 · 23b892e · 23b892e
1 parent d55ed0e
commit 23b892e
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 32 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
@@ -21,6 +21,11 @@
 .container {
   @include itemStyling;
   @apply text-start;
+
+  & a {
+    @include itemStyling;
+    @apply focus-base;
+  }
 }
 
 .dropdown-item-content {
@@ -36,25 +41,17 @@
   transform: scale(0.9);
 }
 
-// when used as link remove styling anchor
-.container--link {
-  & a {
-    @include itemStyling;
-    @apply focus-base;
-  }
-}
-
 :host([scale="s"]) {
   .container {
     @apply text-n2h py-1 px-2;
   }
 
   .dropdown-item-icon,
-  .dropdown-item-icon-start {
+  .dropdown-item-icon--start {
     padding-inline-end: var(--calcite-spacing-sm);
   }
 
-  .dropdown-item-icon-end {
+  .dropdown-item-icon--end {
     padding-inline-start: var(--calcite-spacing-sm);
   }
 }
@@ -65,11 +62,11 @@
   }
 
   .dropdown-item-icon,
-  .dropdown-item-icon-start {
+  .dropdown-item-icon--start {
     padding-inline-end: var(--calcite-spacing-md);
   }
 
-  .dropdown-item-icon-end {
+  .dropdown-item-icon--end {
     padding-inline-start: var(--calcite-spacing-md);
   }
 }
@@ -80,11 +77,11 @@
   }
 
   .dropdown-item-icon,
-  .dropdown-item-icon-start {
+  .dropdown-item-icon--start {
     padding-inline-end: var(--calcite-spacing-xl);
   }
 
-  .dropdown-item-icon-end {
+  .dropdown-item-icon--end {
     padding-inline-start: var(--calcite-spacing-xl);
   }
 }
@@ -104,7 +101,7 @@
     @apply bg-foreground-2 text-color-1 no-underline;
   }
 
-  .container--link .dropdown-link {
+  .dropdown-link {
     @apply text-color-1;
   }
 }
@@ -114,7 +111,7 @@
 }
 
 :host([selected]) .container:not(.container--none-selection),
-:host([selected]) .container--link .dropdown-link {
+:host([selected]) .dropdown-link {
   @apply text-color-1 font-medium;
   & calcite-icon {
     color: theme("backgroundColor.brand");

diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx b/packages/calcite-components/src/components/dropdown-item/dropdown-item.tsx
@@ -222,9 +222,6 @@ export class DropdownItem implements InteractiveComponent, LoadableComponent {
           <div
             class={{
               [CSS.container]: true,
-              [CSS.containerLink]: !!href,
-              [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,12 +1,9 @@
 export const CSS = {
   container: "container",
   containerNone: "container--none-selection",
-  containerLink: "container--link",
-  containerMulti: "container--multi-selection",
-  containerSingle: "container--single-selection",
   icon: "dropdown-item-icon",
-  iconEnd: "dropdown-item-icon-end",
-  iconStart: "dropdown-item-icon-start",
+  iconEnd: "dropdown-item-icon--end",
+  iconStart: "dropdown-item-icon--start",
   itemContent: "dropdown-item-content",
   link: "dropdown-link",
 };
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts b/packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
@@ -160,14 +160,14 @@ describe("calcite-dropdown", () => {
       </calcite-dropdown>`,
     );
 
-    const item1IconStart = await page.find("calcite-dropdown-item[id='item-1'] >>> .dropdown-item-icon-start");
-    const item1IconEnd = await page.find("calcite-dropdown-item[id='item-1'] >>> .dropdown-item-icon-end");
-    const item2IconStart = await page.find("calcite-dropdown-item[id='item-2'] >>> .dropdown-item-icon-start");
-    const item2IconEnd = await page.find("calcite-dropdown-item[id='item-2'] >>> .dropdown-item-icon-end");
-    const item3IconStart = await page.find("calcite-dropdown-item[id='item-3'] >>> .dropdown-item-icon-start");
-    const item3IconEnd = await page.find("calcite-dropdown-item[id='item-3'] >>> .dropdown-item-icon-end");
-    const item4IconStart = await page.find("calcite-dropdown-item[id='item-4'] >>> .dropdown-item-icon-start");
-    const item4IconEnd = await page.find("calcite-dropdown-item[id='item-4'] >>> .dropdown-item-icon-end");
+    const item1IconStart = await page.find("calcite-dropdown-item[id='item-1'] >>> .dropdown-item-icon--start");
+    const item1IconEnd = await page.find("calcite-dropdown-item[id='item-1'] >>> .dropdown-item-icon--end");
+    const item2IconStart = await page.find("calcite-dropdown-item[id='item-2'] >>> .dropdown-item-icon--start");
+    const item2IconEnd = await page.find("calcite-dropdown-item[id='item-2'] >>> .dropdown-item-icon--end");
+    const item3IconStart = await page.find("calcite-dropdown-item[id='item-3'] >>> .dropdown-item-icon--start");
+    const item3IconEnd = await page.find("calcite-dropdown-item[id='item-3'] >>> .dropdown-item-icon--end");
+    const item4IconStart = await page.find("calcite-dropdown-item[id='item-4'] >>> .dropdown-item-icon--start");
+    const item4IconEnd = await page.find("calcite-dropdown-item[id='item-4'] >>> .dropdown-item-icon--end");
     expect(item1IconStart).not.toBeNull();
     expect(item1IconEnd).toBeNull();
     expect(item2IconStart).toBeNull();