From e2c25070533e836e4e5f7df176dd163b8adf992c Mon Sep 17 00:00:00 2001 From: Philipp Gfeller Date: Tue, 2 Jul 2024 12:09:33 +0200 Subject: [PATCH] chore: remove mentions of data-tooltip-target --- .../src/app/routes/home/home.component.html | 4 ++- packages/components/src/components.d.ts | 18 +++++------ .../post-popovercontainer.tsx | 21 +++++++------ .../post-popovercontainer/readme.md | 30 +++++++++---------- .../components/post-tooltip/post-tooltip.tsx | 6 ++-- .../src/components/post-tooltip/readme.md | 14 ++++----- .../components/tooltip/tooltip.stories.ts | 10 ++----- packages/nextjs-integration/src/app/page.tsx | 9 +++--- 8 files changed, 55 insertions(+), 57 deletions(-) diff --git a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html index 58327c6fe3..f5f1b13ff7 100644 --- a/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html +++ b/packages/components-angular/projects/consumer-app/src/app/routes/home/home.component.html @@ -92,6 +92,8 @@

Post Tag

Post Tooltip

- + + + Hi there 👋
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 054a3df7ee..17fda28ebd 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -206,21 +206,21 @@ export namespace Components { */ "arrow"?: boolean; /** - * Programmatically hide this tooltip + * Programmatically hide this popover-container */ "hide": () => Promise; /** - * 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; /** - * 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; @@ -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; /** * 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; @@ -690,7 +690,7 @@ declare namespace LocalJSX { */ "onPostToggle"?: (event: PostPopovercontainerCustomEvent) => 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; } diff --git a/packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx b/packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx index d6ec059b7f..ffdfc57842 100644 --- a/packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx +++ b/packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx @@ -55,8 +55,8 @@ export class PostPopovercontainer { @Event() postToggle: EventEmitter; /** - * 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'; @@ -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) { @@ -99,7 +99,7 @@ export class PostPopovercontainer { } /** - * Programmatically hide this tooltip + * Programmatically hide this popover-container */ @Method() async hide() { @@ -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() @@ -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 */ @@ -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( @@ -189,7 +189,6 @@ export class PostPopovercontainer { middleware, }); - // Tooltip this.popoverRef.style.left = `${x}px`; this.popoverRef.style.top = `${y}px`; diff --git a/packages/components/src/components/post-popovercontainer/readme.md b/packages/components/src/components/post-popovercontainer/readme.md index 012e4a8dbd..1eaa01b83f 100644 --- a/packages/components/src/components/post-popovercontainer/readme.md +++ b/packages/components/src/components/post-popovercontainer/readme.md @@ -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 @@ -25,7 +25,7 @@ ### `hide() => Promise` -Programmatically hide this tooltip +Programmatically hide this popover-container #### Returns @@ -35,13 +35,13 @@ Type: `Promise` ### `show(target: HTMLElement) => Promise` -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 @@ -51,14 +51,14 @@ Type: `Promise` ### `toggle(target: HTMLElement, force?: boolean) => Promise` -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 diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx index 978ad3849e..32f982ca4b 100644 --- a/packages/components/src/components/post-tooltip/post-tooltip.tsx +++ b/packages/components/src/components/post-tooltip/post-tooltip.tsx @@ -38,14 +38,14 @@ export class PostTooltip { if (!this.host.id) { console.error( /*prettier-ignore*/ - '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 with a 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) { @@ -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() diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md index 67a78dd204..0c5e8f233d 100644 --- a/packages/components/src/components/post-tooltip/readme.md +++ b/packages/components/src/components/post-tooltip/readme.md @@ -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 @@ -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 diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts index 61c7fa5101..489c657a99 100644 --- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts +++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts @@ -112,7 +112,7 @@ export const NonFocusable: StoryObj = { render: (args: Args) => { return html` - This is a cite element with a tooltip on it. + This is a cite element with a tooltip on it. { return html` - + - +

Testing a couple web components

- - Active + + Active 🚀 A content - - Delivered + + Delivered 👻