chore(nav-drawer): use gap property for spacing (#364)

* chore(nav-drawer): use gap property for spacing Co-authored-by: Simeon Simeonoff <[email protected]>
IgniteUI · May 17, 2022 · b573922 · b573922
1 parent 17944be
commit b573922
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 16 deletions.
diff --git a/src/components/nav-drawer/nav-drawer-item.ts b/src/components/nav-drawer/nav-drawer-item.ts
@@ -1,5 +1,10 @@
 import { html, LitElement } from 'lit';
-import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import {
+  property,
+  queryAssignedElements,
+  queryAssignedNodes,
+  state,
+} from 'lit/decorators.js';
 import { themes } from '../../theming/theming-decorator.js';
 import { partNameMap } from '../common/util.js';
 import { styles as indigo } from './styles/indigo/nav-drawer-item.indigo.css.js';
@@ -36,6 +41,9 @@ export default class IgcNavDrawerItemComponent extends LitElement {
   @queryAssignedElements({ slot: 'content' })
   private _text!: Array<HTMLElement>;
 
+  @queryAssignedNodes({ slot: 'icon', flatten: true })
+  protected navdrawerIcon!: Array<Node>;
+
   public override connectedCallback() {
     super.connectedCallback();
     this.shadowRoot?.addEventListener('slotchange', (_) => {
@@ -53,7 +61,7 @@ export default class IgcNavDrawerItemComponent extends LitElement {
   protected override render() {
     return html`
       <div part="${partNameMap(this.resolvePartNames('base'))}">
-        <span part="icon">
+        <span part="icon" .hidden="${this.navdrawerIcon.length == 0}">
           <slot name="icon"></slot>
         </span>
         <span part="content">

diff --git a/src/components/nav-drawer/nav-drawer.spec.ts b/src/components/nav-drawer/nav-drawer.spec.ts
@@ -53,7 +53,8 @@ describe('Navigation Drawer', () => {
     });
 
     it('render nav drawer item slots successfully', async () => {
-      expect(el.children[0]).shadowDom.equal(`
+      expect(el.children[0]).shadowDom.equal(
+        `
         <div part="base">
           <span part="icon">
             <slot name="icon"></slot>
@@ -62,7 +63,11 @@ describe('Navigation Drawer', () => {
             <slot name="content"></slot>
           </span>
         </div>
-      `);
+      `,
+        {
+          ignoreAttributes: ['hidden'],
+        }
+      );
     });
 
     it('render nav drawer slots successfully', async () => {

diff --git a/src/components/nav-drawer/styles/indigo/nav-drawer-item.indigo.scss b/src/components/nav-drawer/styles/indigo/nav-drawer-item.indigo.scss
@@ -4,6 +4,7 @@
     [part~='base'] {
         @include border-radius(rem(24px));
 
+        gap: rem(24px);
         color: color(gray, 300, .8);
         padding: rem(4px);
         margin: rem(15px) rem(8px) !important;
@@ -13,21 +14,11 @@
             background: transparent;
             color: color(gray, 100);
         }
-
-        ::slotted(igc-icon) {
-            margin-inline-end: rem(24px);
-        }
     }
 
     [part='content'] {
         padding-inline-start: rem(8px);
     }
-
-    [part='base mini'] {
-        ::slotted(igc-icon) {
-            margin-inline-end: 0;
-        }
-    }
 }
 
 :host([active]) {

diff --git a/src/components/nav-drawer/styles/nav-drawer-item.base.scss b/src/components/nav-drawer/styles/nav-drawer-item.base.scss
@@ -5,6 +5,7 @@ $item-margin: rem(8px);
 
 [part~='base'] {
     display: flex;
+    gap: rem(32px);
     align-items: center;
     flex-flow: row nowrap;
     position: relative;
@@ -28,7 +29,6 @@ $item-margin: rem(8px);
     ::slotted(igc-icon) {
         display: flex;
         font: inherit;
-        margin-inline-end: rem(32px);
     }
 
     &:hover {
@@ -53,7 +53,6 @@ $item-margin: rem(8px);
 
     ::slotted(igc-icon) {
         width: 100%;
-        margin-inline-end: 0;
     }
 }