feat(components): new nav style update

Teradata · Aug 7, 2023 · 6254f56 · 6254f56
1 parent 8528db3
commit 6254f56
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 52 deletions.
diff --git a/libs/components/index.html b/libs/components/index.html
@@ -51,6 +51,8 @@
         ></path>
       </svg>
 
+      <cv-icon-button slot="section-action" icon="arrow_back"></cv-icon-button>
+
       <cv-list class="navigation-rail" slot="navigation" activatable>
         <cv-nav-list-item graphic="avatar">
           <cv-icon class="home-icon" slot="graphic">language</cv-icon>
@@ -66,18 +68,18 @@
           Home
         </cv-nav-list-item>
 
-        <cv-expansion-list activatable>
-          <cv-nav-list-item slot="expansionHeader" graphic="avatar" hasChildren>
-            Editor
-            <cv-icon class="covalent-icon" slot="graphic"
+        <cv-expansion-list graphic="avatar" hasChildren>
+          <span>Editor</span>
+          <cv-icon class="covalent-icon" slot="graphic"
               >product_editor</cv-icon
             >
-          </cv-nav-list-item>
-          <cv-nav-list-item>Scripts</cv-nav-list-item>
-          <cv-nav-list-item>Scripts</cv-nav-list-item>
-          <cv-nav-list-item>Scripts</cv-nav-list-item>
-          <cv-nav-list-item>Scripts</cv-nav-list-item>
-          <cv-nav-list-item>Scripts</cv-nav-list-item>
+          <cv-list class="subnav" slot="expansion-panel" activatable>
+            <cv-nav-list-item>Scripts</cv-nav-list-item>
+            <cv-nav-list-item>Scripts</cv-nav-list-item>
+            <cv-nav-list-item>Scripts</cv-nav-list-item>
+            <cv-nav-list-item>Scripts</cv-nav-list-item>
+            <cv-nav-list-item>Scripts</cv-nav-list-item>
+          </cv-list>
         </cv-expansion-list>
 
         <cv-nav-list-item graphic="avatar">

diff --git a/libs/components/src/app-shell/app-shell.ts b/libs/components/src/app-shell/app-shell.ts
@@ -109,6 +109,14 @@ export class CovalentAppShell extends DrawerBase {
     this.navHoverTimeout = setTimeout(() => this._toggleOpen(), 350);
   }
 
+  private _handleNavClick() {
+    clearTimeout(this.navHoverTimeout);
+
+    if (this.hovered) {
+      this._toggleOpen();
+    }
+  }
+
   private _handleDrawerClosed () {
     this.forcedOpen = false;
     this.hovered = false;
@@ -141,7 +149,7 @@ export class CovalentAppShell extends DrawerBase {
   protected renderSection() {
     return this.sectionName
       ? html`<div class="current-section">
-          <cv-icon-button icon="arrow_back"></cv-icon-button>
+            <slot name="section-action"></slot>
           <span>${this.sectionName}</span>
         </div>`
       : nothing;
@@ -185,6 +193,7 @@ export class CovalentAppShell extends DrawerBase {
         </span>
         <nav
           class="navigation mdc-drawer ${classMap(drawerClasses)}"
+          @click=${this._handleNavClick}
           @mouseover="${this._handleNavMouseOver}"
           @mouseout="${this._handleNavMouseOut}"
         >

diff --git a/libs/components/src/list/list-expansion.scss b/libs/components/src/list/list-expansion.scss
@@ -1,9 +1,6 @@
 .mdc-deprecated-list {
-  --mdc-list-side-padding: 72px;
 
-  transition: transform 0.15s ease-out;
-  overflow: hidden;
-  height: var(--cv-list-menu-height, 0);
+
 
   slot::slotted(*) {
     height: 32px;
@@ -12,10 +9,52 @@
     margin-right: 16px;
   }
 }
+:host {
+  flex-direction: column;
+  overflow: visible;
+  height: inherit !important; 
+  background: none;
+  margin:0 16px 0 0;
+  padding: 0;
 
-:host([open]) {
-  ul {
-    transition: min-height 0.25s ease-in;
-    height: var(--cv-list-menu-height, inherit);
-  }
+  --mdc-ripple-color: transparent;
+  --mdc-list-side-padding: 0;
+}
+
+:host([activated]){
+  --mdc-ripple-color: transparent;
+}
+
+
+.expansion-header {
+  --mdc-ripple-color: var(--mdc-theme-primary);
+  border-radius: 0px 28px 28px 0px;
+  position: relative;
+  height: 48px;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+.expansion-header-inner {
+  padding: 0 16px;
+}
+
+.expansion-icon {
+  padding-left: 16px;
+}
+.expansion-panel {
+  display: block;
+  width: 100%;
+  height: var(--cv-list-menu-height, 0);
+  --mdc-list-side-padding: 72px;
+
+  transition: transform 0.15s ease-out;
+  overflow: hidden;
+
+}
+:host([open]) .expansion-panel {
+  transition: min-height 0.25s ease-in;
+  height: var(--cv-list-menu-height, inherit);
 }
diff --git a/libs/components/src/list/list-expansion.ts b/libs/components/src/list/list-expansion.ts
@@ -4,8 +4,6 @@ import {
   property,
   queryAssignedElements,
 } from 'lit/decorators.js';
-import { styles as listBaseStyles } from '@material/mwc-list/mwc-list.css';
-import { CovalentList } from './list';
 import styles from './list-expansion.scss?inline';
 import CovalentNavRailListItem from './nav-list-item';
 
@@ -16,14 +14,12 @@ declare global {
 }
 
 @customElement('cv-expansion-list')
-export class CovalentExpansionList extends CovalentList {
+export class CovalentExpansionList extends CovalentNavRailListItem {
   static override styles = [
     css`
-      ${unsafeCSS(listBaseStyles)}
-    `,
-    css`
-      ${unsafeCSS(styles)}
+      ${unsafeCSS(styles)},
     `,
+    ...super.styles,
   ];
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open',
@@ -68,9 +64,24 @@ export class CovalentExpansionList extends CovalentList {
   }
 
   override render() {
+    const text = this.renderText();
+    const graphic = this.graphic ? this.renderGraphic() : nothing;
+    const meta = this.hasMeta ? this.renderMeta() : nothing;
+    const arrowIcon = this.open ? 'arrow_drop_down' : 'arrow_right';
+    const arrow = this.navOpen
+      ? html`<cv-icon class="expansion-icon">${arrowIcon}</cv-icon>`
+      : nothing;
+    const childSlot = html`<slot name="child"></slot>`;
+
     return html`
-      <slot name="expansionHeader" @click=${this._toggleOpen}></slot>
-      ${this.navOpen ? super.render() : nothing}
+      <div @click=${this._toggleOpen} class="expansion-header">
+        ${this.renderRipple()} ${arrow} ${graphic} ${text} ${meta} ${childSlot}
+      </div>
+      ${this.navOpen
+        ? html`<div class="expansion-panel">
+            <slot name="expansion-panel"></slot>
+          </div>`
+        : nothing}
     `;
   }
 }

diff --git a/libs/components/src/list/list-item.ts b/libs/components/src/list/list-item.ts
@@ -1,7 +1,7 @@
 import { ListItemBase } from '@material/mwc-list/mwc-list-item-base';
 
-import { css, html, nothing, unsafeCSS } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, unsafeCSS } from 'lit';
+import { customElement } from 'lit/decorators.js';
 
 import { styles as controlStyle } from '@material/mwc-list/mwc-control-list-item.css';
 import { styles as listItemStyle } from '@material/mwc-list/mwc-list-item.css';
@@ -26,24 +26,6 @@ export class CovalentListItem extends ListItemBase {
       ${unsafeCSS(styles)}
     `,
   ];
-
-  @property({ type: Boolean, reflect: true }) hasChildren = false;
-
-  override render() {
-    const text = this.renderText();
-    const graphic = this.graphic ? this.renderGraphic() : nothing;
-    const meta = this.hasMeta ? this.renderMeta() : nothing;
-    const arrowIcon = this.activated ? 'arrow_drop_down' : 'arrow_right';
-    const arrow = this.hasChildren
-      ? html`<cv-icon class="expansion-icon">${arrowIcon}</cv-icon>`
-      : nothing;
-    const childSlot = this.hasChildren
-      ? html`<slot name="child"></slot>`
-      : nothing;
-
-    return html` ${this.renderRipple()} ${arrow} ${graphic} ${text} ${meta}
-    ${childSlot}`;
-  }
 }
 
 export default CovalentListItem;
diff --git a/libs/components/src/list/list.scss b/libs/components/src/list/list.scss
@@ -0,0 +1,5 @@
+:host(.subnav) ::slotted(*){
+    height: 32px;
+    font-weight: var(--mdc-typography-body2-font-weight);
+    border-radius: 0px 28px 28px 0px;
+}
diff --git a/libs/components/src/list/list.ts b/libs/components/src/list/list.ts
@@ -1,11 +1,13 @@
-import { ListBase } from '@material/mwc-list/mwc-list-base';
-import { styles } from '@material/mwc-list/mwc-list.css';
+import { css, unsafeCSS } from 'lit';
 import {
   customElement,
   property,
   queryAssignedElements,
 } from 'lit/decorators.js';
+import { ListBase } from '@material/mwc-list/mwc-list-base';
+import { styles as baseStyles } from '@material/mwc-list/mwc-list.css';
 import CovalentNavRailListItem from './nav-list-item';
+import styles from './list.scss?inline';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -21,7 +23,10 @@ export class CovalentList extends ListBase {
   @property({ type: Boolean, reflect: true })
   navOpen = false;
 
-  static override styles = [styles];
+  static override styles = [
+    baseStyles,
+    css`${unsafeCSS(styles)}`,
+  ];
 
   override async getUpdateComplete() {
     this.slotElements.forEach((el) => {