feat(ld-sidenav-navitem): subline

emdgroup-liquid · Aug 8, 2023 · 65256bb · 65256bb · vercel · Aug 8, 2023
1 parent 47f9b4a
commit 65256bb
Show file tree

Hide file tree

Showing 11 changed files with 761 additions and 154 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -19530,6 +19530,32 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "5c24307e",
+      "image": "7dddbe4308127a49670fb058b0c97412.png",
+      "userAgent": "default",
+      "desc": "ld-sidenav nav item has a subline",
+      "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
+    {
+      "id": "05730481",
+      "image": "ccbe2209cd62108f76c3fcd1a51c1039.png",
+      "userAgent": "default",
+      "desc": "ld-sidenav nav item has a subline with secondary icon",
+      "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
+    },
     {
       "id": "eb3477e0",
       "image": "cbe9a5a5994a6c8cff7511384690e44d.png",
@@ -19714,7 +19740,7 @@
     },
     {
       "id": "3dc13b7e",
-      "image": "5027aa8bf38082edc87984d4147c8dca.png",
+      "image": "87185f249e035eb118e2939ae4a4670d.png",
       "userAgent": "default",
       "desc": "ld-sidenav with accordion supports nested accordions with custom horizontal padding",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",

diff --git a/screenshot/images/5027aa8bf38082edc87984d4147c8dca.png b/screenshot/images/5027aa8bf38082edc87984d4147c8dca.png
diff --git a/screenshot/images/7dddbe4308127a49670fb058b0c97412.png b/screenshot/images/7dddbe4308127a49670fb058b0c97412.png
diff --git a/screenshot/images/87185f249e035eb118e2939ae4a4670d.png b/screenshot/images/87185f249e035eb118e2939ae4a4670d.png
diff --git a/screenshot/images/ccbe2209cd62108f76c3fcd1a51c1039.png b/screenshot/images/ccbe2209cd62108f76c3fcd1a51c1039.png
diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.shadow.css b/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.shadow.css
@@ -285,13 +285,14 @@ That's why we set z-index 0 on the following elements.
   align-self: center;
   flex-shrink: 0;
   display: none;
-  transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
+  transition:
+    opacity var(--ld-sidenav-transition-duration-collapse-expand)
       var(--ld-sidenav-transition-delay-collapse-expand) linear,
     transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
 
   .ld-sidenav-navitem--collapsed & {
-    transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
-        linear,
+    transition:
+      opacity var(--ld-sidenav-transition-duration-collapse-expand) linear,
       transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
     opacity: 0;
     transform: translateX(var(--ld-sidenav-translate-x-delta));
@@ -394,51 +395,77 @@ That's why we set z-index 0 on the following elements.
 }
 
 .ld-sidenav-navitem__slot-container {
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  display: -webkit-box;
   margin-left: var(--ld-sp-12);
   margin-right: auto;
   max-height: var(--ld-sidenav-navitem-height); /* required in Safari */
-  text-overflow: ellipsis;
   line-height: var(--ld-sidenav-line-height);
-  transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
+  transition:
+    opacity var(--ld-sidenav-transition-duration-collapse-expand)
       var(--ld-sidenav-transition-delay-collapse-expand) linear,
     transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
-  overflow: hidden;
   padding-right: var(--ld-sp-4);
 
+  .ld-sidenav-navitem--secondary-icon & {
+    padding-right: var(--ld-sp-12);
+  }
+
   .ld-sidenav-navitem--collapsed & {
     opacity: 0;
     transform: translateX(var(--ld-sidenav-translate-x-delta));
-    transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
-        linear,
+    transition:
+      opacity var(--ld-sidenav-transition-duration-collapse-expand) linear,
       transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
   }
 
   .ld-sidenav-navitem--secondary &,
   .ld-sidenav-navitem--tertiary & {
-    padding: 0;
+    padding-left: 0;
   }
 }
 
+.ld-sidenav-navitem__mainline,
+.ld-sidenav-navitem__subline {
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  display: -webkit-box;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.ld-sidenav-navitem--subline .ld-sidenav-navitem__mainline,
+.ld-sidenav-navitem__subline {
+  -webkit-line-clamp: 1;
+  word-break: break-all;
+}
+
+.ld-sidenav-navitem__subline {
+  font: var(--ld-typo-body-s);
+  line-height: var(--ld-sidenav-line-height);
+  color: var(--ld-col-neutral-700);
+}
+
 .ld-sidenav-navitem__slot-icon-secondary-container {
   position: relative;
   display: flex;
   flex-shrink: 0;
   margin-right: var(--ld-sp-12);
   color: var(--ld-sidenav-navitem-secondary-icon-color);
-  transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
+  transition:
+    opacity var(--ld-sidenav-transition-duration-collapse-expand)
       var(--ld-sidenav-transition-delay-collapse-expand) linear,
     transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
 
   .ld-sidenav-navitem--collapsed & {
     opacity: 0;
     transform: translateX(var(--ld-sidenav-translate-x-delta));
-    transition: opacity var(--ld-sidenav-transition-duration-collapse-expand)
-        linear,
+    transition:
+      opacity var(--ld-sidenav-transition-duration-collapse-expand) linear,
       transform var(--ld-sidenav-transition-duration-collapse-expand) ease;
   }
+
+  .ld-sidenav-navitem--in-accordion & {
+    margin-right: var(--ld-sp-4);
+  }
 }
 
 .ld-sidenav-navitem__abbr {

diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.tsx b/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.tsx
@@ -31,7 +31,8 @@ export class LdSidenavNavitem implements InnerFocusable {
   private sidenav: HTMLLdSidenavElement
   private focusableElement: HTMLAnchorElement | HTMLButtonElement
   private tooltipRef: HTMLLdTooltipElement
-  private slotContainerRef: HTMLElement
+  private mainlineRef: HTMLElement
+  private sublineRef: HTMLElement
 
   /** Sets visual indicator to denote that the nav item is currently selected. */
   @Prop() selected? = false
@@ -75,7 +76,7 @@ export class LdSidenavNavitem implements InnerFocusable {
   /** Tooltip tether options object to be merged with the default options (optionally stringified). */
   @Prop() tetherOptions?: Partial<Tether.ITetherOptions> | string
 
-  /** Accepts an id of an ld-subnav component to navigate to it on click. */
+  /** Accepts an id of a ld-subnav component to navigate to it on click. */
   @Prop({ reflect: true }) to?: string
 
   /** Emitted on click if prop to is set. */
@@ -95,6 +96,8 @@ export class LdSidenavNavitem implements InnerFocusable {
   @State() secondaryIconHTML: string
   @State() closestTheme: string
   @State() themeClass: string
+  @State() hasSubline: boolean
+  @State() hasSecondaryIcon: boolean
 
   /**
    * Sets focus on the anchor or button
@@ -207,6 +210,10 @@ export class LdSidenavNavitem implements InnerFocusable {
     this.inAccordion = this.el.parentElement.tagName === 'LD-SIDENAV-ACCORDION'
     this.isAccordionToggle =
       this.inAccordion && this.el.getAttribute('slot') === 'toggle'
+    this.hasSubline = Boolean(this.el.querySelector('[slot="subline"]'))
+    this.hasSecondaryIcon = Boolean(
+      this.el.querySelector('[slot="icon-secondary"]')
+    )
     this.sidenav = closest('ld-sidenav', this.el)
     if (this.sidenav) {
       this.sidenavAlignement = this.sidenav.align
@@ -215,7 +222,7 @@ export class LdSidenavNavitem implements InnerFocusable {
       this.sidenavCollapsed = this.sidenav.collapsed
     }
     if (this.mode === 'primary') {
-      this.tooltipContent = this.el.textContent.trim()
+      this.tooltipContent = this.el.textContent.trim().split('\n')[0].trim()
 
       if (!this.el.querySelector('[slot="icon"]')) {
         this.abbreviation = this.getabbreviation()
@@ -233,10 +240,12 @@ export class LdSidenavNavitem implements InnerFocusable {
     //  case we use box-sizing and align-items which otherwhise do not
     //  effect the appearence of the element.
     setTimeout(() => {
-      this.slotContainerRef.style.boxSizing = 'border-box'
+      this.mainlineRef.style.boxSizing = 'border-box'
+      this.sublineRef.style.boxSizing = 'border-box'
     })
     setTimeout(() => {
-      this.slotContainerRef.style.alignItems = 'center'
+      this.mainlineRef.style.alignItems = 'center'
+      this.sublineRef.style.alignItems = 'center'
     }, 200)
 
     // The ldSidenavCollapsedChange event can be fired before this component is loaded.
@@ -251,6 +260,8 @@ export class LdSidenavNavitem implements InnerFocusable {
       'ld-sidenav-navitem',
       this.selected && 'ld-sidenav-navitem--selected',
       this.inAccordion && 'ld-sidenav-navitem--in-accordion',
+      this.hasSubline && 'ld-sidenav-navitem--subline',
+      this.hasSecondaryIcon && 'ld-sidenav-navitem--secondary-icon',
       this.rounded && 'ld-sidenav-navitem--rounded',
       this.mode !== 'primary' && `ld-sidenav-navitem--${this.mode}`,
       this.sidenavAlignement === 'right' && 'ld-sidenav-navitem--right-aligned',
@@ -336,12 +347,21 @@ export class LdSidenavNavitem implements InnerFocusable {
             </div>
           </ld-tooltip>
         </div>
-        <div
-          class="ld-sidenav-navitem__slot-container"
-          part="slot-container"
-          ref={(el) => (this.slotContainerRef = el)}
-        >
-          <slot></slot>
+        <div class="ld-sidenav-navitem__slot-container" part="slot-container">
+          <span
+            ref={(el) => (this.mainlineRef = el)}
+            class="ld-sidenav-navitem__mainline"
+            part="mainline"
+          >
+            <slot />
+          </span>
+          <span
+            ref={(el) => (this.sublineRef = el)}
+            class="ld-sidenav-navitem__subline"
+            part="subline"
+          >
+            <slot name="subline" />
+          </span>
         </div>
         <div class="ld-sidenav-navitem__slot-icon-secondary-container">
           {this.to ? (

diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-navitem/readme.md b/src/liquid/components/ld-sidenav/ld-sidenav-navitem/readme.md
@@ -269,25 +269,10 @@ body {
 
 ## Secondary icon
 
-{% example '{ "hasPadding": false, "styles": { "minHeight": "9.75rem", "position": "relative" } }' %}
+{% example '{ "hasPadding": false, "styles": { "minHeight": "4.625rem", "position": "relative" } }' %}
 <ld-sidenav open>
   <ld-sidenav-slider label="Outline of CS">
     <ld-sidenav-navitem>
-      <svg slot="icon" viewBox="0 0 32 32">
-        <g transform="scale(0.75) translate(5, 5)">
-          <path d="M8.40273 3.00317C16.3674 -1.08484 30.9212 8.31547 30.2215 17.1105C29.5219 25.9055 13.8966 33.1344 6.62487 28.4376C-0.650379 23.7238 0.431303 7.10139 8.40273 3.00317Z" fill="#2DBECD"/>
-          <path d="M4.69207 12.6056C6.77561 6.76982 18.5736 4.62074 22.3863 9.39108C26.199 14.1614 21.7368 25.211 15.842 26.2848C9.93739 27.3517 2.60995 18.4498 4.69207 12.6056Z" fill="#FFC832"/>
-          <path d="M11.2893 10.9795C13.2965 8.19935 19.898 8.87655 21.1887 11.9997C22.4793 15.1229 18.4039 20.3071 15.1055 19.9688C11.803 19.6253 9.28149 13.7644 11.2893 10.9795Z" fill="#0F69AF"/>
-        </g>
-      </svg>
-      Liquid Oxygen
-      <ld-icon slot="icon-secondary" name="bottle" size="sm" />
-    </ld-sidenav-navitem>
-    <ld-sidenav-navitem mode="secondary">
-      Liquid Oxygen
-      <ld-icon slot="icon-secondary" name="bottle" size="sm" />
-    </ld-sidenav-navitem>
-    <ld-sidenav-navitem mode="tertiary">
       Liquid Oxygen
       <ld-icon slot="icon-secondary" name="bottle" size="sm" />
     </ld-sidenav-navitem>
@@ -299,23 +284,32 @@ body {
 <LdSidenav open>
   <LdSidenavSlider label="Outline of CS">
     <LdSidenavNavitem>
-      <svg slot="icon" viewBox="0 0 32 32">
-        <g transform="scale(0.75) translate(5, 5)">
-          <path d="M8.40273 3.00317C16.3674 -1.08484 30.9212 8.31547 30.2215 17.1105C29.5219 25.9055 13.8966 33.1344 6.62487 28.4376C-0.650379 23.7238 0.431303 7.10139 8.40273 3.00317Z" fill="#2DBECD"/>
-          <path d="M4.69207 12.6056C6.77561 6.76982 18.5736 4.62074 22.3863 9.39108C26.199 14.1614 21.7368 25.211 15.842 26.2848C9.93739 27.3517 2.60995 18.4498 4.69207 12.6056Z" fill="#FFC832"/>
-          <path d="M11.2893 10.9795C13.2965 8.19935 19.898 8.87655 21.1887 11.9997C22.4793 15.1229 18.4039 20.3071 15.1055 19.9688C11.803 19.6253 9.28149 13.7644 11.2893 10.9795Z" fill="#0F69AF"/>
-        </g>
-      </svg>
       Liquid Oxygen
       <LdIcon slot="icon-secondary" name="bottle" size="sm" />
     </LdSidenavNavitem>
-    <LdSidenavNavitem mode="secondary">
+  </LdSidenavSlider>
+</LdSidenav>
+{% endexample %}
+
+## Secondary line
+
+{% example '{ "hasPadding": false, "styles": { "minHeight": "4.625rem", "position": "relative" } }' %}
+<ld-sidenav open>
+  <ld-sidenav-slider label="Outline of CS">
+    <ld-sidenav-navitem>
       Liquid Oxygen
-      <LdIcon slot="icon-secondary" name="bottle" size="sm" />
-    </LdSidenavNavitem>
-    <LdSidenavNavitem mode="tertiary">
+      <span slot="subline">The UI library</span>
+    </ld-sidenav-navitem>
+  </ld-sidenav-slider>
+</ld-sidenav>
+
+<!-- React component -->
+
+<LdSidenav open>
+  <LdSidenavSlider label="Outline of CS">
+    <LdSidenavNavitem>
       Liquid Oxygen
-      <LdIcon slot="icon-secondary" name="bottle" size="sm" />
+      <span slot="subline">The UI library</span>
     </LdSidenavNavitem>
   </LdSidenavSlider>
 </LdSidenav>
@@ -349,7 +343,7 @@ body {
 | `selected`      | `selected`        | Sets visual indicator to denote that the nav item is currently selected.                                                                                                                                                                                                                                                                                | `boolean`                                                                                                                                                                                                                                                                                                                                        | `false`     |
 | `target`        | `target`          | The `target` attributed can be used in conjunction with the `href` attribute. See [mdn docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target) for more information on the `target` attribute.                                                                                                                                   | `"_blank" \| "_parent" \| "_self" \| "_top"`                                                                                                                                                                                                                                                                                                     | `undefined` |
 | `tetherOptions` | `tether-options`  | Tooltip tether options object to be merged with the default options (optionally stringified).                                                                                                                                                                                                                                                           | `string \| { attachment?: string; bodyElement?: HTMLElement; classes?: { [className: string]: string \| boolean; }; classPrefix?: string; constraints?: ITetherConstraint[]; element?: any; enabled?: boolean; offset?: string; optimizations?: any; target?: any; targetAttachment?: string; targetOffset?: string; targetModifier?: string; }` | `undefined` |
-| `to`            | `to`              | Accepts an id of an ld-subnav component to navigate to it on click.                                                                                                                                                                                                                                                                                     | `string`                                                                                                                                                                                                                                                                                                                                         | `undefined` |
+| `to`            | `to`              | Accepts an id of a ld-subnav component to navigate to it on click.                                                                                                                                                                                                                                                                                      | `string`                                                                                                                                                                                                                                                                                                                                         | `undefined` |
 
 
 ## Events