From 8ea76e0b227ea903236a4b648d20443a4ce76c88 Mon Sep 17 00:00:00 2001 From: b1aserlu <141234680+b1aserlu@users.noreply.github.com> Date: Tue, 12 Dec 2023 16:39:26 +0100 Subject: [PATCH 1/9] feat(components): updates tooltip component --- .changeset/witty-walls-laugh.md | 11 ++++++++ packages/components/src/components.d.ts | 8 ++++++ .../components/post-tooltip/post-tooltip.scss | 3 ++- .../components/post-tooltip/post-tooltip.tsx | 27 +++++++++++++------ .../src/components/post-tooltip/readme.md | 1 + .../components/tooltip/tooltip.stories.ts | 1 + 6 files changed, 42 insertions(+), 9 deletions(-) create mode 100644 .changeset/witty-walls-laugh.md diff --git a/.changeset/witty-walls-laugh.md b/.changeset/witty-walls-laugh.md new file mode 100644 index 0000000000..26e8b3ba76 --- /dev/null +++ b/.changeset/witty-walls-laugh.md @@ -0,0 +1,11 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-components': minor +--- + +Updated tooltip to better match the description in figma. + +- added a new property that defines wheter or not the arrow is rendered. +- set minHeight to 32px +- set maxWidht to 200px +- upated storybook documentation diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 8b6cebcb15..e99c372e54 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -151,6 +151,10 @@ export namespace Components { * @param force Pass true to always show or false to always hide */ "toggle": (target: HTMLElement, force?: boolean) => Promise; + /** + * Defines wheter an Arrow is rendered or not. true: arrow is rendered false: arrow is not rendered + */ + "withArrow"?: boolean; } } export interface PostAlertCustomEvent extends CustomEvent { @@ -372,6 +376,10 @@ declare namespace LocalJSX { * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. */ "placement"?: Placement; + /** + * Defines wheter an Arrow is rendered or not. true: arrow is rendered false: arrow is not rendered + */ + "withArrow"?: boolean; } interface IntrinsicElements { "post-accordion": PostAccordion; diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss index 6f94a8463f..d22b5ca82e 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.scss +++ b/packages/components/src/components/post-tooltip/post-tooltip.scss @@ -15,7 +15,8 @@ div { z-index: commons.$zindex-tooltip; width: max-content; - max-width: 30ch; + max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini; + min-height: spacing.$size-regular; margin: 0; padding: spacing.$size-micro spacing.$size-mini; diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx index 90c5134c4b..19433dff5b 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.tsx +++ b/packages/components/src/components/post-tooltip/post-tooltip.tsx @@ -58,6 +58,13 @@ export class PostTooltip { */ @Prop() readonly backgroundColor?: BackgroundColor = 'primary'; + /** + * Defines wheter an Arrow is rendered or not. + * true: arrow is rendered + * false: arrow is not rendered + */ + @Prop() readonly withArrow?: boolean = false; + /** * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted @@ -101,7 +108,7 @@ export class PostTooltip { connectedCallback() { if (!this.host.id) { throw new Error( - 'No id set: must have an id, linking it to it\'s target element using the data-tooltip-target attribute.', + "No id set: must have an id, linking it to it's target element using the data-tooltip-target attribute.", ); } @@ -237,7 +244,7 @@ export class PostTooltip { flip(), inline(), shift({ padding: 8 }), - offset(12), // 4px outside of element to account for focus outline + ~arrow size + offset(this.withArrow ? 12 : 4), // 4px outside of element to account for focus outline + ~arrow size arrow({ element: this.arrowRef, padding: 8 }), ], }); @@ -268,12 +275,16 @@ export class PostTooltip { class={this.tooltipClasses} ref={(el: HTMLDivElement & PopoverElement) => (this.tooltipRef = el)} > - { - this.arrowRef = el; - }} - > + {this.withArrow ? ( + { + this.arrowRef = el; + }} + > + ) : ( + '' + )} diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md index caff7b0eab..732bf40207 100644 --- a/packages/components/src/components/post-tooltip/readme.md +++ b/packages/components/src/components/post-tooltip/readme.md @@ -11,6 +11,7 @@ | ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `backgroundColor` | `background-color` | Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario. | `"primary" \| "yellow"` | `'primary'` | | `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` | +| `withArrow` | `with-arrow` | Defines wheter an Arrow is rendered or not. true: arrow is rendered false: arrow is not rendered | `boolean` | `false` | ## Methods diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts index f31666dea6..cac65e4c71 100644 --- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -50,6 +50,7 @@ function render(args: Args) { class="hydrated" background-color="${ifDefined(args.backgroundColor)}" placement="${ifDefined(args.placement)}" + with-arrow=${ifDefined(args.withArrow)} > ${unsafeHTML(innerHTML)} From aec43096873b4a2b0a1004446f15c513e9648432 Mon Sep 17 00:00:00 2001 From: b1aserlu <141234680+b1aserlu@users.noreply.github.com> Date: Wed, 13 Dec 2023 10:25:54 +0100 Subject: [PATCH 2/9] feat(documentation): Updates tooltip styles and adds new property arrow --- .changeset/swift-tips-kiss.md | 6 ++++++ packages/components/src/components.d.ts | 8 ++++++++ .../src/components/post-tooltip/post-tooltip.scss | 2 ++ .../src/components/post-tooltip/post-tooltip.tsx | 9 +++++++-- .../components/src/components/post-tooltip/readme.md | 1 + .../src/stories/components/tooltip/tooltip.stories.ts | 1 + 6 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 .changeset/swift-tips-kiss.md diff --git a/.changeset/swift-tips-kiss.md b/.changeset/swift-tips-kiss.md new file mode 100644 index 0000000000..cc2072f8e9 --- /dev/null +++ b/.changeset/swift-tips-kiss.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-components': minor +--- + +Update tooltip minHeight and maxWidth and added a new property arrow to tooltip that defines wheter or not the pointer arrow is displayed. diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 113057f1de..7f4991afd1 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -180,6 +180,10 @@ export namespace Components { "show": (panelName: string) => Promise; } interface PostTooltip { + /** + * Wheter or not to display a little pointer arrow + */ + "arrow"?: boolean; /** * Programmatically hide this tooltip */ @@ -469,6 +473,10 @@ declare namespace LocalJSX { "onTabChange"?: (event: PostTabsCustomEvent) => void; } interface PostTooltip { + /** + * Wheter or not to display a little pointer arrow + */ + "arrow"?: boolean; /** * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. */ diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss index f56d36b8af..6ee3780774 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.scss +++ b/packages/components/src/components/post-tooltip/post-tooltip.scss @@ -12,5 +12,7 @@ post-popovercontainer { &::part(popover) { padding: spacing.$size-micro spacing.$size-mini; + max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini; + min-height: spacing.$size-regular; } } diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx index f4946859fa..bc8aa86d62 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.tsx +++ b/packages/components/src/components/post-tooltip/post-tooltip.tsx @@ -25,6 +25,11 @@ export class PostTooltip { */ @Prop() readonly placement?: Placement = 'top'; + /** + * Wheter or not to display a little pointer arrow + */ + @Prop() readonly arrow?: boolean = false; + constructor() { // Create local versions of event handlers for de-registration // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class @@ -35,7 +40,7 @@ export class PostTooltip { connectedCallback() { if (!this.host.id) { throw new Error( - 'No id set: must have an id, linking it to it\'s target element using the data-tooltip-target attribute.', + "No id set: must have an id, linking it to it's target element using the data-tooltip-target attribute.", ); } @@ -126,7 +131,7 @@ export class PostTooltip { (this.popoverRef = el)} > diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md index 76c3fc4ea2..962f4fa654 100644 --- a/packages/components/src/components/post-tooltip/readme.md +++ b/packages/components/src/components/post-tooltip/readme.md @@ -9,6 +9,7 @@ | Property | Attribute | Description | Type | Default | | ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | +| `arrow` | `arrow` | Wheter or not to display a little pointer arrow | `boolean` | `false` | | `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` | diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts index cfd73fd212..7c55957740 100644 --- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -75,6 +75,7 @@ function render(args: Args) { id="${args.id}" class="hydrated bg-${args.backgroundColor}" placement="${ifDefined(args.placement)}" + arrow="${ifDefined(args.arrow)}" > ${unsafeHTML(innerHTML)} From 48ad20c60a379c94c3f2fe45cea31a0d2608ead8 Mon Sep 17 00:00:00 2001 From: b1aserlu <141234680+b1aserlu@users.noreply.github.com> Date: Wed, 13 Dec 2023 10:28:14 +0100 Subject: [PATCH 3/9] Revert "feat(components): updates tooltip component" This reverts commit 8ea76e0b227ea903236a4b648d20443a4ce76c88. --- .changeset/witty-walls-laugh.md | 11 -------- packages/components/src/components.d.ts | 8 ------ .../components/post-tooltip/post-tooltip.scss | 3 +-- .../components/post-tooltip/post-tooltip.tsx | 27 ++++++------------- .../src/components/post-tooltip/readme.md | 1 - .../components/tooltip/tooltip.stories.ts | 1 - 6 files changed, 9 insertions(+), 42 deletions(-) delete mode 100644 .changeset/witty-walls-laugh.md diff --git a/.changeset/witty-walls-laugh.md b/.changeset/witty-walls-laugh.md deleted file mode 100644 index 26e8b3ba76..0000000000 --- a/.changeset/witty-walls-laugh.md +++ /dev/null @@ -1,11 +0,0 @@ ---- -'@swisspost/design-system-documentation': minor -'@swisspost/design-system-components': minor ---- - -Updated tooltip to better match the description in figma. - -- added a new property that defines wheter or not the arrow is rendered. -- set minHeight to 32px -- set maxWidht to 200px -- upated storybook documentation diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index e99c372e54..8b6cebcb15 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -151,10 +151,6 @@ export namespace Components { * @param force Pass true to always show or false to always hide */ "toggle": (target: HTMLElement, force?: boolean) => Promise; - /** - * Defines wheter an Arrow is rendered or not. true: arrow is rendered false: arrow is not rendered - */ - "withArrow"?: boolean; } } export interface PostAlertCustomEvent extends CustomEvent { @@ -376,10 +372,6 @@ declare namespace LocalJSX { * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. */ "placement"?: Placement; - /** - * Defines wheter an Arrow is rendered or not. true: arrow is rendered false: arrow is not rendered - */ - "withArrow"?: boolean; } interface IntrinsicElements { "post-accordion": PostAccordion; diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss index d22b5ca82e..6f94a8463f 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.scss +++ b/packages/components/src/components/post-tooltip/post-tooltip.scss @@ -15,8 +15,7 @@ div { z-index: commons.$zindex-tooltip; width: max-content; - max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini; - min-height: spacing.$size-regular; + max-width: 30ch; margin: 0; padding: spacing.$size-micro spacing.$size-mini; diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx index 19433dff5b..90c5134c4b 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.tsx +++ b/packages/components/src/components/post-tooltip/post-tooltip.tsx @@ -58,13 +58,6 @@ export class PostTooltip { */ @Prop() readonly backgroundColor?: BackgroundColor = 'primary'; - /** - * Defines wheter an Arrow is rendered or not. - * true: arrow is rendered - * false: arrow is not rendered - */ - @Prop() readonly withArrow?: boolean = false; - /** * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted @@ -108,7 +101,7 @@ export class PostTooltip { connectedCallback() { if (!this.host.id) { throw new Error( - "No id set: must have an id, linking it to it's target element using the data-tooltip-target attribute.", + 'No id set: must have an id, linking it to it\'s target element using the data-tooltip-target attribute.', ); } @@ -244,7 +237,7 @@ export class PostTooltip { flip(), inline(), shift({ padding: 8 }), - offset(this.withArrow ? 12 : 4), // 4px outside of element to account for focus outline + ~arrow size + offset(12), // 4px outside of element to account for focus outline + ~arrow size arrow({ element: this.arrowRef, padding: 8 }), ], }); @@ -275,16 +268,12 @@ export class PostTooltip { class={this.tooltipClasses} ref={(el: HTMLDivElement & PopoverElement) => (this.tooltipRef = el)} > - {this.withArrow ? ( - { - this.arrowRef = el; - }} - > - ) : ( - '' - )} + { + this.arrowRef = el; + }} + > diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md index 732bf40207..caff7b0eab 100644 --- a/packages/components/src/components/post-tooltip/readme.md +++ b/packages/components/src/components/post-tooltip/readme.md @@ -11,7 +11,6 @@ | ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `backgroundColor` | `background-color` | Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario. | `"primary" \| "yellow"` | `'primary'` | | `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` | -| `withArrow` | `with-arrow` | Defines wheter an Arrow is rendered or not. true: arrow is rendered false: arrow is not rendered | `boolean` | `false` | ## Methods diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts index cac65e4c71..f31666dea6 100644 --- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -50,7 +50,6 @@ function render(args: Args) { class="hydrated" background-color="${ifDefined(args.backgroundColor)}" placement="${ifDefined(args.placement)}" - with-arrow=${ifDefined(args.withArrow)} > ${unsafeHTML(innerHTML)} From af853c3101ee15a5dcf7a1601a4828b825049109 Mon Sep 17 00:00:00 2001 From: b1aserlu <141234680+b1aserlu@users.noreply.github.com> Date: Wed, 13 Dec 2023 10:35:45 +0100 Subject: [PATCH 4/9] fixes lint error --- .../components/src/components/post-tooltip/post-tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx index bc8aa86d62..ece2938004 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.tsx +++ b/packages/components/src/components/post-tooltip/post-tooltip.tsx @@ -40,7 +40,7 @@ export class PostTooltip { connectedCallback() { if (!this.host.id) { throw new Error( - "No id set: must have an id, linking it to it's target element using the data-tooltip-target attribute.", + `No id set: must have an id, linking it to it's target element using the data-tooltip-target attribute.`, ); } From fd6f011e778909d739af489425aee579accc43fa Mon Sep 17 00:00:00 2001 From: b1aserlu <141234680+b1aserlu@users.noreply.github.com> Date: Wed, 13 Dec 2023 10:47:30 +0100 Subject: [PATCH 5/9] adds prettier ignore to allow singlequotes --- .../components/src/components/post-tooltip/post-tooltip.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx index ece2938004..93962cec34 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.tsx +++ b/packages/components/src/components/post-tooltip/post-tooltip.tsx @@ -40,7 +40,8 @@ export class PostTooltip { connectedCallback() { if (!this.host.id) { throw new Error( - `No id set: must have an id, linking it to it's target element using the data-tooltip-target attribute.`, + /*prettier-ignore*/ + 'No id set: must have an id, linking it to it\'s target element using the data-tooltip-target attribute.', ); } From e24330bcfa881611955fbbf1e2a9ec1ae481d067 Mon Sep 17 00:00:00 2001 From: b1aserlu <141234680+b1aserlu@users.noreply.github.com> Date: Tue, 16 Jan 2024 09:49:43 +0100 Subject: [PATCH 6/9] applies chagnges from review --- .changeset/swift-tips-kiss.md | 2 +- .../src/stories/components/tooltip/tooltip.stories.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/swift-tips-kiss.md b/.changeset/swift-tips-kiss.md index cc2072f8e9..47785bc46e 100644 --- a/.changeset/swift-tips-kiss.md +++ b/.changeset/swift-tips-kiss.md @@ -3,4 +3,4 @@ '@swisspost/design-system-components': minor --- -Update tooltip minHeight and maxWidth and added a new property arrow to tooltip that defines wheter or not the pointer arrow is displayed. +Updated the tooltip `min-height` and `max-width` and added a new property arrow to the tooltip, that defines wheter or not the pointer arrow is displayed. diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts index 7c55957740..49cb2be1ba 100644 --- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -1,6 +1,6 @@ import { Args, Meta, StoryObj } from '@storybook/web-components'; import { BADGE } from '../../../../.storybook/constants'; -import { html } from 'lit'; +import { html, nothing } from 'lit'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { useArgs } from '@storybook/preview-api'; import { ifDefined } from 'lit/directives/if-defined.js'; @@ -75,7 +75,7 @@ function render(args: Args) { id="${args.id}" class="hydrated bg-${args.backgroundColor}" placement="${ifDefined(args.placement)}" - arrow="${ifDefined(args.arrow)}" + arrow="${ifDefined(args.arrow) ? args.arrow : nothing}" > ${unsafeHTML(innerHTML)} From c4da9f140c1f331a32759357e576eda2eb845a4f Mon Sep 17 00:00:00 2001 From: b1aserlu <141234680+b1aserlu@users.noreply.github.com> Date: Tue, 16 Jan 2024 10:16:20 +0100 Subject: [PATCH 7/9] sets default for arrow property --- .../src/stories/components/tooltip/tooltip.stories.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts index 49cb2be1ba..ee5996ecea 100644 --- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -17,6 +17,7 @@ const meta: Meta = { innerHTML: 'Hi there 👋', backgroundColor: 'primary', placement: 'top', + arrow: false, }, argTypes: { id: { @@ -56,6 +57,12 @@ const meta: Meta = { placement: { name: 'Placement', }, + arrow: { + name: 'Arrow', + control: { + type: 'boolean', + }, + }, }, }; From 0eb9aa131c78bcb50ee98ade3d39a2ebe5bce13f Mon Sep 17 00:00:00 2001 From: Lukas Blaser <141234680+b1aserlu@users.noreply.github.com> Date: Wed, 17 Jan 2024 16:20:19 +0100 Subject: [PATCH 8/9] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Oliver Schürch --- .../components/src/components/post-tooltip/post-tooltip.tsx | 2 +- .../src/stories/components/tooltip/tooltip.stories.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx index 93962cec34..102373aaca 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.tsx +++ b/packages/components/src/components/post-tooltip/post-tooltip.tsx @@ -28,7 +28,7 @@ export class PostTooltip { /** * Wheter or not to display a little pointer arrow */ - @Prop() readonly arrow?: boolean = false; + @Prop() readonly arrow?: boolean = true; constructor() { // Create local versions of event handlers for de-registration diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts index ee5996ecea..d772bee79e 100644 --- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -17,7 +17,7 @@ const meta: Meta = { innerHTML: 'Hi there 👋', backgroundColor: 'primary', placement: 'top', - arrow: false, + arrow: null, }, argTypes: { id: { From 04336f138c8cf50926117d4dc6db702361e4f8e5 Mon Sep 17 00:00:00 2001 From: b1aserlu <141234680+b1aserlu@users.noreply.github.com> Date: Thu, 18 Jan 2024 14:25:50 +0100 Subject: [PATCH 9/9] removes nothing as it does not work as intended --- packages/components/src/components/post-tooltip/readme.md | 2 +- .../src/stories/components/tooltip/tooltip.stories.ts | 5 ++--- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md index 2d81ee1378..cb015f8702 100644 --- a/packages/components/src/components/post-tooltip/readme.md +++ b/packages/components/src/components/post-tooltip/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -| `arrow` | `arrow` | Wheter or not to display a little pointer arrow | `boolean` | `false` | +| `arrow` | `arrow` | Wheter or not to display a little pointer arrow | `boolean` | `true` | | `placement` | `placement` | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'` | diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts index d772bee79e..1ca15da3e8 100644 --- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -1,6 +1,6 @@ import { Args, Meta, StoryObj } from '@storybook/web-components'; import { BADGE } from '../../../../.storybook/constants'; -import { html, nothing } from 'lit'; +import { html } from 'lit'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { useArgs } from '@storybook/preview-api'; import { ifDefined } from 'lit/directives/if-defined.js'; @@ -17,7 +17,6 @@ const meta: Meta = { innerHTML: 'Hi there 👋', backgroundColor: 'primary', placement: 'top', - arrow: null, }, argTypes: { id: { @@ -82,7 +81,7 @@ function render(args: Args) { id="${args.id}" class="hydrated bg-${args.backgroundColor}" placement="${ifDefined(args.placement)}" - arrow="${ifDefined(args.arrow) ? args.arrow : nothing}" + arrow="${ifDefined(args.arrow)}" > ${unsafeHTML(innerHTML)}