feat(ld-tooltip): size small

screenshot/builds/master.json

@@ -8677,7 +8677,7 @@
     },
     {
       "id": "72ef711e",
-      "image": "00ac4a2773c5c94d717e927ab2798b7a.png",
+      "image": "0a85974edc92c3d3ca664763102e2a79.png",
       "userAgent": "default",
       "desc": "ld-sidenav nav item has a secondary icon",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8872,7 +8872,7 @@
     },
     {
       "id": "feb5e844",
-      "image": "ce58bd8017592fd646389ecc25e8db69.png",
+      "image": "a7225a7d9b894d3d256d26b76e034b0b.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation in subnavigation with back button shows shadow separator line at the top and bottom",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8898,7 +8898,7 @@
     },
     {
       "id": "9e3419f8",
-      "image": "a50b82e5b5be67f041f0087045e75437.png",
+      "image": "92efbc35a11276b332cb0e563fb05118.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation narrow mode shows tooltip on the left",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8911,7 +8911,7 @@
     },
     {
       "id": "f8ade095",
-      "image": "87eb2120721b6e157be5c96c8eed18d3.png",
+      "image": "edfbf1d6190dc3f14f8aacdd4f9fb17b.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation narrow mode shows tooltip on the right",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8924,7 +8924,7 @@
     },
     {
       "id": "5fae3b76",
-      "image": "779f0a84d25ef5c43baef10c829c89b8.png",
+      "image": "1c902caa3cb0db0ecebbb320d801b3f9.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation neutral mode uses neutral background color",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8963,7 +8963,7 @@
     },
     {
       "id": "e91a437e",
-      "image": "a3d90979a1d408c7d25ba0c4bdda6e6e.png",
+      "image": "0c683986491e1113f44465b14d8e8069.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation shows shadows shows shadow at the top and separator line at the bottom when scrolled to the bottom",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -8976,7 +8976,7 @@
     },
     {
       "id": "87792f19",
-      "image": "a1f3e8fa5d5edca1e6011ca3fa6a5048.png",
+      "image": "08732c6ebcd6fecfc05053d090e38341.png",
       "userAgent": "default",
       "desc": "ld-sidenav with subnavigation shows tooltip with icon",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -9067,7 +9067,7 @@
     },
     {
       "id": "6a1b6508",
-      "image": "a3099c97f30f4373397b9cdb48dc45d5.png",
+      "image": "9f6d62a80c8e7bcd6d48fcf022b2d579.png",
       "userAgent": "default",
       "desc": "ld-sidenav without subnavigation shows shadows shows shadow at the top and separator line at the bottom when scrolled to the bottom",
       "testPath": "./src/liquid/components/ld-sidenav/test/ld-sidenav.e2e.ts",
@@ -11937,6 +11937,19 @@
       "hasTouch": false,
       "isLandscape": false,
       "isMobile": false
+    },
+    {
+      "id": "b751c06f",
+      "image": "e353084a2c90360fd7a891373f707782.png",
+      "userAgent": "default",
+      "desc": "ld-tooltip size sm",
+      "testPath": "./src/liquid/components/ld-tooltip/test/ld-tooltip.e2e.ts",
+      "width": 600,
+      "height": 600,
+      "deviceScaleFactor": 1,
+      "hasTouch": false,
+      "isLandscape": false,
+      "isMobile": false
     }
   ]
 }

src/liquid/components/ld-sidenav/ld-sidenav-navitem/ld-sidenav-navitem.tsx

@@ -218,6 +218,7 @@ export class LdSidenavNavitem implements InnerFocusable {
 
           <ld-tooltip
             arrow
+            size="sm"
             class="ld-sidenav-navitem__tooltip"
             disabled={!this.sidenavCollapsed}
             ref={(el) => (this.tooltipRef = el)}

src/liquid/components/ld-tooltip/ld-tooltip-popper/ld-tooltip-popper.css

@@ -24,6 +24,8 @@
     --ld-tooltip-offset-x: 0px;
     --ld-tooltip-offset-y: 0px;
 
+    --ld-tooltip-padding: var(--ld-sp-16);
+
     /* colors */
     --tooltip-col: var(--ld-col-neutral-900);
     --tooltip-bg-col: var(--ld-col-wht);
@@ -42,13 +44,19 @@
     margin-top: var(--ld-tooltip-offset-y);
     max-width: var(--ld-tooltip-max-width);
     opacity: 0;
-    padding: var(--ld-sp-16);
+    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);
   }
 
+  &--sm {
+    :host(&) {
+      --ld-tooltip-padding: var(--ld-sp-6) var(--ld-sp-8);
+    }
+  }
+
   &--with-arrow {
     :host(&) {
       --ld-tooltip-arrow-size: 0.5rem;

src/liquid/components/ld-tooltip/ld-tooltip-popper/ld-tooltip-popper.tsx

@@ -14,6 +14,9 @@ export class LdTooltipPopper {
   /** Show arrow */
   @Prop() arrow: boolean
 
+  /** The tooltip size (effects tooltip padding only) */
+  @Prop() size?: 'sm'
+
   /** Event type that triggers the tooltip */
   @Prop() triggerType: 'click' | 'hover' = 'hover'
 
@@ -27,6 +30,7 @@ export class LdTooltipPopper {
           'ld-tooltip',
           this.arrow && 'ld-tooltip--with-arrow',
           this.hasDefaultTrigger && 'ld-tooltip--with-default-trigger',
+          this.size && `ld-tooltip--${this.size}`,
           this.triggerType === 'click' && 'ld-tooltip--interactive',
         ])}
         role="tooltip"

src/liquid/components/ld-tooltip/ld-tooltip.tsx

@@ -53,17 +53,20 @@ export class LdTooltip {
   /** Show arrow */
   @Prop() arrow: boolean
 
+  /** Disable tooltip trigger */
+  @Prop() disabled: boolean
+
   /** Delay in ms until tooltip hides (only when trigger type is 'hover') */
   @Prop() hideDelay = 0
 
+  /** Position of the tooltip relative to the trigger element (also affects the arrow position) */
+  @Prop() position: Position = 'top center'
+
   /** Delay in ms until tooltip shows (only when trigger type is 'hover') */
   @Prop() showDelay = 0
 
-  /** Disable tooltip trigger */
-  @Prop() disabled: boolean
-
-  /** Position of the tooltip relative to the trigger element (also affects the arrow position) */
-  @Prop() position: Position = 'top center'
+  /** The tooltip size (effects tooltip padding only) */
+  @Prop() size?: 'sm'
 
   /** The rendered HTML tag for the tooltip trigger. */
   @Prop() tag = 'button'
@@ -299,6 +302,7 @@ export class LdTooltip {
           hasDefaultTrigger={this.hasDefaultTrigger}
           id={this.idDescriber}
           part="popper"
+          size={this.size}
           ref={(element: HTMLElement) => {
             this.tooltipRef = element
           }}

src/liquid/components/ld-tooltip/readme.md

@@ -37,6 +37,17 @@ Tooltips provide additional information, mostly short paragraphs, and can be pla
 </ld-tooltip>
 {% endexample %}
 
+## Size
+
+{% example %}
+<ld-tooltip arrow>
+  <ld-typo>I'm the default size tooltip.</ld-typo>
+</ld-tooltip>
+<ld-tooltip arrow size="sm">
+  <ld-typo>I'm the small size tooltip.</ld-typo>
+</ld-tooltip>
+{% endexample %}
+
 ## With custom trigger
 
 {% example %}
@@ -232,6 +243,7 @@ Tooltips provide additional information, mostly short paragraphs, and can be pla
 | `position`    | `position`     | Position of the tooltip relative to the trigger element (also affects the arrow position) | `"bottom center" \| "bottom left" \| "bottom right" \| "left bottom" \| "left middle" \| "left top" \| "right bottom" \| "right middle" \| "right top" \| "top center" \| "top left" \| "top right"` | `'top center'` |
 | `ref`         | `ref`          | reference to component                                                                    | `any`                                                                                                                                                                                                | `undefined`    |
 | `showDelay`   | `show-delay`   | Delay in ms until tooltip shows (only when trigger type is 'hover')                       | `number`                                                                                                                                                                                             | `0`            |
+| `size`        | `size`         | The tooltip size (effects tooltip padding and font size)                                  | `"sm"`                                                                                                                                                                                               | `undefined`    |
 | `tag`         | `tag`          | The rendered HTML tag for the tooltip trigger.                                            | `string`                                                                                                                                                                                             | `'button'`     |
 | `triggerType` | `trigger-type` | Event type that triggers the tooltip                                                      | `"click" \| "hover"`                                                                                                                                                                                 | `'hover'`      |
 

src/liquid/components/ld-tooltip/test/ld-tooltip.e2e.ts

@@ -238,4 +238,19 @@ describe('ld-tooltip', () => {
       expect(results).toMatchScreenshot()
     })
   })
+
+  it('size sm', async () => {
+    const page = await getPageWithContent(
+      `<ld-tooltip size="sm">
+        <ld-typo>I'm the small size tooltip.</ld-typo>
+      </ld-tooltip>`,
+      { disableAllTransitions: true }
+    )
+    await page.keyboard.press('Tab')
+    await new Promise((resolve) => setTimeout(resolve, 200))
+
+    const results = await page.compareScreenshot()
+
+    expect(results).toMatchScreenshot()
+  })
 })