diff --git a/.changeset/swift-tips-kiss.md b/.changeset/swift-tips-kiss.md new file mode 100644 index 0000000000..47785bc46e --- /dev/null +++ b/.changeset/swift-tips-kiss.md @@ -0,0 +1,6 @@ +--- +'@swisspost/design-system-documentation': minor +'@swisspost/design-system-components': minor +--- + +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/components/src/components.d.ts b/packages/components/src/components.d.ts index d1269c89f5..ddf67df291 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -190,6 +190,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 */ @@ -492,6 +496,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..102373aaca 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 = true; + constructor() { // Create local versions of event handlers for de-registration // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class @@ -35,6 +40,7 @@ export class PostTooltip { connectedCallback() { if (!this.host.id) { throw new Error( + /*prettier-ignore*/ 'No id set: must have an id, linking it to it\'s target element using the data-tooltip-target attribute.', ); } @@ -126,7 +132,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 0bad4d5a4a..cb015f8702 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` | `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 cfd73fd212..1ca15da3e8 100644 --- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -56,6 +56,12 @@ const meta: Meta = { placement: { name: 'Placement', }, + arrow: { + name: 'Arrow', + control: { + type: 'boolean', + }, + }, }, }; @@ -75,6 +81,7 @@ function render(args: Args) { id="${args.id}" class="hydrated bg-${args.backgroundColor}" placement="${ifDefined(args.placement)}" + arrow="${ifDefined(args.arrow)}" > ${unsafeHTML(innerHTML)}