From 9b76778eb168e0ad301ad5706beeb6f36657232c Mon Sep 17 00:00:00 2001
From: Daniel Beck <daniel@beck.win>
Date: Sat, 21 May 2022 19:39:40 +0200
Subject: [PATCH] feat(tooltip): shadow parts and css variables

---
 packages/components/src/components/tooltip/readme.md   | 10 +++++++---
 packages/components/src/components/tooltip/tooltip.css | 10 +++++++---
 packages/components/src/components/tooltip/tooltip.tsx |  8 +++++---
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/components/tooltip/readme.md b/packages/components/src/components/tooltip/readme.md
index 4ffefb3ff2..9c7977963f 100644
--- 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
index 2761df04f5..5c859048cf 100644
--- 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
index 6d21f9ef6d..bd4d32457a 100644
--- 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>