refactor(dropdown): update items sizes and paddings (#1409)

IgniteUI · Oct 1, 2024 · b52f1a4 · b52f1a4
1 parent 57a6315
commit b52f1a4
Show file tree

Hide file tree

Showing 13 changed files with 16 additions and 44 deletions.
diff --git a/src/components/dropdown/themes/dropdown-item.base.scss b/src/components/dropdown/themes/dropdown-item.base.scss
@@ -12,8 +12,7 @@
     position: relative;
     cursor: pointer;
     outline-style: none;
-    padding-inline: pad-inline(rem(6px), rem(12px), rem(24px));
-    padding-block: pad-block(rem(2px), rem(4px), rem(8px));
+    padding-inline: pad-inline(rem(16px), rem(20px), rem(24px));
 }
 
 :host([disabled]) {
@@ -43,11 +42,11 @@
 [name='prefix']::slotted(*) {
     --component-size: var(--dropdown-size) !important;
 
-    margin-inline-end: pad(rem(16px));
+    margin-inline-end: pad(rem(8px));
 }
 
 [name='suffix']::slotted(*) {
     --component-size: var(--dropdown-size) !important;
 
-    margin-inline-start: pad(rem(16px));
+    margin-inline-start: pad(rem(8px));
 }
diff --git a/src/components/dropdown/themes/header.ts b/src/components/dropdown/themes/header.ts
@@ -2,25 +2,18 @@ import { css } from 'lit';
 
 import type { Themes } from '../../../theming/types.js';
 // Shared Styles
-import { styles as fluent } from './shared/header/dropdown-header.fluent.css.js';
 import { styles as indigo } from './shared/header/dropdown-header.indigo.css.js';
 
 const light = {
   indigo: css`
     ${indigo}
   `,
-  fluent: css`
-    ${fluent}
-  `,
 };
 
 const dark = {
   indigo: css`
     ${indigo}
   `,
-  fluent: css`
-    ${fluent}
-  `,
 };
 
 export const all: Themes = { light, dark };
diff --git a/src/components/dropdown/themes/shared/dropdown.common.scss b/src/components/dropdown/themes/shared/dropdown.common.scss
@@ -10,6 +10,7 @@ $theme: $base;
 }
 
 [part='base'] {
+    box-shadow: var-get($theme, 'elevation');
     background: var-get($theme, 'background-color');
     border-radius: var-get($theme, 'border-radius');
 }
diff --git a/src/components/dropdown/themes/shared/dropdown.fluent.scss b/src/components/dropdown/themes/shared/dropdown.fluent.scss
@@ -7,6 +7,3 @@ $theme: $fluent;
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 }
 
-[part='base'] {
-    box-shadow: var(--ig-elevation-4);
-}
diff --git a/src/components/dropdown/themes/shared/dropdown.indigo.scss b/src/components/dropdown/themes/shared/dropdown.indigo.scss
@@ -8,7 +8,6 @@ $theme: $indigo;
 }
 
 [part='base'] {
-    box-shadow: var-get($theme, 'elevation');
     padding: rem(3px);
     outline: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
     outline-offset: rem(-1px);

diff --git a/src/components/dropdown/themes/shared/dropdown.material.scss b/src/components/dropdown/themes/shared/dropdown.material.scss
@@ -6,8 +6,3 @@ $theme: $material;
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
 }
-
-[part='base'] {
-    box-shadow: var(--ig-elevation-8);
-    padding: rem(8px) 0;
-}
diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.common.scss b/src/components/dropdown/themes/shared/header/dropdown-header.common.scss
@@ -4,7 +4,9 @@
 $theme: $base;
 
 :host {
+    height: var-get($theme, 'size');
     color: var-get($theme, 'header-text-color');
-    padding-inline: pad-inline(rem(4px), rem(8px), rem(16px));
-    padding-block: pad-block(rem(2px), rem(4px), rem(8px));
+    padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
+    display: flex;
+    align-items: center;
 }
diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss b/src/components/dropdown/themes/shared/header/dropdown-header.fluent.scss
diff --git a/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss b/src/components/dropdown/themes/shared/header/dropdown-header.indigo.scss
@@ -2,6 +2,4 @@
 
 :host {
     padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
-    padding-block: pad-inline(rem(4px), rem(6px), rem(8px));
-    margin-block-end: rem(2px);
 }
diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.common.scss b/src/components/dropdown/themes/shared/item/dropdown-item.common.scss
@@ -4,6 +4,7 @@
 $theme: $material;
 
 :host {
+    height: var-get($theme, 'size');
     border-radius: var-get($theme, 'item-border-radius');
     color: var-get($theme, 'item-text-color');
 

diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss b/src/components/dropdown/themes/shared/item/dropdown-item.fluent.scss
@@ -3,10 +3,6 @@
 
 $theme: $fluent;
 
-:host {
-    padding: pad(rem(2px), rem(4px), rem(8px));
-}
-
 :host([active]:hover) {
     background: var-get($theme, 'hover-item-background');
     color: var-get($theme, 'hover-item-text-color');

diff --git a/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss b/src/components/dropdown/themes/shared/item/dropdown-item.indigo.scss
@@ -5,7 +5,6 @@ $theme: $indigo;
 
 :host {
     padding-inline: pad-inline(rem(8px), rem(12px), rem(12px));
-    padding-block: pad-inline(rem(4px), rem(6px), rem(8px));
     margin-block: rem(2px);
 
     --item-icon: #{sizable(rem(14px), rem(16px), rem(16px))};
@@ -15,15 +14,6 @@ $theme: $indigo;
     }
 }
 
-[name='prefix']::slotted(*) {
-    margin-inline-end: rem(8px);
-}
-
-[name='suffix']::slotted(*) {
-    margin-inline-start: rem(8px);
-}
-
-:host(:first-of-type),
 :host(:last-of-type) {
     margin-block: unset;
 }

diff --git a/stories/dropdown.stories.ts b/stories/dropdown.stories.ts
@@ -171,7 +171,13 @@ const Items = [
   'Documentation',
   'Builds',
 ].map(
-  (each) => html`<igc-dropdown-item value=${each}>${each}</igc-dropdown-item>`
+  (each) =>
+    html`<igc-dropdown-item value=${each}
+      ><igc-icon slot="prefix" name="github"></igc-icon>${each}<igc-icon
+        slot="suffix"
+        name="github"
+      ></igc-icon
+    ></igc-dropdown-item>`
 );
 
 const overflowItems = Array.from(range(1, 51)).map(