From 75693bed8f638ecc074ba294516e9d7e4902b577 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 7 Nov 2024 10:17:46 -0800 Subject: [PATCH 1/6] fix: add max-width and remove events --- libs/core/src/components.d.ts | 30 +++++-------------- .../components/pds-tooltip/pds-tooltip.tsx | 19 +++++------- .../core/src/components/pds-tooltip/readme.md | 9 +----- 3 files changed, 16 insertions(+), 42 deletions(-) diff --git a/libs/core/src/components.d.ts b/libs/core/src/components.d.ts index dbdbc5498..a69dd2864 100644 --- a/libs/core/src/components.d.ts +++ b/libs/core/src/components.d.ts @@ -833,6 +833,11 @@ export namespace Components { * @defaultValue false */ "htmlContent": boolean; + /** + * Sets the maximum width of the tooltip content + * @defaultValue "352px" + */ + "maxWidth": string; /** * Determines whether or not the tooltip is visible * @defaultValue false @@ -912,10 +917,6 @@ export interface PdsTextareaCustomEvent extends CustomEvent { detail: T; target: HTMLPdsTextareaElement; } -export interface PdsTooltipCustomEvent extends CustomEvent { - detail: T; - target: HTMLPdsTooltipElement; -} declare global { interface HTMLPdsAccordionElement extends Components.PdsAccordion, HTMLStencilElement { } @@ -1230,19 +1231,7 @@ declare global { prototype: HTMLPdsTextareaElement; new (): HTMLPdsTextareaElement; }; - interface HTMLPdsTooltipElementEventMap { - "pdsTooltipHide": any; - "pdsTooltipShow": any; - } interface HTMLPdsTooltipElement extends Components.PdsTooltip, HTMLStencilElement { - addEventListener(type: K, listener: (this: HTMLPdsTooltipElement, ev: PdsTooltipCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; - addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLPdsTooltipElement, ev: PdsTooltipCustomEvent) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; - removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLPdsTooltipElement: { prototype: HTMLPdsTooltipElement; @@ -2153,13 +2142,10 @@ declare namespace LocalJSX { */ "htmlContent"?: boolean; /** - * Emitted after a tooltip is closed - */ - "onPdsTooltipHide"?: (event: PdsTooltipCustomEvent) => void; - /** - * Emitted after a tooltip is shown + * Sets the maximum width of the tooltip content + * @defaultValue "352px" */ - "onPdsTooltipShow"?: (event: PdsTooltipCustomEvent) => void; + "maxWidth"?: string; /** * Determines whether or not the tooltip is visible * @defaultValue false diff --git a/libs/core/src/components/pds-tooltip/pds-tooltip.tsx b/libs/core/src/components/pds-tooltip/pds-tooltip.tsx index ee6471b0d..dede69841 100644 --- a/libs/core/src/components/pds-tooltip/pds-tooltip.tsx +++ b/libs/core/src/components/pds-tooltip/pds-tooltip.tsx @@ -67,6 +67,12 @@ export class PdsTooltip { | 'left-start' | 'left-end' = 'right'; + /** + * Sets the maximum width of the tooltip content + * @defaultValue "352px" + */ + @Prop() maxWidth: string = '352px'; + /** * Determines whether or not the tooltip is visible * @defaultValue false @@ -82,16 +88,6 @@ export class PdsTooltip { } } - /** - * Emitted after a tooltip is closed - */ - @Event() pdsTooltipHide: EventEmitter; - - /** - * Emitted after a tooltip is shown - */ - @Event() pdsTooltipShow: EventEmitter; - componentWillLoad() { if (this.opened) { this.showTooltip(); @@ -129,12 +125,10 @@ export class PdsTooltip { private handleHide = () => { this.hideTooltip(); - this.pdsTooltipHide.emit(); }; private handleShow = () => { this.showTooltip(); - this.pdsTooltipShow.emit(); }; render() { @@ -167,6 +161,7 @@ export class PdsTooltip { id={this.componentId} ref={(el) => (this.contentEl = el)} role="tooltip" + style={{ maxWidth: this.maxWidth }} > ` | -| `pdsTooltipShow` | Emitted after a tooltip is shown | `CustomEvent` | - - ## Methods ### `hideTooltip() => Promise` From 52436f4d1efd9e46d4741174b75b8e4da45615b2 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 7 Nov 2024 10:18:22 -0800 Subject: [PATCH 2/6] style: adjust styling to accomodate max-width --- libs/core/src/components/pds-tooltip/pds-tooltip.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/libs/core/src/components/pds-tooltip/pds-tooltip.scss b/libs/core/src/components/pds-tooltip/pds-tooltip.scss index 9a5bd2000..533ea4700 100644 --- a/libs/core/src/components/pds-tooltip/pds-tooltip.scss +++ b/libs/core/src/components/pds-tooltip/pds-tooltip.scss @@ -27,7 +27,7 @@ ::slotted([slot="content"]) { display: block; white-space: normal; - width: var(--sizing-width-default); + max-width: var(--sizing-width-default); } } @@ -42,6 +42,7 @@ position: absolute; visibility: hidden; width: max-content; + max-width: var(--sizing-width-default); .pds-tooltip--is-open & { // TODO: need to use block / none but the tooltip content width and height are needed for calculations From 582967ab03bd451b9f7478b4c896c0c69040dbe7 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 7 Nov 2024 10:20:06 -0800 Subject: [PATCH 3/6] docs: add max-width documentation and example --- .../pds-tooltip/docs/pds-tooltip.mdx | 12 ++++++++ .../stories/pds-tooltip.stories.js | 30 +++++++++---------- 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/libs/core/src/components/pds-tooltip/docs/pds-tooltip.mdx b/libs/core/src/components/pds-tooltip/docs/pds-tooltip.mdx index 86b073694..766939e9c 100644 --- a/libs/core/src/components/pds-tooltip/docs/pds-tooltip.mdx +++ b/libs/core/src/components/pds-tooltip/docs/pds-tooltip.mdx @@ -112,6 +112,18 @@ By default the arrow is visible but it can be hidden by disabling it when `has-a text + +### Width/Sizing +The `maxWidth` prop allows for adjust the maximum width for the tooltip content. The default max width is 352px, but it can be customized as needed by passing a new pixel value. + +text', + webComponent: 'text' +}}> + text + + ## Additional Resources [W3 Aria Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) diff --git a/libs/core/src/components/pds-tooltip/stories/pds-tooltip.stories.js b/libs/core/src/components/pds-tooltip/stories/pds-tooltip.stories.js index 056df18ae..5e31db853 100644 --- a/libs/core/src/components/pds-tooltip/stories/pds-tooltip.stories.js +++ b/libs/core/src/components/pds-tooltip/stories/pds-tooltip.stories.js @@ -8,17 +8,17 @@ export default { decorators: [withActions], parameters: { actions: { - handles: ['mouseEnter', 'pdsTooltipShow', 'mouseLeave', 'pdsTooltipHide'], + handles: [], }, }, title: 'components/Tooltip' } const BaseTemplate = (args) => html` - ${args.slot}`; + ${args.slot}`; const HTMLContentTemplate = (args) => html` - +

This is a tooltip

Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.

@@ -30,46 +30,46 @@ const PositionTemplate = (args) => html`
- + t - + t - + te
- + ls - + l - + le
- + bs - + b - + be
- + rs - + r - + re
From 70e3292a9ac2abd170f7b03a1c11c309b4e4154b Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 7 Nov 2024 10:21:04 -0800 Subject: [PATCH 4/6] test: add test for maxWidth --- .../pds-tooltip/test/pds-tooltip.spec.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/libs/core/src/components/pds-tooltip/test/pds-tooltip.spec.tsx b/libs/core/src/components/pds-tooltip/test/pds-tooltip.spec.tsx index ed01f2c7d..679a45c85 100644 --- a/libs/core/src/components/pds-tooltip/test/pds-tooltip.spec.tsx +++ b/libs/core/src/components/pds-tooltip/test/pds-tooltip.spec.tsx @@ -17,7 +17,7 @@ describe('pds-tooltip', () => { - @@ -175,4 +175,19 @@ describe('pds-tooltip', () => { expect(element?.shadowRoot?.querySelector('.pds-tooltip')).not.toHaveClass('pds-tooltip--is-open'); }) + + it('should apply maxWidth to tooltip content', async () => { + const maxWidthValue = '400px'; + const page = await newSpecPage({ + components: [PdsTooltip], + html: ` + + Secondary + ` + }); + + const contentElement = page.root?.shadowRoot?.querySelector('.pds-tooltip__content') as HTMLElement; + + expect(contentElement.style.maxWidth).toBe(maxWidthValue); + }); }); From d03dd7dacc432f150f429c50df720261a464feb8 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 7 Nov 2024 11:05:24 -0800 Subject: [PATCH 5/6] fix: correct imports --- libs/core/src/components/pds-tooltip/pds-tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/core/src/components/pds-tooltip/pds-tooltip.tsx b/libs/core/src/components/pds-tooltip/pds-tooltip.tsx index dede69841..709792975 100644 --- a/libs/core/src/components/pds-tooltip/pds-tooltip.tsx +++ b/libs/core/src/components/pds-tooltip/pds-tooltip.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Event, Host, Prop, State, h, EventEmitter, Method, Watch } from '@stencil/core'; +import { Component, Element, Host, Prop, State, h, Method, Watch } from '@stencil/core'; import { positionTooltip } from '../../utils/overlay'; From 675988c22e5ea914252010b6721b122029989ccd Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Thu, 7 Nov 2024 11:26:54 -0800 Subject: [PATCH 6/6] style: correct odering --- libs/core/src/components/pds-tooltip/pds-tooltip.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/core/src/components/pds-tooltip/pds-tooltip.scss b/libs/core/src/components/pds-tooltip/pds-tooltip.scss index 533ea4700..394e7d35c 100644 --- a/libs/core/src/components/pds-tooltip/pds-tooltip.scss +++ b/libs/core/src/components/pds-tooltip/pds-tooltip.scss @@ -26,8 +26,8 @@ ::slotted([slot="content"]) { display: block; - white-space: normal; max-width: var(--sizing-width-default); + white-space: normal; } } @@ -37,12 +37,12 @@ box-shadow: var(--box-shadow-default); color: var(--color-text-default); // TODO: need to use block / none but the tooltip content width and height are needed for calculations + max-width: var(--sizing-width-default); opacity: 0; padding: var(--spacing-padding-overlay); position: absolute; visibility: hidden; width: max-content; - max-width: var(--sizing-width-default); .pds-tooltip--is-open & { // TODO: need to use block / none but the tooltip content width and height are needed for calculations