feat(tooltip): shadow parts and css variables (#1072)

telekom · May 24, 2022 · 2232164 · 2232164
1 parent cf037b3
commit 2232164
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/packages/components/src/components/tooltip/readme.md b/packages/components/src/components/tooltip/readme.md
@@ -56,9 +56,13 @@ Type: `Promise<void>`
 
 ## Shadow Parts
 
-| Part     | Description |
-| -------- | ----------- |
-| `"base"` |             |
+| Part                   | Description |
+| ---------------------- | ----------- |
+| `"base"`               |             |
+| `"content-wrapper"`    |             |
+| `"host-container"`     |             |
+| `"slot-container"`     |             |
+| `"tooltip-positioner"` |             |
 
 
 ----------------------------------------------

diff --git a/packages/components/src/components/tooltip/tooltip.css b/packages/components/src/components/tooltip/tooltip.css
@@ -34,6 +34,10 @@
   --transition-timing-function-show: var(--telekom-motion-easing-standard);
   --z-index: var(--scl-z-index-70);
 
+  /*slot-container  */
+  --width-slot-container: max-content;
+  --height-slot-container: max-content;
+
   display: contents;
   position: relative;
   box-sizing: border-box;
@@ -44,9 +48,9 @@
   z-index: var(--z-index);
 }
 
-.slot-container {
-  width: max-content;
-  height: max-content;
+[part='slot-container'] {
+  width: var(--width-slot-container);
+  height: var(--height-slot-container);
 }
 
 .tooltip {

diff --git a/packages/components/src/components/tooltip/tooltip.tsx b/packages/components/src/components/tooltip/tooltip.tsx
@@ -153,7 +153,7 @@ export class Tooltip {
 
   getTarget() {
     const target = this.host.shadowRoot.querySelector(
-      '.slot-container'
+      '[part="slot-container"]'
     ) as HTMLElement;
 
     if (!target) {
@@ -239,17 +239,19 @@ export class Tooltip {
     return (
       <Host
         class="host-container"
+        part="host-container"
         onKeyDown={this.handleKeyDown}
         onMouseOver={this.handleMouseOver}
         onMouseOut={this.handleMouseOut}
       >
         {this.styles && <style>{this.styles}</style>}
-        <div class="slot-container">
+        <div part="slot-container">
           <slot onSlotchange={this.handleSlotChange}></slot>
         </div>
         {!this.disabled && (
           <div
             class="tooltip-positioner"
+            part="tooltip-positioner"
             ref={(el) => (this.tooltipPositioner = el)}
             onMouseOver={this.handleTooltipMouseOver}
           >
@@ -265,7 +267,7 @@ export class Tooltip {
               role="tooltip"
               aria-hidden={this.open ? 'false' : 'true'}
             >
-              <div class="content-wrapper" tabindex={0}>
+              <div class="content-wrapper" part="content-wrapper" tabindex={0}>
                 <slot name="content">{this.content}</slot>
               </div>
             </div>