From 3b6a756c48f32d55b6f19a8d9486f0d3de8e845e Mon Sep 17 00:00:00 2001 From: MariaLStefan <103122411+MariaLStefan@users.noreply.github.com> Date: Thu, 7 Sep 2023 12:58:29 +0200 Subject: [PATCH] style(elements|ino-popover): update design (#974) BREAKING CHANGE: The `colorScheme` was updated with its possibilities now being `light`, `dark`, and `primary` (default). The equivalent of the old `transparent` option is `light` and needs to be updated accordingly. --- .../src/directives/proxies.ts | 4 +- packages/elements-vue/src/proxies.ts | 1 + packages/elements/src/components.d.ts | 22 ++- .../src/components/base/_tooltip-base.scss | 55 +++++++ .../ino-markdown-editor.tsx | 2 +- .../src/components/ino-menu/ino-menu.tsx | 4 +- .../components/ino-popover/ino-popover.scss | 25 +--- .../components/ino-popover/ino-popover.tsx | 43 +++--- .../src/components/ino-popover/readme.md | 5 +- .../ino-table-header-cell.tsx | 8 +- .../components/ino-tooltip/ino-tooltip.tsx | 1 + .../src/components/ino-tooltip/mixins.scss | 2 +- packages/elements/src/components/types.ts | 4 +- .../layout/header/desktop/navbar.tsx | 2 +- packages/landingpage/next-env.d.ts | 5 + packages/storybook/elements-stencil-docs.json | 31 +++- .../src/stories/ino-popover/ino-popover.scss | 44 ++---- .../ino-popover/ino-popover.stories.ts | 137 +++++++++++++++--- 18 files changed, 281 insertions(+), 114 deletions(-) create mode 100644 packages/elements/src/components/base/_tooltip-base.scss create mode 100644 packages/landingpage/next-env.d.ts diff --git a/packages/elements-angular/src/directives/proxies.ts b/packages/elements-angular/src/directives/proxies.ts index c486acc6ae..ce29589aa2 100644 --- a/packages/elements-angular/src/directives/proxies.ts +++ b/packages/elements-angular/src/directives/proxies.ts @@ -816,14 +816,14 @@ and emits with `false` when the target or the outside is clicked. @ProxyCmp({ defineCustomElementFn: undefined, - inputs: ['attachToBody', 'colorScheme', 'controlled', 'delay', 'distance', 'followCursor', 'for', 'hideOnBlur', 'hideOnEsc', 'interactive', 'placement', 'trigger', 'visible'], + inputs: ['arrow', 'attachToBody', 'colorScheme', 'controlled', 'delay', 'distance', 'followCursor', 'for', 'hideOnBlur', 'hideOnEsc', 'interactive', 'placement', 'trigger', 'visible'], methods: ['getTippyInstance'] }) @Component({ selector: 'ino-popover', changeDetection: ChangeDetectionStrategy.OnPush, template: '', - inputs: ['attachToBody', 'colorScheme', 'controlled', 'delay', 'distance', 'followCursor', 'for', 'hideOnBlur', 'hideOnEsc', 'interactive', 'placement', 'trigger', 'visible'] + inputs: ['arrow', 'attachToBody', 'colorScheme', 'controlled', 'delay', 'distance', 'followCursor', 'for', 'hideOnBlur', 'hideOnEsc', 'interactive', 'placement', 'trigger', 'visible'] }) export class InoPopover { protected el: HTMLElement; diff --git a/packages/elements-vue/src/proxies.ts b/packages/elements-vue/src/proxies.ts index 5952ed3f72..2be266b244 100644 --- a/packages/elements-vue/src/proxies.ts +++ b/packages/elements-vue/src/proxies.ts @@ -353,6 +353,7 @@ export const InoOptionGroup = /*@__PURE__*/ defineContainer( export const InoPopover = /*@__PURE__*/ defineContainer('ino-popover', undefined, [ 'placement', + 'arrow', 'attachToBody', 'for', 'hideOnBlur', diff --git a/packages/elements/src/components.d.ts b/packages/elements/src/components.d.ts index 23640c122b..14150448be 100644 --- a/packages/elements/src/components.d.ts +++ b/packages/elements/src/components.d.ts @@ -5,7 +5,7 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { Alignment, ButtonType, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarType, SpinnerType, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types"; +import { Alignment, ButtonType, ChipSurface, DialogCloseAction, DialogSubmitAction, HorizontalLocation, ImageDecodingTypes, InputType, KeyValue, Locations, NavDrawerAnchor, NavDrawerLabels, NavDrawerVariant, SnackbarType, SpinnerType, TippyThemes, TooltipTrigger, UserInputInterceptor, VerticalLocation, ViewModeUnion } from "./components/types"; import { Variants } from "./components/ino-button/ino-button"; import { PickerTypeKeys } from "./components/ino-datepicker/picker-factory"; import { Placement, Props } from "tippy.js"; @@ -883,20 +883,24 @@ export namespace Components { "label"?: string; } interface InoPopover { + /** + * Shows an arrow pointing towards its trigger-element + */ + "arrow": boolean; /** * If set, attaches the popover element to the body. Useful to avoid overflow or z-index issues. */ "attachToBody": boolean; /** - * Sets the color scheme of the popup Valid options include: 'primary', 'transparent' + * Sets the color scheme of the popup. Valid options include: `primary`, `light` and `dark`. */ - "colorScheme": 'primary' | 'transparent'; + "colorScheme": TippyThemes; /** * Used to indicate if the popover should be controlled by itself (`false`) or manually by the `visible` property (`true`) */ "controlled": boolean; /** - * The delay in milliseconds before `ino-tooltip` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms. + * The delay in milliseconds before `ino-popover` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms. */ "delay"?: number | [number, number]; /** @@ -2767,20 +2771,24 @@ declare namespace LocalJSX { "label"?: string; } interface InoPopover { + /** + * Shows an arrow pointing towards its trigger-element + */ + "arrow"?: boolean; /** * If set, attaches the popover element to the body. Useful to avoid overflow or z-index issues. */ "attachToBody"?: boolean; /** - * Sets the color scheme of the popup Valid options include: 'primary', 'transparent' + * Sets the color scheme of the popup. Valid options include: `primary`, `light` and `dark`. */ - "colorScheme"?: 'primary' | 'transparent'; + "colorScheme"?: TippyThemes; /** * Used to indicate if the popover should be controlled by itself (`false`) or manually by the `visible` property (`true`) */ "controlled"?: boolean; /** - * The delay in milliseconds before `ino-tooltip` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms. + * The delay in milliseconds before `ino-popover` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms. */ "delay"?: number | [number, number]; /** diff --git a/packages/elements/src/components/base/_tooltip-base.scss b/packages/elements/src/components/base/_tooltip-base.scss new file mode 100644 index 0000000000..b5a6e07197 --- /dev/null +++ b/packages/elements/src/components/base/_tooltip-base.scss @@ -0,0 +1,55 @@ +@use '../base/mdc-customize'; +@use './new-theme' as theme; +@import '~tippy.js/animations/scale-subtle.css'; +@import '~tippy.js/dist/svg-arrow.css'; +@import '~tippy.js/dist/tippy.css'; +@import '../base/typography'; + +$border-radius: 10px; +$shadow-color: rgba(93, 91, 105, 0.3); + +@mixin tooltip($background-color, $font-color) { + background: $background-color; + color: $font-color; + + & .tippy-content { + background-color: $background-color; + } + + & > .tippy-svg-arrow { + fill: $background-color; + + svg { + fill: $background-color; + } + } +} + +// global styles +.tippy-box { + @include font(sans-serif, m, regular); + border-radius: $border-radius; + z-index: 9999; +} + +.tippy-content { + border-radius: $border-radius; +} + +// set up custom themes for tippy.js +.tippy-box[data-theme~='light'] { + box-shadow: 0 0 15px 0 $shadow-color; + @include tooltip(theme.$white, theme.$black); + + & > .tippy-svg-arrow svg { + filter: drop-shadow(0 -6px 3px $shadow-color); + } +} + +.tippy-box[data-theme~='dark'] { + @include tooltip(theme.$n-9, theme.$white); +} + +.tippy-box[data-theme~='primary'] { + @include tooltip(theme.$p-3, theme.$p-6); +} diff --git a/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx b/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx index 23c4fc95cf..cdd0b77f64 100644 --- a/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx +++ b/packages/elements/src/components/ino-markdown-editor/ino-markdown-editor.tsx @@ -308,7 +308,7 @@ export class MarkdownEditor implements ComponentInterface { {this.errorMessage} diff --git a/packages/elements/src/components/ino-menu/ino-menu.tsx b/packages/elements/src/components/ino-menu/ino-menu.tsx index e807e7c36b..56c6225dfd 100644 --- a/packages/elements/src/components/ino-menu/ino-menu.tsx +++ b/packages/elements/src/components/ino-menu/ino-menu.tsx @@ -57,9 +57,9 @@ export class Menu implements ComponentInterface { return ( (this.popoverEl = el)} - color-scheme="transparent" - interactive + interactive={true} for={this.el.parentElement.id} placement={this.placement} trigger={'click'} diff --git a/packages/elements/src/components/ino-popover/ino-popover.scss b/packages/elements/src/components/ino-popover/ino-popover.scss index dd7b8c58dd..a181bc6a57 100644 --- a/packages/elements/src/components/ino-popover/ino-popover.scss +++ b/packages/elements/src/components/ino-popover/ino-popover.scss @@ -1,23 +1,6 @@ -@use '../base/mdc-customize'; -@use '../ino-tooltip/mixins' as tooltip-mixins; -@use '../base/theme'; -@import '~tippy.js/animations/scale-subtle.css'; +// ino-popover & ino-tooltip use the same base-design +@use '../base/tooltip-base'; -$color-schemes: 'primary', 'secondary', 'light'; - -.ino-popover > * { - border-radius: 6px; -} - -@each $color in $color-schemes { - .ino-popover.ino-popover--color-scheme-#{$color} > * { - @include tooltip-mixins.tooltip( - theme.color($color, light), - theme.color($color, contrast) - ); - } -} - -.ino-popover.ino-popover--color-scheme-transparent > * { - @include tooltip-mixins.tooltip(#fff, theme.color(dark)); +.tippy-content { + padding: 0; } diff --git a/packages/elements/src/components/ino-popover/ino-popover.tsx b/packages/elements/src/components/ino-popover/ino-popover.tsx index 359ef1833d..311d2fc271 100644 --- a/packages/elements/src/components/ino-popover/ino-popover.tsx +++ b/packages/elements/src/components/ino-popover/ino-popover.tsx @@ -12,13 +12,14 @@ import { } from '@stencil/core'; import classNames from 'classnames'; import TippyJS, { + followCursor, Instance as Tippy, Placement, Props, - followCursor, + roundArrow, } from 'tippy.js'; import { getSlotContent } from '../../util/component-utils'; -import { TooltipTrigger } from '../types'; +import { TippyThemes, TooltipTrigger } from '../types'; import { closest } from '@material/dom/ponyfill'; import { hideOnEsc, hideOnPopperBlur } from './plugins'; @@ -53,6 +54,11 @@ export class Popover implements ComponentInterface { }); } + /** + * Shows an arrow pointing towards its trigger-element + */ + @Prop() arrow = false; + /** * If set, attaches the popover element to the body. * Useful to avoid overflow or z-index issues. @@ -110,11 +116,11 @@ export class Popover implements ComponentInterface { } /** - * Sets the color scheme of the popup - * Valid options include: 'primary', 'transparent' + * Sets the color scheme of the popup. + * + * Valid options include: `primary`, `light` and `dark`. */ - @Prop() colorScheme: 'primary' | 'transparent' = - 'primary'; + @Prop() colorScheme: TippyThemes = 'primary'; /** * Use this if you want to interact with the popover content (e.g. button clicks) @@ -150,7 +156,7 @@ export class Popover implements ComponentInterface { } /** - * The delay in milliseconds before `ino-tooltip` shows up or hides. + * The delay in milliseconds before `ino-popover` shows up or hides. * * If only one number is given, the show and hide delay get the given delay duration. * @@ -164,8 +170,8 @@ export class Popover implements ComponentInterface { @Watch('delay') onDelayChange() { this.tippyInstance?.setProps({ - delay: this.delay - }) + delay: this.delay, + }); } /** @@ -233,17 +239,22 @@ export class Popover implements ComponentInterface { plugins.push(hideOnEsc); } - // in HTML to check if "false" was provided - const shouldFollowCursor = this.followCursor && (this.followCursor as any) !== "false"; + const shouldFollowCursor = + (typeof this.followCursor == 'boolean' && this.followCursor) || + ['horizontal', 'vertical', 'initial'].includes( + this.followCursor as string + ); - if(shouldFollowCursor) { - plugins.push(followCursor) + if (shouldFollowCursor) { + plugins.push(followCursor); } const options: Partial = { allowHTML: true, + theme: this.colorScheme, animation: 'scale-subtle', appendTo: this.attachToBody ? document.body : this.popoverContainer, + arrow: this.arrow ? roundArrow : false, content: this.popoverContent, duration: 100, delay: this.delay, @@ -335,11 +346,7 @@ export class Popover implements ComponentInterface { } render() { - const popoverClasses = classNames( - 'ino-popover', - `ino-popover--color-scheme-${this.colorScheme}`, - 'ino-popover__content' - ); + const popoverClasses = classNames('ino-popover', 'ino-popover__content'); return ( diff --git a/packages/elements/src/components/ino-popover/readme.md b/packages/elements/src/components/ino-popover/readme.md index ad2450bebf..2d0a179f88 100644 --- a/packages/elements/src/components/ino-popover/readme.md +++ b/packages/elements/src/components/ino-popover/readme.md @@ -204,10 +204,11 @@ class MyComponent extends Component { | Property | Attribute | Description | Type | Default | | -------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | +| `arrow` | `arrow` | Shows an arrow pointing towards its trigger-element | `boolean` | `false` | | `attachToBody` | `attach-to-body` | If set, attaches the popover element to the body. Useful to avoid overflow or z-index issues. | `boolean` | `false` | -| `colorScheme` | `color-scheme` | Sets the color scheme of the popup Valid options include: 'primary', 'transparent' | `"primary" \| "transparent"` | `'primary'` | +| `colorScheme` | `color-scheme` | Sets the color scheme of the popup. Valid options include: `primary`, `light` and `dark`. | `"dark" \| "light" \| "primary"` | `'primary'` | | `controlled` | `controlled` | Used to indicate if the popover should be controlled by itself (`false`) or manually by the `visible` property (`true`) | `boolean` | `false` | -| `delay` | `delay` | The delay in milliseconds before `ino-tooltip` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms. | `[number, number] \| number` | `0` | +| `delay` | `delay` | The delay in milliseconds before `ino-popover` shows up or hides. If only one number is given, the show and hide delay get the given delay duration. If two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms. Defaults to 0ms. | `[number, number] \| number` | `0` | | `distance` | `distance` | Displaces the popover away from, or toward, the anchor element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the anchor. | `number` | `10` | | `followCursor` | `follow-cursor` | Determines if and how the popover follows the user's mouse cursor. | `"horizontal" \| "initial" \| "vertical" \| boolean` | `false` | | `for` | `for` | The target id the popover belongs to. If not given, the popover is attached to the element provided in the named slot (`popover-trigger`) or the parent component if a slot element does not exist. | `string` | `undefined` | diff --git a/packages/elements/src/components/ino-table-header-cell/ino-table-header-cell.tsx b/packages/elements/src/components/ino-table-header-cell/ino-table-header-cell.tsx index b579a4206b..88d7c4df51 100644 --- a/packages/elements/src/components/ino-table-header-cell/ino-table-header-cell.tsx +++ b/packages/elements/src/components/ino-table-header-cell/ino-table-header-cell.tsx @@ -216,16 +216,16 @@ export class InoTableHeaderCell implements ComponentInterface { (this.searchActivated = e.detail)} ref={popover => (this.popoverElement = popover as HTMLInoPopoverElement) } - interactive + interactive={true} distance={8} - hideOnBlur + hideOnBlur={true} >
{subRoutes.map(({ key: subRouteName, url: subRouteUrl }) => ( diff --git a/packages/landingpage/next-env.d.ts b/packages/landingpage/next-env.d.ts new file mode 100644 index 0000000000..4f11a03dc6 --- /dev/null +++ b/packages/landingpage/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/packages/storybook/elements-stencil-docs.json b/packages/storybook/elements-stencil-docs.json index 5910650728..4904b65ca9 100644 --- a/packages/storybook/elements-stencil-docs.json +++ b/packages/storybook/elements-stencil-docs.json @@ -5577,6 +5577,23 @@ ] }, "props": [ + { + "name": "arrow", + "type": "boolean", + "mutable": false, + "attr": "arrow", + "reflectToAttr": false, + "docs": "Shows an arrow pointing towards its trigger-element", + "docsTags": [], + "default": "false", + "values": [ + { + "type": "boolean" + } + ], + "optional": false, + "required": false + }, { "name": "attachToBody", "type": "boolean", @@ -5596,20 +5613,24 @@ }, { "name": "colorScheme", - "type": "\"primary\" | \"transparent\"", + "type": "\"dark\" | \"light\" | \"primary\"", "mutable": false, "attr": "color-scheme", "reflectToAttr": false, - "docs": "Sets the color scheme of the popup\nValid options include: 'primary', 'transparent'", + "docs": "Sets the color scheme of the popup.\n\nValid options include: `primary`, `light` and `dark`.", "docsTags": [], "default": "'primary'", "values": [ { - "value": "primary", + "value": "dark", "type": "string" }, { - "value": "transparent", + "value": "light", + "type": "string" + }, + { + "value": "primary", "type": "string" } ], @@ -5639,7 +5660,7 @@ "mutable": false, "attr": "delay", "reflectToAttr": false, - "docs": "The delay in milliseconds before `ino-tooltip` shows up or hides.\n\nIf only one number is given, the show and hide delay get the given delay duration.\n\nIf two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms.\n\nDefaults to 0ms.", + "docs": "The delay in milliseconds before `ino-popover` shows up or hides.\n\nIf only one number is given, the show and hide delay get the given delay duration.\n\nIf two numbers are given e.g. `[500, 200]` the show delay is 500ms and the hide delay is 200ms.\n\nDefaults to 0ms.", "docsTags": [], "default": "0", "values": [ diff --git a/packages/storybook/src/stories/ino-popover/ino-popover.scss b/packages/storybook/src/stories/ino-popover/ino-popover.scss index 381c8f0b8b..3edfbf4f09 100644 --- a/packages/storybook/src/stories/ino-popover/ino-popover.scss +++ b/packages/storybook/src/stories/ino-popover/ino-popover.scss @@ -1,36 +1,24 @@ .story-ino-popover { display: flex; - align-items: center; + align-items: flex-end; justify-content: center; - padding: 80px; + gap: 1rem; + height: 130px; - ino-button { - margin: 0 12px 12px 0; + &:has(ino-button.styled-placement) { + align-items: center; + justify-content: flex-start; } - ino-popover p { - padding-left: 8px; - padding-right: 8px; - } - - .popover-content { - padding: 10px; - display: flex; - flex-direction: row; - } - - .styled-popover { - padding: 24px; - display: flex; - justify-content: space-between; - column-gap: 10px; - } - - .interactive-popover { - width: 300px; - padding: 10px; - display: flex; - flex-direction: column; - row-gap: 5px; + &:has(ino-button.big-space) { + height: 250px; } } + +.interactive-popover { + width: 300px; + padding: 10px; + display: flex; + flex-direction: column; + row-gap: 5px; +} \ No newline at end of file diff --git a/packages/storybook/src/stories/ino-popover/ino-popover.stories.ts b/packages/storybook/src/stories/ino-popover/ino-popover.stories.ts index 784ec10fd0..ad55b03e28 100644 --- a/packages/storybook/src/stories/ino-popover/ino-popover.stories.ts +++ b/packages/storybook/src/stories/ino-popover/ino-popover.stories.ts @@ -39,55 +39,72 @@ export default { control: { type: 'select', }, - options: ['primary', 'secondary', 'light', 'transparent'], + options: ['light', 'dark', 'primary'], }, delay: { control: { type: 'object', }, }, + followCursor: { + control: { + type: 'radio', + }, + options: [true, false, 'initial', 'horizontal', 'vertical'], + }, }, args: { controlled: false, - distance: 10, + distance: 15, for: 'popover-target', interactive: false, placement: 'top', - trigger: 'mouseenter focus', - colorScheme: 'transparent', + trigger: 'mouseenter', + colorScheme: 'light', visible: false, hideOnEsc: false, hideOnBlur: false, delay: 0, + arrow: false, + placementClass: '', + headerText: '', }, } as Meta; let POPOVER_COUNTER = 1; -const template = new TemplateGenerator( +type InoPopoverExtended = Components.InoPopover & { + placementClass: string; +} + +const template = new TemplateGenerator( 'ino-popover', (args) => { const id = `popover-${POPOVER_COUNTER++}`; return html` - Popover + Popover -
- - This is a styled popover. +
+

Popovers are complex tooltips.

+ + Able to contain other HTML-Elements? + +
`; @@ -95,16 +112,87 @@ const template = new TemplateGenerator( ); export const Playground = template.generatePlaygroundStory(); -export const Placement = template.generateStoryForProp('placement', 'right'); +export const Arrow = template.generateStoryForProp('arrow', true); +export const Placement = template.generateStoryForProp('placement', 'right', { + placementClass: "styled-placement" +}); + export const AttachToBody = template.generateStoryForProp('attachToBody', true); export const Distance = template.generateStoryForProp('distance', 30); -export const ColorScheme = template.generateStoryForProp( - 'colorScheme', - 'transparent' +const templateColors = new TemplateGenerator( + 'ino-popover', + (args) => { + + const idLight = 'popover-light'; + const idDark = 'popover-dark'; + const idPrimary = 'popover-primary' + + const content = html`

Lorem ipsum do lor sit amet, con sete tur amet ipsum do, con sete tur amet ipsum do.

` + + return html` + Light + + ${content} + + Dark + + ${content} + + Primary + + ${content} + + `; + } ); +export const ColorSchemes = templateColors.generateStoryForProp('colorScheme', 'light'); + + export const Trigger = template.generateStoryForProp('trigger', 'click'); export const FollowCursor = template.generateStoryForProp( @@ -112,21 +200,22 @@ export const FollowCursor = template.generateStoryForProp( 'horizontal' ); -const templateInteractive = new TemplateGenerator( +const templateInteractive = new TemplateGenerator( 'ino-popover', () => html`

I'm interactive. You can click me without closing this popover!

Button not closing the popover
- Interactive Content ` @@ -137,10 +226,10 @@ export const Interactions = templateInteractive.generateStoryForProp( true ); -const templateControlledPopover = new TemplateGenerator( +const templateControlledPopover = new TemplateGenerator( 'ino-popover', () => { - const eventHandler = (e) => { + const eventHandler = (e: any) => { e.target?.setAttribute('visible', e.detail); (document.querySelector( '#controlled-checkbox' @@ -150,16 +239,22 @@ const templateControlledPopover = new TemplateGenerator( return html` Uncheck to hide / check to show -
I'm a controlled popover
+
+ + Programmatically shown? + + +
`; }