fix(ld-sidenav): show secondary icon in tooltip and use theme color o…

…n icon
emdgroup-liquid · Apr 12, 2022 · e3153da · e3153da
1 parent 74ba4ba
commit e3153da
Show file tree

Hide file tree

Showing 6 changed files with 143 additions and 80 deletions.
diff --git a/screenshot/builds/master.json b/screenshot/builds/master.json
@@ -8974,6 +8974,19 @@
       "isLandscape": false,
       "isMobile": false
     },
+    {
+      "id": "87792f19",
+      "image": "a1f3e8fa5d5edca1e6011ca3fa6a5048.png",
+      "userAgent": "default",
+      "desc": "ld-sidenav with subnavigation shows tooltip with 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": "497f5f7d",
       "image": "73c44880030f2fe1b7bb633a5b3667e5.png",

diff --git a/screenshot/images/a1f3e8fa5d5edca1e6011ca3fa6a5048.png b/screenshot/images/a1f3e8fa5d5edca1e6011ca3fa6a5048.png
diff --git a/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.css b/src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.css
@@ -17,6 +17,7 @@
   --ld-sidenav-navitem-col-focus: var(--ld-thm-primary);
   --ld-sidenav-navitem-indicator-col: transparent;
   --ld-sidenav-navitem-indicator-col-focus: var(--ld-thm-primary-focus);
+  --ld-sidenav-navitem-secondary-icon-color: var(--ld-thm-primary);
 
   background-color: transparent;
   margin: 0 var(--ld-sidenav-padding-x);
@@ -340,9 +341,6 @@ That's why we set z-index 0 on the following elements.
     border-radius: var(--ld-br-full);
   }
 }
-.ld-sidenav-navitem__tooltip-content {
-  position: absolute;
-}
 
 .ld-sidenav-navitem__slot-container {
   -webkit-box-orient: vertical;
@@ -377,6 +375,7 @@ That's why we set z-index 0 on the following elements.
   display: flex;
   flex-shrink: 0;
   margin-right: var(--ld-sp-4);
+  color: var(--ld-sidenav-navitem-secondary-icon-color);
 }
 
 .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
@@ -75,6 +75,7 @@ export class LdSidenavNavitem implements InnerFocusable {
   @State() sidenavClosable: boolean
   @State() sidenavCollapsed: boolean
   @State() sidenavExpandsOnMouseEnter: boolean
+  @State() secondaryIconHTML: string
 
   /**
    * Sets focus on the anchor or button
@@ -133,6 +134,12 @@ export class LdSidenavNavitem implements InnerFocusable {
     ;(this.tooltipRef as unknown as LdTooltip)?.hideTooltip()
   }
 
+  private updateTooltipIcon = () => {
+    this.secondaryIconHTML = this.el.querySelector(
+      '[slot="icon-secondary"]'
+    )?.outerHTML
+  }
+
   componentWillLoad() {
     this.sidenav = closest('ld-sidenav', this.el)
     if (this.sidenav) {
@@ -210,30 +217,48 @@ export class LdSidenavNavitem implements InnerFocusable {
           )}
 
           <ld-tooltip
-            show-delay="250"
-            tag="span"
-            ref={(el) => (this.tooltipRef = el)}
+            arrow
             class="ld-sidenav-navitem__tooltip"
             disabled={!this.sidenavCollapsed}
-            arrow
+            ref={(el) => (this.tooltipRef = el)}
+            show-delay="250"
+            onMouseEnter={this.updateTooltipIcon}
             position={
               this.sidenavAlignement === 'left' ? 'right middle' : 'left middle'
             }
+            tag="span"
           >
             <div
               class="ld-sidenav-navitem__tooltip-trigger"
-              slot="trigger"
               onClick={this.onClick}
+              slot="trigger"
             />
-            <div class="ld-sidenav-navitem__tooltip-content">
+            <div
+              style={{
+                display: 'grid',
+                gridAutoFlow: 'column',
+                alignItems: 'center',
+              }}
+            >
               <ld-typo>{this.tooltipContent}</ld-typo>
+              {this.secondaryIconHTML && (
+                <span
+                  style={{
+                    color: 'var(--ld-thm-primary)',
+                    display: 'inline-flex',
+                    marginLeft: 'var(--ld-sp-6)',
+                  }}
+                  class="ld-sidenav-navitem__tooltip-icon"
+                  innerHTML={this.secondaryIconHTML}
+                />
+              )}
             </div>
           </ld-tooltip>
         </div>
         <div
-          ref={(el) => (this.slotContainerRef = el)}
           class="ld-sidenav-navitem__slot-container"
           part="slot-container"
+          ref={(el) => (this.slotContainerRef = el)}
         >
           <slot></slot>
         </div>