feat(ui-shell): sync with @carbon/react version (#10526)

* feat(ui-shell): ui-shell carbon v11 sync * feat(ui-shell): header side nav items and new props * feat(ui-shell): side-nav overlay * feat(ui-shell): active header menu * feat(ui-shell): add box-sizing to switcher link * feat(ui-shell): import grid styles * Update packages/carbon-web-components/src/components/ui-shell/header-side-nav-items.ts Co-authored-by: Ignacio Becerra <[email protected]> * feat(ui-shell): address some of the feedback * feat(ui-shell): header styles * feat(ui-shell): set correct tabbing order for sidenav * feat(ui-shell): fix rail focus and overlay * feat(ui-shell): story book content * feat(ui-shell): remove unnecessary test * feat(ui-shell): add elements to index * feat(ui-shell): adjust focus order for sidenav,actions,nav --------- Co-authored-by: Ignacio Becerra <[email protected]>
carbon-design-system · Jun 14, 2023 · 560a753 · 560a753
1 parent 7a8aa21
commit 560a753
Show file tree

Hide file tree

Showing 28 changed files with 1,505 additions and 397 deletions.
diff --git a/web-components/packages/carbon-web-components/.storybook/_container.scss b/web-components/packages/carbon-web-components/.storybook/_container.scss
@@ -7,7 +7,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@use '@carbon/styles' as *;
+@use '@carbon/styles' as * with (
+  $use-flexbox-grid: true
+);
+
 @include reset();
 
 *,
@@ -53,19 +56,7 @@ body {
 }
 
 .#{$prefix}--content.#{$prefix}-ce-demo-devenv--ui-shell-content {
-  background-color: $layer-01;
   margin: 0;
   height: 100vh;
   width: 100%;
-
-  h2 {
-    font-weight: 800;
-    /* stylelint-disable declaration-property-unit-whitelist */
-    margin: 30px 0;
-    font-size: 20px;
-  }
-
-  p {
-    line-height: 20px;
-  }
 }
diff --git a/...components/packages/carbon-web-components/src/components/ui-shell/header-global-action.ts b/...components/packages/carbon-web-components/src/components/ui-shell/header-global-action.ts
@@ -0,0 +1,55 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { BUTTON_TOOLTIP_POSITION } from '../button/button';
+import CDSButton from '../button/button';
+import styles from './header.scss';
+import { prefix } from '../../globals/settings';
+
+/**
+ * Header global action button
+ *
+ * @element cds-header-global-action
+ */
+@customElement(`${prefix}-header-global-action`)
+class CDSHeaderGlobalAction extends CDSButton {
+  /**
+   * Specify whether the action is currently active
+   */
+  @property({ type: Boolean, reflect: true })
+  active;
+
+  connectedCallback() {
+    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;
+    super.connectedCallback();
+  }
+
+  firstUpdated() {
+    const button = this.shadowRoot?.querySelector('button');
+
+    if (button) {
+      button?.classList.add(`${prefix}--header__action`);
+
+      if (this.active) {
+        button?.classList.add(`${prefix}--header__action--active`);
+      }
+    }
+  }
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSHeaderGlobalAction;
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts
@@ -15,7 +15,7 @@ import Menu20 from '@carbon/icons/lib/menu/20';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';
+import { SIDE_NAV_COLLAPSE_MODE } from './side-nav';
 import styles from './header.scss';
 
 /**
@@ -27,13 +27,13 @@ import styles from './header.scss';
  * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.
  */
 @customElement(`${prefix}-header-menu-button`)
-class BXHeaderMenuButton extends FocusMixin(LitElement) {
+class CDSHeaderMenuButton extends FocusMixin(LitElement) {
   private _handleClick() {
     const active = !this.active;
     this.active = active;
     this.dispatchEvent(
       new CustomEvent(
-        (this.constructor as typeof BXHeaderMenuButton).eventToggle,
+        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,
         {
           bubbles: true,
           cancelable: true,
@@ -77,10 +77,13 @@ class BXHeaderMenuButton extends FocusMixin(LitElement) {
   disabled = false;
 
   /**
-   * Usage mode of the side nav.
+   * If `true` will style the side nav to sit below the header
    */
-  @property({ reflect: true, attribute: 'usage-mode' })
-  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;
+  @property({
+    type: Boolean,
+    attribute: 'is-not-child-of-header',
+  })
+  isNotChildOfHeader = false;
 
   render() {
     const {
@@ -123,4 +126,4 @@ class BXHeaderMenuButton extends FocusMixin(LitElement) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderMenuButton;
+export default CDSHeaderMenuButton;
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts
@@ -9,14 +9,14 @@
 
 import { customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
-import BXHeaderNavItem from './header-nav-item';
+import CDSHeaderNavItem from './header-nav-item';
 
 /**
  * Header submenu item.
  *
  * @element cds-header-menu-item
  */
 @customElement(`${prefix}-header-menu-item`)
-class BXHeaderMenuItem extends BXHeaderNavItem {}
+class CDSHeaderMenuItem extends CDSHeaderNavItem {}
 
-export default BXHeaderMenuItem;
+export default CDSHeaderMenuItem;
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-menu.ts
@@ -10,12 +10,14 @@
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { LitElement, html } from 'lit';
 import { property, customElement, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';
 import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { forEach } from '../../globals/internal/collection-helpers';
+import CDSHeaderMenuItem from './header-menu-item';
 import styles from './header.scss';
 
 /**
@@ -27,13 +29,18 @@ import styles from './header.scss';
  * @csspart menu-body The menu body.
  */
 @customElement(`${prefix}-header-menu`)
-class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
+class CDSHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   /**
    * The trigger button.
    */
   @query('a')
   private _trigger!: HTMLElement;
 
+  /**
+   * keeps track if header menu has any active submenus
+   */
+  private _hasActiveChildren = false;
+
   /**
    * Handles `click` event handler on this element.
    */
@@ -79,6 +86,12 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ type: Boolean, reflect: true })
   expanded = false;
 
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   */
+  @property({ type: Boolean, attribute: 'is-active', reflect: true })
+  isActive = false;
+
   /**
    * The content of the trigger button.
    */
@@ -95,12 +108,19 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'listitem');
     }
+    const { selectorItem } = this.constructor as typeof CDSHeaderMenu;
+    forEach(this.querySelectorAll(selectorItem), (elem) => {
+      if ((elem as CDSHeaderMenuItem).isActive === true) {
+        this._hasActiveChildren = true;
+      }
+    });
+
     super.connectedCallback();
   }
 
   updated(changedProperties) {
     if (changedProperties.has('expanded')) {
-      const { selectorItem } = this.constructor as typeof BXHeaderMenu;
+      const { selectorItem } = this.constructor as typeof CDSHeaderMenu;
       const { expanded } = this;
       forEach(this.querySelectorAll(selectorItem), (elem) => {
         (elem as HTMLElement).tabIndex = expanded ? 0 : -1;
@@ -111,16 +131,26 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   render() {
     const {
       expanded,
+      isActive,
       triggerContent,
       menuLabel,
+      _hasActiveChildren,
       _handleClick: handleClick,
       _handleKeydownTrigger: handleKeydownTrigger,
     } = this;
+
+    const linkClasses = classMap({
+      [`${prefix}--header__menu-item`]: true,
+      [`${prefix}--header__menu-title`]: true,
+      [`${prefix}--header__menu-item--current`]:
+        isActive || (_hasActiveChildren && !expanded),
+    });
+
     return html`
       <a
         part="trigger"
         tabindex="0"
-        class="${prefix}--header__menu-item ${prefix}--header__menu-title"
+        class="${linkClasses}"
         href="javascript:void 0"
         aria-haspopup="menu"
         aria-expanded="${String(Boolean(expanded))}"
@@ -154,4 +184,4 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderMenu;
+export default CDSHeaderMenu;
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-name.ts
@@ -22,7 +22,7 @@ import styles from './header.scss';
  * @csspart prefix The prefix content.
  */
 @customElement(`${prefix}-header-name`)
-class BXHeaderName extends FocusMixin(LitElement) {
+class CDSHeaderName extends FocusMixin(LitElement) {
   /**
    * Link `href`.
    */
@@ -58,4 +58,4 @@ class BXHeaderName extends FocusMixin(LitElement) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderName;
+export default CDSHeaderName;
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts
@@ -8,6 +8,7 @@
  */
 
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { LitElement, html } from 'lit';
 import { property, customElement } from 'lit/decorators.js';
 import { prefix } from '../../globals/settings';
@@ -22,7 +23,7 @@ import styles from './header.scss';
  * @csspart title The title.
  */
 @customElement(`${prefix}-header-nav-item`)
-class BXHeaderNavItem extends FocusMixin(LitElement) {
+class CDSHeaderNavItem extends FocusMixin(LitElement) {
   /**
    * Link `href`.
    */
@@ -35,18 +36,36 @@ class BXHeaderNavItem extends FocusMixin(LitElement) {
   @property()
   title!: string;
 
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   */
+  @property({ type: Boolean, attribute: 'is-active' })
+  isActive = false;
+
+  /**
+   * indicates that this element represents the current item
+   */
+  @property({ type: String, attribute: 'aria-current' })
+  ariaCurrent;
+
   /**
    * As child of <ul>, this element must have role of listitem
    */
   @property({ reflect: true })
   role: string = 'listitem';
 
   render() {
-    const { href, title } = this;
+    const { ariaCurrent, href, isActive, title } = this;
+    const linkClass = classMap({
+      [`${prefix}--header__menu-item`]: true,
+      [`${prefix}--header__menu-item--current`]:
+        isActive && ariaCurrent !== 'page',
+    });
+
     return html`
       <a
         part="link"
-        class="${prefix}--header__menu-item"
+        class="${linkClass}"
         tabindex="0"
         href="${ifDefined(href)}">
         <span part="title" class="${prefix}--text-truncate--end"
@@ -63,4 +82,4 @@ class BXHeaderNavItem extends FocusMixin(LitElement) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderNavItem;
+export default CDSHeaderNavItem;
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-nav.ts
@@ -20,7 +20,7 @@ import styles from './header.scss';
  * @csspart divider The divider.
  */
 @customElement(`${prefix}-header-nav`)
-class BXHeaderNav extends LitElement {
+class CDSHeaderNav extends LitElement {
   /**
    * The `aria-label` attribute for the menu bar UI.
    */
@@ -50,4 +50,4 @@ class BXHeaderNav extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderNav;
+export default CDSHeaderNav;
diff --git a/web-components/packages/carbon-web-components/src/components/ui-shell/header-panel.ts b/web-components/packages/carbon-web-components/src/components/ui-shell/header-panel.ts
@@ -0,0 +1,40 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import styles from './header.scss';
+import { prefix } from '../../globals/settings';
+
+/**
+ * Header panel
+ *
+ * @element cds-header-panel
+ */
+@customElement(`${prefix}-header-panel`)
+class CDSHeaderPanel extends LitElement {
+  /**
+   * Specify whether the panel is expanded
+   */
+  @property({ type: Boolean, reflect: true })
+  expanded;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSHeaderPanel;