Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: adds tooltip max width prop and removes events #285

Merged
merged 6 commits into from
Nov 7, 2024
Merged

fix: adds tooltip max width prop and removes events #285

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
75693be
fix: add max-width and remove events
pixelflips Nov 7, 2024
52436f4
style: adjust styling to accomodate max-width
pixelflips Nov 7, 2024
582967a
docs: add max-width documentation and example
pixelflips Nov 7, 2024
70e3292
test: add test for maxWidth
pixelflips Nov 7, 2024
d03dd7d
fix: correct imports
pixelflips Nov 7, 2024
675988c
style: correct odering
pixelflips Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 8 additions & 22 deletions libs/core/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -912,10 +917,6 @@ export interface PdsTextareaCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPdsTextareaElement;
}
export interface PdsTooltipCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLPdsTooltipElement;
}
declare global {
interface HTMLPdsAccordionElement extends Components.PdsAccordion, HTMLStencilElement {
}
Expand Down Expand Up @@ -1230,19 +1231,7 @@ declare global {
prototype: HTMLPdsTextareaElement;
new (): HTMLPdsTextareaElement;
};
interface HTMLPdsTooltipElementEventMap {
"pdsTooltipHide": any;
"pdsTooltipShow": any;
}
interface HTMLPdsTooltipElement extends Components.PdsTooltip, HTMLStencilElement {
addEventListener<K extends keyof HTMLPdsTooltipElementEventMap>(type: K, listener: (this: HTMLPdsTooltipElement, ev: PdsTooltipCustomEvent<HTMLPdsTooltipElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLPdsTooltipElementEventMap>(type: K, listener: (this: HTMLPdsTooltipElement, ev: PdsTooltipCustomEvent<HTMLPdsTooltipElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(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;
Expand Down Expand Up @@ -2153,13 +2142,10 @@ declare namespace LocalJSX {
*/
"htmlContent"?: boolean;
/**
* Emitted after a tooltip is closed
*/
"onPdsTooltipHide"?: (event: PdsTooltipCustomEvent<any>) => void;
/**
* Emitted after a tooltip is shown
* Sets the maximum width of the tooltip content
* @defaultValue "352px"
*/
"onPdsTooltipShow"?: (event: PdsTooltipCustomEvent<any>) => void;
"maxWidth"?: string;
/**
* Determines whether or not the tooltip is visible
* @defaultValue false
Expand Down
12 changes: 12 additions & 0 deletions libs/core/src/components/pds-tooltip/docs/pds-tooltip.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,18 @@ By default the arrow is visible but it can be hidden by disabling it when `has-a
<pds-tooltip content="this is tooltip content" has-arrow="false" placement="right">text</pds-tooltip>
</DocCanvas>


### 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.

<DocCanvas client:only
mdxSource={{
react: '<PdsTooltip content="This is long tooltip content to demonstrate how the max-width can be used to expand or narrow the width of the tooltip content to fit one\'s use case and content needs. This example uses 520px to create a bit more width for this amount of content." max-width="520px" placement="right">text</PdsTooltip>',
webComponent: '<pds-tooltip content="This is long tooltip content to demonstrate how the max-width can be used to expand or narrow the width of the tooltip content to fit one\'s use case and content needs. This example uses 520px to create a bit more width for this amount of content." max-width="520px" placement="right">text</pds-tooltip>'
}}>
<pds-tooltip content="This is long tooltip content to demonstrate how the max-width can be used to expand or narrow the width of the tooltip content to fit one's use case and content needs. This example uses 520px to create a bit more width for this amount of content." max-width="520px" placement="right">text</pds-tooltip>
</DocCanvas>

## Additional Resources

[W3 Aria Tooltip Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)
3 changes: 2 additions & 1 deletion libs/core/src/components/pds-tooltip/pds-tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@

::slotted([slot="content"]) {
display: block;
max-width: var(--sizing-width-default);
white-space: normal;
width: var(--sizing-width-default);
}
}

Expand All @@ -37,6 +37,7 @@
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we know what this TODO is for and are we able to clean this up while we are in here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@monicawheeler TBH, I have no idea but will check into it.

Copy link
Contributor

@monicawheeler monicawheeler Nov 7, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe @QuintonJason could help -> 84f6259

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Already pinged him!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@monicawheeler checked in with @QuintonJason and that comment ties into the universal approach of how tooltip, dropdown, popover will work. Quinton will be following up here as well as he begins work on the other mentioned components, so no action needed in this PR.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the follow up!

max-width: var(--sizing-width-default);
opacity: 0;
padding: var(--spacing-padding-overlay);
position: absolute;
Expand Down
21 changes: 8 additions & 13 deletions libs/core/src/components/pds-tooltip/pds-tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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
Expand All @@ -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();
Expand Down Expand Up @@ -129,12 +125,10 @@ export class PdsTooltip {

private handleHide = () => {
this.hideTooltip();
this.pdsTooltipHide.emit();
};

private handleShow = () => {
this.showTooltip();
this.pdsTooltipShow.emit();
};

render() {
Expand Down Expand Up @@ -167,6 +161,7 @@ export class PdsTooltip {
id={this.componentId}
ref={(el) => (this.contentEl = el)}
role="tooltip"
style={{ maxWidth: this.maxWidth }}
>
<slot
name="content"
Expand Down
9 changes: 1 addition & 8 deletions libs/core/src/components/pds-tooltip/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,11 @@
| `content` | `content` | Content for the tooltip. If HTML is required, use the content slot | `string` | `undefined` |
| `hasArrow` | `has-arrow` | Determines whether or not the tooltip has an arrow | `boolean` | `true` |
| `htmlContent` | `html-content` | Enable this option when using the content slot | `boolean` | `false` |
| `maxWidth` | `max-width` | Sets the maximum width of the tooltip content | `string` | `'352px'` |
| `opened` | `opened` | Determines whether or not the tooltip is visible | `boolean` | `false` |
| `placement` | `placement` | Determines the preferred position of the tooltip | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'right'` |


## Events

| Event | Description | Type |
| ---------------- | --------------------------------- | ------------------ |
| `pdsTooltipHide` | Emitted after a tooltip is closed | `CustomEvent<any>` |
| `pdsTooltipShow` | Emitted after a tooltip is shown | `CustomEvent<any>` |


## Methods

### `hideTooltip() => Promise<void>`
Expand Down
30 changes: 15 additions & 15 deletions libs/core/src/components/pds-tooltip/stories/pds-tooltip.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@ export default {
decorators: [withActions],
parameters: {
actions: {
handles: ['mouseEnter', 'pdsTooltipShow', 'mouseLeave', 'pdsTooltipHide'],
handles: [],
},
},
title: 'components/Tooltip'
}

const BaseTemplate = (args) => html`
<pds-tooltip content=${args.content} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;
<pds-tooltip content=${args.content} max-width=${args.maxWidth} has-arrow=${args.hasArrow} placement=${args.placement}>${args.slot}</pds-tooltip>`;

const HTMLContentTemplate = (args) => html`
<pds-tooltip has-arrow=${args.hasArrow} placement=${args.placement} html-content=${args.htmlContent}>
<pds-tooltip has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement=${args.placement} html-content=${args.htmlContent}>
<div slot="content">
<p><strong>This is a tooltip</strong></p>
<p>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.</p>
Expand All @@ -30,46 +30,46 @@ const PositionTemplate = (args) => html`
<div class="demo-container" style="min-height: 50vh; width: 100%; display: flex; align-items: center; justify-content: center;">
<div class="position-demo-grid">
<div class="position-demo-grid-item">
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top-start" opened=${args.opened}>
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-start" opened=${args.opened}>
<pds-button variant="accent">t</pds-button>
</pds-tooltip>
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="top" opened=${args.opened}>
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top" opened=${args.opened}>
<pds-button variant="accent">t</pds-button>
</pds-tooltip>
<pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="top-end" opened=${args.opened}>
<pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="top-end" opened=${args.opened}>
<pds-button variant="accent">te</pds-button>
</pds-tooltip>
</div>
<div class="position-demo-grid-item">
<pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="left-start" opened=${args.opened}>
<pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-start" opened=${args.opened}>
<pds-button variant="accent">ls</pds-button>
</pds-tooltip>
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="left" opened=${args.opened}>
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left" opened=${args.opened}>
<pds-button variant="accent">l</pds-button>
</pds-tooltip>
<pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="left-end" opened=${args.opened}>
<pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="left-end" opened=${args.opened}>
<pds-button variant="accent">le</pds-button>
</pds-tooltip>
</div>
<div class="position-demo-grid-item">
<pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="bottom-start" opened=${args.opened}>
<pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-start" opened=${args.opened}>
<pds-button variant="accent">bs</pds-button>
</pds-tooltip>
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="bottom" opened=${args.opened}>
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom" opened=${args.opened}>
<pds-button variant="accent">b</pds-button>
</pds-tooltip>
<pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="bottom-end" opened=${args.opened}>
<pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="bottom-end" opened=${args.opened}>
<pds-button variant="accent">be</pds-button>
</pds-tooltip>
</div>
<div class="position-demo-grid-item">
<pds-tooltip content="content 1" has-arrow=${args.hasArrow} placement="right-start" opened=${args.opened}>
<pds-tooltip content="content 1" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-start" opened=${args.opened}>
<pds-button variant="accent">rs</pds-button>
</pds-tooltip>
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} placement="right" opened=${args.opened}>
<pds-tooltip content="content 2" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right" opened=${args.opened}>
<pds-button variant="accent">r</pds-button>
</pds-tooltip>
<pds-tooltip content="content 3" has-arrow=${args.hasArrow} placement="right-end" opened=${args.opened}>
<pds-tooltip content="content 3" has-arrow=${args.hasArrow} max-width=${args.maxWidth} placement="right-end" opened=${args.opened}>
<pds-button variant="accent">re</pds-button>
</pds-tooltip>
</div>
Expand Down
17 changes: 16 additions & 1 deletion libs/core/src/components/pds-tooltip/test/pds-tooltip.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('pds-tooltip', () => {
<span class="pds-tooltip__trigger">
<slot></slot>
</span>
<div class="pds-tooltip__content" aria-hidden="true" aria-live="off" role="tooltip" style="top: 50%; left: calc(0px + 8px); transform: translateY(-50%);">
<div class="pds-tooltip__content" aria-hidden="true" aria-live="off" role="tooltip" style="max-width: 352px; top: 50%; left: calc(0px + 8px); transform: translateY(-50%);">
<slot name="content"></slot>
</div>
</div>
Expand Down Expand Up @@ -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: `
<pds-tooltip max-width="${maxWidthValue}" content="Tooltip content">
<pds-button variant="secondary">Secondary</pds-button>
</pds-tooltip>`
});

const contentElement = page.root?.shadowRoot?.querySelector('.pds-tooltip__content') as HTMLElement;

expect(contentElement.style.maxWidth).toBe(maxWidthValue);
});
});
Loading