Skip to content

Commit

Permalink
chore: remove mentions of data-tooltip-target
Browse files Browse the repository at this point in the history
  • Loading branch information
@gfellerph
gfellerph committed Jul 2, 2024
1 parent 8c4366a commit e2c2507
Show file tree
Hide file tree
Showing 8 changed files with 55 additions and 57 deletions.
4 changes: 3 additions & 1 deletion packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,8 @@ <h2>Post Tag</h2>

<div class="my-4">
<h2>Post Tooltip</h2>
<button class="btn btn-secondary btn-large" data-tooltip-target="tooltip-one">Button</button>
<post-tooltip-trigger for="tooltip-one">
<button class="btn btn-secondary btn-large">Button</button>
</post-tooltip-trigger>
<post-tooltip id="tooltip-one" placement="top">Hi there 👋</post-tooltip>
</div>
18 changes: 9 additions & 9 deletions packages/components/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,21 +206,21 @@ export namespace Components {
*/
"arrow"?: boolean;
/**
* Programmatically hide this tooltip
* Programmatically hide this popover-container
*/
"hide": () => Promise<void>;
/**
* 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.
* Defines the placement of the popover-container according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. popover-containers 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;
/**
* Programmatically display the tooltip
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
* Programmatically display the popover-container
* @param target An element where the popover-container should be shown
*/
"show": (target: HTMLElement) => Promise<void>;
/**
* Toggle tooltip display
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
* Toggle popover-container display
* @param target An element where the popover-container should be shown
* @param force Pass true to always show or false to always hide
*/
"toggle": (target: HTMLElement, force?: boolean) => Promise<boolean>;
Expand Down Expand Up @@ -298,12 +298,12 @@ export namespace Components {
"placement"?: Placement;
/**
* Programmatically display the tooltip
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
* @param target An element where the tooltip should be shown
*/
"show": (target: HTMLElement) => Promise<void>;
/**
* Toggle tooltip display
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
* @param target An element where the tooltip should be shown
* @param force Pass true to always show or false to always hide
*/
"toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
Expand Down Expand Up @@ -690,7 +690,7 @@ declare namespace LocalJSX {
*/
"onPostToggle"?: (event: PostPopovercontainerCustomEvent<boolean>) => void;
/**
* 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.
* Defines the placement of the popover-container according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. popover-containers 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;
}
Expand Down
21 changes: 10 additions & 11 deletions packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export class PostPopovercontainer {
@Event() postToggle: EventEmitter<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
* Defines the placement of the popover-container according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
* popover-containers 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.
*/
@Prop() readonly placement?: Placement = 'top';
Expand Down Expand Up @@ -86,8 +86,8 @@ export class PostPopovercontainer {
}

/**
* Programmatically display the tooltip
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
* Programmatically display the popover-container
* @param target An element where the popover-container should be shown
*/
@Method()
async show(target: HTMLElement) {
Expand All @@ -99,7 +99,7 @@ export class PostPopovercontainer {
}

/**
* Programmatically hide this tooltip
* Programmatically hide this popover-container
*/
@Method()
async hide() {
Expand All @@ -108,8 +108,8 @@ export class PostPopovercontainer {
}

/**
* Toggle tooltip display
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
* Toggle popover-container display
* @param target An element where the popover-container should be shown
* @param force Pass true to always show or false to always hide
*/
@Method()
Expand All @@ -121,8 +121,8 @@ export class PostPopovercontainer {
}

/**
* Start or stop auto updates based on tooltip events.
* Tooltips can be closed or opened with other methods than class members,
* Start or stop auto updates based on popover-container events.
* popover-containers can be closed or opened with other methods than class members,
* therefore listening to the toggle event is safer for cleaning up.
* @param e ToggleEvent
*/
Expand All @@ -141,7 +141,7 @@ export class PostPopovercontainer {

/**
* Start listening for DOM updates, scroll events etc. that have
* an influence on tooltip positioning
* an influence on popover-container positioning
*/
private startAutoupdates() {
this.clearAutoUpdate = autoUpdate(
Expand Down Expand Up @@ -189,7 +189,6 @@ export class PostPopovercontainer {
middleware,
});

// Tooltip
this.popoverRef.style.left = `${x}px`;
this.popoverRef.style.top = `${y}px`;

Expand Down
30 changes: 15 additions & 15 deletions packages/components/src/components/post-popovercontainer/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@

## Properties

| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `animation` | `animation` | Animation style | `"pop-in"` | `null` |
| `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'` |
| Property | Attribute | Description | Type | Default |
| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `animation` | `animation` | Animation style | `"pop-in"` | `null` |
| `arrow` | `arrow` | Wheter or not to display a little pointer arrow | `boolean` | `false` |
| `placement` | `placement` | Defines the placement of the popover-container according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. popover-containers 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'` |


## Events
Expand All @@ -25,7 +25,7 @@

### `hide() => Promise<void>`

Programmatically hide this tooltip
Programmatically hide this popover-container

#### Returns

Expand All @@ -35,13 +35,13 @@ Type: `Promise<void>`

### `show(target: HTMLElement) => Promise<void>`

Programmatically display the tooltip
Programmatically display the popover-container

#### Parameters

| Name | Type | Description |
| -------- | ------------- | ---------------------------------------------------------------------------- |
| `target` | `HTMLElement` | An element with [data-tooltip-target="id"] where the tooltip should be shown |
| Name | Type | Description |
| -------- | ------------- | ------------------------------------------------------ |
| `target` | `HTMLElement` | An element where the popover-container should be shown |

#### Returns

Expand All @@ -51,14 +51,14 @@ Type: `Promise<void>`

### `toggle(target: HTMLElement, force?: boolean) => Promise<boolean>`

Toggle tooltip display
Toggle popover-container display

#### Parameters

| Name | Type | Description |
| -------- | ------------- | ---------------------------------------------------------------------------- |
| `target` | `HTMLElement` | An element with [data-tooltip-target="id"] where the tooltip should be shown |
| `force` | `boolean` | Pass true to always show or false to always hide |
| Name | Type | Description |
| -------- | ------------- | ------------------------------------------------------ |
| `target` | `HTMLElement` | An element where the popover-container should be shown |
| `force` | `boolean` | Pass true to always show or false to always hide |

#### Returns

Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/components/post-tooltip/post-tooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ export class PostTooltip {
if (!this.host.id) {
console.error(
/*prettier-ignore*/
'No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.',
'No id set: <post-tooltip> must have an id, linking it to it\'s target element with a <post-tooltip-trigger> element.',
);
}
}

/**
* Programmatically display the tooltip
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
* @param target An element where the tooltip should be shown
*/
@Method()
async show(target: HTMLElement) {
Expand All @@ -62,7 +62,7 @@ export class PostTooltip {

/**
* Toggle tooltip display
* @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
* @param target An element where the tooltip should be shown
* @param force Pass true to always show or false to always hide
*/
@Method()
Expand Down
14 changes: 7 additions & 7 deletions packages/components/src/components/post-tooltip/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,9 @@ Programmatically display the tooltip

#### Parameters

| Name | Type | Description |
| -------- | ------------- | ---------------------------------------------------------------------------- |
| `target` | `HTMLElement` | An element with [data-tooltip-target="id"] where the tooltip should be shown |
| Name | Type | Description |
| -------- | ------------- | -------------------------------------------- |
| `target` | `HTMLElement` | An element where the tooltip should be shown |

#### Returns

Expand All @@ -48,10 +48,10 @@ Toggle tooltip display

#### Parameters

| Name | Type | Description |
| -------- | ------------- | ---------------------------------------------------------------------------- |
| `target` | `HTMLElement` | An element with [data-tooltip-target="id"] where the tooltip should be shown |
| `force` | `boolean` | Pass true to always show or false to always hide |
| Name | Type | Description |
| -------- | ------------- | ------------------------------------------------ |
| `target` | `HTMLElement` | An element where the tooltip should be shown |
| `force` | `boolean` | Pass true to always show or false to always hide |

#### Returns

Expand Down
10 changes: 3 additions & 7 deletions packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ export const NonFocusable: StoryObj = {
render: (args: Args) => {
return html`
<post-tooltip-trigger for="${args.id}">
<cite data-tooltip-target="${args.id}">This is a cite element with a tooltip on it.</cite>
<cite>This is a cite element with a tooltip on it.</cite>
</post-tooltip-trigger>
<post-tooltip
id="${args.id}"
Expand All @@ -133,14 +133,10 @@ export const Multiple: StoryObj = {
render: (args: Args) => {
return html`
<post-tooltip-trigger for="${args.id}">
<button class="btn btn-secondary btn-large" data-tooltip-target="${args.id}">
Tooltip button
</button>
<button class="btn btn-secondary btn-large">Tooltip button</button>
</post-tooltip-trigger>
<post-tooltip-trigger for="${args.id}">
<button class="btn btn-secondary btn-large" data-tooltip-target="${args.id}">
Same tooltip, different button
</button>
<button class="btn btn-secondary btn-large">Same tooltip, different button</button>
</post-tooltip-trigger>
<post-tooltip
id="${args.id}"
Expand Down
9 changes: 5 additions & 4 deletions packages/nextjs-integration/src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
PostTabPanel,
PostTabs,
PostTooltip,
PostTooltipTrigger,
} from '@swisspost/design-system-components-react';
import Image from 'next/image';

Expand Down Expand Up @@ -209,14 +210,14 @@ export default function Home() {
<section className="mt-huge-r">
<h2>Testing a couple web components</h2>
<PostTabs>
<PostTabHeader panel="one" data-tooltip-target="tooltip-one">
Active
<PostTabHeader panel="one">
<PostTooltipTrigger for="tooltip-one">Active</PostTooltipTrigger>
</PostTabHeader>
<PostTooltip id="tooltip-one">🚀</PostTooltip>
<PostTabPanel name="one">A content</PostTabPanel>

<PostTabHeader panel="two" data-tooltip-target="tooltip-two">
Delivered
<PostTabHeader panel="two">
<PostTooltipTrigger>Delivered</PostTooltipTrigger>
</PostTabHeader>
<PostTooltip className="bg-yellow" id="tooltip-two">
👻
Expand Down

0 comments on commit e2c2507

Please sign in to comment.