feat(ld-tooltip): add unstyled mode

emdgroup-liquid · Mar 30, 2023 · 6240637 · 6240637
1 parent 75da4a5
commit 6240637
Show file tree

Hide file tree

Showing 11 changed files with 897 additions and 373 deletions.
diff --git a/src/liquid/components/ld-sidenav/test/__snapshots__/ld-sidenav.spec.ts.snap b/src/liquid/components/ld-sidenav/test/__snapshots__/ld-sidenav.spec.ts.snap
diff --git a/src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts b/src/liquid/components/ld-sidenav/test/ld-sidenav.spec.ts
@@ -3,6 +3,7 @@ import { LdAccordion } from '../../ld-accordion/ld-accordion'
 jest.mock('../../../utils/focus')
 
 import MatchMediaMock from 'jest-matchmedia-mock'
+import { MockHTMLElement } from '@stencil/core/mock-doc'
 import { newSpecPage } from '@stencil/core/testing'
 import { LdAccordionSection } from '../../ld-accordion/ld-accordion-section/ld-accordion-section'
 import { LdAccordionToggle } from '../../ld-accordion/ld-accordion-toggle/ld-accordion-toggle'
@@ -74,6 +75,19 @@ const sidenavComponents = [
 ]
 
 describe('ld-sidenav', () => {
+  beforeAll(() => {
+    Object.defineProperty(MockHTMLElement.prototype, 'assignedElements', {
+      value: () => [],
+      configurable: true,
+      writable: true,
+    })
+    Object.defineProperty(MockHTMLElement.prototype, 'assignedNodes', {
+      value: () => [],
+      configurable: true,
+      writable: true,
+    })
+  })
+
   beforeEach(() => {
     matchMedia = new MatchMediaMock()
   })
@@ -389,8 +403,9 @@ describe('ld-sidenav', () => {
       const event = {
         type: 'click',
         isTrusted: true,
+        composedPath: () => [page.body],
       }
-      page.body.dispatchEvent(event as Event)
+      page.body.dispatchEvent(event as unknown as Event)
       await page.waitForChanges()
       expect(ldSidenav).toHaveClass('ld-sidenav--collapsed')
 
@@ -441,8 +456,9 @@ describe('ld-sidenav', () => {
       const event = {
         type: 'click',
         isTrusted: true,
+        composedPath: () => [page.body],
       }
-      page.body.dispatchEvent(event as Event)
+      page.body.dispatchEvent(event as unknown as Event)
       await page.waitForChanges()
       expect(ldSidenav).toHaveClass('ld-sidenav--collapsed')
 
@@ -487,8 +503,9 @@ describe('ld-sidenav', () => {
       const event = {
         type: 'click',
         isTrusted: true,
+        composedPath: () => [page.body],
       }
-      page.body.dispatchEvent(event as Event)
+      page.body.dispatchEvent(event as unknown as Event)
       await page.waitForChanges()
       expect(ldSidenav).toHaveClass('ld-sidenav--collapsed')
 

diff --git a/src/liquid/components/ld-tooltip/ld-tooltip-popper/ld-tooltip-popper.shadow.css b/src/liquid/components/ld-tooltip/ld-tooltip-popper/ld-tooltip-popper.shadow.css
@@ -33,21 +33,26 @@
 
     animation: ld-tooltip-hide 0s ease var(--ld-tooltip-animation-duration);
     animation-fill-mode: forwards;
-    background-color: var(--tooltip-bg-col);
-    border-radius: var(--ld-br-m);
-    color: var(--tooltip-col);
-    filter: var(--ld-drop-shadow-hover);
     margin-left: var(--ld-tooltip-offset-x);
     margin-top: var(--ld-tooltip-offset-y);
     max-width: var(--ld-tooltip-max-width);
     opacity: 0;
-    padding: var(--ld-tooltip-padding);
     pointer-events: none;
     position: relative;
     transition: opacity var(--ld-tooltip-animation-duration) ease-in;
     z-index: var(--ld-zi-max);
   }
 
+  &:not(.ld-tooltip--unstyled) {
+    :host(&) {
+      background-color: var(--tooltip-bg-col);
+      border-radius: var(--ld-br-m);
+      color: var(--tooltip-col);
+      filter: var(--ld-drop-shadow-hover);
+      padding: var(--ld-tooltip-padding);
+    }
+  }
+
   &--initialized {
     :host(&) {
       @media (prefers-reduced-motion: no-preference) {

diff --git a/src/liquid/components/ld-tooltip/ld-tooltip-popper/ld-tooltip-popper.tsx b/src/liquid/components/ld-tooltip/ld-tooltip-popper/ld-tooltip-popper.tsx
@@ -21,6 +21,9 @@ export class LdTooltipPopper {
   /** Event type that triggers the tooltip */
   @Prop() triggerType?: 'click' | 'hover' = 'hover'
 
+  /** Render the tooltip without visual styling. */
+  @Prop() unstyled? = false
+
   /** Whether the tooltip has a custom trigger or not */
   @Prop() hasDefaultTrigger?: boolean
 
@@ -40,6 +43,7 @@ export class LdTooltipPopper {
           this.initialized && 'ld-tooltip--initialized',
           this.size && `ld-tooltip--${this.size}`,
           this.triggerType === 'click' && 'ld-tooltip--interactive',
+          this.unstyled && 'ld-tooltip--unstyled',
         ])}
         role="tooltip"
       >

diff --git a/src/liquid/components/ld-tooltip/ld-tooltip.shadow.css b/src/liquid/components/ld-tooltip/ld-tooltip.shadow.css
@@ -24,7 +24,7 @@
     color: var(--ld-tooltip-trigger-icon-col-hover);
   }
 
-  + .ld-tooltip {
+  ~ .ld-tooltip {
     opacity: 0;
     position: absolute;
     display: none;
@@ -37,3 +37,7 @@
   height: var(--ld-sp-16);
   width: var(--ld-sp-16);
 }
+
+.ld-tooltip__content {
+  display: none;
+}