docs(storybook): document the trigger slot

Author: iOvergaard

packages/uui-popover/lib/uui-popover.element.ts

@@ -1,6 +1,7 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
+
 import { UUIPopoverEvent } from './UUIPopoverEvent';
 
 export type PopoverPlacement =
@@ -32,6 +33,7 @@ function mathClamp(value: number, min: number, max: number) {
  * @element uui-popover
  * @description Open a modal aligned with the opening element. This does not jet work within two layers of scroll containers.
  * @fires close - When popover is closed by user interaction.
+ * @slot trigger - The element that triggers the popover.
  */
 @defineElement('uui-popover')
 export class UUIPopoverElement extends LitElement {
@@ -76,11 +78,10 @@ export class UUIPopoverElement extends LitElement {
 
   /**
    * Define the placement of the popover-modal.
-   * @type {string}
    * @attr placement
    * @default 'bottom-start'
    */
-  @property({ type: String })
+  @property({ type: String, reflect: true })
   get placement(): PopoverPlacement {
     return this._placement;
   }

packages/uui-popover/lib/uui-popover.story.ts

@@ -226,7 +226,13 @@ export const Nested: Story = props => {
   `;
 };
 
-export const Tooltip: Story = () => {
+Nested.parameters = {
+  controls: {
+    include: ['placement', 'margin'],
+  },
+};
+
+export const Tooltip: Story = props => {
   const mouseover = (id: string) => {
     const popover = document.querySelector(id) as UUIPopoverElement;
     popover.open = true;
@@ -248,7 +254,7 @@ export const Tooltip: Story = () => {
             <uui-popover
               style="margin: auto"
               id="tooltip"
-              placement="auto"
+              placement="${props.placement}"
               margin="8">
               <b
                 slot="trigger"
@@ -270,7 +276,7 @@ export const Tooltip: Story = () => {
             <uui-popover
               style="margin: auto"
               id="tooltip-2"
-              placement="auto"
+              placement="${props.placement}"
               margin="8">
               <b
                 slot="trigger"
@@ -300,6 +306,16 @@ export const Tooltip: Story = () => {
   `;
 };
 
+Tooltip.args = {
+  placement: 'auto',
+};
+
+Tooltip.parameters = {
+  controls: {
+    include: ['placement', 'margin'],
+  },
+};
+
 Tooltip.play = () => {
   const content = document.getElementById('content');
   if (content) {