diff --git a/packages/sfui/frameworks/react/components/SfTooltip/types.ts b/packages/sfui/frameworks/react/components/SfTooltip/types.ts
index 5d811e5c65..83a2eb7a8f 100644
--- a/packages/sfui/frameworks/react/components/SfTooltip/types.ts
+++ b/packages/sfui/frameworks/react/components/SfTooltip/types.ts
@@ -2,6 +2,9 @@ import type { PropsWithChildren } from 'react';
import type { UseTooltipOptions, PropsWithStyle } from '@storefront-ui/react';
export interface SfTooltipProps extends UseTooltipOptions, PropsWithChildren, PropsWithStyle {
+ id?: string;
+ 'data-testid'?: string;
label: string;
showArrow?: boolean;
+ open?: boolean;
}
diff --git a/packages/sfui/frameworks/react/hooks/useTooltip/useTooltip.ts b/packages/sfui/frameworks/react/hooks/useTooltip/useTooltip.ts
index 888b9a729e..538fe81a0d 100644
--- a/packages/sfui/frameworks/react/hooks/useTooltip/useTooltip.ts
+++ b/packages/sfui/frameworks/react/hooks/useTooltip/useTooltip.ts
@@ -9,6 +9,7 @@ import {
useDisclosure,
} from '@storefront-ui/react';
import type { UseTooltipOptions } from '@storefront-ui/react';
+import { useKey } from 'react-use';
export function useTooltip(options?: UseTooltipOptions) {
const {
@@ -67,6 +68,8 @@ export function useTooltip(options?: UseTooltipOptions) {
style: { ...userProps.style, ...arrowStyle() },
}));
+ useKey('Escape', close, { target: refs.reference.current }, [close, refs.reference]);
+
return {
refs: {
...refs,
diff --git a/packages/sfui/frameworks/vue/components/SfChip/SfChip.vue b/packages/sfui/frameworks/vue/components/SfChip/SfChip.vue
index 19e1911484..b0811f8854 100644
--- a/packages/sfui/frameworks/vue/components/SfChip/SfChip.vue
+++ b/packages/sfui/frameworks/vue/components/SfChip/SfChip.vue
@@ -5,9 +5,8 @@ const sizeClasses = {
};
(
options?: UseTooltipOptions
,
@@ -69,6 +70,8 @@ export function useTooltip });
+
return {
referenceRef,
floatingRef,
diff --git a/packages/sfui/frameworks/vue/shared/index.ts b/packages/sfui/frameworks/vue/shared/index.ts
index 6ff2eebcb0..8451ca342a 100644
--- a/packages/sfui/frameworks/vue/shared/index.ts
+++ b/packages/sfui/frameworks/vue/shared/index.ts
@@ -2,4 +2,3 @@ export * from './props';
export * from './reactiveContext';
export * from './render';
export * from './types';
-export * from './useId';
diff --git a/packages/sfui/frameworks/vue/shared/useId.ts b/packages/sfui/frameworks/vue/shared/useId.ts
deleted file mode 100644
index 8c50e63411..0000000000
--- a/packages/sfui/frameworks/vue/shared/useId.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-let id = -1;
-/* eslint-disable-next-line no-plusplus */
-export const useId = () => String(++id);
diff --git a/packages/sfui/tw-plugin-peer-next/README.md b/packages/sfui/tw-plugin-peer-next/README.md
index b95356790b..27dc0ed945 100644
--- a/packages/sfui/tw-plugin-peer-next/README.md
+++ b/packages/sfui/tw-plugin-peer-next/README.md
@@ -74,7 +74,7 @@ Made with ❤️ by A
## Why?
-Targeting next siblings with `~` is not suitable for HTML structure when pairing `input` and `label`, every `label` after changed `input` will also change. Of course we can wrap such groups but having in mind how browser works, nesting and making deeper HTML structure does affect performance of rendering HTML by browser.
+Targeting next siblings with `~` is not suitable for HTML structure when pairing `input` and `label`, every `label` after changed `input` will also change. Of course we can wrap such groups but having in mind how browsers work, nesting and making deeper HTML structure does affect performance of rendering HTML by browser.
## Installation
diff --git a/packages/tests/components/SfTooltip/SfTooltip.PageObject.ts b/packages/tests/components/SfTooltip/SfTooltip.PageObject.ts
index 0bda8bb673..7e1fcc54b4 100644
--- a/packages/tests/components/SfTooltip/SfTooltip.PageObject.ts
+++ b/packages/tests/components/SfTooltip/SfTooltip.PageObject.ts
@@ -1,6 +1,11 @@
import { BasePage } from '../../utils/BasePage';
export default class SfTooltipObject extends BasePage {
+ hasTooltipId(id: string) {
+ this.tooltip.should('have.attr', 'id', id);
+ return this;
+ }
+
isTooltipHidden() {
this.tooltip.should('not.exist');
return this;
diff --git a/packages/tests/components/SfTooltip/SfTooltip.cy.tsx b/packages/tests/components/SfTooltip/SfTooltip.cy.tsx
index 9bf0513365..808f49f039 100644
--- a/packages/tests/components/SfTooltip/SfTooltip.cy.tsx
+++ b/packages/tests/components/SfTooltip/SfTooltip.cy.tsx
@@ -1,5 +1,7 @@
import React from 'react';
-import { mount, useComponent } from '../../utils/mount';
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import { Wrapper, mount, useComponent } from '../../utils/mount';
import SfTooltipObject from './SfTooltip.PageObject';
const { vue: SfTooltipVue, react: SfTooltipReact } = useComponent('SfTooltip');
@@ -13,9 +15,20 @@ describe('SfTooltip', () => {
children?: string | React.ReactElement;
className?: string;
showArrow?: boolean;
+ id?: string;
+ 'data-testid'?: string;
+ modelValue?: Ref;
} = {},
) => {
- const { label = 'Tooltip text', children = 'Content', showArrow = false, className } = props;
+ const {
+ label = 'Tooltip text',
+ children = 'Content',
+ showArrow = false,
+ className,
+ id,
+ 'data-testid': dataTestid,
+ modelValue,
+ } = props;
return mount({
vue: {
component: SfTooltipVue,
@@ -23,15 +36,26 @@ describe('SfTooltip', () => {
label,
class: className,
showArrow,
+ modelValue,
+ id,
+ dataTestid,
},
slots: {
default: children,
},
},
react: (
-
+
{children}
-
+
),
});
};
@@ -84,4 +108,30 @@ describe('SfTooltip', () => {
page().hasClass(props.className);
});
});
+
+ describe('When id prop is added', () => {
+ it('Should apply given id to tooltip element', () => {
+ const props = { id: 'custom-id', modelValue: ref(true), label: 'Tooltip text' };
+ initializeComponent(props);
+
+ page().hasTooltipId(props.id);
+ });
+ });
+
+ describe('When open modelValue changes', () => {
+ it('Should react to the changes', () => {
+ const modelValue = ref(false);
+ initializeComponent({ modelValue });
+
+ page().isTooltipHidden();
+
+ cy.then(() => {
+ modelValue.value = true;
+ page().isTooltipVisible();
+ }).then(() => {
+ modelValue.value = false;
+ page().isTooltipHidden();
+ });
+ });
+ });
});