From 656933e35c2922a57c085362fe15fc88ef95a952 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 24 Apr 2024 16:55:46 +0200 Subject: [PATCH 01/31] Started working on the Tooltip component --- lib/src/contextual-menu/ContextualMenu.tsx | 2 +- .../tooltip/Tooltip.accessibility.test.tsx | 8 ++ lib/src/tooltip/Tooltip.stories.tsx | 37 +++++ lib/src/tooltip/Tooltip.test.tsx | 10 ++ lib/src/tooltip/Tooltip.tsx | 130 ++++++++++++++++++ lib/src/tooltip/types.tsx | 14 ++ 6 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 lib/src/tooltip/Tooltip.accessibility.test.tsx create mode 100644 lib/src/tooltip/Tooltip.stories.tsx create mode 100644 lib/src/tooltip/Tooltip.test.tsx create mode 100644 lib/src/tooltip/Tooltip.tsx create mode 100644 lib/src/tooltip/types.tsx diff --git a/lib/src/contextual-menu/ContextualMenu.tsx b/lib/src/contextual-menu/ContextualMenu.tsx index 4f8f9f77e..4c5592b61 100644 --- a/lib/src/contextual-menu/ContextualMenu.tsx +++ b/lib/src/contextual-menu/ContextualMenu.tsx @@ -104,7 +104,7 @@ const SectionList = styled.ul` gap: ${CoreTokens.spacing_4}; `; -const Title = styled.span` +const Title = styled.h2` margin: 0 0 ${CoreTokens.spacing_4} 0; padding: ${CoreTokens.spacing_4}; color: ${CoreTokens.color_grey_900}; diff --git a/lib/src/tooltip/Tooltip.accessibility.test.tsx b/lib/src/tooltip/Tooltip.accessibility.test.tsx new file mode 100644 index 000000000..3be9d3761 --- /dev/null +++ b/lib/src/tooltip/Tooltip.accessibility.test.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import { axe } from "../../test/accessibility/axe-helper.js"; +import DxcTooltip from "./Tooltip"; + +describe("Tooltip component accessibility tests", () => { + // TODO +}); diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx new file mode 100644 index 000000000..7c5652510 --- /dev/null +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import DxcTooltip from "./Tooltip"; +import Title from "../../.storybook/components/Title"; +import ExampleContainer from "../../.storybook/components/ExampleContainer"; +import DxcFlex from "../flex/Flex"; +import DxcButton from "../button/Button"; + +export default { + title: "Tooltip", + component: DxcTooltip, +}; + +export const Chromatic = () => ( + <> + {/* */} + <ExampleContainer> + <DxcTooltip position="top"> + <DxcButton label="Primary enabled" /> + </DxcTooltip> + </ExampleContainer> + <ExampleContainer> + <DxcTooltip position="bottom"> + <DxcButton label="Primary enabled" /> + </DxcTooltip> + </ExampleContainer> + <ExampleContainer> + <DxcTooltip position="left"> + <DxcButton label="Primary enabled" /> + </DxcTooltip> + </ExampleContainer> + <ExampleContainer> + <DxcTooltip position="right"> + <DxcButton label="Primary enabled" /> + </DxcTooltip> + </ExampleContainer> + </> +); diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx new file mode 100644 index 000000000..55beb1944 --- /dev/null +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import DxcTooltip from "./Tooltip"; + +describe("Tooltip component tests", () => { + test("Tooltip renders ...", () => { + // const { getByText } = render(<DxcTooltip />); + // expect(getByText("99")).toBeTruthy(); + }); +}); diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx new file mode 100644 index 000000000..dbd728ce7 --- /dev/null +++ b/lib/src/tooltip/Tooltip.tsx @@ -0,0 +1,130 @@ +import React, { useState } from "react"; +import styled, { ThemeProvider, useTheme } from "styled-components"; +import TooltipPropsType from "./types"; +import * as Popover from "@radix-ui/react-popover"; +import CoreTokens from "../common/coreTokens"; + +const DxcTooltip = ({ position = "top", children }: TooltipPropsType): JSX.Element => { + const [isOpen, changeIsOpen] = useState(false); + + const handleOnOpenTooltip = () => { + changeIsOpen(true); + }; + const handleOnCloseTooltip = () => { + changeIsOpen(false); + }; + + return ( + <Popover.Root open={isOpen}> + <Popover.Trigger asChild type={undefined}> + <TooltipTrigger onMouseEnter={handleOnOpenTooltip} onMouseLeave={handleOnCloseTooltip}> + {children} + </TooltipTrigger> + </Popover.Trigger> + <Popover.Portal> + <Popover.Content side={position} asChild> + <Tooltip position={position}>EXAMPLE</Tooltip> + {/* <DropdownMenu + id={menuId} + dropdownTriggerId={triggerId} + options={options} + iconsPosition={optionsIconPosition} + visualFocusIndex={visualFocusIndex} + menuItemOnClick={handleMenuItemOnClick} + onKeyDown={handleMenuOnKeyDown} + styles={{ width, zIndex: "2147483647" }} + ref={menuRef} + /> */} + </Popover.Content> + </Popover.Portal> + </Popover.Root> + ); +}; + +const TooltipTrigger = styled.div` + display: inline-flex; + position: relative; +`; + +const Tooltip = styled.div<{ position: TooltipPropsType["position"] }>` + height: 32px; + box-sizing: border-box; + position: absolute; + padding: 8px 12px; + transform: translate(-50%, -50%); + font-size: ${CoreTokens.type_scale_01}; + font-family: ${CoreTokens.type_sans}; + z-index: 2147483647; + white-space: nowrap; + color: ${CoreTokens.color_white}; + background-color: ${CoreTokens.color_grey_800}; + border-color: ${CoreTokens.color_grey_800}; + ${(props) => { + if (props.position === "top") { + return `top: calc(-32px - 5px); + transform: translateX(-50%); + margin-bottom: 5px; + `; + } + if (props.position === "bottom") { + return `top: 5px; + transform: translateX(-50%); + `; + } + if (props.position === "left") { + return `top: 50%; + right: calc(100% + 5px); + transform: translateY(-50%); + `; + } + if (props.position === "right") { + return `top: 50%; + left: calc(100% + 5px); + transform: translateY(-50%); + `; + } + }} + &:after { + content: ""; + position: absolute; + border-width: 5px; + border-style: solid; + + ${(props) => { + if (props.position === "top") { + return `top: 100%; + left: 50%; + border-color: ${CoreTokens.color_grey_800} transparent transparent transparent; + margin-left: -5px; + border-radius: 0 0 ${CoreTokens.border_width_1} ${CoreTokens.border_width_1}; + `; + } + if (props.position === "bottom") { + return `bottom: 100%; + left: 50%; + border-color: transparent transparent ${CoreTokens.color_grey_800} transparent; + margin-left: -5px; + border-radius: ${CoreTokens.border_width_1} ${CoreTokens.border_width_1} 0 0; + `; + } + if (props.position === "left") { + return `top: 50%; + left: 100%; + border-color: transparent transparent transparent ${CoreTokens.color_grey_800}; + margin-top: -5px; + border-radius: 0 ${CoreTokens.border_width_1} ${CoreTokens.border_width_1} 0; + `; + } + if (props.position === "right") { + return `top: 50%; + right: 100%; + border-color: transparent ${CoreTokens.color_grey_800} transparent transparent; + margin-top: -5px; + border-radius: ${CoreTokens.border_width_1} 0 0 ${CoreTokens.border_width_1}; + `; + } + }} + } +`; + +export default DxcTooltip; diff --git a/lib/src/tooltip/types.tsx b/lib/src/tooltip/types.tsx new file mode 100644 index 000000000..2e8e5f913 --- /dev/null +++ b/lib/src/tooltip/types.tsx @@ -0,0 +1,14 @@ +type Position = "top" | "bottom" | "right" | "left"; + +type Props = { + /** + * PENDING DESCRIPTION + */ + position: Position; + /** + * PENDING DESCRIPTION + */ + children: React.ReactNode +}; + +export default Props; From 7c542d435dc14b6693b74709fe4c833080fc7735 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Thu, 25 Apr 2024 13:58:39 +0200 Subject: [PATCH 02/31] Completed tooltip component --- lib/src/date-input/DateInput.tsx | 8 +- lib/src/tooltip/Tooltip.stories.tsx | 13 ++- lib/src/tooltip/Tooltip.tsx | 123 ++++++++-------------------- lib/src/tooltip/types.tsx | 6 +- 4 files changed, 51 insertions(+), 99 deletions(-) diff --git a/lib/src/date-input/DateInput.tsx b/lib/src/date-input/DateInput.tsx index 4c68eafc0..f892e58a3 100644 --- a/lib/src/date-input/DateInput.tsx +++ b/lib/src/date-input/DateInput.tsx @@ -53,7 +53,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( size, tabIndex, }, - ref + ref, ): JSX.Element => { const [innerValue, setInnerValue] = useState(defaultValue); const [isOpen, setIsOpen] = useState(false); @@ -64,7 +64,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( ? !format.toUpperCase().includes("YYYY") && +getValueForPicker(value ?? innerValue, format).format("YY") < 68 ? 2000 : 1900 - : undefined + : undefined, ); const colorsTheme = useTheme(); const translatedLabels = useTranslatedLabels(); @@ -194,6 +194,8 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( onBlur={handleDatePickerOnBlur} onKeyDown={handleDatePickerEscKeydown} avoidCollisions={false} + // + asChild > <DxcDatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} /> </StyledPopoverContent> @@ -202,7 +204,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( </div> </ThemeProvider> ); - } + }, ); const StyledPopoverContent = styled(Popover.Content)` diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index 7c5652510..c4133de06 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -14,22 +14,27 @@ export const Chromatic = () => ( <> {/* <Title title="Notification" theme="light" level={2} /> */} <ExampleContainer> - <DxcTooltip position="top"> + <DxcTooltip position="top" title="Tooltip"> <DxcButton label="Primary enabled" /> </DxcTooltip> </ExampleContainer> <ExampleContainer> - <DxcTooltip position="bottom"> + <DxcTooltip position="top" title="Tooltip"> <DxcButton label="Primary enabled" /> </DxcTooltip> </ExampleContainer> <ExampleContainer> - <DxcTooltip position="left"> + <DxcTooltip position="bottom" title="Tooltip"> <DxcButton label="Primary enabled" /> </DxcTooltip> </ExampleContainer> <ExampleContainer> - <DxcTooltip position="right"> + <DxcTooltip position="left" title="Tooltip"> + <DxcButton label="Primary enabled" /> + </DxcTooltip> + </ExampleContainer> + <ExampleContainer> + <DxcTooltip position="right" title="Tooltip"> <DxcButton label="Primary enabled" /> </DxcTooltip> </ExampleContainer> diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index dbd728ce7..4787c47e4 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -1,10 +1,10 @@ import React, { useState } from "react"; -import styled, { ThemeProvider, useTheme } from "styled-components"; +import styled from "styled-components"; import TooltipPropsType from "./types"; import * as Popover from "@radix-ui/react-popover"; import CoreTokens from "../common/coreTokens"; -const DxcTooltip = ({ position = "top", children }: TooltipPropsType): JSX.Element => { +const DxcTooltip = ({ position = "top", title = "TEST", children }: TooltipPropsType): JSX.Element => { const [isOpen, changeIsOpen] = useState(false); const handleOnOpenTooltip = () => { @@ -16,115 +16,56 @@ const DxcTooltip = ({ position = "top", children }: TooltipPropsType): JSX.Eleme return ( <Popover.Root open={isOpen}> - <Popover.Trigger asChild type={undefined}> - <TooltipTrigger onMouseEnter={handleOnOpenTooltip} onMouseLeave={handleOnCloseTooltip}> - {children} - </TooltipTrigger> + <Popover.Trigger asChild type={undefined} onMouseEnter={handleOnOpenTooltip} onMouseLeave={handleOnCloseTooltip}> + <PopoverTrigger>{children}</PopoverTrigger> </Popover.Trigger> <Popover.Portal> - <Popover.Content side={position} asChild> - <Tooltip position={position}>EXAMPLE</Tooltip> - {/* <DropdownMenu - id={menuId} - dropdownTriggerId={triggerId} - options={options} - iconsPosition={optionsIconPosition} - visualFocusIndex={visualFocusIndex} - menuItemOnClick={handleMenuItemOnClick} - onKeyDown={handleMenuOnKeyDown} - styles={{ width, zIndex: "2147483647" }} - ref={menuRef} - /> */} - </Popover.Content> + <StyledPopoverContent side={position}> + <TooltipContainer>{title}</TooltipContainer> + <TooltipArrow asChild> + <svg + width="10" + height="5" + viewBox="0 0 30 10" + preserveAspectRatio="none" + style={{ display: "block" }} + > + <polygon points="0,0 30,0 16,10 14,10"></polygon> + </svg> + </TooltipArrow> + </StyledPopoverContent> </Popover.Portal> </Popover.Root> ); }; -const TooltipTrigger = styled.div` +const PopoverTrigger = styled.div` display: inline-flex; position: relative; `; -const Tooltip = styled.div<{ position: TooltipPropsType["position"] }>` +const StyledPopoverContent = styled(Popover.Content)` + z-index: 2147483647; + &:focus-visible { + outline: none; + } +`; + +const TooltipArrow = styled(Popover.Arrow)` + fill: ${CoreTokens.color_grey_800}; +`; + +const TooltipContainer = styled.div` height: 32px; box-sizing: border-box; - position: absolute; padding: 8px 12px; - transform: translate(-50%, -50%); + border-radius: 4px; font-size: ${CoreTokens.type_scale_01}; font-family: ${CoreTokens.type_sans}; - z-index: 2147483647; white-space: nowrap; color: ${CoreTokens.color_white}; background-color: ${CoreTokens.color_grey_800}; border-color: ${CoreTokens.color_grey_800}; - ${(props) => { - if (props.position === "top") { - return `top: calc(-32px - 5px); - transform: translateX(-50%); - margin-bottom: 5px; - `; - } - if (props.position === "bottom") { - return `top: 5px; - transform: translateX(-50%); - `; - } - if (props.position === "left") { - return `top: 50%; - right: calc(100% + 5px); - transform: translateY(-50%); - `; - } - if (props.position === "right") { - return `top: 50%; - left: calc(100% + 5px); - transform: translateY(-50%); - `; - } - }} - &:after { - content: ""; - position: absolute; - border-width: 5px; - border-style: solid; - - ${(props) => { - if (props.position === "top") { - return `top: 100%; - left: 50%; - border-color: ${CoreTokens.color_grey_800} transparent transparent transparent; - margin-left: -5px; - border-radius: 0 0 ${CoreTokens.border_width_1} ${CoreTokens.border_width_1}; - `; - } - if (props.position === "bottom") { - return `bottom: 100%; - left: 50%; - border-color: transparent transparent ${CoreTokens.color_grey_800} transparent; - margin-left: -5px; - border-radius: ${CoreTokens.border_width_1} ${CoreTokens.border_width_1} 0 0; - `; - } - if (props.position === "left") { - return `top: 50%; - left: 100%; - border-color: transparent transparent transparent ${CoreTokens.color_grey_800}; - margin-top: -5px; - border-radius: 0 ${CoreTokens.border_width_1} ${CoreTokens.border_width_1} 0; - `; - } - if (props.position === "right") { - return `top: 50%; - right: 100%; - border-color: transparent ${CoreTokens.color_grey_800} transparent transparent; - margin-top: -5px; - border-radius: ${CoreTokens.border_width_1} 0 0 ${CoreTokens.border_width_1}; - `; - } - }} - } `; export default DxcTooltip; diff --git a/lib/src/tooltip/types.tsx b/lib/src/tooltip/types.tsx index 2e8e5f913..233be0415 100644 --- a/lib/src/tooltip/types.tsx +++ b/lib/src/tooltip/types.tsx @@ -8,7 +8,11 @@ type Props = { /** * PENDING DESCRIPTION */ - children: React.ReactNode + title: string; + /** + * PENDING DESCRIPTION + */ + children: React.ReactNode; }; export default Props; From a819a20908c82f3ccdc266d94b4ab549023d4b41 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Thu, 25 Apr 2024 16:44:45 +0200 Subject: [PATCH 03/31] Added functional testing for tooltip component --- lib/src/tooltip/Tooltip.stories.tsx | 24 ++------------ lib/src/tooltip/Tooltip.test.tsx | 50 ++++++++++++++++++++++++++--- lib/src/tooltip/Tooltip.tsx | 32 +++++++++++------- lib/src/tooltip/types.tsx | 2 +- 4 files changed, 69 insertions(+), 39 deletions(-) diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index c4133de06..4de67e45c 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -14,28 +14,8 @@ export const Chromatic = () => ( <> {/* <Title title="Notification" theme="light" level={2} /> */} <ExampleContainer> - <DxcTooltip position="top" title="Tooltip"> - <DxcButton label="Primary enabled" /> - </DxcTooltip> - </ExampleContainer> - <ExampleContainer> - <DxcTooltip position="top" title="Tooltip"> - <DxcButton label="Primary enabled" /> - </DxcTooltip> - </ExampleContainer> - <ExampleContainer> - <DxcTooltip position="bottom" title="Tooltip"> - <DxcButton label="Primary enabled" /> - </DxcTooltip> - </ExampleContainer> - <ExampleContainer> - <DxcTooltip position="left" title="Tooltip"> - <DxcButton label="Primary enabled" /> - </DxcTooltip> - </ExampleContainer> - <ExampleContainer> - <DxcTooltip position="right" title="Tooltip"> - <DxcButton label="Primary enabled" /> + <DxcTooltip title="Tooltip Test"> + <DxcButton label="Hoverable button" /> </DxcTooltip> </ExampleContainer> </> diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx index 55beb1944..14d1961a7 100644 --- a/lib/src/tooltip/Tooltip.test.tsx +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -1,10 +1,52 @@ import React from "react"; -import { render } from "@testing-library/react"; +import { fireEvent, render } from "@testing-library/react"; import DxcTooltip from "./Tooltip"; +import DxcButton from "../button/Button"; + +(global as any).globalThis = global; +(global as any).DOMRect = { + fromRect: () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0, x: 0, y: 0 }), +}; +(global as any).ResizeObserver = class ResizeObserver { + observe() {} + unobserve() {} + disconnect() {} +}; describe("Tooltip component tests", () => { - test("Tooltip renders ...", () => { - // const { getByText } = render(<DxcTooltip />); - // expect(getByText("99")).toBeTruthy(); + test("Tooltip does not render by default", () => { + const { queryByText } = render( + <DxcTooltip title="Tooltip Test"> + <DxcButton label="Hoverable button" /> + </DxcTooltip>, + ); + expect(queryByText("Tooltip Test")).not.toBeTruthy(); + }); + + test("Tooltip renders with correct label on hover", () => { + const { getByText, queryByText } = render( + <DxcTooltip title="Tooltip Test"> + <DxcButton label="Hoverable button" /> + </DxcTooltip>, + ); + const triggerElement = getByText("Hoverable button"); + fireEvent.mouseEnter(triggerElement); + expect(getByText("Tooltip Test")).toBeTruthy(); + fireEvent.mouseLeave(triggerElement); + expect(queryByText("Tooltip Test")).not.toBeTruthy(); + }); + + test("Tooltip sets the display position properly", () => { + const { getByText, getByTestId } = render( + <DxcTooltip title="Tooltip Test" position="top"> + <DxcButton label="Hoverable button" /> + </DxcTooltip>, + ); + const triggerElement = getByText("Hoverable button"); + fireEvent.mouseEnter(triggerElement); + const popoverContent = getByTestId("popover-content"); + expect(popoverContent).toBeTruthy(); + const position = popoverContent.getAttribute("data-side"); + expect(position).toBe("top"); }); }); diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index 4787c47e4..01569fb4c 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -1,10 +1,12 @@ import React, { useState } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import TooltipPropsType from "./types"; import * as Popover from "@radix-ui/react-popover"; import CoreTokens from "../common/coreTokens"; -const DxcTooltip = ({ position = "top", title = "TEST", children }: TooltipPropsType): JSX.Element => { +const ARROW_SIZE = 8; + +const DxcTooltip = ({ position = "bottom", title, children }: TooltipPropsType): JSX.Element => { const [isOpen, changeIsOpen] = useState(false); const handleOnOpenTooltip = () => { @@ -20,24 +22,30 @@ const DxcTooltip = ({ position = "top", title = "TEST", children }: TooltipProps <PopoverTrigger>{children}</PopoverTrigger> </Popover.Trigger> <Popover.Portal> - <StyledPopoverContent side={position}> + <StyledPopoverContent side={position} sideOffset={ARROW_SIZE} data-testid={"popover-content"}> <TooltipContainer>{title}</TooltipContainer> <TooltipArrow asChild> - <svg - width="10" - height="5" - viewBox="0 0 30 10" - preserveAspectRatio="none" - style={{ display: "block" }} - > - <polygon points="0,0 30,0 16,10 14,10"></polygon> - </svg> + <Triangle size={ARROW_SIZE} aria-hidden /> </TooltipArrow> </StyledPopoverContent> </Popover.Portal> </Popover.Root> ); }; +const Triangle = styled.span<{ size: number }>` + display: block; + height: ${(props) => `${props.size}px`}; + width: ${(props) => `${props.size}px`}; + background-color: ${CoreTokens.color_grey_800}; + position: absolute; + bottom: ${(props) => `-${props.size / 2}px`}; + ${(props) => css` + left: calc(50% - ${props.size / 2}px); + `} + clip-path: polygon(0% 0%, 100% 100%, 0% 100%); + transform: rotate(-45deg); + border-radius: 0 0 0 1px; +`; const PopoverTrigger = styled.div` display: inline-flex; diff --git a/lib/src/tooltip/types.tsx b/lib/src/tooltip/types.tsx index 233be0415..792243329 100644 --- a/lib/src/tooltip/types.tsx +++ b/lib/src/tooltip/types.tsx @@ -4,7 +4,7 @@ type Props = { /** * PENDING DESCRIPTION */ - position: Position; + position?: Position; /** * PENDING DESCRIPTION */ From fab2b9f7cbbba1248e53abb93492171717742a26 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 26 Apr 2024 10:34:25 +0200 Subject: [PATCH 04/31] Applied new tooltip to existing components --- lib/src/action-icon/ActionIcon.test.tsx | 1 - lib/src/action-icon/ActionIcon.tsx | 34 ++++---- lib/src/badge/Badge.tsx | 36 ++++---- lib/src/button/Button.test.tsx | 1 - lib/src/button/Button.tsx | 86 ++++++++++--------- lib/src/date-input/DateInput.test.tsx | 2 +- lib/src/date-input/DateInput.tsx | 1 + lib/src/date-input/DatePicker.tsx | 35 +++++--- lib/src/file-input/FileItem.tsx | 30 ++++--- lib/src/footer/Footer.tsx | 28 +++--- lib/src/header/Header.tsx | 14 ++- lib/src/layout/ApplicationLayout.tsx | 22 +++-- lib/src/select/Select.tsx | 75 ++++++++-------- lib/src/table/Table.tsx | 6 +- lib/src/toggle-group/ToggleGroup.tsx | 86 ++++++++++--------- .../tooltip/Tooltip.accessibility.test.tsx | 62 ++++++++++++- lib/src/tooltip/Tooltip.stories.tsx | 46 ++++++++-- lib/src/tooltip/Tooltip.test.tsx | 17 +++- lib/src/tooltip/Tooltip.tsx | 19 ++-- lib/src/tooltip/types.tsx | 8 +- 20 files changed, 377 insertions(+), 232 deletions(-) diff --git a/lib/src/action-icon/ActionIcon.test.tsx b/lib/src/action-icon/ActionIcon.test.tsx index 2e08bc95e..d7578d6cc 100644 --- a/lib/src/action-icon/ActionIcon.test.tsx +++ b/lib/src/action-icon/ActionIcon.test.tsx @@ -35,7 +35,6 @@ describe("Action icon component tests", () => { const button = getByRole("button"); expect(button.getAttribute("aria-label")).toBe("favourite"); - expect(button.getAttribute("title")).toBe("favourite"); expect(button.getAttribute("tabindex")).toBe("1"); }); }); diff --git a/lib/src/action-icon/ActionIcon.tsx b/lib/src/action-icon/ActionIcon.tsx index 1d9970fbb..ddd48eba1 100644 --- a/lib/src/action-icon/ActionIcon.tsx +++ b/lib/src/action-icon/ActionIcon.tsx @@ -3,26 +3,30 @@ import ActionIconPropsTypes, { RefType } from "./types"; import styled from "styled-components"; import CoreTokens from "../common/coreTokens"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const DxcActionIcon = React.forwardRef<RefType, ActionIconPropsTypes>( ({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => { return ( - <ActionIcon - aria-label={title} - disabled={disabled} - onClick={onClick} - onMouseDown={(event) => { - event.stopPropagation(); - }} - tabIndex={tabIndex} - title={title} - type="button" - ref={ref} - > - {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} - </ActionIcon> + <DxcTooltip title={title}> + <ActionIcon + aria-label={title} + disabled={disabled} + onClick={onClick} + onMouseDown={(event) => { + event.stopPropagation(); + }} + tabIndex={tabIndex} + // TODO: Remove title? (Still needed to pass some tests) + title={title} + type="button" + ref={ref} + > + {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} + </ActionIcon> + </DxcTooltip> ); - } + }, ); const ActionIcon = styled.button` diff --git a/lib/src/badge/Badge.tsx b/lib/src/badge/Badge.tsx index f0a7feaf8..4a2d80f0f 100644 --- a/lib/src/badge/Badge.tsx +++ b/lib/src/badge/Badge.tsx @@ -4,6 +4,7 @@ import BadgePropsType from "./types"; import DxcFlex from "../flex/Flex"; import CoreTokens from "../common/coreTokens"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const contextualColorMap = { grey: { @@ -93,23 +94,24 @@ const DxcBadge = ({ size = "medium", }: BadgePropsType): JSX.Element => { return ( - <BadgeContainer - label={label} - mode={mode} - color={(mode === "contextual" && color) || undefined} - size={size} - title={title} - aria-label={title} - > - {(mode === "contextual" && ( - <DxcFlex gap="0.125rem" alignItems="center"> - {icon && ( - <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer> - )} - <Label label={label} notificationLimit={notificationLimit} size={size} /> - </DxcFlex> - )) || <Label label={label} notificationLimit={notificationLimit} size={size} />} - </BadgeContainer> + <DxcTooltip title={title}> + <BadgeContainer + label={label} + mode={mode} + color={(mode === "contextual" && color) || undefined} + size={size} + aria-label={title} + > + {(mode === "contextual" && ( + <DxcFlex gap="0.125rem" alignItems="center"> + {icon && ( + <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer> + )} + <Label label={label} notificationLimit={notificationLimit} size={size} /> + </DxcFlex> + )) || <Label label={label} notificationLimit={notificationLimit} size={size} />} + </BadgeContainer> + </DxcTooltip> ); }; diff --git a/lib/src/button/Button.test.tsx b/lib/src/button/Button.test.tsx index ea8bc37ae..c2b254356 100644 --- a/lib/src/button/Button.test.tsx +++ b/lib/src/button/Button.test.tsx @@ -22,7 +22,6 @@ describe("Button component tests", () => { const button = getByRole("button"); expect(button.getAttribute("aria-label")).toBe("Go home"); - expect(button.getAttribute("title")).toBe("Go home"); expect(button.getAttribute("tabindex")).toBe("1"); }); }); diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx index 3a55775c7..c92f33725 100644 --- a/lib/src/button/Button.tsx +++ b/lib/src/button/Button.tsx @@ -5,6 +5,7 @@ import { getMargin } from "../common/utils"; import useTheme from "../useTheme"; import ButtonPropsType from "./types"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const DxcButton = ({ label = "", @@ -23,25 +24,26 @@ const DxcButton = ({ return ( <ThemeProvider theme={colorsTheme.button}> - <Button - aria-label={title} - disabled={disabled} - onClick={() => { - onClick(); - }} - tabIndex={disabled ? -1 : tabIndex} - title={title} - type={type} - $mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode} - hasLabel={label ? true : false} - hasIcon={icon ? true : false} - iconPosition={iconPosition} - size={size} - margin={margin} - > - {label && <LabelContainer>{label}</LabelContainer>} - {icon && <IconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>} - </Button> + <DxcTooltip title={title}> + <Button + aria-label={title} + disabled={disabled} + onClick={() => { + onClick(); + }} + tabIndex={disabled ? -1 : tabIndex} + type={type} + $mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode} + hasLabel={label ? true : false} + hasIcon={icon ? true : false} + iconPosition={iconPosition} + size={size} + margin={margin} + > + {label && <LabelContainer>{label}</LabelContainer>} + {icon && <IconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>} + </Button> + </DxcTooltip> </ThemeProvider> ); }; @@ -65,29 +67,29 @@ const getButtonStyles = ($mode: ButtonPropsType["mode"], theme: AdvancedTheme["b $mode === "primary" ? theme.primaryBorderRadius : $mode === "secondary" - ? theme.secondaryBorderRadius - : theme.textBorderRadius + ? theme.secondaryBorderRadius + : theme.textBorderRadius }; border-width: ${ $mode === "primary" ? theme.primaryBorderThickness : $mode === "secondary" - ? theme.secondaryBorderThickness - : theme.textBorderThickness + ? theme.secondaryBorderThickness + : theme.textBorderThickness }; border-style: ${ $mode === "primary" ? theme.primaryBorderStyle : $mode === "secondary" - ? theme.secondaryBorderStyle - : theme.textBorderStyle + ? theme.secondaryBorderStyle + : theme.textBorderStyle }; font-family: ${ $mode === "primary" ? theme.primaryFontFamily : $mode === "secondary" - ? theme.secondaryFontFamily - : theme.textFontFamily + ? theme.secondaryFontFamily + : theme.textFontFamily }; font-size: ${ $mode === "primary" ? theme.primaryFontSize : $mode === "secondary" ? theme.secondaryFontSize : theme.textFontSize @@ -96,37 +98,37 @@ const getButtonStyles = ($mode: ButtonPropsType["mode"], theme: AdvancedTheme["b $mode === "primary" ? theme.primaryFontWeight : $mode === "secondary" - ? theme.secondaryFontWeight - : theme.textFontWeight + ? theme.secondaryFontWeight + : theme.textFontWeight }; background-color: ${ $mode === "primary" ? theme.primaryBackgroundColor : $mode === "secondary" - ? theme.secondaryBackgroundColor - : theme.textBackgroundColor + ? theme.secondaryBackgroundColor + : theme.textBackgroundColor }; color: ${ $mode === "primary" ? theme.primaryFontColor : $mode === "secondary" - ? theme.secondaryFontColor - : theme.textFontColor + ? theme.secondaryFontColor + : theme.textFontColor }; `; const getButtonStates = ( disabled: ButtonPropsType["disabled"], $mode: ButtonPropsType["mode"], - theme: AdvancedTheme["button"] + theme: AdvancedTheme["button"], ) => ` &:hover { background-color: ${ $mode === "primary" ? theme.primaryHoverBackgroundColor : $mode === "secondary" - ? theme.secondaryHoverBackgroundColor - : theme.textHoverBackgroundColor + ? theme.secondaryHoverBackgroundColor + : theme.textHoverBackgroundColor }; color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""}; } @@ -138,8 +140,8 @@ const getButtonStates = ( $mode === "primary" ? theme.primaryActiveBackgroundColor : $mode === "secondary" - ? theme.secondaryActiveBackgroundColor - : theme.textActiveBackgroundColor + ? theme.secondaryActiveBackgroundColor + : theme.textActiveBackgroundColor }; color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""}; border-color: ${$mode === "secondary" ? "transparent" : ""}; @@ -152,15 +154,15 @@ const getButtonStates = ( $mode === "primary" ? theme.primaryDisabledBackgroundColor : $mode === "secondary" - ? theme.secondaryDisabledBackgroundColor - : theme.textDisabledBackgroundColor + ? theme.secondaryDisabledBackgroundColor + : theme.textDisabledBackgroundColor }; color: ${ $mode === "primary" ? theme.primaryDisabledFontColor : $mode === "secondary" - ? theme.secondaryDisabledFontColor - : theme.textDisabledFontColor + ? theme.secondaryDisabledFontColor + : theme.textDisabledFontColor }; border-color: ${$mode === "secondary" ? theme.secondaryDisabledBorderColor : ""}; } diff --git a/lib/src/date-input/DateInput.test.tsx b/lib/src/date-input/DateInput.test.tsx index 74e19db04..1895e7636 100644 --- a/lib/src/date-input/DateInput.test.tsx +++ b/lib/src/date-input/DateInput.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { render, fireEvent } from "@testing-library/react"; +import { render, fireEvent, getAllByRole } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import dayjs from "dayjs"; import DxcDateInput from "./DateInput"; diff --git a/lib/src/date-input/DateInput.tsx b/lib/src/date-input/DateInput.tsx index f892e58a3..281f5393b 100644 --- a/lib/src/date-input/DateInput.tsx +++ b/lib/src/date-input/DateInput.tsx @@ -76,6 +76,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( useEffect(() => { if (!disabled) { + // TODO: REVIEW QUERY SELECTOR const actionButtonRef = dateRef?.current.querySelector("[title='Select date']"); actionButtonRef?.setAttribute("aria-haspopup", true); actionButtonRef?.setAttribute("role", "combobox"); diff --git a/lib/src/date-input/DatePicker.tsx b/lib/src/date-input/DatePicker.tsx index 6b604dc85..166402715 100644 --- a/lib/src/date-input/DatePicker.tsx +++ b/lib/src/date-input/DatePicker.tsx @@ -6,6 +6,7 @@ import Calendar from "./Calendar"; import YearPicker from "./YearPicker"; import useTranslatedLabels from "../useTranslatedLabels"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const today = dayjs(); @@ -32,13 +33,16 @@ const DxcDatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Ele return ( <DatePicker id={id}> <PickerHeader> - <HeaderButton - aria-label={translatedLabels.calendar.previousMonthTitle} - title={translatedLabels.calendar.previousMonthTitle} - onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1))} - > - <DxcIcon icon="keyboard_arrow_left" /> - </HeaderButton> + <DxcTooltip title={translatedLabels.calendar.previousMonthTitle}> + <HeaderButton + aria-label={translatedLabels.calendar.previousMonthTitle} + onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1))} + // TODO: Remove title? (Still needed to pass some tests) + title={translatedLabels.calendar.previousMonthTitle} + > + <DxcIcon icon="keyboard_arrow_left" /> + </HeaderButton> + </DxcTooltip> <HeaderYearTrigger aria-live="polite" onClick={() => setContent((content) => (content === "yearPicker" ? "calendar" : "yearPicker"))} @@ -48,13 +52,16 @@ const DxcDatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Ele </HeaderYearTriggerLabel> <DxcIcon icon={content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down"} /> </HeaderYearTrigger> - <HeaderButton - aria-label={translatedLabels.calendar.nextMonthTitle} - title={translatedLabels.calendar.nextMonthTitle} - onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1))} - > - <DxcIcon icon="keyboard_arrow_right" /> - </HeaderButton> + <DxcTooltip title={translatedLabels.calendar.nextMonthTitle}> + <HeaderButton + aria-label={translatedLabels.calendar.nextMonthTitle} + onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1))} + // TODO: Remove title? (Still needed to pass some tests) + title={translatedLabels.calendar.nextMonthTitle} + > + <DxcIcon icon="keyboard_arrow_right" /> + </HeaderButton> + </DxcTooltip> </PickerHeader> {content === "calendar" && ( <Calendar diff --git a/lib/src/file-input/FileItem.tsx b/lib/src/file-input/FileItem.tsx index 98bbbd34b..d1ff70af2 100644 --- a/lib/src/file-input/FileItem.tsx +++ b/lib/src/file-input/FileItem.tsx @@ -5,6 +5,7 @@ import useTheme from "../useTheme"; import useTranslatedLabels from "../useTranslatedLabels"; import { FileItemProps } from "./types"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const FileItem = ({ fileName = "", @@ -44,19 +45,24 @@ const FileItem = ({ <DxcIcon icon="filled_error" /> </ErrorIcon> )} - <DeleteFileAction - onClick={() => { - onDelete(fileName); - }} - type="button" - title={translatedLabels.fileInput.deleteFileActionTitle} - aria-label={translatedLabels.fileInput.deleteFileActionTitle} - tabIndex={tabIndex} - > - <DxcIcon icon="close" /> - </DeleteFileAction> + <DxcTooltip title={translatedLabels.fileInput.deleteFileActionTitle}> + <DeleteFileAction + onClick={() => { + onDelete(fileName); + }} + type="button" + aria-label={translatedLabels.fileInput.deleteFileActionTitle} + tabIndex={tabIndex} + > + <DxcIcon icon="close" /> + </DeleteFileAction> + </DxcTooltip> </DxcFlex> - {error && !singleFileMode && <ErrorMessage role="alert" aria-live="assertive">{error}</ErrorMessage>} + {error && !singleFileMode && ( + <ErrorMessage role="alert" aria-live="assertive"> + {error} + </ErrorMessage> + )} </FileItemContent> </MainContainer> </ThemeProvider> diff --git a/lib/src/footer/Footer.tsx b/lib/src/footer/Footer.tsx index b8ee8b45f..5431bfeb4 100644 --- a/lib/src/footer/Footer.tsx +++ b/lib/src/footer/Footer.tsx @@ -7,6 +7,7 @@ import { dxcLogo, dxcSmallLogo } from "./Icons"; import FooterPropsType from "./types"; import DxcFlex from "../flex/Flex"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const DxcFooter = ({ socialLinks, @@ -33,7 +34,7 @@ const DxcFooter = ({ ) : ( colorsTheme.footer.logo ), - [colorsTheme] + [colorsTheme], ); return ( @@ -44,18 +45,19 @@ const DxcFooter = ({ {mode === "default" && ( <DxcFlex> {socialLinks?.map((link, index) => ( - <SocialAnchor - href={link.href} - tabIndex={tabIndex} - title={link.title} - aria-label={link.title} - key={`social${index}${link.href}`} - index={index} - > - <SocialIconContainer> - {typeof link.logo === "string" ? <DxcIcon icon={link.logo} /> : link.logo} - </SocialIconContainer> - </SocialAnchor> + <DxcTooltip title={link.title}> + <SocialAnchor + href={link.href} + tabIndex={tabIndex} + aria-label={link.title} + key={`social${index}${link.href}`} + index={index} + > + <SocialIconContainer> + {typeof link.logo === "string" ? <DxcIcon icon={link.logo} /> : link.logo} + </SocialIconContainer> + </SocialAnchor> + </DxcTooltip> ))} </DxcFlex> )} diff --git a/lib/src/header/Header.tsx b/lib/src/header/Header.tsx index 51a0e60a1..29167aee3 100644 --- a/lib/src/header/Header.tsx +++ b/lib/src/header/Header.tsx @@ -7,6 +7,7 @@ import useTheme from "../useTheme"; import useTranslatedLabels from "../useTranslatedLabels"; import HeaderPropsType from "./types"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const Dropdown = (props: React.ComponentProps<typeof DxcDropdown>) => ( <HeaderDropdown> @@ -109,14 +110,11 @@ const DxcHeader = ({ <ResponsiveMenu hasVisibility={isMenuVisible}> <ResponsiveIconsContainer> <ResponsiveLogoContainer>{headerResponsiveLogo}</ResponsiveLogoContainer> - <CloseAction - tabIndex={tabIndex} - onClick={handleMenu} - aria-label={translatedLabels.header.closeIcon} - title={translatedLabels.header.closeIcon} - > - <DxcIcon icon="close" /> - </CloseAction> + <DxcTooltip title={translatedLabels.header.closeIcon}> + <CloseAction tabIndex={tabIndex} onClick={handleMenu} aria-label={translatedLabels.header.closeIcon}> + <DxcIcon icon="close" /> + </CloseAction> + </DxcTooltip> </ResponsiveIconsContainer> <Content isResponsive={isResponsive} diff --git a/lib/src/layout/ApplicationLayout.tsx b/lib/src/layout/ApplicationLayout.tsx index 87f630c99..757f20869 100644 --- a/lib/src/layout/ApplicationLayout.tsx +++ b/lib/src/layout/ApplicationLayout.tsx @@ -9,6 +9,7 @@ import AppLayoutPropsType, { AppLayoutMainPropsType } from "./types"; import { SidenavContextProvider, useResponsiveSidenavVisibility } from "../sidenav/SidenavContext"; import useTranslatedLabels from "../useTranslatedLabels"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const year = new Date().getFullYear(); const Main = ({ children }: AppLayoutMainPropsType): JSX.Element => <>{children}</>; @@ -100,14 +101,15 @@ const DxcApplicationLayout = ({ <HeaderContainer>{headerContent}</HeaderContainer> {sidenav && isResponsive && ( <VisibilityToggle> - <HamburgerTrigger - onClick={handleSidenavVisibility} - aria-label={visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle} - title={translatedLabels.applicationLayout.visibilityToggleTitle} - > - <DxcIcon icon="Menu" /> - {visibilityToggleLabel} - </HamburgerTrigger> + <DxcTooltip title={translatedLabels.applicationLayout.visibilityToggleTitle}> + <HamburgerTrigger + onClick={handleSidenavVisibility} + aria-label={visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle} + > + <DxcIcon icon="Menu" /> + {visibilityToggleLabel} + </HamburgerTrigger> + </DxcTooltip> </VisibilityToggle> )} <BodyContainer> @@ -172,7 +174,9 @@ const HamburgerTrigger = styled.button` padding: 12px 4px; background-color: transparent; box-shadow: 0 0 0 2px transparent; - font-family: Open Sans, sans-serif; + font-family: + Open Sans, + sans-serif; font-weight: 600; font-size: 14px; color: #000; diff --git a/lib/src/select/Select.tsx b/lib/src/select/Select.tsx index 93ec6a036..7e2bd8c05 100644 --- a/lib/src/select/Select.tsx +++ b/lib/src/select/Select.tsx @@ -8,6 +8,7 @@ import SelectPropsType, { Option, OptionGroup, RefType } from "./types"; import Listbox from "./Listbox"; import * as Popover from "@radix-ui/react-popover"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const isOptionGroup = (option: Option | OptionGroup): option is OptionGroup => "options" in option && option.options != null; @@ -25,7 +26,7 @@ const canOpenOptions = (options: Option[] | OptionGroup[], disabled: boolean) => const filterOptionsBySearchValue = ( options: Option[] | OptionGroup[], - searchValue: string + searchValue: string, ): Option[] | OptionGroup[] => { if (options?.length > 0) { if (isArrayOfOptionGroups(options)) @@ -33,7 +34,7 @@ const filterOptionsBySearchValue = ( const group = { label: optionGroup.label, options: optionGroup.options.filter((option) => - option.label.toUpperCase().includes(searchValue.toUpperCase()) + option.label.toUpperCase().includes(searchValue.toUpperCase()), ), }; return group; @@ -47,7 +48,7 @@ const getLastOptionIndex = ( filteredOptions: Option[] | OptionGroup[], searchable: boolean, optional: boolean, - multiple: boolean + multiple: boolean, ) => { let last = 0; const reducer = (acc: number, current: OptionGroup) => acc + current.options?.length; @@ -67,7 +68,7 @@ const getSelectedOption = ( options: Option[] | OptionGroup[], multiple: boolean, optional: boolean, - optionalItem: Option + optionalItem: Option, ) => { let selectedOption: Option | Option[] = multiple ? [] : ({} as Option); let singleSelectionIndex: number; @@ -164,7 +165,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( size = "medium", tabIndex = 0, }, - ref + ref, ): JSX.Element => { const selectId = `select-${useId()}`; const selectLabelId = `label-${selectId}`; @@ -188,11 +189,11 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( const filteredOptions = useMemo(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]); const lastOptionIndex = useMemo( () => getLastOptionIndex(options, filteredOptions, searchable, optional, multiple), - [options, filteredOptions, searchable, optional, multiple] + [options, filteredOptions, searchable, optional, multiple], ); const { selectedOption, singleSelectionIndex } = useMemo( () => getSelectedOption(value ?? innerValue, options, multiple, optional, optionalItem), - [value, innerValue, options, multiple, optional, optionalItem] + [value, innerValue, options, multiple, optional, optionalItem], ); const openOptions = () => { @@ -275,7 +276,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( (!isOpen || (visualFocusIndex === -1 && singleSelectionIndex > -1 && singleSelectionIndex <= lastOptionIndex)) ? changeVisualFocusIndex(singleSelectionIndex) : changeVisualFocusIndex((visualFocusIndex) => - visualFocusIndex === 0 || visualFocusIndex === -1 ? lastOptionIndex : visualFocusIndex - 1 + visualFocusIndex === 0 || visualFocusIndex === -1 ? lastOptionIndex : visualFocusIndex - 1, ); openOptions(); break; @@ -350,7 +351,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( !multiple && closeOptions(); setSearchValue(""); }, - [handleSelectChangeValue, closeOptions, multiple] + [handleSelectChangeValue, closeOptions, multiple], ); useEffect(() => { @@ -404,19 +405,20 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && ( <SelectionIndicator> <SelectionNumber disabled={disabled}>{selectedOption.length}</SelectionNumber> - <ClearOptionsAction - disabled={disabled} - onMouseDown={(event) => { - // Avoid input to lose focus when pressed - event.preventDefault(); - }} - onClick={handleClearOptionsActionOnClick} - tabIndex={-1} - title={translatedLabels.select.actionClearSelectionTitle} - aria-label={translatedLabels.select.actionClearSelectionTitle} - > - <DxcIcon icon="clear" /> - </ClearOptionsAction> + <DxcTooltip title={translatedLabels.select.actionClearSelectionTitle}> + <ClearOptionsAction + disabled={disabled} + onMouseDown={(event) => { + // Avoid input to lose focus when pressed + event.preventDefault(); + }} + onClick={handleClearOptionsActionOnClick} + tabIndex={-1} + aria-label={translatedLabels.select.actionClearSelectionTitle} + > + <DxcIcon icon="clear" /> + </ClearOptionsAction> + </DxcTooltip> </SelectionIndicator> )} <SearchableValueContainer> @@ -466,18 +468,21 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( </ErrorIcon> )} {searchable && searchValue.length > 0 && ( - <ClearSearchAction - onMouseDown={(event) => { - // Avoid input to lose focus - event.preventDefault(); - }} - onClick={handleClearSearchActionOnClick} - tabIndex={-1} - title={translatedLabels.select.actionClearSearchTitle} - aria-label={translatedLabels.select.actionClearSearchTitle} - > - <DxcIcon icon="clear" /> - </ClearSearchAction> + // TODO -> Solve problem: Using tooltip makes it lose focus on hover + // <DxcTooltip title={translatedLabels.select.actionClearSelectionTitle}> + <ClearSearchAction + onMouseDown={(event) => { + // Avoid input to lose focus + event.preventDefault(); + }} + onClick={handleClearSearchActionOnClick} + tabIndex={-1} + title={translatedLabels.select.actionClearSearchTitle} + aria-label={translatedLabels.select.actionClearSearchTitle} + > + <DxcIcon icon="clear" /> + </ClearSearchAction> + // </DxcTooltip> )} <CollapseIndicator disabled={disabled}> <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} /> @@ -521,7 +526,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( </SelectContainer> </ThemeProvider> ); - } + }, ); const sizes = { diff --git a/lib/src/table/Table.tsx b/lib/src/table/Table.tsx index 6d94cda1a..a1975a331 100644 --- a/lib/src/table/Table.tsx +++ b/lib/src/table/Table.tsx @@ -10,6 +10,7 @@ import DxcDropdown from "../dropdown/Dropdown"; import DxcFlex from "../flex/Flex"; import { HalstackProvider } from "../HalstackContext"; import DxcActionIcon from "../action-icon/ActionIcon"; +import DxcTooltip from "../tooltip/Tooltip"; const overwriteTheme = (theme: DeepPartial<AdvancedTheme>) => { const newTheme = DropdownTheme; @@ -35,13 +36,14 @@ export const DxcActionsCell = ({ actions }: ActionCellsPropsType): JSX.Element = index < maxNumberOfActions && ( <DxcActionIcon icon={action.icon} + // TODO: Remove title? (Still needed for aria-label) title={action.title} onClick={action.onClick} disabled={action.disabled ?? false} tabIndex={action.tabIndex ?? 0} key={`action-${index}`} /> - ) + ), )} {actionDropdown && ( <HalstackProvider advancedTheme={overwriteTheme(colorsTheme)} key={`provider-dropdown`}> @@ -64,7 +66,7 @@ const DxcTable = ({ children, margin, mode = "default" }: TablePropsType): JSX.E return ( <ThemeProvider theme={colorsTheme.table}> - <DxcTableContainer margin={margin}> + <DxcTableContainer margin={margin}> <DxcTableContent mode={mode}>{children}</DxcTableContent> </DxcTableContainer> </ThemeProvider> diff --git a/lib/src/toggle-group/ToggleGroup.tsx b/lib/src/toggle-group/ToggleGroup.tsx index 28114550b..eb816263d 100644 --- a/lib/src/toggle-group/ToggleGroup.tsx +++ b/lib/src/toggle-group/ToggleGroup.tsx @@ -5,6 +5,7 @@ import useTheme from "../useTheme"; import ToggleGroupPropsType, { OptionLabel } from "./types"; import DxcFlex from "../flex/Flex"; import DxcIcon from "../icon/Icon"; +import DxcTooltip from "../tooltip/Tooltip"; const DxcToggleGroup = ({ label, @@ -66,48 +67,49 @@ const DxcToggleGroup = ({ <HelperText disabled={disabled}>{helperText}</HelperText> <OptionsContainer aria-labelledby={toggleGroupLabelId}> {options.map((option, i) => ( - <ToggleButton - key={`toggle-${i}-${option.label}`} - aria-label={option.title} - aria-pressed={ - multiple - ? value - ? Array.isArray(value) && value.includes(option.value) - : Array.isArray(selectedValue) && selectedValue.includes(option.value) - : value - ? option.value === value - : option.value === selectedValue - } - disabled={disabled} - onClick={() => { - handleToggleChange(option.value); - }} - onKeyDown={(event) => { - handleOnKeyDown(event, option.value); - }} - tabIndex={!disabled ? tabIndex : -1} - title={option.title} - hasIcon={option.icon} - optionLabel={option.label} - selected={ - multiple - ? value - ? Array.isArray(value) && value.includes(option.value) - : Array.isArray(selectedValue) && selectedValue.includes(option.value) - : value - ? option.value === value - : option.value === selectedValue - } - > - <DxcFlex alignItems="center"> - {option.icon && ( - <IconContainer optionLabel={option.label}> - {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon} - </IconContainer> - )} - {option.label && <LabelContainer>{option.label}</LabelContainer>} - </DxcFlex> - </ToggleButton> + <DxcTooltip title={option.title}> + <ToggleButton + key={`toggle-${i}-${option.label}`} + aria-label={option.title} + aria-pressed={ + multiple + ? value + ? Array.isArray(value) && value.includes(option.value) + : Array.isArray(selectedValue) && selectedValue.includes(option.value) + : value + ? option.value === value + : option.value === selectedValue + } + disabled={disabled} + onClick={() => { + handleToggleChange(option.value); + }} + onKeyDown={(event) => { + handleOnKeyDown(event, option.value); + }} + tabIndex={!disabled ? tabIndex : -1} + hasIcon={option.icon} + optionLabel={option.label} + selected={ + multiple + ? value + ? Array.isArray(value) && value.includes(option.value) + : Array.isArray(selectedValue) && selectedValue.includes(option.value) + : value + ? option.value === value + : option.value === selectedValue + } + > + <DxcFlex alignItems="center"> + {option.icon && ( + <IconContainer optionLabel={option.label}> + {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon} + </IconContainer> + )} + {option.label && <LabelContainer>{option.label}</LabelContainer>} + </DxcFlex> + </ToggleButton> + </DxcTooltip> ))} </OptionsContainer> </ToggleGroup> diff --git a/lib/src/tooltip/Tooltip.accessibility.test.tsx b/lib/src/tooltip/Tooltip.accessibility.test.tsx index 3be9d3761..9ba836a8f 100644 --- a/lib/src/tooltip/Tooltip.accessibility.test.tsx +++ b/lib/src/tooltip/Tooltip.accessibility.test.tsx @@ -1,8 +1,66 @@ import React from "react"; -import { render } from "@testing-library/react"; +import { fireEvent, render } from "@testing-library/react"; import { axe } from "../../test/accessibility/axe-helper.js"; import DxcTooltip from "./Tooltip"; +import DxcButton from "../button/Button"; + +(global as any).globalThis = global; +(global as any).DOMRect = { + fromRect: () => ({ top: 0, left: 0, bottom: 0, right: 0, width: 0, height: 0, x: 0, y: 0 }), +}; +(global as any).ResizeObserver = class ResizeObserver { + observe() {} + unobserve() {} + disconnect() {} +}; describe("Tooltip component accessibility tests", () => { - // TODO + it("Should not have basic accessibility issues for bottom position", async () => { + // baseElement is needed when using React Portals + const { baseElement, getByText } = render( + <DxcTooltip title="Tooltip Test" position="bottom"> + <DxcButton label="Hoverable button" /> + </DxcTooltip>, + ); + const triggerElement = getByText("Hoverable button"); + fireEvent.mouseEnter(triggerElement); + const results = await axe(baseElement); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for top position", async () => { + // baseElement is needed when using React Portals + const { baseElement, getByText } = render( + <DxcTooltip title="Tooltip Test" position="top"> + <DxcButton label="Hoverable button" /> + </DxcTooltip>, + ); + const triggerElement = getByText("Hoverable button"); + fireEvent.mouseEnter(triggerElement); + const results = await axe(baseElement); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for left position", async () => { + // baseElement is needed when using React Portals + const { baseElement, getByText } = render( + <DxcTooltip title="Tooltip Test" position="left"> + <DxcButton label="Hoverable button" /> + </DxcTooltip>, + ); + const triggerElement = getByText("Hoverable button"); + fireEvent.mouseEnter(triggerElement); + const results = await axe(baseElement); + expect(results).toHaveNoViolations(); + }); + it("Should not have basic accessibility issues for right position", async () => { + // baseElement is needed when using React Portals + const { baseElement, getByText } = render( + <DxcTooltip title="Tooltip Test" position="right"> + <DxcButton label="Hoverable button" /> + </DxcTooltip>, + ); + const triggerElement = getByText("Hoverable button"); + fireEvent.mouseEnter(triggerElement); + const results = await axe(baseElement); + expect(results).toHaveNoViolations(); + }); }); diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index 4de67e45c..f562de2eb 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -1,22 +1,54 @@ import React from "react"; import DxcTooltip from "./Tooltip"; -import Title from "../../.storybook/components/Title"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; -import DxcFlex from "../flex/Flex"; import DxcButton from "../button/Button"; +import { userEvent, within } from "@storybook/testing-library"; +import DxcInset from "../inset/Inset"; +import DxcFlex from "../flex/Flex"; +import DxcBleed from "../bleed/Bleed"; +import Title from "../../.storybook/components/Title"; export default { title: "Tooltip", component: DxcTooltip, }; -export const Chromatic = () => ( +const Tooltip = () => ( <> - {/* <Title title="Notification" theme="light" level={2} /> */} + <Title title="Tooltips" theme="light" level={2} /> <ExampleContainer> - <DxcTooltip title="Tooltip Test"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> + <DxcInset horizontal="5rem" vertical="1rem"> + <DxcFlex gap="2rem"> + <DxcTooltip title="Tooltip Test" position="bottom"> + <DxcButton label="Hoverable button" title="Button Title" /> + </DxcTooltip> + <DxcTooltip title="Tooltip Test" position="top"> + <DxcButton label="Hoverable button" title="Button Title" /> + </DxcTooltip> + </DxcFlex> + </DxcInset> + </ExampleContainer> + <ExampleContainer> + <DxcInset horizontal="5rem" vertical="1rem"> + <DxcFlex gap="2rem"> + <DxcTooltip title="Tooltip Test" position="left"> + <DxcButton label="Hoverable button" title="Button Title" /> + </DxcTooltip> + <DxcTooltip title="Tooltip Test" position="right"> + <DxcButton label="Hoverable button" title="Button Title" /> + </DxcTooltip> + </DxcFlex> + </DxcInset> </ExampleContainer> </> ); + +export const Chromatic = Tooltip.bind({}); +Chromatic.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const buttonList = canvas.getAllByRole("button"); + await userEvent.hover(buttonList[0]); + await userEvent.hover(buttonList[1]); + await userEvent.hover(buttonList[2]); + await userEvent.hover(buttonList[3]); +}; diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx index 14d1961a7..b9947fed0 100644 --- a/lib/src/tooltip/Tooltip.test.tsx +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -35,8 +35,21 @@ describe("Tooltip component tests", () => { fireEvent.mouseLeave(triggerElement); expect(queryByText("Tooltip Test")).not.toBeTruthy(); }); - - test("Tooltip sets the display position properly", () => { + + test("Tooltip sets the default display position properly", () => { + const { getByText, getByTestId } = render( + <DxcTooltip title="Tooltip Test"> + <DxcButton label="Hoverable button" /> + </DxcTooltip>, + ); + const triggerElement = getByText("Hoverable button"); + fireEvent.mouseEnter(triggerElement); + const popoverContent = getByTestId("popover-content"); + expect(popoverContent).toBeTruthy(); + const position = popoverContent.getAttribute("data-side"); + expect(position).toBe("bottom"); + }); + test("Tooltip sets the custom display position properly", () => { const { getByText, getByTestId } = render( <DxcTooltip title="Tooltip Test" position="top"> <DxcButton label="Hoverable button" /> diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index 01569fb4c..d7ac42e95 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -16,20 +16,29 @@ const DxcTooltip = ({ position = "bottom", title, children }: TooltipPropsType): changeIsOpen(false); }; - return ( + return title ? ( <Popover.Root open={isOpen}> - <Popover.Trigger asChild type={undefined} onMouseEnter={handleOnOpenTooltip} onMouseLeave={handleOnCloseTooltip}> + <Popover.Trigger + asChild + type={undefined} + aria-expanded={undefined} + aria-controls={undefined} + onMouseEnter={handleOnOpenTooltip} + onMouseLeave={handleOnCloseTooltip} + > <PopoverTrigger>{children}</PopoverTrigger> </Popover.Trigger> <Popover.Portal> - <StyledPopoverContent side={position} sideOffset={ARROW_SIZE} data-testid={"popover-content"}> + <StyledPopoverContent side={position} sideOffset={ARROW_SIZE} data-testid={"popover-content"} role="tooltip"> <TooltipContainer>{title}</TooltipContainer> - <TooltipArrow asChild> - <Triangle size={ARROW_SIZE} aria-hidden /> + <TooltipArrow asChild aria-hidden> + <Triangle size={ARROW_SIZE} /> </TooltipArrow> </StyledPopoverContent> </Popover.Portal> </Popover.Root> + ) : ( + <>{children}</> ); }; const Triangle = styled.span<{ size: number }>` diff --git a/lib/src/tooltip/types.tsx b/lib/src/tooltip/types.tsx index 792243329..2264b8459 100644 --- a/lib/src/tooltip/types.tsx +++ b/lib/src/tooltip/types.tsx @@ -1,16 +1,16 @@ -type Position = "top" | "bottom" | "right" | "left"; +type Position = "bottom" | "top" | "left" | "right"; type Props = { /** - * PENDING DESCRIPTION + * Preferred position for displaying the tooltip. It may adjust automatically based on available space. */ position?: Position; /** - * PENDING DESCRIPTION + * Text to be displayed inside the tooltip. */ title: string; /** - * PENDING DESCRIPTION + * Content in which the Tooltip will be displayed. */ children: React.ReactNode; }; From dc6e4a570def5d91b8c847651ccd9cfdba49d9e0 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 26 Apr 2024 13:21:17 +0200 Subject: [PATCH 05/31] Changed tooltip implementation --- lib/package-lock.json | 37 ++++++++++++- lib/package.json | 1 + lib/src/action-icon/ActionIcon.test.tsx | 12 ++-- lib/src/action-icon/ActionIcon.tsx | 3 +- lib/src/date-input/DateInput.stories.tsx | 2 +- lib/src/date-input/DateInput.test.tsx | 7 ++- lib/src/date-input/DateInput.tsx | 7 +-- lib/src/date-input/DatePicker.tsx | 6 +- lib/src/dialog/Dialog.tsx | 4 +- lib/src/dropdown/Dropdown.tsx | 2 +- lib/src/number-input/NumberInput.test.tsx | 6 +- lib/src/password-input/PasswordInput.test.tsx | 6 +- lib/src/select/Select.test.tsx | 22 ++++---- lib/src/select/Select.tsx | 10 ++-- lib/src/table/Table.tsx | 1 - lib/src/text-input/TextInput.test.tsx | 8 +-- lib/src/text-input/TextInput.tsx | 4 +- lib/src/tooltip/Tooltip.stories.tsx | 21 ++++--- lib/src/tooltip/Tooltip.test.tsx | 10 ++-- lib/src/tooltip/Tooltip.tsx | 55 ++++++++++--------- 20 files changed, 129 insertions(+), 95 deletions(-) diff --git a/lib/package-lock.json b/lib/package-lock.json index e2bd20de5..e94b9645a 100644 --- a/lib/package-lock.json +++ b/lib/package-lock.json @@ -10,6 +10,7 @@ "license": "Apache-2.0", "dependencies": { "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-tooltip": "^1.0.7", "color": "^3.1.3", "dayjs": "^1.11.1", "slugify": "^1.6.5" @@ -37,7 +38,6 @@ "@types/color": "^3.0.3", "@types/jest": "^29.5.12", "@types/jest-axe": "^3.5.9", - "@types/node": "^20.12.3", "@types/react": "^18.0.18", "@types/styled-components": "5.1.29", "axe-playwright": "^2.0.1", @@ -5246,6 +5246,40 @@ } } }, + "node_modules/@radix-ui/react-tooltip": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz", + "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", @@ -5374,7 +5408,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz", "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==", - "dev": true, "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-primitive": "1.0.3" diff --git a/lib/package.json b/lib/package.json index c207c96ff..74d2f7f3e 100644 --- a/lib/package.json +++ b/lib/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-tooltip": "^1.0.7", "color": "^3.1.3", "dayjs": "^1.11.1", "slugify": "^1.6.5" diff --git a/lib/src/action-icon/ActionIcon.test.tsx b/lib/src/action-icon/ActionIcon.test.tsx index d7578d6cc..a09077ce2 100644 --- a/lib/src/action-icon/ActionIcon.test.tsx +++ b/lib/src/action-icon/ActionIcon.test.tsx @@ -10,22 +10,22 @@ const iconSVG = ( ); describe("Action icon component tests", () => { test("Action icon renders with correct text", () => { - const { getByTitle } = render(<DxcActionIcon icon={iconSVG} title="favourite" />); - expect(getByTitle("favourite")).toBeTruthy(); + const { getByTestId } = render(<DxcActionIcon icon={iconSVG} title="favourite" />); + expect(getByTestId("favourite")).toBeTruthy(); }); test("Calls correct function on click", () => { const onClick = jest.fn(); - const { getByTitle } = render(<DxcActionIcon icon={iconSVG} title="favourite" onClick={onClick} />); - const action = getByTitle("favourite"); + const { getByTestId } = render(<DxcActionIcon icon={iconSVG} title="favourite" onClick={onClick} />); + const action = getByTestId("favourite"); fireEvent.click(action); expect(onClick).toHaveBeenCalled(); }); test("On click is not called when disabled", () => { const onClick = jest.fn(); - const { getByTitle } = render(<DxcActionIcon disabled icon={iconSVG} title="favourite" onClick={onClick} />); - const action = getByTitle("favourite"); + const { getByTestId } = render(<DxcActionIcon disabled icon={iconSVG} title="favourite" onClick={onClick} />); + const action = getByTestId("favourite"); fireEvent.click(action); expect(onClick).toHaveBeenCalledTimes(0); }); diff --git a/lib/src/action-icon/ActionIcon.tsx b/lib/src/action-icon/ActionIcon.tsx index ddd48eba1..e91712c05 100644 --- a/lib/src/action-icon/ActionIcon.tsx +++ b/lib/src/action-icon/ActionIcon.tsx @@ -18,9 +18,10 @@ const DxcActionIcon = React.forwardRef<RefType, ActionIconPropsTypes>( }} tabIndex={tabIndex} // TODO: Remove title? (Still needed to pass some tests) - title={title} + // title={title} type="button" ref={ref} + data-testid={title} > {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} </ActionIcon> diff --git a/lib/src/date-input/DateInput.stories.tsx b/lib/src/date-input/DateInput.stories.tsx index 3d23c1449..7bb176e54 100644 --- a/lib/src/date-input/DateInput.stories.tsx +++ b/lib/src/date-input/DateInput.stories.tsx @@ -227,7 +227,7 @@ const DatePickerButtonStates = () => { export const DatePickerStates = DatePickerButtonStates.bind({}); DatePickerStates.play = async ({ canvasElement }) => { const canvas = within(canvasElement); - const dateBtn = canvas.getAllByTitle("Select date")[0]; + const dateBtn = canvas.getAllByTestId("Select date")[0]; await userEvent.click(dateBtn); }; diff --git a/lib/src/date-input/DateInput.test.tsx b/lib/src/date-input/DateInput.test.tsx index 1895e7636..67fc31717 100644 --- a/lib/src/date-input/DateInput.test.tsx +++ b/lib/src/date-input/DateInput.test.tsx @@ -157,7 +157,7 @@ describe("DateInput component tests", () => { }); test("Changing months using the arrows", async () => { - const { getByText, getByRole, getByTitle } = render( + const { getByText, getByRole, getByTestId } = render( <DxcDateInput label="label" format="dd-mm-yyyy" defaultValue="10-10-2000" /> ); const calendarAction = getByRole("combobox"); @@ -165,10 +165,10 @@ describe("DateInput component tests", () => { let d = dayjs("10-10-2000", "DD-MM-YYYY", true); d = d.set("date", 10); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); - const previousMonth = getByTitle("Previous month"); + const previousMonth = getByTestId("Previous month"); await userEvent.click(previousMonth); expect(getByText(d.set("month", d.get("month") - 1).format("MMMM YYYY"))).toBeTruthy(); - const nextMonth = getByTitle("Next month"); + const nextMonth = getByTestId("Next month"); await userEvent.click(nextMonth); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); }); @@ -207,6 +207,7 @@ describe("DateInput component tests", () => { test("Selecting a date from the calendar (using keyboard presses)", async () => { const { getByRole, getAllByText, getByText } = render(<DxcDateInput />); const calendarAction = getByRole("combobox"); + console.log("CALENDAR ACTION", calendarAction) const input = getByRole("textbox") as HTMLInputElement; userEvent.type(input, "01-01-2010"); expect(input.value).toBe("01-01-2010"); diff --git a/lib/src/date-input/DateInput.tsx b/lib/src/date-input/DateInput.tsx index 281f5393b..3547a2d3e 100644 --- a/lib/src/date-input/DateInput.tsx +++ b/lib/src/date-input/DateInput.tsx @@ -76,8 +76,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( useEffect(() => { if (!disabled) { - // TODO: REVIEW QUERY SELECTOR - const actionButtonRef = dateRef?.current.querySelector("[title='Select date']"); + const actionButtonRef = dateRef?.current.querySelector("[data-testid='Select date']"); actionButtonRef?.setAttribute("aria-haspopup", true); actionButtonRef?.setAttribute("role", "combobox"); actionButtonRef?.setAttribute("aria-expanded", isOpen); @@ -195,8 +194,6 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( onBlur={handleDatePickerOnBlur} onKeyDown={handleDatePickerEscKeydown} avoidCollisions={false} - // - asChild > <DxcDatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} /> </StyledPopoverContent> @@ -209,7 +206,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( ); const StyledPopoverContent = styled(Popover.Content)` - z-index: 2147483647; + z-index: 2147483646; &:focus-visible { outline: none; } diff --git a/lib/src/date-input/DatePicker.tsx b/lib/src/date-input/DatePicker.tsx index 166402715..eb024b4e0 100644 --- a/lib/src/date-input/DatePicker.tsx +++ b/lib/src/date-input/DatePicker.tsx @@ -37,8 +37,7 @@ const DxcDatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Ele <HeaderButton aria-label={translatedLabels.calendar.previousMonthTitle} onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1))} - // TODO: Remove title? (Still needed to pass some tests) - title={translatedLabels.calendar.previousMonthTitle} + data-testid={translatedLabels.calendar.previousMonthTitle} > <DxcIcon icon="keyboard_arrow_left" /> </HeaderButton> @@ -56,8 +55,7 @@ const DxcDatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Ele <HeaderButton aria-label={translatedLabels.calendar.nextMonthTitle} onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1))} - // TODO: Remove title? (Still needed to pass some tests) - title={translatedLabels.calendar.nextMonthTitle} + data-testid={translatedLabels.calendar.nextMonthTitle} > <DxcIcon icon="keyboard_arrow_right" /> </HeaderButton> diff --git a/lib/src/dialog/Dialog.tsx b/lib/src/dialog/Dialog.tsx index 7234c4b57..7ff096ceb 100644 --- a/lib/src/dialog/Dialog.tsx +++ b/lib/src/dialog/Dialog.tsx @@ -81,7 +81,7 @@ const DialogContainer = styled.div` align-items: center; justify-content: center; height: 100%; - z-index: 2147483647; + z-index: 2147483646; `; const Overlay = styled.div` @@ -101,7 +101,7 @@ const Dialog = styled.div<{ isCloseVisible: DialogPropsType["isCloseVisible"] }> ${(props) => props.isCloseVisible && "min-height: 72px;"} box-shadow: ${(props) => `${props.theme.boxShadowOffsetX} ${props.theme.boxShadowOffsetY} ${props.theme.boxShadowBlur} ${props.theme.boxShadowColor}`}; - z-index: 2147483647; + z-index: 2147483646; @media (max-width: ${responsiveSizes.medium}rem) { max-width: 92%; diff --git a/lib/src/dropdown/Dropdown.tsx b/lib/src/dropdown/Dropdown.tsx index 3f794e544..993db225d 100644 --- a/lib/src/dropdown/Dropdown.tsx +++ b/lib/src/dropdown/Dropdown.tsx @@ -214,7 +214,7 @@ const DxcDropdown = ({ visualFocusIndex={visualFocusIndex} menuItemOnClick={handleMenuItemOnClick} onKeyDown={handleMenuOnKeyDown} - styles={{ width, zIndex: "2147483647" }} + styles={{ width, zIndex: "2147483646" }} ref={menuRef} /> </Popover.Content> diff --git a/lib/src/number-input/NumberInput.test.tsx b/lib/src/number-input/NumberInput.test.tsx index 3f86ef034..e7a96334f 100644 --- a/lib/src/number-input/NumberInput.test.tsx +++ b/lib/src/number-input/NumberInput.test.tsx @@ -27,9 +27,9 @@ describe("Number input component tests", () => { }); test("Number input buttons' tooltip is correct", () => { - const { getByTitle } = render(<DxcNumberInput label="Number label" />); - expect(getByTitle("Decrement value")).toBeTruthy(); - expect(getByTitle("Increment value")).toBeTruthy(); + const { getByTestId } = render(<DxcNumberInput label="Number label" />); + expect(getByTestId("Decrement value")).toBeTruthy(); + expect(getByTestId("Increment value")).toBeTruthy(); }); test("Number input is disabled", () => { diff --git a/lib/src/password-input/PasswordInput.test.tsx b/lib/src/password-input/PasswordInput.test.tsx index 3c38df283..173b6826d 100644 --- a/lib/src/password-input/PasswordInput.test.tsx +++ b/lib/src/password-input/PasswordInput.test.tsx @@ -76,14 +76,14 @@ describe("Password input component tests", () => { }); test("Password tooltip is correct", async () => { - const { getAllByRole, getByTitle, queryByTitle } = render( + const { getAllByRole, getByTestId, queryByTestId } = render( <DxcPasswordInput label="Password input" clearable value="Password" /> ); const showButton = getAllByRole("button")[1]; userEvent.hover(showButton); - expect(getByTitle("Show password")).toBeTruthy(); + expect(getByTestId("Show password")).toBeTruthy(); userEvent.unhover(showButton); - expect(queryByTitle("Hide password")).toBeFalsy(); + expect(queryByTestId("Hide password")).toBeFalsy(); }); test("Password input has correct accessibility attributes", async () => { diff --git a/lib/src/select/Select.test.tsx b/lib/src/select/Select.test.tsx index 37fe65e52..df288937e 100644 --- a/lib/src/select/Select.test.tsx +++ b/lib/src/select/Select.test.tsx @@ -648,19 +648,19 @@ describe("Select component tests", () => { test("Non-Grouped Options: Searchable - While user types, a clear action is displayed for cleaning the search value", async () => { const onChange = jest.fn(); - const { container, getByRole, getAllByRole, queryByTitle } = render( + const { container, getByRole, getAllByRole, getByTestId, queryByTestId } = render( <DxcSelect label="test-select-label" options={singleOptions} onChange={onChange} searchable /> ); const searchInput = container.querySelectorAll("input")[1]; await userEvent.type(searchInput, "Option 02"); expect(getAllByRole("option").length).toBe(1); - expect(queryByTitle("Clear search")).toBeTruthy(); + expect(getByTestId("Clear search")).toBeTruthy(); const clearAction = getByRole("button"); expect(clearAction).toBeTruthy(); await userEvent.click(clearAction); expect(getByRole("listbox")).toBeTruthy(); expect(getAllByRole("option").length).toBe(20); - expect(queryByTitle("Clear search")).toBeFalsy(); + expect(queryByTestId("search-button")).toBeFalsy(); }); test("Non-Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", async () => { @@ -687,7 +687,7 @@ describe("Select component tests", () => { test("Non-Grouped Options: Multiple selection - Clear action and selection indicator", async () => { const onChange = jest.fn(); - const { getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTitle, queryByTitle } = render( + const { getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTestId, queryByTestId } = render( <DxcSelect label="test-select-label" options={singleOptions} onChange={onChange} multiple /> ); const select = getByRole("combobox"); @@ -699,12 +699,12 @@ describe("Select component tests", () => { expect(queryByRole("listbox")).toBeTruthy(); expect(getByText("Option 06, Option 09, Option 14")).toBeTruthy(); expect(getByText("3", { exact: true })).toBeTruthy(); - await userEvent.click(getByTitle("Clear selection")); + await userEvent.click(getByTestId("Clear selection")); expect(onChange).toHaveBeenCalledWith({ value: [], error: "This field is required. Please, enter a value." }); expect(queryByRole("listbox")).toBeTruthy(); expect(queryByText("Option 06, Option 09, Option 14")).toBeFalsy(); expect(queryByText("3")).toBeFalsy(); - expect(queryByTitle("Clear selection")).toBeFalsy(); + expect(queryByTestId("Clear selection")).toBeFalsy(); }); test("Non-Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", async () => { @@ -993,7 +993,7 @@ describe("Select component tests", () => { test("Grouped Options: Multiple selection - Clear action and selection indicator", async () => { const onChange = jest.fn(); - const { getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTitle, queryByTitle } = render( + const { getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTestId, queryByTestId } = render( <DxcSelect label="test-select-label" options={groupOptions} onChange={onChange} multiple /> ); const select = getByRole("combobox"); @@ -1006,11 +1006,11 @@ describe("Select component tests", () => { expect(queryByRole("list")).toBeTruthy(); expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy(); expect(getByText("4", { exact: true })).toBeTruthy(); - await userEvent.click(getByTitle("Clear selection")); + await userEvent.click(getByTestId("Clear selection")); expect(queryByRole("list")).toBeTruthy(); expect(queryByText("Blanco, Oviedo, Duero, Ebro")).toBeFalsy(); expect(queryByText("4")).toBeFalsy(); - expect(queryByTitle("Clear selection")).toBeFalsy(); + expect(queryByTestId("Clear selection")).toBeFalsy(); }); test("Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", async () => { @@ -1079,7 +1079,7 @@ describe("Select component tests", () => { test("Multiple selection and optional - Clear action cleans every selected option but does not display an error", async () => { const onChange = jest.fn(); - const { getByRole, getAllByRole, getByTitle } = render( + const { getByRole, getAllByRole, getByTestId } = render( <DxcSelect label="test-select-label" options={singleOptions} onChange={onChange} multiple optional /> ); const select = getByRole("combobox"); @@ -1088,7 +1088,7 @@ describe("Select component tests", () => { await userEvent.click(getAllByRole("option")[8]); await userEvent.click(getAllByRole("option")[13]); expect(onChange).toHaveBeenCalledWith({ value: ["6", "9", "14"] }); - await userEvent.click(getByTitle("Clear selection")); + await userEvent.click(getByTestId("Clear selection")); expect(onChange).toHaveBeenCalledWith({ value: [] }); }); }); diff --git a/lib/src/select/Select.tsx b/lib/src/select/Select.tsx index 7e2bd8c05..a06082dd6 100644 --- a/lib/src/select/Select.tsx +++ b/lib/src/select/Select.tsx @@ -415,6 +415,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( onClick={handleClearOptionsActionOnClick} tabIndex={-1} aria-label={translatedLabels.select.actionClearSelectionTitle} + data-testid={translatedLabels.select.actionClearSelectionTitle} > <DxcIcon icon="clear" /> </ClearOptionsAction> @@ -468,8 +469,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( </ErrorIcon> )} {searchable && searchValue.length > 0 && ( - // TODO -> Solve problem: Using tooltip makes it lose focus on hover - // <DxcTooltip title={translatedLabels.select.actionClearSelectionTitle}> + <DxcTooltip title={translatedLabels.select.actionClearSelectionTitle}> <ClearSearchAction onMouseDown={(event) => { // Avoid input to lose focus @@ -477,12 +477,12 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( }} onClick={handleClearSearchActionOnClick} tabIndex={-1} - title={translatedLabels.select.actionClearSearchTitle} + data-testid={translatedLabels.select.actionClearSearchTitle} aria-label={translatedLabels.select.actionClearSearchTitle} > <DxcIcon icon="clear" /> </ClearSearchAction> - // </DxcTooltip> + </DxcTooltip> )} <CollapseIndicator disabled={disabled}> <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} /> @@ -492,7 +492,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( <Popover.Portal> <Popover.Content sideOffset={4} - style={{ zIndex: "2147483647" }} + style={{ zIndex: "2147483646" }} onOpenAutoFocus={(event) => { // Avoid select to lose focus when the list is opened event.preventDefault(); diff --git a/lib/src/table/Table.tsx b/lib/src/table/Table.tsx index a1975a331..b4a24eecc 100644 --- a/lib/src/table/Table.tsx +++ b/lib/src/table/Table.tsx @@ -36,7 +36,6 @@ export const DxcActionsCell = ({ actions }: ActionCellsPropsType): JSX.Element = index < maxNumberOfActions && ( <DxcActionIcon icon={action.icon} - // TODO: Remove title? (Still needed for aria-label) title={action.title} onClick={action.onClick} disabled={action.disabled ?? false} diff --git a/lib/src/text-input/TextInput.test.tsx b/lib/src/text-input/TextInput.test.tsx index cf70ec214..bc0cc8127 100644 --- a/lib/src/text-input/TextInput.test.tsx +++ b/lib/src/text-input/TextInput.test.tsx @@ -212,8 +212,8 @@ describe("TextInput component tests", () => { }); test("Clear action tooltip is correct", () => { - const { getByTitle } = render(<DxcTextInput label="Input label" value="Text" clearable />); - expect(getByTitle("Clear field")).toBeTruthy(); + const { getByTestId } = render(<DxcTextInput label="Input label" value="Text" clearable />); + expect(getByTestId("Clear field")).toBeTruthy(); }); test("Clear action onClick cleans the input", async () => { @@ -355,9 +355,9 @@ describe("TextInput component tests", () => { ), title: "Search", }; - const { getByRole, getByTestId, getByTitle } = render(<DxcTextInput label="Input label" action={action} />); + const { getByRole, getByTestId } = render(<DxcTextInput label="Input label" action={action} />); expect(getByTestId("image")).toBeTruthy(); - expect(getByTitle("Search")).toBeTruthy(); + expect(getByTestId("Search")).toBeTruthy(); await userEvent.click(getByRole("button")); expect(onClick).toHaveBeenCalled(); }); diff --git a/lib/src/text-input/TextInput.tsx b/lib/src/text-input/TextInput.tsx index 171c8481f..c24b4c603 100644 --- a/lib/src/text-input/TextInput.tsx +++ b/lib/src/text-input/TextInput.tsx @@ -376,7 +376,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>( <Popover.Portal> <Popover.Content sideOffset={5} - style={{ zIndex: "2147483647" }} + style={{ zIndex: "2147483646" }} onOpenAutoFocus={(event) => { // Avoid select to lose focus when the list is opened event.preventDefault(); @@ -472,6 +472,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>( tabIndex={tabIndex} ref={actionRef} title={translatedLabels.numberInput.decrementValueTitle} + data-testid={"decrement-value-button"} disabled={disabled} /> <DxcActionIcon @@ -480,6 +481,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>( tabIndex={tabIndex} ref={actionRef} title={translatedLabels.numberInput.incrementValueTitle} + data-testid={"increment-value-button"} disabled={disabled} /> </> diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index f562de2eb..b59288958 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -5,7 +5,6 @@ import DxcButton from "../button/Button"; import { userEvent, within } from "@storybook/testing-library"; import DxcInset from "../inset/Inset"; import DxcFlex from "../flex/Flex"; -import DxcBleed from "../bleed/Bleed"; import Title from "../../.storybook/components/Title"; export default { @@ -20,10 +19,10 @@ const Tooltip = () => ( <DxcInset horizontal="5rem" vertical="1rem"> <DxcFlex gap="2rem"> <DxcTooltip title="Tooltip Test" position="bottom"> - <DxcButton label="Hoverable button" title="Button Title" /> + <DxcButton label="Hoverable button" /> </DxcTooltip> <DxcTooltip title="Tooltip Test" position="top"> - <DxcButton label="Hoverable button" title="Button Title" /> + <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcFlex> </DxcInset> @@ -32,10 +31,10 @@ const Tooltip = () => ( <DxcInset horizontal="5rem" vertical="1rem"> <DxcFlex gap="2rem"> <DxcTooltip title="Tooltip Test" position="left"> - <DxcButton label="Hoverable button" title="Button Title" /> + <DxcButton label="Hoverable button" /> </DxcTooltip> <DxcTooltip title="Tooltip Test" position="right"> - <DxcButton label="Hoverable button" title="Button Title" /> + <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcFlex> </DxcInset> @@ -45,10 +44,10 @@ const Tooltip = () => ( export const Chromatic = Tooltip.bind({}); Chromatic.play = async ({ canvasElement }) => { - const canvas = within(canvasElement); - const buttonList = canvas.getAllByRole("button"); - await userEvent.hover(buttonList[0]); - await userEvent.hover(buttonList[1]); - await userEvent.hover(buttonList[2]); - await userEvent.hover(buttonList[3]); + // const canvas = within(canvasElement); + // const buttonList = canvas.getAllByRole("button"); + // await userEvent.hover(buttonList[0]); + // await userEvent.hover(buttonList[1]); + // await userEvent.hover(buttonList[2]); + // await userEvent.hover(buttonList[3]); }; diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx index b9947fed0..46c641258 100644 --- a/lib/src/tooltip/Tooltip.test.tsx +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -15,25 +15,27 @@ import DxcButton from "../button/Button"; describe("Tooltip component tests", () => { test("Tooltip does not render by default", () => { - const { queryByText } = render( + const { queryByText, getByText } = render( <DxcTooltip title="Tooltip Test"> <DxcButton label="Hoverable button" /> </DxcTooltip>, ); + const triggerElement = getByText("Hoverable button"); + fireEvent.mouseLeave(triggerElement); expect(queryByText("Tooltip Test")).not.toBeTruthy(); }); test("Tooltip renders with correct label on hover", () => { - const { getByText, queryByText } = render( + const { getByText, queryAllByText } = render( <DxcTooltip title="Tooltip Test"> <DxcButton label="Hoverable button" /> </DxcTooltip>, ); const triggerElement = getByText("Hoverable button"); fireEvent.mouseEnter(triggerElement); - expect(getByText("Tooltip Test")).toBeTruthy(); + expect(queryAllByText("Tooltip Test").length).toBeGreaterThan(0); fireEvent.mouseLeave(triggerElement); - expect(queryByText("Tooltip Test")).not.toBeTruthy(); + expect(queryAllByText("Tooltip Test").length).toBe(0); }); test("Tooltip sets the default display position properly", () => { diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index d7ac42e95..a30ef484c 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; import styled, { css } from "styled-components"; import TooltipPropsType from "./types"; -import * as Popover from "@radix-ui/react-popover"; +import * as Tooltip from "@radix-ui/react-tooltip"; import CoreTokens from "../common/coreTokens"; const ARROW_SIZE = 8; @@ -17,26 +17,29 @@ const DxcTooltip = ({ position = "bottom", title, children }: TooltipPropsType): }; return title ? ( - <Popover.Root open={isOpen}> - <Popover.Trigger - asChild - type={undefined} - aria-expanded={undefined} - aria-controls={undefined} - onMouseEnter={handleOnOpenTooltip} - onMouseLeave={handleOnCloseTooltip} - > - <PopoverTrigger>{children}</PopoverTrigger> - </Popover.Trigger> - <Popover.Portal> - <StyledPopoverContent side={position} sideOffset={ARROW_SIZE} data-testid={"popover-content"} role="tooltip"> - <TooltipContainer>{title}</TooltipContainer> - <TooltipArrow asChild aria-hidden> - <Triangle size={ARROW_SIZE} /> - </TooltipArrow> - </StyledPopoverContent> - </Popover.Portal> - </Popover.Root> + <Tooltip.Provider> + <Tooltip.Root open={isOpen}> + <Tooltip.Trigger + asChild + onMouseEnter={handleOnOpenTooltip} + onMouseLeave={handleOnCloseTooltip} + > + <TooltipTrigger>{children}</TooltipTrigger> + </Tooltip.Trigger> + <Tooltip.Portal> + <StyledTooltipContent + side={position} + sideOffset={ARROW_SIZE} + data-testid={"popover-content"} + > + <TooltipContainer>{title}</TooltipContainer> + <TooltipArrow asChild aria-hidden> + <Triangle size={ARROW_SIZE} /> + </TooltipArrow> + </StyledTooltipContent> + </Tooltip.Portal> + </Tooltip.Root> + </Tooltip.Provider> ) : ( <>{children}</> ); @@ -56,19 +59,17 @@ const Triangle = styled.span<{ size: number }>` border-radius: 0 0 0 1px; `; -const PopoverTrigger = styled.div` +const TooltipTrigger = styled.div` display: inline-flex; position: relative; `; -const StyledPopoverContent = styled(Popover.Content)` +const StyledTooltipContent = styled(Tooltip.Content)` z-index: 2147483647; - &:focus-visible { - outline: none; - } + `; -const TooltipArrow = styled(Popover.Arrow)` +const TooltipArrow = styled(Tooltip.Arrow)` fill: ${CoreTokens.color_grey_800}; `; From 0896d09b778e06a318c5bc80b22dc274525d4245 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 26 Apr 2024 13:33:20 +0200 Subject: [PATCH 06/31] Added storybook interaction --- lib/src/tooltip/Tooltip.stories.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index b59288958..70fde5ad0 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -44,10 +44,10 @@ const Tooltip = () => ( export const Chromatic = Tooltip.bind({}); Chromatic.play = async ({ canvasElement }) => { - // const canvas = within(canvasElement); - // const buttonList = canvas.getAllByRole("button"); - // await userEvent.hover(buttonList[0]); - // await userEvent.hover(buttonList[1]); - // await userEvent.hover(buttonList[2]); - // await userEvent.hover(buttonList[3]); + const canvas = within(canvasElement); + const buttonList = canvas.getAllByRole("button"); + await userEvent.hover(buttonList[0]); + await userEvent.hover(buttonList[1]); + await userEvent.hover(buttonList[2]); + await userEvent.hover(buttonList[3]); }; From 033177d4127628a725b7ba98ab4836b6ace6ac13 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 26 Apr 2024 13:46:58 +0200 Subject: [PATCH 07/31] Removed unneeded code --- lib/.prettierrc | 3 ++- lib/src/action-icon/ActionIcon.tsx | 4 +--- lib/src/contextual-menu/ContextualMenu.tsx | 2 +- lib/src/date-input/DateInput.test.tsx | 2 +- 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/lib/.prettierrc b/lib/.prettierrc index 963354f23..b1ca726a3 100644 --- a/lib/.prettierrc +++ b/lib/.prettierrc @@ -1,3 +1,4 @@ { - "printWidth": 120 + "printWidth": 120, + "trailingComma": "es5" } diff --git a/lib/src/action-icon/ActionIcon.tsx b/lib/src/action-icon/ActionIcon.tsx index e91712c05..7da7eb2f3 100644 --- a/lib/src/action-icon/ActionIcon.tsx +++ b/lib/src/action-icon/ActionIcon.tsx @@ -17,8 +17,6 @@ const DxcActionIcon = React.forwardRef<RefType, ActionIconPropsTypes>( event.stopPropagation(); }} tabIndex={tabIndex} - // TODO: Remove title? (Still needed to pass some tests) - // title={title} type="button" ref={ref} data-testid={title} @@ -27,7 +25,7 @@ const DxcActionIcon = React.forwardRef<RefType, ActionIconPropsTypes>( </ActionIcon> </DxcTooltip> ); - }, + } ); const ActionIcon = styled.button` diff --git a/lib/src/contextual-menu/ContextualMenu.tsx b/lib/src/contextual-menu/ContextualMenu.tsx index 4c5592b61..4f8f9f77e 100644 --- a/lib/src/contextual-menu/ContextualMenu.tsx +++ b/lib/src/contextual-menu/ContextualMenu.tsx @@ -104,7 +104,7 @@ const SectionList = styled.ul` gap: ${CoreTokens.spacing_4}; `; -const Title = styled.h2` +const Title = styled.span` margin: 0 0 ${CoreTokens.spacing_4} 0; padding: ${CoreTokens.spacing_4}; color: ${CoreTokens.color_grey_900}; diff --git a/lib/src/date-input/DateInput.test.tsx b/lib/src/date-input/DateInput.test.tsx index 67fc31717..4731336ae 100644 --- a/lib/src/date-input/DateInput.test.tsx +++ b/lib/src/date-input/DateInput.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { render, fireEvent, getAllByRole } from "@testing-library/react"; +import { render, fireEvent } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import dayjs from "dayjs"; import DxcDateInput from "./DateInput"; From 1a7ef18e24210729d32fa1c4ac77ff98c19ceeb4 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 26 Apr 2024 13:49:54 +0200 Subject: [PATCH 08/31] Fixed format --- lib/src/footer/Footer.tsx | 2 +- lib/src/select/Select.tsx | 20 ++++++++++---------- lib/src/table/Table.tsx | 2 +- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/lib/src/footer/Footer.tsx b/lib/src/footer/Footer.tsx index 5431bfeb4..96084b95b 100644 --- a/lib/src/footer/Footer.tsx +++ b/lib/src/footer/Footer.tsx @@ -34,7 +34,7 @@ const DxcFooter = ({ ) : ( colorsTheme.footer.logo ), - [colorsTheme], + [colorsTheme] ); return ( diff --git a/lib/src/select/Select.tsx b/lib/src/select/Select.tsx index a06082dd6..5191ab050 100644 --- a/lib/src/select/Select.tsx +++ b/lib/src/select/Select.tsx @@ -26,7 +26,7 @@ const canOpenOptions = (options: Option[] | OptionGroup[], disabled: boolean) => const filterOptionsBySearchValue = ( options: Option[] | OptionGroup[], - searchValue: string, + searchValue: string ): Option[] | OptionGroup[] => { if (options?.length > 0) { if (isArrayOfOptionGroups(options)) @@ -34,7 +34,7 @@ const filterOptionsBySearchValue = ( const group = { label: optionGroup.label, options: optionGroup.options.filter((option) => - option.label.toUpperCase().includes(searchValue.toUpperCase()), + option.label.toUpperCase().includes(searchValue.toUpperCase()) ), }; return group; @@ -48,7 +48,7 @@ const getLastOptionIndex = ( filteredOptions: Option[] | OptionGroup[], searchable: boolean, optional: boolean, - multiple: boolean, + multiple: boolean ) => { let last = 0; const reducer = (acc: number, current: OptionGroup) => acc + current.options?.length; @@ -68,7 +68,7 @@ const getSelectedOption = ( options: Option[] | OptionGroup[], multiple: boolean, optional: boolean, - optionalItem: Option, + optionalItem: Option ) => { let selectedOption: Option | Option[] = multiple ? [] : ({} as Option); let singleSelectionIndex: number; @@ -165,7 +165,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( size = "medium", tabIndex = 0, }, - ref, + ref ): JSX.Element => { const selectId = `select-${useId()}`; const selectLabelId = `label-${selectId}`; @@ -189,11 +189,11 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( const filteredOptions = useMemo(() => filterOptionsBySearchValue(options, searchValue), [options, searchValue]); const lastOptionIndex = useMemo( () => getLastOptionIndex(options, filteredOptions, searchable, optional, multiple), - [options, filteredOptions, searchable, optional, multiple], + [options, filteredOptions, searchable, optional, multiple] ); const { selectedOption, singleSelectionIndex } = useMemo( () => getSelectedOption(value ?? innerValue, options, multiple, optional, optionalItem), - [value, innerValue, options, multiple, optional, optionalItem], + [value, innerValue, options, multiple, optional, optionalItem] ); const openOptions = () => { @@ -276,7 +276,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( (!isOpen || (visualFocusIndex === -1 && singleSelectionIndex > -1 && singleSelectionIndex <= lastOptionIndex)) ? changeVisualFocusIndex(singleSelectionIndex) : changeVisualFocusIndex((visualFocusIndex) => - visualFocusIndex === 0 || visualFocusIndex === -1 ? lastOptionIndex : visualFocusIndex - 1, + visualFocusIndex === 0 || visualFocusIndex === -1 ? lastOptionIndex : visualFocusIndex - 1 ); openOptions(); break; @@ -351,7 +351,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( !multiple && closeOptions(); setSearchValue(""); }, - [handleSelectChangeValue, closeOptions, multiple], + [handleSelectChangeValue, closeOptions, multiple] ); useEffect(() => { @@ -526,7 +526,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( </SelectContainer> </ThemeProvider> ); - }, + } ); const sizes = { diff --git a/lib/src/table/Table.tsx b/lib/src/table/Table.tsx index b4a24eecc..f596a67b0 100644 --- a/lib/src/table/Table.tsx +++ b/lib/src/table/Table.tsx @@ -42,7 +42,7 @@ export const DxcActionsCell = ({ actions }: ActionCellsPropsType): JSX.Element = tabIndex={action.tabIndex ?? 0} key={`action-${index}`} /> - ), + ) )} {actionDropdown && ( <HalstackProvider advancedTheme={overwriteTheme(colorsTheme)} key={`provider-dropdown`}> From f86a8df7c1378991ec7b5115e6778da17c9646a4 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 26 Apr 2024 13:53:36 +0200 Subject: [PATCH 09/31] Fixed format --- lib/src/button/Button.tsx | 46 +++++++++++++-------------- lib/src/date-input/DateInput.test.tsx | 1 - lib/src/date-input/DateInput.tsx | 6 ++-- lib/src/tooltip/Tooltip.tsx | 13 ++------ 4 files changed, 28 insertions(+), 38 deletions(-) diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx index c92f33725..3605f54da 100644 --- a/lib/src/button/Button.tsx +++ b/lib/src/button/Button.tsx @@ -67,29 +67,29 @@ const getButtonStyles = ($mode: ButtonPropsType["mode"], theme: AdvancedTheme["b $mode === "primary" ? theme.primaryBorderRadius : $mode === "secondary" - ? theme.secondaryBorderRadius - : theme.textBorderRadius + ? theme.secondaryBorderRadius + : theme.textBorderRadius }; border-width: ${ $mode === "primary" ? theme.primaryBorderThickness : $mode === "secondary" - ? theme.secondaryBorderThickness - : theme.textBorderThickness + ? theme.secondaryBorderThickness + : theme.textBorderThickness }; border-style: ${ $mode === "primary" ? theme.primaryBorderStyle : $mode === "secondary" - ? theme.secondaryBorderStyle - : theme.textBorderStyle + ? theme.secondaryBorderStyle + : theme.textBorderStyle }; font-family: ${ $mode === "primary" ? theme.primaryFontFamily : $mode === "secondary" - ? theme.secondaryFontFamily - : theme.textFontFamily + ? theme.secondaryFontFamily + : theme.textFontFamily }; font-size: ${ $mode === "primary" ? theme.primaryFontSize : $mode === "secondary" ? theme.secondaryFontSize : theme.textFontSize @@ -98,37 +98,37 @@ const getButtonStyles = ($mode: ButtonPropsType["mode"], theme: AdvancedTheme["b $mode === "primary" ? theme.primaryFontWeight : $mode === "secondary" - ? theme.secondaryFontWeight - : theme.textFontWeight + ? theme.secondaryFontWeight + : theme.textFontWeight }; background-color: ${ $mode === "primary" ? theme.primaryBackgroundColor : $mode === "secondary" - ? theme.secondaryBackgroundColor - : theme.textBackgroundColor + ? theme.secondaryBackgroundColor + : theme.textBackgroundColor }; color: ${ $mode === "primary" ? theme.primaryFontColor : $mode === "secondary" - ? theme.secondaryFontColor - : theme.textFontColor + ? theme.secondaryFontColor + : theme.textFontColor }; `; const getButtonStates = ( disabled: ButtonPropsType["disabled"], $mode: ButtonPropsType["mode"], - theme: AdvancedTheme["button"], + theme: AdvancedTheme["button"] ) => ` &:hover { background-color: ${ $mode === "primary" ? theme.primaryHoverBackgroundColor : $mode === "secondary" - ? theme.secondaryHoverBackgroundColor - : theme.textHoverBackgroundColor + ? theme.secondaryHoverBackgroundColor + : theme.textHoverBackgroundColor }; color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""}; } @@ -140,8 +140,8 @@ const getButtonStates = ( $mode === "primary" ? theme.primaryActiveBackgroundColor : $mode === "secondary" - ? theme.secondaryActiveBackgroundColor - : theme.textActiveBackgroundColor + ? theme.secondaryActiveBackgroundColor + : theme.textActiveBackgroundColor }; color: ${$mode === "secondary" ? theme.secondaryHoverFontColor : ""}; border-color: ${$mode === "secondary" ? "transparent" : ""}; @@ -154,15 +154,15 @@ const getButtonStates = ( $mode === "primary" ? theme.primaryDisabledBackgroundColor : $mode === "secondary" - ? theme.secondaryDisabledBackgroundColor - : theme.textDisabledBackgroundColor + ? theme.secondaryDisabledBackgroundColor + : theme.textDisabledBackgroundColor }; color: ${ $mode === "primary" ? theme.primaryDisabledFontColor : $mode === "secondary" - ? theme.secondaryDisabledFontColor - : theme.textDisabledFontColor + ? theme.secondaryDisabledFontColor + : theme.textDisabledFontColor }; border-color: ${$mode === "secondary" ? theme.secondaryDisabledBorderColor : ""}; } diff --git a/lib/src/date-input/DateInput.test.tsx b/lib/src/date-input/DateInput.test.tsx index 4731336ae..f3cae771f 100644 --- a/lib/src/date-input/DateInput.test.tsx +++ b/lib/src/date-input/DateInput.test.tsx @@ -207,7 +207,6 @@ describe("DateInput component tests", () => { test("Selecting a date from the calendar (using keyboard presses)", async () => { const { getByRole, getAllByText, getByText } = render(<DxcDateInput />); const calendarAction = getByRole("combobox"); - console.log("CALENDAR ACTION", calendarAction) const input = getByRole("textbox") as HTMLInputElement; userEvent.type(input, "01-01-2010"); expect(input.value).toBe("01-01-2010"); diff --git a/lib/src/date-input/DateInput.tsx b/lib/src/date-input/DateInput.tsx index 3547a2d3e..28d420950 100644 --- a/lib/src/date-input/DateInput.tsx +++ b/lib/src/date-input/DateInput.tsx @@ -53,7 +53,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( size, tabIndex, }, - ref, + ref ): JSX.Element => { const [innerValue, setInnerValue] = useState(defaultValue); const [isOpen, setIsOpen] = useState(false); @@ -64,7 +64,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( ? !format.toUpperCase().includes("YYYY") && +getValueForPicker(value ?? innerValue, format).format("YY") < 68 ? 2000 : 1900 - : undefined, + : undefined ); const colorsTheme = useTheme(); const translatedLabels = useTranslatedLabels(); @@ -202,7 +202,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( </div> </ThemeProvider> ); - }, + } ); const StyledPopoverContent = styled(Popover.Content)` diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index a30ef484c..3291d5b4b 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -19,19 +19,11 @@ const DxcTooltip = ({ position = "bottom", title, children }: TooltipPropsType): return title ? ( <Tooltip.Provider> <Tooltip.Root open={isOpen}> - <Tooltip.Trigger - asChild - onMouseEnter={handleOnOpenTooltip} - onMouseLeave={handleOnCloseTooltip} - > + <Tooltip.Trigger asChild onMouseEnter={handleOnOpenTooltip} onMouseLeave={handleOnCloseTooltip}> <TooltipTrigger>{children}</TooltipTrigger> </Tooltip.Trigger> <Tooltip.Portal> - <StyledTooltipContent - side={position} - sideOffset={ARROW_SIZE} - data-testid={"popover-content"} - > + <StyledTooltipContent side={position} sideOffset={ARROW_SIZE} data-testid={"popover-content"}> <TooltipContainer>{title}</TooltipContainer> <TooltipArrow asChild aria-hidden> <Triangle size={ARROW_SIZE} /> @@ -66,7 +58,6 @@ const TooltipTrigger = styled.div` const StyledTooltipContent = styled(Tooltip.Content)` z-index: 2147483647; - `; const TooltipArrow = styled(Tooltip.Arrow)` From 7706adac683540777b3ad1642365ec9a352b7300 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 26 Apr 2024 14:20:48 +0200 Subject: [PATCH 10/31] Fixed multi-line tooltips --- lib/src/tooltip/Tooltip.stories.tsx | 129 +++++++++++++++++++++++++--- lib/src/tooltip/Tooltip.tsx | 4 +- 2 files changed, 117 insertions(+), 16 deletions(-) diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index 70fde5ad0..5f9b51fef 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -4,7 +4,6 @@ import ExampleContainer from "../../.storybook/components/ExampleContainer"; import DxcButton from "../button/Button"; import { userEvent, within } from "@storybook/testing-library"; import DxcInset from "../inset/Inset"; -import DxcFlex from "../flex/Flex"; import Title from "../../.storybook/components/Title"; export default { @@ -14,29 +13,132 @@ export default { const Tooltip = () => ( <> - <Title title="Tooltips" theme="light" level={2} /> + {/*<Title title="Bottom tooltips" theme="light" level={4} /> + <ExampleContainer> + <DxcInset horizontal="5rem" vertical="3rem"> + <DxcTooltip title="Tooltip Test" position="bottom"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + <DxcInset horizontal="5rem" vertical="3rem"> + <DxcTooltip title="Tooltip Test with a much larger text to display" position="bottom"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + </ExampleContainer> + <Title title="Top tooltips" theme="light" level={4} /> + <ExampleContainer> + <DxcInset horizontal="5rem" vertical="3rem"> + <DxcTooltip title="Tooltip Test" position="top"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + <DxcInset horizontal="5rem" vertical="3rem"> + <DxcTooltip title="Tooltip Test with a much larger text to display" position="top"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + </ExampleContainer> + <Title title="Left tooltips" theme="light" level={4} /> + <ExampleContainer> + <DxcInset horizontal="3rem"> + <DxcInset horizontal="5rem" vertical="2rem"> + <DxcTooltip title="Tooltip Test" position="left"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + <DxcInset horizontal="5rem" vertical="2rem"> + <DxcTooltip title="Tooltip Test with a much larger text to display" position="left"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + </DxcInset> + </ExampleContainer> + <Title title="Right tooltips" theme="light" level={4} /> <ExampleContainer> - <DxcInset horizontal="5rem" vertical="1rem"> - <DxcFlex gap="2rem"> - <DxcTooltip title="Tooltip Test" position="bottom"> + <DxcInset horizontal="3rem"> + <DxcInset horizontal="5rem" vertical="2rem"> + <DxcTooltip title="Tooltip Test" position="right"> <DxcButton label="Hoverable button" /> </DxcTooltip> - <DxcTooltip title="Tooltip Test" position="top"> + </DxcInset> + <DxcInset horizontal="5rem" vertical="2rem"> + <DxcTooltip title="Tooltip Test with a much larger text to display" position="right"> <DxcButton label="Hoverable button" /> </DxcTooltip> - </DxcFlex> + </DxcInset> + </DxcInset> + </ExampleContainer> */} + <Title title="Bottom tooltip" theme="light" level={4} /> + <ExampleContainer> + <DxcInset space="5rem"> + <DxcTooltip title="Tooltip Test" position="bottom"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + </ExampleContainer> + <Title title="Bottom tooltip multi-line" theme="light" level={4} /> + <ExampleContainer> + <DxcInset space="5rem"> + <DxcTooltip title="Tooltip Test with a much larger text to display" position="bottom"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + </ExampleContainer> + <Title title="Top tooltip" theme="light" level={4} /> + <ExampleContainer> + <DxcInset space="5rem"> + <DxcTooltip title="Tooltip Test" position="top"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + </ExampleContainer> + <Title title="Top tooltip multi-line" theme="light" level={4} /> + <ExampleContainer> + <DxcInset space="5rem"> + <DxcTooltip title="Tooltip Test with a much larger text to display" position="top"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> </DxcInset> </ExampleContainer> + <Title title="Left tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset horizontal="5rem" vertical="1rem"> - <DxcFlex gap="2rem"> + <DxcInset horizontal="3rem"> + <DxcInset horizontal="5rem" vertical="2rem"> <DxcTooltip title="Tooltip Test" position="left"> <DxcButton label="Hoverable button" /> </DxcTooltip> + </DxcInset> + </DxcInset> + </ExampleContainer> + <Title title="Left tooltip multi-line" theme="light" level={4} /> + <ExampleContainer> + <DxcInset horizontal="3rem"> + <DxcInset horizontal="5rem" vertical="2rem"> + <DxcTooltip title="Tooltip Test with a much larger text to display" position="left"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> + </DxcInset> + </ExampleContainer> + <Title title="Right tooltip" theme="light" level={4} /> + <ExampleContainer> + <DxcInset horizontal="3rem"> + <DxcInset horizontal="5rem" vertical="2rem"> <DxcTooltip title="Tooltip Test" position="right"> <DxcButton label="Hoverable button" /> </DxcTooltip> - </DxcFlex> + </DxcInset> + </DxcInset> + </ExampleContainer> + <Title title="Right tooltip multi-line" theme="light" level={4} /> + <ExampleContainer> + <DxcInset horizontal="3rem"> + <DxcInset horizontal="5rem" vertical="2rem"> + <DxcTooltip title="Tooltip Test with a much larger text to display" position="right"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> </DxcInset> </ExampleContainer> </> @@ -46,8 +148,7 @@ export const Chromatic = Tooltip.bind({}); Chromatic.play = async ({ canvasElement }) => { const canvas = within(canvasElement); const buttonList = canvas.getAllByRole("button"); - await userEvent.hover(buttonList[0]); - await userEvent.hover(buttonList[1]); - await userEvent.hover(buttonList[2]); - await userEvent.hover(buttonList[3]); + for (const button of buttonList) { + await userEvent.hover(button); + } }; diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index 3291d5b4b..74b2b1fec 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -65,13 +65,13 @@ const TooltipArrow = styled(Tooltip.Arrow)` `; const TooltipContainer = styled.div` - height: 32px; box-sizing: border-box; padding: 8px 12px; border-radius: 4px; font-size: ${CoreTokens.type_scale_01}; font-family: ${CoreTokens.type_sans}; - white-space: nowrap; + max-width: 142px; + text-align: center; color: ${CoreTokens.color_white}; background-color: ${CoreTokens.color_grey_800}; border-color: ${CoreTokens.color_grey_800}; From a4113b8b03c870f28281ca734275d7b3a3e95326 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Mon, 29 Apr 2024 16:39:26 +0200 Subject: [PATCH 11/31] Added improvements to Tooltip based on feedback from DSDR --- lib/src/tooltip/Tooltip.stories.tsx | 58 ++---------------- lib/src/tooltip/Tooltip.tsx | 95 ++++++++++++++++++++++------- 2 files changed, 76 insertions(+), 77 deletions(-) diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index 5f9b51fef..bc26b0d4d 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -13,62 +13,14 @@ export default { const Tooltip = () => ( <> - {/*<Title title="Bottom tooltips" theme="light" level={4} /> - <ExampleContainer> - <DxcInset horizontal="5rem" vertical="3rem"> - <DxcTooltip title="Tooltip Test" position="bottom"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - <DxcInset horizontal="5rem" vertical="3rem"> - <DxcTooltip title="Tooltip Test with a much larger text to display" position="bottom"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - </ExampleContainer> - <Title title="Top tooltips" theme="light" level={4} /> + <Title title="Active tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset horizontal="5rem" vertical="3rem"> - <DxcTooltip title="Tooltip Test" position="top"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - <DxcInset horizontal="5rem" vertical="3rem"> - <DxcTooltip title="Tooltip Test with a much larger text to display" position="top"> + <DxcInset space="5rem"> + <DxcTooltip title="Tooltip Test"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> </ExampleContainer> - <Title title="Left tooltips" theme="light" level={4} /> - <ExampleContainer> - <DxcInset horizontal="3rem"> - <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip title="Tooltip Test" position="left"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip title="Tooltip Test with a much larger text to display" position="left"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - </DxcInset> - </ExampleContainer> - <Title title="Right tooltips" theme="light" level={4} /> - <ExampleContainer> - <DxcInset horizontal="3rem"> - <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip title="Tooltip Test" position="right"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip title="Tooltip Test with a much larger text to display" position="right"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - </DxcInset> - </ExampleContainer> */} <Title title="Bottom tooltip" theme="light" level={4} /> <ExampleContainer> <DxcInset space="5rem"> @@ -148,7 +100,5 @@ export const Chromatic = Tooltip.bind({}); Chromatic.play = async ({ canvasElement }) => { const canvas = within(canvasElement); const buttonList = canvas.getAllByRole("button"); - for (const button of buttonList) { - await userEvent.hover(button); - } + await userEvent.hover(buttonList[0]); }; diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index 74b2b1fec..f6db9dfba 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -1,32 +1,22 @@ -import React, { useState } from "react"; -import styled, { css } from "styled-components"; +import React from "react"; +import styled from "styled-components"; import TooltipPropsType from "./types"; import * as Tooltip from "@radix-ui/react-tooltip"; import CoreTokens from "../common/coreTokens"; -const ARROW_SIZE = 8; - const DxcTooltip = ({ position = "bottom", title, children }: TooltipPropsType): JSX.Element => { - const [isOpen, changeIsOpen] = useState(false); - - const handleOnOpenTooltip = () => { - changeIsOpen(true); - }; - const handleOnCloseTooltip = () => { - changeIsOpen(false); - }; - + const SIZE = 8; return title ? ( - <Tooltip.Provider> - <Tooltip.Root open={isOpen}> - <Tooltip.Trigger asChild onMouseEnter={handleOnOpenTooltip} onMouseLeave={handleOnCloseTooltip}> + <Tooltip.Provider delayDuration={300}> + <Tooltip.Root> + <Tooltip.Trigger asChild> <TooltipTrigger>{children}</TooltipTrigger> </Tooltip.Trigger> <Tooltip.Portal> - <StyledTooltipContent side={position} sideOffset={ARROW_SIZE} data-testid={"popover-content"}> + <StyledTooltipContent side={position} sideOffset={SIZE} data-testid={"popover-content"}> <TooltipContainer>{title}</TooltipContainer> <TooltipArrow asChild aria-hidden> - <Triangle size={ARROW_SIZE} /> + <Triangle size={SIZE} /> </TooltipArrow> </StyledTooltipContent> </Tooltip.Portal> @@ -42,10 +32,9 @@ const Triangle = styled.span<{ size: number }>` width: ${(props) => `${props.size}px`}; background-color: ${CoreTokens.color_grey_800}; position: absolute; - bottom: ${(props) => `-${props.size / 2}px`}; - ${(props) => css` - left: calc(50% - ${props.size / 2}px); - `} + left: ${(props) => `calc(50% - ${props.size / 2}px)`}; + bottom: ${(props) => + `-${props.size / 2 - 1}px`}; // Moved up 1 pixel to prevent sub-pixel alignment causing visual inconsistencies clip-path: polygon(0% 0%, 100% 100%, 0% 100%); transform: rotate(-45deg); border-radius: 0 0 0 1px; @@ -57,7 +46,68 @@ const TooltipTrigger = styled.div` `; const StyledTooltipContent = styled(Tooltip.Content)` + display: flex; z-index: 2147483647; + + animation-duration: 0.3s; + animation-timing-function: ease-out; + + /* Additional optimization to prevent blurry text in certain browsers */ + -webkit-font-smoothing: antialiased; + transform: translateZ(0) scale(1, 1); + + &[data-side="top"] { + animation-name: slideUp; + } + &[data-side="bottom"] { + animation-name: slideDown; + } + &[data-side="left"] { + animation-name: slideLeft; + } + &[data-side="right"] { + animation-name: slideRight; + } + @keyframes slideDown { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + @keyframes slideUp { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + @keyframes slideLeft { + from { + opacity: 0; + transform: translateX(10px); + } + to { + opacity: 1; + transform: translateX(0); + } + } + @keyframes slideRight { + from { + opacity: 0; + transform: translateX(-10px); + } + to { + opacity: 1; + transform: translateX(0); + } + } `; const TooltipArrow = styled(Tooltip.Arrow)` @@ -71,7 +121,6 @@ const TooltipContainer = styled.div` font-size: ${CoreTokens.type_scale_01}; font-family: ${CoreTokens.type_sans}; max-width: 142px; - text-align: center; color: ${CoreTokens.color_white}; background-color: ${CoreTokens.color_grey_800}; border-color: ${CoreTokens.color_grey_800}; From 74a3e1efbff8664478ba1c26945ae86614238cbd Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Mon, 29 Apr 2024 16:49:57 +0200 Subject: [PATCH 12/31] Fixed old version of storybook test library --- lib/src/tooltip/Tooltip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index bc26b0d4d..0a99206eb 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import DxcTooltip from "./Tooltip"; import ExampleContainer from "../../.storybook/components/ExampleContainer"; import DxcButton from "../button/Button"; -import { userEvent, within } from "@storybook/testing-library"; +import { userEvent, within } from "@storybook/test"; import DxcInset from "../inset/Inset"; import Title from "../../.storybook/components/Title"; From 002d5eb37ae5a305a09dd6b981ede31cb6bb02d4 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 30 Apr 2024 11:33:57 +0200 Subject: [PATCH 13/31] Fixed tooltip tests and swapped prop names --- lib/.storybook/test-runner.ts | 4 +- lib/package-lock.json | 365 ++++++++++++------ lib/package.json | 4 +- .../tooltip/Tooltip.accessibility.test.tsx | 8 +- lib/src/tooltip/Tooltip.stories.tsx | 18 +- lib/src/tooltip/Tooltip.test.tsx | 91 +++-- lib/src/tooltip/Tooltip.tsx | 9 +- lib/src/tooltip/types.tsx | 2 +- 8 files changed, 323 insertions(+), 178 deletions(-) diff --git a/lib/.storybook/test-runner.ts b/lib/.storybook/test-runner.ts index f1541e2e3..fddf94ccd 100644 --- a/lib/.storybook/test-runner.ts +++ b/lib/.storybook/test-runner.ts @@ -30,7 +30,7 @@ const a11yConfig: TestRunnerConfig = { page.setViewportSize(parsedViewportSizes); } } catch (err) { - console.error("Problem when loading the Story Context"); + console.error("Problem when loading the Story Context -> ", err); } }, async postVisit(page, context) { @@ -47,7 +47,7 @@ const a11yConfig: TestRunnerConfig = { rules: storyContext?.parameters?.a11y?.config?.rules, }); } catch (err) { - console.error("Problem when loading the Story Context"); + console.error("Problem when loading the Story Context -> ", err); } await checkA11y(page, "#storybook-root", { diff --git a/lib/package-lock.json b/lib/package-lock.json index ad81bd83a..28e597fac 100644 --- a/lib/package-lock.json +++ b/lib/package-lock.json @@ -33,7 +33,7 @@ "@storybook/builder-vite": "^8.0.8", "@storybook/react": "^8.0.8", "@storybook/react-vite": "^8.0.8", - "@storybook/test": "^8.0.8", + "@storybook/test": "^8.0.9", "@storybook/test-runner": "^0.17.0", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.0.0", @@ -45,7 +45,7 @@ "axe-playwright": "^2.0.1", "babel-jest": "^24.8.0", "babel-loader": "^8.0.6", - "chromatic": "^8.0.0", + "chromatic": "^11.3.0", "css-loader": "^7.1.1", "eslint": "^8.53.0", "eslint-config-airbnb": "^19.0.4", @@ -2226,29 +2226,6 @@ "yarn": ">=1.22.18" } }, - "node_modules/@chromatic-com/storybook/node_modules/chromatic": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.3.0.tgz", - "integrity": "sha512-q1ZtJDJrjLGnz60ivpC16gmd7KFzcaA4eTb7gcytCqbaKqlHhCFr1xQmcUDsm14CK7JsqdkFU6S+JQdOd2ZNJg==", - "dev": true, - "bin": { - "chroma": "dist/bin.js", - "chromatic": "dist/bin.js", - "chromatic-cli": "dist/bin.js" - }, - "peerDependencies": { - "@chromatic-com/cypress": "^0.*.* || ^1.0.0", - "@chromatic-com/playwright": "^0.*.* || ^1.0.0" - }, - "peerDependenciesMeta": { - "@chromatic-com/cypress": { - "optional": true - }, - "@chromatic-com/playwright": { - "optional": true - } - } - }, "node_modules/@cnakazawa/watch": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz", @@ -4702,92 +4679,6 @@ } } }, - "node_modules/@radix-ui/react-toggle": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz", - "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-primitive": "1.0.3", - "@radix-ui/react-use-controllable-state": "1.0.1" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-toggle-group": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz", - "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-context": "1.0.1", - "@radix-ui/react-direction": "1.0.1", - "@radix-ui/react-primitive": "1.0.3", - "@radix-ui/react-roving-focus": "1.0.4", - "@radix-ui/react-toggle": "1.0.3", - "@radix-ui/react-use-controllable-state": "1.0.1" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, - "node_modules/@radix-ui/react-toolbar": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.0.4.tgz", - "integrity": "sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/primitive": "1.0.1", - "@radix-ui/react-context": "1.0.1", - "@radix-ui/react-direction": "1.0.1", - "@radix-ui/react-primitive": "1.0.3", - "@radix-ui/react-roving-focus": "1.0.4", - "@radix-ui/react-separator": "1.0.3", - "@radix-ui/react-toggle-group": "1.0.4" - }, - "peerDependencies": { - "@types/react": "*", - "@types/react-dom": "*", - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - }, - "@types/react-dom": { - "optional": true - } - } - }, "node_modules/@radix-ui/react-tooltip": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz", @@ -5407,6 +5298,122 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/addon-interactions/node_modules/@storybook/test": { + "version": "8.0.8", + "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.0.8.tgz", + "integrity": "sha512-YXgwgg1e8ggDg2BlgeExwdN3MjeExnDvybQIUugADgun87tRIujJFCdjh0PAxg0Qvln6+lU3w+3Y2aryvX42RA==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "8.0.8", + "@storybook/core-events": "8.0.8", + "@storybook/instrumenter": "8.0.8", + "@storybook/preview-api": "8.0.8", + "@testing-library/dom": "^9.3.4", + "@testing-library/jest-dom": "^6.4.2", + "@testing-library/user-event": "^14.5.2", + "@vitest/expect": "1.3.1", + "@vitest/spy": "^1.3.1", + "chai": "^4.4.1", + "util": "^0.12.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-interactions/node_modules/@testing-library/dom": { + "version": "9.3.4", + "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", + "integrity": "sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==", + "dev": true, + "dependencies": { + "@babel/code-frame": "^7.10.4", + "@babel/runtime": "^7.12.5", + "@types/aria-query": "^5.0.1", + "aria-query": "5.1.3", + "chalk": "^4.1.0", + "dom-accessibility-api": "^0.5.9", + "lz-string": "^1.5.0", + "pretty-format": "^27.0.2" + }, + "engines": { + "node": ">=14" + } + }, + "node_modules/@storybook/addon-interactions/node_modules/@testing-library/user-event": { + "version": "14.5.2", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", + "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", + "dev": true, + "engines": { + "node": ">=12", + "npm": ">=6" + }, + "peerDependencies": { + "@testing-library/dom": ">=7.21.4" + } + }, + "node_modules/@storybook/addon-interactions/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/@storybook/addon-interactions/node_modules/aria-query": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", + "integrity": "sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==", + "dev": true, + "dependencies": { + "deep-equal": "^2.0.5" + } + }, + "node_modules/@storybook/addon-interactions/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/@storybook/addon-interactions/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/@storybook/addon-interactions/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/@storybook/addon-links": { "version": "8.0.8", "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-8.0.8.tgz", @@ -6591,21 +6598,20 @@ } }, "node_modules/@storybook/test": { - "version": "8.0.8", - "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.0.8.tgz", - "integrity": "sha512-YXgwgg1e8ggDg2BlgeExwdN3MjeExnDvybQIUugADgun87tRIujJFCdjh0PAxg0Qvln6+lU3w+3Y2aryvX42RA==", + "version": "8.0.9", + "resolved": "https://registry.npmjs.org/@storybook/test/-/test-8.0.9.tgz", + "integrity": "sha512-bRd5tBJnPzR6UKbDXONWnFWtdkNOY99HMLDUWe5fTRo50GwkrpFBVqPflhdkruEeof0kAbBUbnoN2CIYgtnAFw==", "dev": true, "dependencies": { - "@storybook/client-logger": "8.0.8", - "@storybook/core-events": "8.0.8", - "@storybook/instrumenter": "8.0.8", - "@storybook/preview-api": "8.0.8", + "@storybook/client-logger": "8.0.9", + "@storybook/core-events": "8.0.9", + "@storybook/instrumenter": "8.0.9", + "@storybook/preview-api": "8.0.9", "@testing-library/dom": "^9.3.4", "@testing-library/jest-dom": "^6.4.2", "@testing-library/user-event": "^14.5.2", "@vitest/expect": "1.3.1", "@vitest/spy": "^1.3.1", - "chai": "^4.4.1", "util": "^0.12.4" }, "funding": { @@ -6648,6 +6654,109 @@ "node": "^16.10.0 || ^18.0.0 || >=20.0.0" } }, + "node_modules/@storybook/test/node_modules/@storybook/channels": { + "version": "8.0.9", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-8.0.9.tgz", + "integrity": "sha512-7Lcfyy5CsLWWGhMPO9WG4jZ/Alzp0AjepFhEreYHRPtQrfttp6qMAjE/g1aHgun0qHCYWxwqIG4NLR/hqDNrXQ==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "8.0.9", + "@storybook/core-events": "8.0.9", + "@storybook/global": "^5.0.0", + "telejson": "^7.2.0", + "tiny-invariant": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/client-logger": { + "version": "8.0.9", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-8.0.9.tgz", + "integrity": "sha512-LzV/RHkbf07sRc1Jc0ff36RlapKf9Ul7/+9VMvVbI3hshH1CpmrZK4t/tsIdpX/EVOdJ1Gg5cES06PnleOAIPA==", + "dev": true, + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/core-events": { + "version": "8.0.9", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-8.0.9.tgz", + "integrity": "sha512-DxSUx7wG9Qe3OFUBnv3OrYq48J8UWNo2DUR5/JecJCtp3n++L4fAEW3J0IF5FfxpQDMQSp1yTNjZ2PaWCMd2ag==", + "dev": true, + "dependencies": { + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/instrumenter": { + "version": "8.0.9", + "resolved": "https://registry.npmjs.org/@storybook/instrumenter/-/instrumenter-8.0.9.tgz", + "integrity": "sha512-Gw74dgpTU/2p7FG0s7DuVdqCbJ2MEcSuRJjDo7HcXRYcvWp7I6Ly+C0v7N5VaoS+kbBVerAhLKIHZgG/LZf1og==", + "dev": true, + "dependencies": { + "@storybook/channels": "8.0.9", + "@storybook/client-logger": "8.0.9", + "@storybook/core-events": "8.0.9", + "@storybook/global": "^5.0.0", + "@storybook/preview-api": "8.0.9", + "@vitest/utils": "^1.3.1", + "util": "^0.12.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/preview-api": { + "version": "8.0.9", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-8.0.9.tgz", + "integrity": "sha512-zHfX34bkAMzzmE7vbDzaqFwSW6ExiBD0HiO1L/IsHF55f0f7xV7IH8uJyFRrDTvAoW3ReSxZDMvvPpeydFPKGA==", + "dev": true, + "dependencies": { + "@storybook/channels": "8.0.9", + "@storybook/client-logger": "8.0.9", + "@storybook/core-events": "8.0.9", + "@storybook/csf": "^0.1.4", + "@storybook/global": "^5.0.0", + "@storybook/types": "8.0.9", + "@types/qs": "^6.9.5", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "tiny-invariant": "^1.3.1", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/test/node_modules/@storybook/types": { + "version": "8.0.9", + "resolved": "https://registry.npmjs.org/@storybook/types/-/types-8.0.9.tgz", + "integrity": "sha512-ew0EXzk9k4B557P1qIWYrnvUcgaE0WWA5qQS0AU8l+fRTp5nvl9O3SP/zNIB0SN1qDFO7dXr3idTNTyIikTcEQ==", + "dev": true, + "dependencies": { + "@storybook/channels": "8.0.9", + "@types/express": "^4.7.0", + "file-system-cache": "2.3.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/test/node_modules/@testing-library/dom": { "version": "9.3.4", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz", @@ -9860,14 +9969,26 @@ } }, "node_modules/chromatic": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-8.0.0.tgz", - "integrity": "sha512-K3wKac6XrbyZ+Hyt1Y3j5PIdvq/RA1LvVObhJ2VUuy6utTeEKoBIIIU7U0C6ZPj67WVk70+FjpDCv619SowcdQ==", + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/chromatic/-/chromatic-11.3.0.tgz", + "integrity": "sha512-q1ZtJDJrjLGnz60ivpC16gmd7KFzcaA4eTb7gcytCqbaKqlHhCFr1xQmcUDsm14CK7JsqdkFU6S+JQdOd2ZNJg==", "dev": true, "bin": { "chroma": "dist/bin.js", "chromatic": "dist/bin.js", "chromatic-cli": "dist/bin.js" + }, + "peerDependencies": { + "@chromatic-com/cypress": "^0.*.* || ^1.0.0", + "@chromatic-com/playwright": "^0.*.* || ^1.0.0" + }, + "peerDependenciesMeta": { + "@chromatic-com/cypress": { + "optional": true + }, + "@chromatic-com/playwright": { + "optional": true + } } }, "node_modules/chrome-trace-event": { diff --git a/lib/package.json b/lib/package.json index 4db89b11d..7574ff7e9 100644 --- a/lib/package.json +++ b/lib/package.json @@ -53,7 +53,7 @@ "@storybook/builder-vite": "^8.0.8", "@storybook/react": "^8.0.8", "@storybook/react-vite": "^8.0.8", - "@storybook/test": "^8.0.8", + "@storybook/test": "^8.0.9", "@storybook/test-runner": "^0.17.0", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.0.0", @@ -65,7 +65,7 @@ "axe-playwright": "^2.0.1", "babel-jest": "^24.8.0", "babel-loader": "^8.0.6", - "chromatic": "^8.0.0", + "chromatic": "^11.3.0", "css-loader": "^7.1.1", "eslint": "^8.53.0", "eslint-config-airbnb": "^19.0.4", diff --git a/lib/src/tooltip/Tooltip.accessibility.test.tsx b/lib/src/tooltip/Tooltip.accessibility.test.tsx index 9ba836a8f..751dbb640 100644 --- a/lib/src/tooltip/Tooltip.accessibility.test.tsx +++ b/lib/src/tooltip/Tooltip.accessibility.test.tsx @@ -18,7 +18,7 @@ describe("Tooltip component accessibility tests", () => { it("Should not have basic accessibility issues for bottom position", async () => { // baseElement is needed when using React Portals const { baseElement, getByText } = render( - <DxcTooltip title="Tooltip Test" position="bottom"> + <DxcTooltip label="Tooltip Test" position="bottom"> <DxcButton label="Hoverable button" /> </DxcTooltip>, ); @@ -30,7 +30,7 @@ describe("Tooltip component accessibility tests", () => { it("Should not have basic accessibility issues for top position", async () => { // baseElement is needed when using React Portals const { baseElement, getByText } = render( - <DxcTooltip title="Tooltip Test" position="top"> + <DxcTooltip label="Tooltip Test" position="top"> <DxcButton label="Hoverable button" /> </DxcTooltip>, ); @@ -42,7 +42,7 @@ describe("Tooltip component accessibility tests", () => { it("Should not have basic accessibility issues for left position", async () => { // baseElement is needed when using React Portals const { baseElement, getByText } = render( - <DxcTooltip title="Tooltip Test" position="left"> + <DxcTooltip label="Tooltip Test" position="left"> <DxcButton label="Hoverable button" /> </DxcTooltip>, ); @@ -54,7 +54,7 @@ describe("Tooltip component accessibility tests", () => { it("Should not have basic accessibility issues for right position", async () => { // baseElement is needed when using React Portals const { baseElement, getByText } = render( - <DxcTooltip title="Tooltip Test" position="right"> + <DxcTooltip label="Tooltip Test" position="right"> <DxcButton label="Hoverable button" /> </DxcTooltip>, ); diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index 0a99206eb..d8aacc030 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -16,7 +16,7 @@ const Tooltip = () => ( <Title title="Active tooltip" theme="light" level={4} /> <ExampleContainer> <DxcInset space="5rem"> - <DxcTooltip title="Tooltip Test"> + <DxcTooltip label="Tooltip Test"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> @@ -24,7 +24,7 @@ const Tooltip = () => ( <Title title="Bottom tooltip" theme="light" level={4} /> <ExampleContainer> <DxcInset space="5rem"> - <DxcTooltip title="Tooltip Test" position="bottom"> + <DxcTooltip label="Tooltip Test" position="bottom"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> @@ -32,7 +32,7 @@ const Tooltip = () => ( <Title title="Bottom tooltip multi-line" theme="light" level={4} /> <ExampleContainer> <DxcInset space="5rem"> - <DxcTooltip title="Tooltip Test with a much larger text to display" position="bottom"> + <DxcTooltip label="Tooltip Test with a much larger text to display" position="bottom"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> @@ -40,7 +40,7 @@ const Tooltip = () => ( <Title title="Top tooltip" theme="light" level={4} /> <ExampleContainer> <DxcInset space="5rem"> - <DxcTooltip title="Tooltip Test" position="top"> + <DxcTooltip label="Tooltip Test" position="top"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> @@ -48,7 +48,7 @@ const Tooltip = () => ( <Title title="Top tooltip multi-line" theme="light" level={4} /> <ExampleContainer> <DxcInset space="5rem"> - <DxcTooltip title="Tooltip Test with a much larger text to display" position="top"> + <DxcTooltip label="Tooltip Test with a much larger text to display" position="top"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> @@ -57,7 +57,7 @@ const Tooltip = () => ( <ExampleContainer> <DxcInset horizontal="3rem"> <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip title="Tooltip Test" position="left"> + <DxcTooltip label="Tooltip Test" position="left"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> @@ -67,7 +67,7 @@ const Tooltip = () => ( <ExampleContainer> <DxcInset horizontal="3rem"> <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip title="Tooltip Test with a much larger text to display" position="left"> + <DxcTooltip label="Tooltip Test with a much larger text to display" position="left"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> @@ -77,7 +77,7 @@ const Tooltip = () => ( <ExampleContainer> <DxcInset horizontal="3rem"> <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip title="Tooltip Test" position="right"> + <DxcTooltip label="Tooltip Test" position="right"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> @@ -87,7 +87,7 @@ const Tooltip = () => ( <ExampleContainer> <DxcInset horizontal="3rem"> <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip title="Tooltip Test with a much larger text to display" position="right"> + <DxcTooltip label="Tooltip Test with a much larger text to display" position="right"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx index 46c641258..83538f1f8 100644 --- a/lib/src/tooltip/Tooltip.test.tsx +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -1,7 +1,8 @@ import React from "react"; -import { fireEvent, render } from "@testing-library/react"; +import { render, waitFor } from "@testing-library/react"; import DxcTooltip from "./Tooltip"; import DxcButton from "../button/Button"; +import userEvent from "@testing-library/user-event"; (global as any).globalThis = global; (global as any).DOMRect = { @@ -14,54 +15,76 @@ import DxcButton from "../button/Button"; }; describe("Tooltip component tests", () => { - test("Tooltip does not render by default", () => { - const { queryByText, getByText } = render( - <DxcTooltip title="Tooltip Test"> + test("Tooltip does not render by default", async () => { + const { queryByRole } = render( + <DxcTooltip label="Tooltip Test"> <DxcButton label="Hoverable button" /> - </DxcTooltip>, + </DxcTooltip> + ); + await waitFor(() => { + const tooltipElement = queryByRole("tooltip"); + expect(tooltipElement).toBeFalsy(); + }); + }); + + test("Tooltip renders with correct label on hover", async () => { + const { getByText, getByRole } = render( + <DxcTooltip label="Tooltip Test"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> ); const triggerElement = getByText("Hoverable button"); - fireEvent.mouseLeave(triggerElement); - expect(queryByText("Tooltip Test")).not.toBeTruthy(); + await userEvent.hover(triggerElement); + await waitFor(() => { + const tooltipContent = getByRole("tooltip", { name: "Tooltip Test" }); + expect(tooltipContent).toBeTruthy(); + }); }); - test("Tooltip renders with correct label on hover", () => { - const { getByText, queryAllByText } = render( - <DxcTooltip title="Tooltip Test"> + test("Tooltip stops being rendered when hover is stopped", async () => { + const { getByText, queryByRole } = render( + <DxcTooltip label="Tooltip Test"> <DxcButton label="Hoverable button" /> - </DxcTooltip>, + </DxcTooltip> ); const triggerElement = getByText("Hoverable button"); - fireEvent.mouseEnter(triggerElement); - expect(queryAllByText("Tooltip Test").length).toBeGreaterThan(0); - fireEvent.mouseLeave(triggerElement); - expect(queryAllByText("Tooltip Test").length).toBe(0); + await userEvent.hover(triggerElement); + await userEvent.unhover(triggerElement); + await waitFor(() => { + const tooltipElement = queryByRole("tooltip"); + expect(tooltipElement).toBeFalsy(); + }); }); - - test("Tooltip sets the default display position properly", () => { - const { getByText, getByTestId } = render( - <DxcTooltip title="Tooltip Test"> + + test("Tooltip sets the default display position properly", async () => { + const { getByText, getByRole } = render( + <DxcTooltip label="Tooltip Test"> <DxcButton label="Hoverable button" /> - </DxcTooltip>, + </DxcTooltip> ); const triggerElement = getByText("Hoverable button"); - fireEvent.mouseEnter(triggerElement); - const popoverContent = getByTestId("popover-content"); - expect(popoverContent).toBeTruthy(); - const position = popoverContent.getAttribute("data-side"); - expect(position).toBe("bottom"); + await userEvent.hover(triggerElement); + await waitFor(() => { + const tooltipContent = getByRole("tooltip", { name: "Tooltip Test" }); + const position = tooltipContent.closest("div").getAttribute("data-side"); + expect(tooltipContent).toBeTruthy(); + expect(position).toBe("bottom"); + }); }); - test("Tooltip sets the custom display position properly", () => { - const { getByText, getByTestId } = render( - <DxcTooltip title="Tooltip Test" position="top"> + + test("Tooltip sets the custom display position properly", async () => { + const { getByText, getByRole } = render( + <DxcTooltip label="Tooltip Test" position="top"> <DxcButton label="Hoverable button" /> - </DxcTooltip>, + </DxcTooltip> ); const triggerElement = getByText("Hoverable button"); - fireEvent.mouseEnter(triggerElement); - const popoverContent = getByTestId("popover-content"); - expect(popoverContent).toBeTruthy(); - const position = popoverContent.getAttribute("data-side"); - expect(position).toBe("top"); + await userEvent.hover(triggerElement); + await waitFor(() => { + const tooltipContent = getByRole("tooltip", { name: "Tooltip Test" }); + const position = tooltipContent.closest("div").getAttribute("data-side"); + expect(tooltipContent).toBeTruthy(); + expect(position).toBe("top"); + }); }); }); diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index f6db9dfba..0b01f4c09 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -4,17 +4,18 @@ import TooltipPropsType from "./types"; import * as Tooltip from "@radix-ui/react-tooltip"; import CoreTokens from "../common/coreTokens"; -const DxcTooltip = ({ position = "bottom", title, children }: TooltipPropsType): JSX.Element => { +const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): JSX.Element => { const SIZE = 8; - return title ? ( - <Tooltip.Provider delayDuration={300}> + + return label ? ( + <Tooltip.Provider delayDuration={300} skipDelayDuration={700}> <Tooltip.Root> <Tooltip.Trigger asChild> <TooltipTrigger>{children}</TooltipTrigger> </Tooltip.Trigger> <Tooltip.Portal> <StyledTooltipContent side={position} sideOffset={SIZE} data-testid={"popover-content"}> - <TooltipContainer>{title}</TooltipContainer> + <TooltipContainer>{label}</TooltipContainer> <TooltipArrow asChild aria-hidden> <Triangle size={SIZE} /> </TooltipArrow> diff --git a/lib/src/tooltip/types.tsx b/lib/src/tooltip/types.tsx index 2264b8459..6b58c290d 100644 --- a/lib/src/tooltip/types.tsx +++ b/lib/src/tooltip/types.tsx @@ -8,7 +8,7 @@ type Props = { /** * Text to be displayed inside the tooltip. */ - title: string; + label: string; /** * Content in which the Tooltip will be displayed. */ From a44e8eb288931df8e8db6c71bcbde1933e0b1424 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 30 Apr 2024 11:41:07 +0200 Subject: [PATCH 14/31] Changed prop name title to label --- lib/src/action-icon/ActionIcon.tsx | 2 +- lib/src/badge/Badge.tsx | 2 +- lib/src/button/Button.tsx | 2 +- lib/src/date-input/DatePicker.tsx | 4 ++-- lib/src/file-input/FileItem.tsx | 2 +- lib/src/footer/Footer.tsx | 2 +- lib/src/header/Header.tsx | 2 +- lib/src/layout/ApplicationLayout.tsx | 2 +- lib/src/select/Select.tsx | 4 ++-- lib/src/toggle-group/ToggleGroup.tsx | 2 +- 10 files changed, 12 insertions(+), 12 deletions(-) diff --git a/lib/src/action-icon/ActionIcon.tsx b/lib/src/action-icon/ActionIcon.tsx index 7da7eb2f3..a72d2a56c 100644 --- a/lib/src/action-icon/ActionIcon.tsx +++ b/lib/src/action-icon/ActionIcon.tsx @@ -8,7 +8,7 @@ import DxcTooltip from "../tooltip/Tooltip"; const DxcActionIcon = React.forwardRef<RefType, ActionIconPropsTypes>( ({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => { return ( - <DxcTooltip title={title}> + <DxcTooltip label={title}> <ActionIcon aria-label={title} disabled={disabled} diff --git a/lib/src/badge/Badge.tsx b/lib/src/badge/Badge.tsx index 4a2d80f0f..e8683ffdf 100644 --- a/lib/src/badge/Badge.tsx +++ b/lib/src/badge/Badge.tsx @@ -94,7 +94,7 @@ const DxcBadge = ({ size = "medium", }: BadgePropsType): JSX.Element => { return ( - <DxcTooltip title={title}> + <DxcTooltip label={title}> <BadgeContainer label={label} mode={mode} diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx index 3605f54da..bfdffcb8d 100644 --- a/lib/src/button/Button.tsx +++ b/lib/src/button/Button.tsx @@ -24,7 +24,7 @@ const DxcButton = ({ return ( <ThemeProvider theme={colorsTheme.button}> - <DxcTooltip title={title}> + <DxcTooltip label={title}> <Button aria-label={title} disabled={disabled} diff --git a/lib/src/date-input/DatePicker.tsx b/lib/src/date-input/DatePicker.tsx index eb024b4e0..fc81a1c48 100644 --- a/lib/src/date-input/DatePicker.tsx +++ b/lib/src/date-input/DatePicker.tsx @@ -33,7 +33,7 @@ const DxcDatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Ele return ( <DatePicker id={id}> <PickerHeader> - <DxcTooltip title={translatedLabels.calendar.previousMonthTitle}> + <DxcTooltip label={translatedLabels.calendar.previousMonthTitle}> <HeaderButton aria-label={translatedLabels.calendar.previousMonthTitle} onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1))} @@ -51,7 +51,7 @@ const DxcDatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Ele </HeaderYearTriggerLabel> <DxcIcon icon={content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down"} /> </HeaderYearTrigger> - <DxcTooltip title={translatedLabels.calendar.nextMonthTitle}> + <DxcTooltip label={translatedLabels.calendar.nextMonthTitle}> <HeaderButton aria-label={translatedLabels.calendar.nextMonthTitle} onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1))} diff --git a/lib/src/file-input/FileItem.tsx b/lib/src/file-input/FileItem.tsx index d1ff70af2..38ca364c4 100644 --- a/lib/src/file-input/FileItem.tsx +++ b/lib/src/file-input/FileItem.tsx @@ -45,7 +45,7 @@ const FileItem = ({ <DxcIcon icon="filled_error" /> </ErrorIcon> )} - <DxcTooltip title={translatedLabels.fileInput.deleteFileActionTitle}> + <DxcTooltip label={translatedLabels.fileInput.deleteFileActionTitle}> <DeleteFileAction onClick={() => { onDelete(fileName); diff --git a/lib/src/footer/Footer.tsx b/lib/src/footer/Footer.tsx index 96084b95b..cc251a80c 100644 --- a/lib/src/footer/Footer.tsx +++ b/lib/src/footer/Footer.tsx @@ -45,7 +45,7 @@ const DxcFooter = ({ {mode === "default" && ( <DxcFlex> {socialLinks?.map((link, index) => ( - <DxcTooltip title={link.title}> + <DxcTooltip label={link.title}> <SocialAnchor href={link.href} tabIndex={tabIndex} diff --git a/lib/src/header/Header.tsx b/lib/src/header/Header.tsx index 29167aee3..0f3037479 100644 --- a/lib/src/header/Header.tsx +++ b/lib/src/header/Header.tsx @@ -110,7 +110,7 @@ const DxcHeader = ({ <ResponsiveMenu hasVisibility={isMenuVisible}> <ResponsiveIconsContainer> <ResponsiveLogoContainer>{headerResponsiveLogo}</ResponsiveLogoContainer> - <DxcTooltip title={translatedLabels.header.closeIcon}> + <DxcTooltip label={translatedLabels.header.closeIcon}> <CloseAction tabIndex={tabIndex} onClick={handleMenu} aria-label={translatedLabels.header.closeIcon}> <DxcIcon icon="close" /> </CloseAction> diff --git a/lib/src/layout/ApplicationLayout.tsx b/lib/src/layout/ApplicationLayout.tsx index 757f20869..73f85e398 100644 --- a/lib/src/layout/ApplicationLayout.tsx +++ b/lib/src/layout/ApplicationLayout.tsx @@ -101,7 +101,7 @@ const DxcApplicationLayout = ({ <HeaderContainer>{headerContent}</HeaderContainer> {sidenav && isResponsive && ( <VisibilityToggle> - <DxcTooltip title={translatedLabels.applicationLayout.visibilityToggleTitle}> + <DxcTooltip label={translatedLabels.applicationLayout.visibilityToggleTitle}> <HamburgerTrigger onClick={handleSidenavVisibility} aria-label={visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle} diff --git a/lib/src/select/Select.tsx b/lib/src/select/Select.tsx index 5191ab050..2fc0f3b80 100644 --- a/lib/src/select/Select.tsx +++ b/lib/src/select/Select.tsx @@ -405,7 +405,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && ( <SelectionIndicator> <SelectionNumber disabled={disabled}>{selectedOption.length}</SelectionNumber> - <DxcTooltip title={translatedLabels.select.actionClearSelectionTitle}> + <DxcTooltip label={translatedLabels.select.actionClearSelectionTitle}> <ClearOptionsAction disabled={disabled} onMouseDown={(event) => { @@ -469,7 +469,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( </ErrorIcon> )} {searchable && searchValue.length > 0 && ( - <DxcTooltip title={translatedLabels.select.actionClearSelectionTitle}> + <DxcTooltip label={translatedLabels.select.actionClearSelectionTitle}> <ClearSearchAction onMouseDown={(event) => { // Avoid input to lose focus diff --git a/lib/src/toggle-group/ToggleGroup.tsx b/lib/src/toggle-group/ToggleGroup.tsx index eb816263d..d412bb3c6 100644 --- a/lib/src/toggle-group/ToggleGroup.tsx +++ b/lib/src/toggle-group/ToggleGroup.tsx @@ -67,7 +67,7 @@ const DxcToggleGroup = ({ <HelperText disabled={disabled}>{helperText}</HelperText> <OptionsContainer aria-labelledby={toggleGroupLabelId}> {options.map((option, i) => ( - <DxcTooltip title={option.title}> + <DxcTooltip label={option.title}> <ToggleButton key={`toggle-${i}-${option.label}`} aria-label={option.title} From 057e5a5b0b7b431b781665402df01a06844575b5 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 30 Apr 2024 11:49:04 +0200 Subject: [PATCH 15/31] Modified max-width for tooltip --- lib/src/tooltip/Tooltip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index 0b01f4c09..a8ee83480 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -8,7 +8,7 @@ const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): const SIZE = 8; return label ? ( - <Tooltip.Provider delayDuration={300} skipDelayDuration={700}> + <Tooltip.Provider delayDuration={300}> <Tooltip.Root> <Tooltip.Trigger asChild> <TooltipTrigger>{children}</TooltipTrigger> @@ -121,7 +121,7 @@ const TooltipContainer = styled.div` border-radius: 4px; font-size: ${CoreTokens.type_scale_01}; font-family: ${CoreTokens.type_sans}; - max-width: 142px; + max-width: 242px; color: ${CoreTokens.color_white}; background-color: ${CoreTokens.color_grey_800}; border-color: ${CoreTokens.color_grey_800}; From 64d3e434f293ec8a5e5e5ee7b64707e664b243a1 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 30 Apr 2024 12:48:37 +0200 Subject: [PATCH 16/31] Modified spacing in stories --- lib/src/tooltip/Tooltip.stories.tsx | 59 +++++++++++++---------------- lib/src/tooltip/Tooltip.tsx | 7 ++-- 2 files changed, 29 insertions(+), 37 deletions(-) diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index d8aacc030..4d89c1e34 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -5,6 +5,7 @@ import DxcButton from "../button/Button"; import { userEvent, within } from "@storybook/test"; import DxcInset from "../inset/Inset"; import Title from "../../.storybook/components/Title"; +import DxcFlex from "../flex/Flex"; export default { title: "Tooltip", @@ -15,7 +16,7 @@ const Tooltip = () => ( <> <Title title="Active tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset space="5rem"> + <DxcInset bottom="3rem"> <DxcTooltip label="Tooltip Test"> <DxcButton label="Hoverable button" /> </DxcTooltip> @@ -23,7 +24,7 @@ const Tooltip = () => ( </ExampleContainer> <Title title="Bottom tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset space="5rem"> + <DxcInset bottom="3rem"> <DxcTooltip label="Tooltip Test" position="bottom"> <DxcButton label="Hoverable button" /> </DxcTooltip> @@ -31,7 +32,7 @@ const Tooltip = () => ( </ExampleContainer> <Title title="Bottom tooltip multi-line" theme="light" level={4} /> <ExampleContainer> - <DxcInset space="5rem"> + <DxcInset bottom="3rem"> <DxcTooltip label="Tooltip Test with a much larger text to display" position="bottom"> <DxcButton label="Hoverable button" /> </DxcTooltip> @@ -39,7 +40,7 @@ const Tooltip = () => ( </ExampleContainer> <Title title="Top tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset space="5rem"> + <DxcInset top="3rem"> <DxcTooltip label="Tooltip Test" position="top"> <DxcButton label="Hoverable button" /> </DxcTooltip> @@ -47,7 +48,7 @@ const Tooltip = () => ( </ExampleContainer> <Title title="Top tooltip multi-line" theme="light" level={4} /> <ExampleContainer> - <DxcInset space="5rem"> + <DxcInset top="3rem"> <DxcTooltip label="Tooltip Test with a much larger text to display" position="top"> <DxcButton label="Hoverable button" /> </DxcTooltip> @@ -55,43 +56,35 @@ const Tooltip = () => ( </ExampleContainer> <Title title="Left tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset horizontal="3rem"> - <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip label="Tooltip Test" position="left"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - </DxcInset> + <DxcFlex justifyContent="center"> + <DxcTooltip label="Tooltip Test" position="left"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcFlex> </ExampleContainer> <Title title="Left tooltip multi-line" theme="light" level={4} /> <ExampleContainer> - <DxcInset horizontal="3rem"> - <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip label="Tooltip Test with a much larger text to display" position="left"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - </DxcInset> + <DxcFlex justifyContent="center"> + <DxcTooltip label="Tooltip Test with a much larger text to display" position="left"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcFlex> </ExampleContainer> <Title title="Right tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset horizontal="3rem"> - <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip label="Tooltip Test" position="right"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - </DxcInset> + <DxcFlex justifyContent="start"> + <DxcTooltip label="Tooltip Test" position="right"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcFlex> </ExampleContainer> <Title title="Right tooltip multi-line" theme="light" level={4} /> <ExampleContainer> - <DxcInset horizontal="3rem"> - <DxcInset horizontal="5rem" vertical="2rem"> - <DxcTooltip label="Tooltip Test with a much larger text to display" position="right"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - </DxcInset> + <DxcFlex justifyContent="start"> + <DxcTooltip label="Tooltip Test with a much larger text to display" position="right"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcFlex> </ExampleContainer> </> ); diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index a8ee83480..4a1a24455 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -11,7 +11,7 @@ const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): <Tooltip.Provider delayDuration={300}> <Tooltip.Root> <Tooltip.Trigger asChild> - <TooltipTrigger>{children}</TooltipTrigger> + <TooltipTriggerContainer>{children}</TooltipTriggerContainer> </Tooltip.Trigger> <Tooltip.Portal> <StyledTooltipContent side={position} sideOffset={SIZE} data-testid={"popover-content"}> @@ -41,16 +41,15 @@ const Triangle = styled.span<{ size: number }>` border-radius: 0 0 0 1px; `; -const TooltipTrigger = styled.div` +const TooltipTriggerContainer = styled.div` display: inline-flex; position: relative; `; const StyledTooltipContent = styled(Tooltip.Content)` - display: flex; z-index: 2147483647; - animation-duration: 0.3s; + animation-duration: 0.2s; animation-timing-function: ease-out; /* Additional optimization to prevent blurry text in certain browsers */ From ec5931d47f4401db4748157feb0e44680793d4f4 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 30 Apr 2024 13:41:32 +0200 Subject: [PATCH 17/31] Added support for table actionicons tooltips --- .../ResultsetTable.accessibility.test.tsx | 8 ++++---- .../resultset-table/ResultsetTable.stories.tsx | 8 ++++---- lib/src/table/Table.stories.tsx | 10 +++++----- lib/src/table/Table.tsx | 18 ++++++++++-------- .../code/examples/paginatorHidden.ts | 2 +- .../resultset-table/code/examples/reduced.ts | 2 +- .../components/table/code/examples/actions.ts | 2 +- 7 files changed, 26 insertions(+), 24 deletions(-) diff --git a/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx b/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx index a4c7bc46e..bbb15db5a 100644 --- a/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx +++ b/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx @@ -34,7 +34,7 @@ const deleteIcon = ( const actions: ActionCellsPropsType['actions'] = [ { - title: "icon", + title: "Other options", onClick: () => {}, options: [ { @@ -53,18 +53,18 @@ const actions: ActionCellsPropsType['actions'] = [ }, { icon: "https://www.freepnglogos.com/uploads/facebook-logo-design-1.png", - title: "icon", + title: "Facebook", onClick: () => {}, }, { icon: deleteIcon, - title: "icon", + title: "Delete", onClick: () => {}, disabled: true, }, { icon: deleteIcon, - title: "icon", + title: "Delete", onClick: () => {}, }, ] ; diff --git a/lib/src/resultset-table/ResultsetTable.stories.tsx b/lib/src/resultset-table/ResultsetTable.stories.tsx index c3750120e..0136bf9a5 100644 --- a/lib/src/resultset-table/ResultsetTable.stories.tsx +++ b/lib/src/resultset-table/ResultsetTable.stories.tsx @@ -54,7 +54,7 @@ const advancedTheme = { const actions = [ { - title: "icon", + title: "Other options", onClick: (value?) => { console.log(value); }, @@ -75,18 +75,18 @@ const actions = [ }, { icon: "filled_edit", - title: "icon", + title: "Edit", onClick: () => {}, }, { icon: deleteIcon, - title: "icon", + title: "Delete", onClick: () => {}, disabled: true, }, { icon: deleteIcon, - title: "icon", + title: "Delete", onClick: () => {}, }, ]; diff --git a/lib/src/table/Table.stories.tsx b/lib/src/table/Table.stories.tsx index 7c01b157a..ba2b605f3 100644 --- a/lib/src/table/Table.stories.tsx +++ b/lib/src/table/Table.stories.tsx @@ -42,7 +42,7 @@ const advancedTheme = { const actions = [ { - title: "icon", + title: "Other options", onClick: (value?) => { console.log(value); }, @@ -62,7 +62,7 @@ const actions = [ ], }, { - title: "icon", + title: "Other options", onClick: (value?) => { console.log(value); }, @@ -83,7 +83,7 @@ const actions = [ }, { disabled: true, - title: "icon", + title: "Other options", onClick: (value?) => { console.log(value); }, @@ -104,12 +104,12 @@ const actions = [ }, { icon: "filled_edit", - title: "icon", + title: "Edit", onClick: () => {}, }, { icon: "filled_delete", - title: "icon", + title: "Delete", onClick: () => {}, disabled: true, }, diff --git a/lib/src/table/Table.tsx b/lib/src/table/Table.tsx index f596a67b0..5ca6885a1 100644 --- a/lib/src/table/Table.tsx +++ b/lib/src/table/Table.tsx @@ -46,14 +46,16 @@ export const DxcActionsCell = ({ actions }: ActionCellsPropsType): JSX.Element = )} {actionDropdown && ( <HalstackProvider advancedTheme={overwriteTheme(colorsTheme)} key={`provider-dropdown`}> - <DxcDropdown - options={actionDropdown.options} - onSelectOption={actionDropdown.onClick} - disabled={actionDropdown.disabled} - icon="more_vert" - tabIndex={actionDropdown.tabIndex} - caretHidden - ></DxcDropdown> + <DxcTooltip label={actionDropdown.title}> + <DxcDropdown + options={actionDropdown.options} + onSelectOption={actionDropdown.onClick} + disabled={actionDropdown.disabled} + icon="more_vert" + tabIndex={actionDropdown.tabIndex} + caretHidden + ></DxcDropdown> + </DxcTooltip> </HalstackProvider> )} </DxcFlex> diff --git a/website/screens/components/resultset-table/code/examples/paginatorHidden.ts b/website/screens/components/resultset-table/code/examples/paginatorHidden.ts index 0dec3ab3b..68f731707 100644 --- a/website/screens/components/resultset-table/code/examples/paginatorHidden.ts +++ b/website/screens/components/resultset-table/code/examples/paginatorHidden.ts @@ -11,7 +11,7 @@ const code = `() => { const actions = [ { icon: "filled_delete", - title: "icon", + title: "Delete", onClick: () => {}, }, { diff --git a/website/screens/components/resultset-table/code/examples/reduced.ts b/website/screens/components/resultset-table/code/examples/reduced.ts index 1a652cbc6..76908387b 100644 --- a/website/screens/components/resultset-table/code/examples/reduced.ts +++ b/website/screens/components/resultset-table/code/examples/reduced.ts @@ -11,7 +11,7 @@ const code = `() => { const actions = [ { icon: "delete", - title: "icon", + title: "Delete", onClick: () => {}, }, { diff --git a/website/screens/components/table/code/examples/actions.ts b/website/screens/components/table/code/examples/actions.ts index c48bff7ee..10ad0dd76 100644 --- a/website/screens/components/table/code/examples/actions.ts +++ b/website/screens/components/table/code/examples/actions.ts @@ -4,7 +4,7 @@ const code = `() => { const actions = [ { icon: "delete", - title: "icon", + title: "Delete", onClick: () => {}, }, { From ee9a451e2f4dc38cbbdf1f65936643cd75f01b3f Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 30 Apr 2024 15:06:00 +0200 Subject: [PATCH 18/31] Restored changes outside Tooltip component --- lib/src/action-icon/ActionIcon.test.tsx | 13 +-- lib/src/action-icon/ActionIcon.tsx | 31 +++---- lib/src/badge/Badge.tsx | 36 ++++---- lib/src/button/Button.test.tsx | 1 + lib/src/button/Button.tsx | 40 ++++----- lib/src/date-input/DateInput.stories.tsx | 2 +- lib/src/date-input/DateInput.test.tsx | 6 +- lib/src/date-input/DateInput.tsx | 4 +- lib/src/date-input/DatePicker.tsx | 33 +++---- lib/src/dialog/Dialog.tsx | 4 +- lib/src/dropdown/Dropdown.tsx | 2 +- lib/src/file-input/FileItem.tsx | 30 +++---- lib/src/footer/Footer.tsx | 26 +++--- lib/src/header/Header.tsx | 14 +-- lib/src/layout/ApplicationLayout.tsx | 22 ++--- lib/src/number-input/NumberInput.test.tsx | 6 +- lib/src/password-input/PasswordInput.test.tsx | 6 +- .../ResultsetTable.accessibility.test.tsx | 8 +- .../ResultsetTable.stories.tsx | 8 +- lib/src/select/Select.test.tsx | 22 ++--- lib/src/select/Select.tsx | 57 ++++++------ lib/src/table/Table.stories.tsx | 10 +-- lib/src/table/Table.tsx | 21 ++--- lib/src/text-input/TextInput.test.tsx | 8 +- lib/src/text-input/TextInput.tsx | 4 +- lib/src/toggle-group/ToggleGroup.tsx | 86 +++++++++---------- .../code/examples/paginatorHidden.ts | 2 +- .../resultset-table/code/examples/reduced.ts | 2 +- .../components/table/code/examples/actions.ts | 2 +- 29 files changed, 237 insertions(+), 269 deletions(-) diff --git a/lib/src/action-icon/ActionIcon.test.tsx b/lib/src/action-icon/ActionIcon.test.tsx index a09077ce2..2e08bc95e 100644 --- a/lib/src/action-icon/ActionIcon.test.tsx +++ b/lib/src/action-icon/ActionIcon.test.tsx @@ -10,22 +10,22 @@ const iconSVG = ( ); describe("Action icon component tests", () => { test("Action icon renders with correct text", () => { - const { getByTestId } = render(<DxcActionIcon icon={iconSVG} title="favourite" />); - expect(getByTestId("favourite")).toBeTruthy(); + const { getByTitle } = render(<DxcActionIcon icon={iconSVG} title="favourite" />); + expect(getByTitle("favourite")).toBeTruthy(); }); test("Calls correct function on click", () => { const onClick = jest.fn(); - const { getByTestId } = render(<DxcActionIcon icon={iconSVG} title="favourite" onClick={onClick} />); - const action = getByTestId("favourite"); + const { getByTitle } = render(<DxcActionIcon icon={iconSVG} title="favourite" onClick={onClick} />); + const action = getByTitle("favourite"); fireEvent.click(action); expect(onClick).toHaveBeenCalled(); }); test("On click is not called when disabled", () => { const onClick = jest.fn(); - const { getByTestId } = render(<DxcActionIcon disabled icon={iconSVG} title="favourite" onClick={onClick} />); - const action = getByTestId("favourite"); + const { getByTitle } = render(<DxcActionIcon disabled icon={iconSVG} title="favourite" onClick={onClick} />); + const action = getByTitle("favourite"); fireEvent.click(action); expect(onClick).toHaveBeenCalledTimes(0); }); @@ -35,6 +35,7 @@ describe("Action icon component tests", () => { const button = getByRole("button"); expect(button.getAttribute("aria-label")).toBe("favourite"); + expect(button.getAttribute("title")).toBe("favourite"); expect(button.getAttribute("tabindex")).toBe("1"); }); }); diff --git a/lib/src/action-icon/ActionIcon.tsx b/lib/src/action-icon/ActionIcon.tsx index a72d2a56c..1d9970fbb 100644 --- a/lib/src/action-icon/ActionIcon.tsx +++ b/lib/src/action-icon/ActionIcon.tsx @@ -3,27 +3,24 @@ import ActionIconPropsTypes, { RefType } from "./types"; import styled from "styled-components"; import CoreTokens from "../common/coreTokens"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const DxcActionIcon = React.forwardRef<RefType, ActionIconPropsTypes>( ({ disabled = false, title, icon, onClick, tabIndex }, ref): JSX.Element => { return ( - <DxcTooltip label={title}> - <ActionIcon - aria-label={title} - disabled={disabled} - onClick={onClick} - onMouseDown={(event) => { - event.stopPropagation(); - }} - tabIndex={tabIndex} - type="button" - ref={ref} - data-testid={title} - > - {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} - </ActionIcon> - </DxcTooltip> + <ActionIcon + aria-label={title} + disabled={disabled} + onClick={onClick} + onMouseDown={(event) => { + event.stopPropagation(); + }} + tabIndex={tabIndex} + title={title} + type="button" + ref={ref} + > + {typeof icon === "string" ? <DxcIcon icon={icon} /> : icon} + </ActionIcon> ); } ); diff --git a/lib/src/badge/Badge.tsx b/lib/src/badge/Badge.tsx index e8683ffdf..f0a7feaf8 100644 --- a/lib/src/badge/Badge.tsx +++ b/lib/src/badge/Badge.tsx @@ -4,7 +4,6 @@ import BadgePropsType from "./types"; import DxcFlex from "../flex/Flex"; import CoreTokens from "../common/coreTokens"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const contextualColorMap = { grey: { @@ -94,24 +93,23 @@ const DxcBadge = ({ size = "medium", }: BadgePropsType): JSX.Element => { return ( - <DxcTooltip label={title}> - <BadgeContainer - label={label} - mode={mode} - color={(mode === "contextual" && color) || undefined} - size={size} - aria-label={title} - > - {(mode === "contextual" && ( - <DxcFlex gap="0.125rem" alignItems="center"> - {icon && ( - <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer> - )} - <Label label={label} notificationLimit={notificationLimit} size={size} /> - </DxcFlex> - )) || <Label label={label} notificationLimit={notificationLimit} size={size} />} - </BadgeContainer> - </DxcTooltip> + <BadgeContainer + label={label} + mode={mode} + color={(mode === "contextual" && color) || undefined} + size={size} + title={title} + aria-label={title} + > + {(mode === "contextual" && ( + <DxcFlex gap="0.125rem" alignItems="center"> + {icon && ( + <IconContainer size={size}>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer> + )} + <Label label={label} notificationLimit={notificationLimit} size={size} /> + </DxcFlex> + )) || <Label label={label} notificationLimit={notificationLimit} size={size} />} + </BadgeContainer> ); }; diff --git a/lib/src/button/Button.test.tsx b/lib/src/button/Button.test.tsx index c2b254356..ea8bc37ae 100644 --- a/lib/src/button/Button.test.tsx +++ b/lib/src/button/Button.test.tsx @@ -22,6 +22,7 @@ describe("Button component tests", () => { const button = getByRole("button"); expect(button.getAttribute("aria-label")).toBe("Go home"); + expect(button.getAttribute("title")).toBe("Go home"); expect(button.getAttribute("tabindex")).toBe("1"); }); }); diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx index bfdffcb8d..3a55775c7 100644 --- a/lib/src/button/Button.tsx +++ b/lib/src/button/Button.tsx @@ -5,7 +5,6 @@ import { getMargin } from "../common/utils"; import useTheme from "../useTheme"; import ButtonPropsType from "./types"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const DxcButton = ({ label = "", @@ -24,26 +23,25 @@ const DxcButton = ({ return ( <ThemeProvider theme={colorsTheme.button}> - <DxcTooltip label={title}> - <Button - aria-label={title} - disabled={disabled} - onClick={() => { - onClick(); - }} - tabIndex={disabled ? -1 : tabIndex} - type={type} - $mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode} - hasLabel={label ? true : false} - hasIcon={icon ? true : false} - iconPosition={iconPosition} - size={size} - margin={margin} - > - {label && <LabelContainer>{label}</LabelContainer>} - {icon && <IconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>} - </Button> - </DxcTooltip> + <Button + aria-label={title} + disabled={disabled} + onClick={() => { + onClick(); + }} + tabIndex={disabled ? -1 : tabIndex} + title={title} + type={type} + $mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode} + hasLabel={label ? true : false} + hasIcon={icon ? true : false} + iconPosition={iconPosition} + size={size} + margin={margin} + > + {label && <LabelContainer>{label}</LabelContainer>} + {icon && <IconContainer>{typeof icon === "string" ? <DxcIcon icon={icon} /> : icon}</IconContainer>} + </Button> </ThemeProvider> ); }; diff --git a/lib/src/date-input/DateInput.stories.tsx b/lib/src/date-input/DateInput.stories.tsx index f04783621..02653bfe4 100644 --- a/lib/src/date-input/DateInput.stories.tsx +++ b/lib/src/date-input/DateInput.stories.tsx @@ -226,7 +226,7 @@ const DatePickerButtonStates = () => { export const DatePickerStates = DatePickerButtonStates.bind({}); DatePickerStates.play = async ({ canvasElement }) => { const canvas = within(canvasElement); - const dateBtn = canvas.getAllByTestId("Select date")[0]; + const dateBtn = canvas.getAllByTitle("Select date")[0]; await userEvent.click(dateBtn); }; diff --git a/lib/src/date-input/DateInput.test.tsx b/lib/src/date-input/DateInput.test.tsx index 4e082d825..92b5cb5a2 100644 --- a/lib/src/date-input/DateInput.test.tsx +++ b/lib/src/date-input/DateInput.test.tsx @@ -157,7 +157,7 @@ describe("DateInput component tests", () => { }); test("Changing months using the arrows", async () => { - const { getByText, getByRole, getByTestId } = render( + const { getByText, getByRole, getByTitle } = render( <DxcDateInput label="label" format="dd-mm-yyyy" defaultValue="10-10-2000" /> ); const calendarAction = getByRole("combobox"); @@ -165,10 +165,10 @@ describe("DateInput component tests", () => { let d = dayjs("10-10-2000", "DD-MM-YYYY", true); d = d.set("date", 10); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); - const previousMonth = getByTestId("Previous month"); + const previousMonth = getByTitle("Previous month"); await userEvent.click(previousMonth); expect(getByText(d.set("month", d.get("month") - 1).format("MMMM YYYY"))).toBeTruthy(); - const nextMonth = getByTestId("Next month"); + const nextMonth = getByTitle("Next month"); await userEvent.click(nextMonth); expect(getByText(d.format("MMMM YYYY"))).toBeTruthy(); }); diff --git a/lib/src/date-input/DateInput.tsx b/lib/src/date-input/DateInput.tsx index f63058885..1c1fa059d 100644 --- a/lib/src/date-input/DateInput.tsx +++ b/lib/src/date-input/DateInput.tsx @@ -77,7 +77,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( useEffect(() => { if (!disabled) { - const actionButtonRef = dateRef?.current.querySelector("[data-testid='Select date']"); + const actionButtonRef = dateRef?.current.querySelector("[title='Select date']"); actionButtonRef?.setAttribute("aria-haspopup", true); actionButtonRef?.setAttribute("role", "combobox"); actionButtonRef?.setAttribute("aria-expanded", isOpen); @@ -209,7 +209,7 @@ const DxcDateInput = React.forwardRef<RefType, DateInputPropsType>( ); const StyledPopoverContent = styled(Popover.Content)` - z-index: 2147483646; + z-index: 2147483647; &:focus-visible { outline: none; } diff --git a/lib/src/date-input/DatePicker.tsx b/lib/src/date-input/DatePicker.tsx index fc81a1c48..6b604dc85 100644 --- a/lib/src/date-input/DatePicker.tsx +++ b/lib/src/date-input/DatePicker.tsx @@ -6,7 +6,6 @@ import Calendar from "./Calendar"; import YearPicker from "./YearPicker"; import useTranslatedLabels from "../useTranslatedLabels"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const today = dayjs(); @@ -33,15 +32,13 @@ const DxcDatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Ele return ( <DatePicker id={id}> <PickerHeader> - <DxcTooltip label={translatedLabels.calendar.previousMonthTitle}> - <HeaderButton - aria-label={translatedLabels.calendar.previousMonthTitle} - onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1))} - data-testid={translatedLabels.calendar.previousMonthTitle} - > - <DxcIcon icon="keyboard_arrow_left" /> - </HeaderButton> - </DxcTooltip> + <HeaderButton + aria-label={translatedLabels.calendar.previousMonthTitle} + title={translatedLabels.calendar.previousMonthTitle} + onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") - 1))} + > + <DxcIcon icon="keyboard_arrow_left" /> + </HeaderButton> <HeaderYearTrigger aria-live="polite" onClick={() => setContent((content) => (content === "yearPicker" ? "calendar" : "yearPicker"))} @@ -51,15 +48,13 @@ const DxcDatePicker = ({ date, onDateSelect, id }: DatePickerPropsType): JSX.Ele </HeaderYearTriggerLabel> <DxcIcon icon={content === "yearPicker" ? "arrow_drop_up" : "arrow_drop_down"} /> </HeaderYearTrigger> - <DxcTooltip label={translatedLabels.calendar.nextMonthTitle}> - <HeaderButton - aria-label={translatedLabels.calendar.nextMonthTitle} - onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1))} - data-testid={translatedLabels.calendar.nextMonthTitle} - > - <DxcIcon icon="keyboard_arrow_right" /> - </HeaderButton> - </DxcTooltip> + <HeaderButton + aria-label={translatedLabels.calendar.nextMonthTitle} + title={translatedLabels.calendar.nextMonthTitle} + onClick={() => handleMonthChange(innerDate.set("month", innerDate.get("month") + 1))} + > + <DxcIcon icon="keyboard_arrow_right" /> + </HeaderButton> </PickerHeader> {content === "calendar" && ( <Calendar diff --git a/lib/src/dialog/Dialog.tsx b/lib/src/dialog/Dialog.tsx index 7ff096ceb..7234c4b57 100644 --- a/lib/src/dialog/Dialog.tsx +++ b/lib/src/dialog/Dialog.tsx @@ -81,7 +81,7 @@ const DialogContainer = styled.div` align-items: center; justify-content: center; height: 100%; - z-index: 2147483646; + z-index: 2147483647; `; const Overlay = styled.div` @@ -101,7 +101,7 @@ const Dialog = styled.div<{ isCloseVisible: DialogPropsType["isCloseVisible"] }> ${(props) => props.isCloseVisible && "min-height: 72px;"} box-shadow: ${(props) => `${props.theme.boxShadowOffsetX} ${props.theme.boxShadowOffsetY} ${props.theme.boxShadowBlur} ${props.theme.boxShadowColor}`}; - z-index: 2147483646; + z-index: 2147483647; @media (max-width: ${responsiveSizes.medium}rem) { max-width: 92%; diff --git a/lib/src/dropdown/Dropdown.tsx b/lib/src/dropdown/Dropdown.tsx index 993db225d..3f794e544 100644 --- a/lib/src/dropdown/Dropdown.tsx +++ b/lib/src/dropdown/Dropdown.tsx @@ -214,7 +214,7 @@ const DxcDropdown = ({ visualFocusIndex={visualFocusIndex} menuItemOnClick={handleMenuItemOnClick} onKeyDown={handleMenuOnKeyDown} - styles={{ width, zIndex: "2147483646" }} + styles={{ width, zIndex: "2147483647" }} ref={menuRef} /> </Popover.Content> diff --git a/lib/src/file-input/FileItem.tsx b/lib/src/file-input/FileItem.tsx index 38ca364c4..98bbbd34b 100644 --- a/lib/src/file-input/FileItem.tsx +++ b/lib/src/file-input/FileItem.tsx @@ -5,7 +5,6 @@ import useTheme from "../useTheme"; import useTranslatedLabels from "../useTranslatedLabels"; import { FileItemProps } from "./types"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const FileItem = ({ fileName = "", @@ -45,24 +44,19 @@ const FileItem = ({ <DxcIcon icon="filled_error" /> </ErrorIcon> )} - <DxcTooltip label={translatedLabels.fileInput.deleteFileActionTitle}> - <DeleteFileAction - onClick={() => { - onDelete(fileName); - }} - type="button" - aria-label={translatedLabels.fileInput.deleteFileActionTitle} - tabIndex={tabIndex} - > - <DxcIcon icon="close" /> - </DeleteFileAction> - </DxcTooltip> + <DeleteFileAction + onClick={() => { + onDelete(fileName); + }} + type="button" + title={translatedLabels.fileInput.deleteFileActionTitle} + aria-label={translatedLabels.fileInput.deleteFileActionTitle} + tabIndex={tabIndex} + > + <DxcIcon icon="close" /> + </DeleteFileAction> </DxcFlex> - {error && !singleFileMode && ( - <ErrorMessage role="alert" aria-live="assertive"> - {error} - </ErrorMessage> - )} + {error && !singleFileMode && <ErrorMessage role="alert" aria-live="assertive">{error}</ErrorMessage>} </FileItemContent> </MainContainer> </ThemeProvider> diff --git a/lib/src/footer/Footer.tsx b/lib/src/footer/Footer.tsx index cc251a80c..b8ee8b45f 100644 --- a/lib/src/footer/Footer.tsx +++ b/lib/src/footer/Footer.tsx @@ -7,7 +7,6 @@ import { dxcLogo, dxcSmallLogo } from "./Icons"; import FooterPropsType from "./types"; import DxcFlex from "../flex/Flex"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const DxcFooter = ({ socialLinks, @@ -45,19 +44,18 @@ const DxcFooter = ({ {mode === "default" && ( <DxcFlex> {socialLinks?.map((link, index) => ( - <DxcTooltip label={link.title}> - <SocialAnchor - href={link.href} - tabIndex={tabIndex} - aria-label={link.title} - key={`social${index}${link.href}`} - index={index} - > - <SocialIconContainer> - {typeof link.logo === "string" ? <DxcIcon icon={link.logo} /> : link.logo} - </SocialIconContainer> - </SocialAnchor> - </DxcTooltip> + <SocialAnchor + href={link.href} + tabIndex={tabIndex} + title={link.title} + aria-label={link.title} + key={`social${index}${link.href}`} + index={index} + > + <SocialIconContainer> + {typeof link.logo === "string" ? <DxcIcon icon={link.logo} /> : link.logo} + </SocialIconContainer> + </SocialAnchor> ))} </DxcFlex> )} diff --git a/lib/src/header/Header.tsx b/lib/src/header/Header.tsx index 0f3037479..51a0e60a1 100644 --- a/lib/src/header/Header.tsx +++ b/lib/src/header/Header.tsx @@ -7,7 +7,6 @@ import useTheme from "../useTheme"; import useTranslatedLabels from "../useTranslatedLabels"; import HeaderPropsType from "./types"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const Dropdown = (props: React.ComponentProps<typeof DxcDropdown>) => ( <HeaderDropdown> @@ -110,11 +109,14 @@ const DxcHeader = ({ <ResponsiveMenu hasVisibility={isMenuVisible}> <ResponsiveIconsContainer> <ResponsiveLogoContainer>{headerResponsiveLogo}</ResponsiveLogoContainer> - <DxcTooltip label={translatedLabels.header.closeIcon}> - <CloseAction tabIndex={tabIndex} onClick={handleMenu} aria-label={translatedLabels.header.closeIcon}> - <DxcIcon icon="close" /> - </CloseAction> - </DxcTooltip> + <CloseAction + tabIndex={tabIndex} + onClick={handleMenu} + aria-label={translatedLabels.header.closeIcon} + title={translatedLabels.header.closeIcon} + > + <DxcIcon icon="close" /> + </CloseAction> </ResponsiveIconsContainer> <Content isResponsive={isResponsive} diff --git a/lib/src/layout/ApplicationLayout.tsx b/lib/src/layout/ApplicationLayout.tsx index 73f85e398..87f630c99 100644 --- a/lib/src/layout/ApplicationLayout.tsx +++ b/lib/src/layout/ApplicationLayout.tsx @@ -9,7 +9,6 @@ import AppLayoutPropsType, { AppLayoutMainPropsType } from "./types"; import { SidenavContextProvider, useResponsiveSidenavVisibility } from "../sidenav/SidenavContext"; import useTranslatedLabels from "../useTranslatedLabels"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const year = new Date().getFullYear(); const Main = ({ children }: AppLayoutMainPropsType): JSX.Element => <>{children}</>; @@ -101,15 +100,14 @@ const DxcApplicationLayout = ({ <HeaderContainer>{headerContent}</HeaderContainer> {sidenav && isResponsive && ( <VisibilityToggle> - <DxcTooltip label={translatedLabels.applicationLayout.visibilityToggleTitle}> - <HamburgerTrigger - onClick={handleSidenavVisibility} - aria-label={visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle} - > - <DxcIcon icon="Menu" /> - {visibilityToggleLabel} - </HamburgerTrigger> - </DxcTooltip> + <HamburgerTrigger + onClick={handleSidenavVisibility} + aria-label={visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle} + title={translatedLabels.applicationLayout.visibilityToggleTitle} + > + <DxcIcon icon="Menu" /> + {visibilityToggleLabel} + </HamburgerTrigger> </VisibilityToggle> )} <BodyContainer> @@ -174,9 +172,7 @@ const HamburgerTrigger = styled.button` padding: 12px 4px; background-color: transparent; box-shadow: 0 0 0 2px transparent; - font-family: - Open Sans, - sans-serif; + font-family: Open Sans, sans-serif; font-weight: 600; font-size: 14px; color: #000; diff --git a/lib/src/number-input/NumberInput.test.tsx b/lib/src/number-input/NumberInput.test.tsx index e7a96334f..3f86ef034 100644 --- a/lib/src/number-input/NumberInput.test.tsx +++ b/lib/src/number-input/NumberInput.test.tsx @@ -27,9 +27,9 @@ describe("Number input component tests", () => { }); test("Number input buttons' tooltip is correct", () => { - const { getByTestId } = render(<DxcNumberInput label="Number label" />); - expect(getByTestId("Decrement value")).toBeTruthy(); - expect(getByTestId("Increment value")).toBeTruthy(); + const { getByTitle } = render(<DxcNumberInput label="Number label" />); + expect(getByTitle("Decrement value")).toBeTruthy(); + expect(getByTitle("Increment value")).toBeTruthy(); }); test("Number input is disabled", () => { diff --git a/lib/src/password-input/PasswordInput.test.tsx b/lib/src/password-input/PasswordInput.test.tsx index 173b6826d..3c38df283 100644 --- a/lib/src/password-input/PasswordInput.test.tsx +++ b/lib/src/password-input/PasswordInput.test.tsx @@ -76,14 +76,14 @@ describe("Password input component tests", () => { }); test("Password tooltip is correct", async () => { - const { getAllByRole, getByTestId, queryByTestId } = render( + const { getAllByRole, getByTitle, queryByTitle } = render( <DxcPasswordInput label="Password input" clearable value="Password" /> ); const showButton = getAllByRole("button")[1]; userEvent.hover(showButton); - expect(getByTestId("Show password")).toBeTruthy(); + expect(getByTitle("Show password")).toBeTruthy(); userEvent.unhover(showButton); - expect(queryByTestId("Hide password")).toBeFalsy(); + expect(queryByTitle("Hide password")).toBeFalsy(); }); test("Password input has correct accessibility attributes", async () => { diff --git a/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx b/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx index bbb15db5a..a4c7bc46e 100644 --- a/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx +++ b/lib/src/resultset-table/ResultsetTable.accessibility.test.tsx @@ -34,7 +34,7 @@ const deleteIcon = ( const actions: ActionCellsPropsType['actions'] = [ { - title: "Other options", + title: "icon", onClick: () => {}, options: [ { @@ -53,18 +53,18 @@ const actions: ActionCellsPropsType['actions'] = [ }, { icon: "https://www.freepnglogos.com/uploads/facebook-logo-design-1.png", - title: "Facebook", + title: "icon", onClick: () => {}, }, { icon: deleteIcon, - title: "Delete", + title: "icon", onClick: () => {}, disabled: true, }, { icon: deleteIcon, - title: "Delete", + title: "icon", onClick: () => {}, }, ] ; diff --git a/lib/src/resultset-table/ResultsetTable.stories.tsx b/lib/src/resultset-table/ResultsetTable.stories.tsx index 0136bf9a5..c3750120e 100644 --- a/lib/src/resultset-table/ResultsetTable.stories.tsx +++ b/lib/src/resultset-table/ResultsetTable.stories.tsx @@ -54,7 +54,7 @@ const advancedTheme = { const actions = [ { - title: "Other options", + title: "icon", onClick: (value?) => { console.log(value); }, @@ -75,18 +75,18 @@ const actions = [ }, { icon: "filled_edit", - title: "Edit", + title: "icon", onClick: () => {}, }, { icon: deleteIcon, - title: "Delete", + title: "icon", onClick: () => {}, disabled: true, }, { icon: deleteIcon, - title: "Delete", + title: "icon", onClick: () => {}, }, ]; diff --git a/lib/src/select/Select.test.tsx b/lib/src/select/Select.test.tsx index df288937e..37fe65e52 100644 --- a/lib/src/select/Select.test.tsx +++ b/lib/src/select/Select.test.tsx @@ -648,19 +648,19 @@ describe("Select component tests", () => { test("Non-Grouped Options: Searchable - While user types, a clear action is displayed for cleaning the search value", async () => { const onChange = jest.fn(); - const { container, getByRole, getAllByRole, getByTestId, queryByTestId } = render( + const { container, getByRole, getAllByRole, queryByTitle } = render( <DxcSelect label="test-select-label" options={singleOptions} onChange={onChange} searchable /> ); const searchInput = container.querySelectorAll("input")[1]; await userEvent.type(searchInput, "Option 02"); expect(getAllByRole("option").length).toBe(1); - expect(getByTestId("Clear search")).toBeTruthy(); + expect(queryByTitle("Clear search")).toBeTruthy(); const clearAction = getByRole("button"); expect(clearAction).toBeTruthy(); await userEvent.click(clearAction); expect(getByRole("listbox")).toBeTruthy(); expect(getAllByRole("option").length).toBe(20); - expect(queryByTestId("search-button")).toBeFalsy(); + expect(queryByTitle("Clear search")).toBeFalsy(); }); test("Non-Grouped Options: Multiple selection - Displays a checkbox per option and enables the multi-selection", async () => { @@ -687,7 +687,7 @@ describe("Select component tests", () => { test("Non-Grouped Options: Multiple selection - Clear action and selection indicator", async () => { const onChange = jest.fn(); - const { getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTestId, queryByTestId } = render( + const { getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTitle, queryByTitle } = render( <DxcSelect label="test-select-label" options={singleOptions} onChange={onChange} multiple /> ); const select = getByRole("combobox"); @@ -699,12 +699,12 @@ describe("Select component tests", () => { expect(queryByRole("listbox")).toBeTruthy(); expect(getByText("Option 06, Option 09, Option 14")).toBeTruthy(); expect(getByText("3", { exact: true })).toBeTruthy(); - await userEvent.click(getByTestId("Clear selection")); + await userEvent.click(getByTitle("Clear selection")); expect(onChange).toHaveBeenCalledWith({ value: [], error: "This field is required. Please, enter a value." }); expect(queryByRole("listbox")).toBeTruthy(); expect(queryByText("Option 06, Option 09, Option 14")).toBeFalsy(); expect(queryByText("3")).toBeFalsy(); - expect(queryByTestId("Clear selection")).toBeFalsy(); + expect(queryByTitle("Clear selection")).toBeFalsy(); }); test("Non-Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", async () => { @@ -993,7 +993,7 @@ describe("Select component tests", () => { test("Grouped Options: Multiple selection - Clear action and selection indicator", async () => { const onChange = jest.fn(); - const { getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTestId, queryByTestId } = render( + const { getByText, queryByText, getByRole, getAllByRole, queryByRole, getByTitle, queryByTitle } = render( <DxcSelect label="test-select-label" options={groupOptions} onChange={onChange} multiple /> ); const select = getByRole("combobox"); @@ -1006,11 +1006,11 @@ describe("Select component tests", () => { expect(queryByRole("list")).toBeTruthy(); expect(getByText("Blanco, Oviedo, Duero, Ebro")).toBeTruthy(); expect(getByText("4", { exact: true })).toBeTruthy(); - await userEvent.click(getByTestId("Clear selection")); + await userEvent.click(getByTitle("Clear selection")); expect(queryByRole("list")).toBeTruthy(); expect(queryByText("Blanco, Oviedo, Duero, Ebro")).toBeFalsy(); expect(queryByText("4")).toBeFalsy(); - expect(queryByTestId("Clear selection")).toBeFalsy(); + expect(queryByTitle("Clear selection")).toBeFalsy(); }); test("Grouped Options: Multiple selection - Optional option should not be added when the select is marked as multiple", async () => { @@ -1079,7 +1079,7 @@ describe("Select component tests", () => { test("Multiple selection and optional - Clear action cleans every selected option but does not display an error", async () => { const onChange = jest.fn(); - const { getByRole, getAllByRole, getByTestId } = render( + const { getByRole, getAllByRole, getByTitle } = render( <DxcSelect label="test-select-label" options={singleOptions} onChange={onChange} multiple optional /> ); const select = getByRole("combobox"); @@ -1088,7 +1088,7 @@ describe("Select component tests", () => { await userEvent.click(getAllByRole("option")[8]); await userEvent.click(getAllByRole("option")[13]); expect(onChange).toHaveBeenCalledWith({ value: ["6", "9", "14"] }); - await userEvent.click(getByTestId("Clear selection")); + await userEvent.click(getByTitle("Clear selection")); expect(onChange).toHaveBeenCalledWith({ value: [] }); }); }); diff --git a/lib/src/select/Select.tsx b/lib/src/select/Select.tsx index 2fc0f3b80..93ec6a036 100644 --- a/lib/src/select/Select.tsx +++ b/lib/src/select/Select.tsx @@ -8,7 +8,6 @@ import SelectPropsType, { Option, OptionGroup, RefType } from "./types"; import Listbox from "./Listbox"; import * as Popover from "@radix-ui/react-popover"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const isOptionGroup = (option: Option | OptionGroup): option is OptionGroup => "options" in option && option.options != null; @@ -405,21 +404,19 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( {multiple && Array.isArray(selectedOption) && selectedOption.length > 0 && ( <SelectionIndicator> <SelectionNumber disabled={disabled}>{selectedOption.length}</SelectionNumber> - <DxcTooltip label={translatedLabels.select.actionClearSelectionTitle}> - <ClearOptionsAction - disabled={disabled} - onMouseDown={(event) => { - // Avoid input to lose focus when pressed - event.preventDefault(); - }} - onClick={handleClearOptionsActionOnClick} - tabIndex={-1} - aria-label={translatedLabels.select.actionClearSelectionTitle} - data-testid={translatedLabels.select.actionClearSelectionTitle} - > - <DxcIcon icon="clear" /> - </ClearOptionsAction> - </DxcTooltip> + <ClearOptionsAction + disabled={disabled} + onMouseDown={(event) => { + // Avoid input to lose focus when pressed + event.preventDefault(); + }} + onClick={handleClearOptionsActionOnClick} + tabIndex={-1} + title={translatedLabels.select.actionClearSelectionTitle} + aria-label={translatedLabels.select.actionClearSelectionTitle} + > + <DxcIcon icon="clear" /> + </ClearOptionsAction> </SelectionIndicator> )} <SearchableValueContainer> @@ -469,20 +466,18 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( </ErrorIcon> )} {searchable && searchValue.length > 0 && ( - <DxcTooltip label={translatedLabels.select.actionClearSelectionTitle}> - <ClearSearchAction - onMouseDown={(event) => { - // Avoid input to lose focus - event.preventDefault(); - }} - onClick={handleClearSearchActionOnClick} - tabIndex={-1} - data-testid={translatedLabels.select.actionClearSearchTitle} - aria-label={translatedLabels.select.actionClearSearchTitle} - > - <DxcIcon icon="clear" /> - </ClearSearchAction> - </DxcTooltip> + <ClearSearchAction + onMouseDown={(event) => { + // Avoid input to lose focus + event.preventDefault(); + }} + onClick={handleClearSearchActionOnClick} + tabIndex={-1} + title={translatedLabels.select.actionClearSearchTitle} + aria-label={translatedLabels.select.actionClearSearchTitle} + > + <DxcIcon icon="clear" /> + </ClearSearchAction> )} <CollapseIndicator disabled={disabled}> <DxcIcon icon={isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"} /> @@ -492,7 +487,7 @@ const DxcSelect = React.forwardRef<RefType, SelectPropsType>( <Popover.Portal> <Popover.Content sideOffset={4} - style={{ zIndex: "2147483646" }} + style={{ zIndex: "2147483647" }} onOpenAutoFocus={(event) => { // Avoid select to lose focus when the list is opened event.preventDefault(); diff --git a/lib/src/table/Table.stories.tsx b/lib/src/table/Table.stories.tsx index ba2b605f3..7c01b157a 100644 --- a/lib/src/table/Table.stories.tsx +++ b/lib/src/table/Table.stories.tsx @@ -42,7 +42,7 @@ const advancedTheme = { const actions = [ { - title: "Other options", + title: "icon", onClick: (value?) => { console.log(value); }, @@ -62,7 +62,7 @@ const actions = [ ], }, { - title: "Other options", + title: "icon", onClick: (value?) => { console.log(value); }, @@ -83,7 +83,7 @@ const actions = [ }, { disabled: true, - title: "Other options", + title: "icon", onClick: (value?) => { console.log(value); }, @@ -104,12 +104,12 @@ const actions = [ }, { icon: "filled_edit", - title: "Edit", + title: "icon", onClick: () => {}, }, { icon: "filled_delete", - title: "Delete", + title: "icon", onClick: () => {}, disabled: true, }, diff --git a/lib/src/table/Table.tsx b/lib/src/table/Table.tsx index 5ca6885a1..6d94cda1a 100644 --- a/lib/src/table/Table.tsx +++ b/lib/src/table/Table.tsx @@ -10,7 +10,6 @@ import DxcDropdown from "../dropdown/Dropdown"; import DxcFlex from "../flex/Flex"; import { HalstackProvider } from "../HalstackContext"; import DxcActionIcon from "../action-icon/ActionIcon"; -import DxcTooltip from "../tooltip/Tooltip"; const overwriteTheme = (theme: DeepPartial<AdvancedTheme>) => { const newTheme = DropdownTheme; @@ -46,16 +45,14 @@ export const DxcActionsCell = ({ actions }: ActionCellsPropsType): JSX.Element = )} {actionDropdown && ( <HalstackProvider advancedTheme={overwriteTheme(colorsTheme)} key={`provider-dropdown`}> - <DxcTooltip label={actionDropdown.title}> - <DxcDropdown - options={actionDropdown.options} - onSelectOption={actionDropdown.onClick} - disabled={actionDropdown.disabled} - icon="more_vert" - tabIndex={actionDropdown.tabIndex} - caretHidden - ></DxcDropdown> - </DxcTooltip> + <DxcDropdown + options={actionDropdown.options} + onSelectOption={actionDropdown.onClick} + disabled={actionDropdown.disabled} + icon="more_vert" + tabIndex={actionDropdown.tabIndex} + caretHidden + ></DxcDropdown> </HalstackProvider> )} </DxcFlex> @@ -67,7 +64,7 @@ const DxcTable = ({ children, margin, mode = "default" }: TablePropsType): JSX.E return ( <ThemeProvider theme={colorsTheme.table}> - <DxcTableContainer margin={margin}> + <DxcTableContainer margin={margin}> <DxcTableContent mode={mode}>{children}</DxcTableContent> </DxcTableContainer> </ThemeProvider> diff --git a/lib/src/text-input/TextInput.test.tsx b/lib/src/text-input/TextInput.test.tsx index bc0cc8127..cf70ec214 100644 --- a/lib/src/text-input/TextInput.test.tsx +++ b/lib/src/text-input/TextInput.test.tsx @@ -212,8 +212,8 @@ describe("TextInput component tests", () => { }); test("Clear action tooltip is correct", () => { - const { getByTestId } = render(<DxcTextInput label="Input label" value="Text" clearable />); - expect(getByTestId("Clear field")).toBeTruthy(); + const { getByTitle } = render(<DxcTextInput label="Input label" value="Text" clearable />); + expect(getByTitle("Clear field")).toBeTruthy(); }); test("Clear action onClick cleans the input", async () => { @@ -355,9 +355,9 @@ describe("TextInput component tests", () => { ), title: "Search", }; - const { getByRole, getByTestId } = render(<DxcTextInput label="Input label" action={action} />); + const { getByRole, getByTestId, getByTitle } = render(<DxcTextInput label="Input label" action={action} />); expect(getByTestId("image")).toBeTruthy(); - expect(getByTestId("Search")).toBeTruthy(); + expect(getByTitle("Search")).toBeTruthy(); await userEvent.click(getByRole("button")); expect(onClick).toHaveBeenCalled(); }); diff --git a/lib/src/text-input/TextInput.tsx b/lib/src/text-input/TextInput.tsx index c24b4c603..171c8481f 100644 --- a/lib/src/text-input/TextInput.tsx +++ b/lib/src/text-input/TextInput.tsx @@ -376,7 +376,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>( <Popover.Portal> <Popover.Content sideOffset={5} - style={{ zIndex: "2147483646" }} + style={{ zIndex: "2147483647" }} onOpenAutoFocus={(event) => { // Avoid select to lose focus when the list is opened event.preventDefault(); @@ -472,7 +472,6 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>( tabIndex={tabIndex} ref={actionRef} title={translatedLabels.numberInput.decrementValueTitle} - data-testid={"decrement-value-button"} disabled={disabled} /> <DxcActionIcon @@ -481,7 +480,6 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>( tabIndex={tabIndex} ref={actionRef} title={translatedLabels.numberInput.incrementValueTitle} - data-testid={"increment-value-button"} disabled={disabled} /> </> diff --git a/lib/src/toggle-group/ToggleGroup.tsx b/lib/src/toggle-group/ToggleGroup.tsx index d412bb3c6..28114550b 100644 --- a/lib/src/toggle-group/ToggleGroup.tsx +++ b/lib/src/toggle-group/ToggleGroup.tsx @@ -5,7 +5,6 @@ import useTheme from "../useTheme"; import ToggleGroupPropsType, { OptionLabel } from "./types"; import DxcFlex from "../flex/Flex"; import DxcIcon from "../icon/Icon"; -import DxcTooltip from "../tooltip/Tooltip"; const DxcToggleGroup = ({ label, @@ -67,49 +66,48 @@ const DxcToggleGroup = ({ <HelperText disabled={disabled}>{helperText}</HelperText> <OptionsContainer aria-labelledby={toggleGroupLabelId}> {options.map((option, i) => ( - <DxcTooltip label={option.title}> - <ToggleButton - key={`toggle-${i}-${option.label}`} - aria-label={option.title} - aria-pressed={ - multiple - ? value - ? Array.isArray(value) && value.includes(option.value) - : Array.isArray(selectedValue) && selectedValue.includes(option.value) - : value - ? option.value === value - : option.value === selectedValue - } - disabled={disabled} - onClick={() => { - handleToggleChange(option.value); - }} - onKeyDown={(event) => { - handleOnKeyDown(event, option.value); - }} - tabIndex={!disabled ? tabIndex : -1} - hasIcon={option.icon} - optionLabel={option.label} - selected={ - multiple - ? value - ? Array.isArray(value) && value.includes(option.value) - : Array.isArray(selectedValue) && selectedValue.includes(option.value) - : value - ? option.value === value - : option.value === selectedValue - } - > - <DxcFlex alignItems="center"> - {option.icon && ( - <IconContainer optionLabel={option.label}> - {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon} - </IconContainer> - )} - {option.label && <LabelContainer>{option.label}</LabelContainer>} - </DxcFlex> - </ToggleButton> - </DxcTooltip> + <ToggleButton + key={`toggle-${i}-${option.label}`} + aria-label={option.title} + aria-pressed={ + multiple + ? value + ? Array.isArray(value) && value.includes(option.value) + : Array.isArray(selectedValue) && selectedValue.includes(option.value) + : value + ? option.value === value + : option.value === selectedValue + } + disabled={disabled} + onClick={() => { + handleToggleChange(option.value); + }} + onKeyDown={(event) => { + handleOnKeyDown(event, option.value); + }} + tabIndex={!disabled ? tabIndex : -1} + title={option.title} + hasIcon={option.icon} + optionLabel={option.label} + selected={ + multiple + ? value + ? Array.isArray(value) && value.includes(option.value) + : Array.isArray(selectedValue) && selectedValue.includes(option.value) + : value + ? option.value === value + : option.value === selectedValue + } + > + <DxcFlex alignItems="center"> + {option.icon && ( + <IconContainer optionLabel={option.label}> + {typeof option.icon === "string" ? <DxcIcon icon={option.icon} /> : option.icon} + </IconContainer> + )} + {option.label && <LabelContainer>{option.label}</LabelContainer>} + </DxcFlex> + </ToggleButton> ))} </OptionsContainer> </ToggleGroup> diff --git a/website/screens/components/resultset-table/code/examples/paginatorHidden.ts b/website/screens/components/resultset-table/code/examples/paginatorHidden.ts index 68f731707..0dec3ab3b 100644 --- a/website/screens/components/resultset-table/code/examples/paginatorHidden.ts +++ b/website/screens/components/resultset-table/code/examples/paginatorHidden.ts @@ -11,7 +11,7 @@ const code = `() => { const actions = [ { icon: "filled_delete", - title: "Delete", + title: "icon", onClick: () => {}, }, { diff --git a/website/screens/components/resultset-table/code/examples/reduced.ts b/website/screens/components/resultset-table/code/examples/reduced.ts index 76908387b..1a652cbc6 100644 --- a/website/screens/components/resultset-table/code/examples/reduced.ts +++ b/website/screens/components/resultset-table/code/examples/reduced.ts @@ -11,7 +11,7 @@ const code = `() => { const actions = [ { icon: "delete", - title: "Delete", + title: "icon", onClick: () => {}, }, { diff --git a/website/screens/components/table/code/examples/actions.ts b/website/screens/components/table/code/examples/actions.ts index 10ad0dd76..c48bff7ee 100644 --- a/website/screens/components/table/code/examples/actions.ts +++ b/website/screens/components/table/code/examples/actions.ts @@ -4,7 +4,7 @@ const code = `() => { const actions = [ { icon: "delete", - title: "Delete", + title: "icon", onClick: () => {}, }, { From 97dcced010b1d826c744fb61444be03c2c9698c9 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Thu, 2 May 2024 09:37:29 +0200 Subject: [PATCH 19/31] Tooltip size const removed --- lib/src/tooltip/Tooltip.tsx | 30 +++++++++++------------------- 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index 4a1a24455..b71b4f03d 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -4,21 +4,19 @@ import TooltipPropsType from "./types"; import * as Tooltip from "@radix-ui/react-tooltip"; import CoreTokens from "../common/coreTokens"; -const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): JSX.Element => { - const SIZE = 8; - - return label ? ( +const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): JSX.Element => + label ? ( <Tooltip.Provider delayDuration={300}> <Tooltip.Root> <Tooltip.Trigger asChild> <TooltipTriggerContainer>{children}</TooltipTriggerContainer> </Tooltip.Trigger> <Tooltip.Portal> - <StyledTooltipContent side={position} sideOffset={SIZE} data-testid={"popover-content"}> + <StyledTooltipContent side={position} sideOffset={8} data-testid={"popover-content"}> <TooltipContainer>{label}</TooltipContainer> - <TooltipArrow asChild aria-hidden> - <Triangle size={SIZE} /> - </TooltipArrow> + <Tooltip.Arrow asChild aria-hidden> + <Triangle /> + </Tooltip.Arrow> </StyledTooltipContent> </Tooltip.Portal> </Tooltip.Root> @@ -26,16 +24,14 @@ const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): ) : ( <>{children}</> ); -}; -const Triangle = styled.span<{ size: number }>` +const Triangle = styled.span` display: block; - height: ${(props) => `${props.size}px`}; - width: ${(props) => `${props.size}px`}; + height: 8px; + width: 8px; background-color: ${CoreTokens.color_grey_800}; position: absolute; - left: ${(props) => `calc(50% - ${props.size / 2}px)`}; - bottom: ${(props) => - `-${props.size / 2 - 1}px`}; // Moved up 1 pixel to prevent sub-pixel alignment causing visual inconsistencies + left: calc(50% - 4px); + bottom: -3px; // Moved up 1 pixel to prevent sub-pixel alignment causing visual inconsistencies clip-path: polygon(0% 0%, 100% 100%, 0% 100%); transform: rotate(-45deg); border-radius: 0 0 0 1px; @@ -110,10 +106,6 @@ const StyledTooltipContent = styled(Tooltip.Content)` } `; -const TooltipArrow = styled(Tooltip.Arrow)` - fill: ${CoreTokens.color_grey_800}; -`; - const TooltipContainer = styled.div` box-sizing: border-box; padding: 8px 12px; From 69219812c7f217008d6a9d489daed25a29eced82 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Thu, 2 May 2024 09:39:43 +0200 Subject: [PATCH 20/31] Removed unneeded type in Tooltip --- lib/src/tooltip/types.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/src/tooltip/types.tsx b/lib/src/tooltip/types.tsx index 6b58c290d..25a4a996a 100644 --- a/lib/src/tooltip/types.tsx +++ b/lib/src/tooltip/types.tsx @@ -1,10 +1,8 @@ -type Position = "bottom" | "top" | "left" | "right"; - type Props = { /** * Preferred position for displaying the tooltip. It may adjust automatically based on available space. */ - position?: Position; + position?: "bottom" | "top" | "left" | "right"; /** * Text to be displayed inside the tooltip. */ From 76560b2510e3564cfb5b99c84c6bc8898d9e9a60 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Thu, 2 May 2024 13:15:25 +0200 Subject: [PATCH 21/31] Added arrow SVG --- lib/src/tooltip/Tooltip.tsx | 30 +++++++++++++++++------------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index b71b4f03d..3aa9ca1f9 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -4,6 +4,22 @@ import TooltipPropsType from "./types"; import * as Tooltip from "@radix-ui/react-tooltip"; import CoreTokens from "../common/coreTokens"; +const Triangle = () => ( + <svg + width="12" + height="6" + viewBox="0 0 12 6" + xmlns="http://www.w3.org/2000/svg" + preserveAspectRatio="none" + display="block" + > + <path + d="M0.351562 0L5.30131 4.94975C5.69184 5.34027 6.325 5.34027 6.71552 4.94975L11.6653 0H6.00842H0.351562Z" + fill={CoreTokens.color_grey_800} + /> + </svg> +); + const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): JSX.Element => label ? ( <Tooltip.Provider delayDuration={300}> @@ -12,7 +28,7 @@ const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): <TooltipTriggerContainer>{children}</TooltipTriggerContainer> </Tooltip.Trigger> <Tooltip.Portal> - <StyledTooltipContent side={position} sideOffset={8} data-testid={"popover-content"}> + <StyledTooltipContent side={position} sideOffset={8}> <TooltipContainer>{label}</TooltipContainer> <Tooltip.Arrow asChild aria-hidden> <Triangle /> @@ -24,18 +40,6 @@ const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): ) : ( <>{children}</> ); -const Triangle = styled.span` - display: block; - height: 8px; - width: 8px; - background-color: ${CoreTokens.color_grey_800}; - position: absolute; - left: calc(50% - 4px); - bottom: -3px; // Moved up 1 pixel to prevent sub-pixel alignment causing visual inconsistencies - clip-path: polygon(0% 0%, 100% 100%, 0% 100%); - transform: rotate(-45deg); - border-radius: 0 0 0 1px; -`; const TooltipTriggerContainer = styled.div` display: inline-flex; From 26b1e487c43044cc4345c54f2de128c0ed59ced3 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Mon, 6 May 2024 13:15:25 +0200 Subject: [PATCH 22/31] Added a story for each tooltip scenario --- lib/src/tooltip/Tooltip.stories.tsx | 90 +++++++++++++++++------------ 1 file changed, 53 insertions(+), 37 deletions(-) diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index 4d89c1e34..abe95ec1d 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -14,7 +14,7 @@ export default { const Tooltip = () => ( <> - <Title title="Active tooltip" theme="light" level={4} /> + <Title title="Default tooltip" theme="light" level={4} /> <ExampleContainer> <DxcInset bottom="3rem"> <DxcTooltip label="Tooltip Test"> @@ -22,22 +22,24 @@ const Tooltip = () => ( </DxcTooltip> </DxcInset> </ExampleContainer> - <Title title="Bottom tooltip" theme="light" level={4} /> - <ExampleContainer> - <DxcInset bottom="3rem"> - <DxcTooltip label="Tooltip Test" position="bottom"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - </ExampleContainer> - <Title title="Bottom tooltip multi-line" theme="light" level={4} /> + </> +); + +const LargeTextWithinTooltip = () => ( + <> + <Title title="Default tooltip" theme="light" level={4} /> <ExampleContainer> <DxcInset bottom="3rem"> - <DxcTooltip label="Tooltip Test with a much larger text to display" position="bottom"> + <DxcTooltip label="Tooltip Test with a large text to display in the container while hovering the component"> <DxcButton label="Hoverable button" /> </DxcTooltip> </DxcInset> </ExampleContainer> + </> +); + +const TopTooltip = () => ( + <> <Title title="Top tooltip" theme="light" level={4} /> <ExampleContainer> <DxcInset top="3rem"> @@ -46,14 +48,11 @@ const Tooltip = () => ( </DxcTooltip> </DxcInset> </ExampleContainer> - <Title title="Top tooltip multi-line" theme="light" level={4} /> - <ExampleContainer> - <DxcInset top="3rem"> - <DxcTooltip label="Tooltip Test with a much larger text to display" position="top"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> - </ExampleContainer> + </> +); + +const LeftTooltip = () => ( + <> <Title title="Left tooltip" theme="light" level={4} /> <ExampleContainer> <DxcFlex justifyContent="center"> @@ -62,14 +61,11 @@ const Tooltip = () => ( </DxcTooltip> </DxcFlex> </ExampleContainer> - <Title title="Left tooltip multi-line" theme="light" level={4} /> - <ExampleContainer> - <DxcFlex justifyContent="center"> - <DxcTooltip label="Tooltip Test with a much larger text to display" position="left"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcFlex> - </ExampleContainer> + </> +); + +const RightTooltip = () => ( + <> <Title title="Right tooltip" theme="light" level={4} /> <ExampleContainer> <DxcFlex justifyContent="start"> @@ -78,20 +74,40 @@ const Tooltip = () => ( </DxcTooltip> </DxcFlex> </ExampleContainer> - <Title title="Right tooltip multi-line" theme="light" level={4} /> - <ExampleContainer> - <DxcFlex justifyContent="start"> - <DxcTooltip label="Tooltip Test with a much larger text to display" position="right"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcFlex> - </ExampleContainer> </> ); export const Chromatic = Tooltip.bind({}); Chromatic.play = async ({ canvasElement }) => { const canvas = within(canvasElement); - const buttonList = canvas.getAllByRole("button"); - await userEvent.hover(buttonList[0]); + const buttonList = canvas.getByRole("button"); + await userEvent.hover(buttonList); +}; + +export const LargeTextTooltip = LargeTextWithinTooltip.bind({}); +LargeTextTooltip.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const buttonList = canvas.getByRole("button"); + await userEvent.hover(buttonList); +}; + +export const TooltipPositionTop = TopTooltip.bind({}); +TooltipPositionTop.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const buttonList = canvas.getByRole("button"); + await userEvent.hover(buttonList); +}; + +export const TooltipPositionLeft = LeftTooltip.bind({}); +TooltipPositionLeft.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const buttonList = canvas.getByRole("button"); + await userEvent.hover(buttonList); +}; + +export const TooltipPositionRight = RightTooltip.bind({}); +TooltipPositionRight.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const buttonList = canvas.getByRole("button"); + await userEvent.hover(buttonList); }; From 0eaab7196797c33e3ab2770ce2dbc1e607aed26a Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 7 May 2024 09:56:53 +0200 Subject: [PATCH 23/31] Removed redundant tests --- lib/src/tooltip/Tooltip.test.tsx | 32 -------------------------------- 1 file changed, 32 deletions(-) diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx index 83538f1f8..17f085afc 100644 --- a/lib/src/tooltip/Tooltip.test.tsx +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -55,36 +55,4 @@ describe("Tooltip component tests", () => { expect(tooltipElement).toBeFalsy(); }); }); - - test("Tooltip sets the default display position properly", async () => { - const { getByText, getByRole } = render( - <DxcTooltip label="Tooltip Test"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - ); - const triggerElement = getByText("Hoverable button"); - await userEvent.hover(triggerElement); - await waitFor(() => { - const tooltipContent = getByRole("tooltip", { name: "Tooltip Test" }); - const position = tooltipContent.closest("div").getAttribute("data-side"); - expect(tooltipContent).toBeTruthy(); - expect(position).toBe("bottom"); - }); - }); - - test("Tooltip sets the custom display position properly", async () => { - const { getByText, getByRole } = render( - <DxcTooltip label="Tooltip Test" position="top"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - ); - const triggerElement = getByText("Hoverable button"); - await userEvent.hover(triggerElement); - await waitFor(() => { - const tooltipContent = getByRole("tooltip", { name: "Tooltip Test" }); - const position = tooltipContent.closest("div").getAttribute("data-side"); - expect(tooltipContent).toBeTruthy(); - expect(position).toBe("top"); - }); - }); }); From b3fff2a2563b22fe8209108e3c2101c049419f40 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 7 May 2024 09:59:04 +0200 Subject: [PATCH 24/31] Removed await from hover/unhover --- lib/src/tooltip/Tooltip.test.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx index 17f085afc..6945a1ca8 100644 --- a/lib/src/tooltip/Tooltip.test.tsx +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -34,7 +34,7 @@ describe("Tooltip component tests", () => { </DxcTooltip> ); const triggerElement = getByText("Hoverable button"); - await userEvent.hover(triggerElement); + userEvent.hover(triggerElement); await waitFor(() => { const tooltipContent = getByRole("tooltip", { name: "Tooltip Test" }); expect(tooltipContent).toBeTruthy(); @@ -43,13 +43,13 @@ describe("Tooltip component tests", () => { test("Tooltip stops being rendered when hover is stopped", async () => { const { getByText, queryByRole } = render( - <DxcTooltip label="Tooltip Test"> + <DxcTooltip label=""> <DxcButton label="Hoverable button" /> </DxcTooltip> ); const triggerElement = getByText("Hoverable button"); - await userEvent.hover(triggerElement); - await userEvent.unhover(triggerElement); + userEvent.hover(triggerElement); + userEvent.unhover(triggerElement); await waitFor(() => { const tooltipElement = queryByRole("tooltip"); expect(tooltipElement).toBeFalsy(); From 48f8179599378f7fb28e4b0572de4813a3c18f55 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 7 May 2024 10:42:00 +0200 Subject: [PATCH 25/31] Removed await from hover/unhover --- lib/src/tooltip/Tooltip.test.tsx | 35 +++++--------------------------- lib/src/tooltip/Tooltip.tsx | 2 +- 2 files changed, 6 insertions(+), 31 deletions(-) diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx index 6945a1ca8..4ef2756c7 100644 --- a/lib/src/tooltip/Tooltip.test.tsx +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { render, waitFor } from "@testing-library/react"; +import { render, waitFor, screen, waitForElementToBeRemoved } from "@testing-library/react"; import DxcTooltip from "./Tooltip"; import DxcButton from "../button/Button"; import userEvent from "@testing-library/user-event"; @@ -15,44 +15,19 @@ import userEvent from "@testing-library/user-event"; }; describe("Tooltip component tests", () => { - test("Tooltip does not render by default", async () => { - const { queryByRole } = render( - <DxcTooltip label="Tooltip Test"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - ); - await waitFor(() => { - const tooltipElement = queryByRole("tooltip"); - expect(tooltipElement).toBeFalsy(); - }); - }); - - test("Tooltip renders with correct label on hover", async () => { - const { getByText, getByRole } = render( - <DxcTooltip label="Tooltip Test"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - ); - const triggerElement = getByText("Hoverable button"); - userEvent.hover(triggerElement); - await waitFor(() => { - const tooltipContent = getByRole("tooltip", { name: "Tooltip Test" }); - expect(tooltipContent).toBeTruthy(); - }); - }); - - test("Tooltip stops being rendered when hover is stopped", async () => { + test("Tooltip shows/unshows when hovering/unhovering", async () => { const { getByText, queryByRole } = render( <DxcTooltip label=""> <DxcButton label="Hoverable button" /> </DxcTooltip> ); const triggerElement = getByText("Hoverable button"); + expect(queryByRole("tooltip")).toBeFalsy(); userEvent.hover(triggerElement); + expect(await screen.findByRole("tooltip", { name: "Tooltip Test" })).toBeTruthy(); userEvent.unhover(triggerElement); await waitFor(() => { - const tooltipElement = queryByRole("tooltip"); - expect(tooltipElement).toBeFalsy(); + expect(queryByRole("tooltip")).toBeFalsy(); }); }); }); diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index 3aa9ca1f9..8a5a3d9c0 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -22,7 +22,7 @@ const Triangle = () => ( const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): JSX.Element => label ? ( - <Tooltip.Provider delayDuration={300}> + <Tooltip.Provider delayDuration={0} skipDelayDuration={0}> <Tooltip.Root> <Tooltip.Trigger asChild> <TooltipTriggerContainer>{children}</TooltipTriggerContainer> From 567493300e042518e911e3e0cd547a6ff6bf2492 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 7 May 2024 11:30:45 +0200 Subject: [PATCH 26/31] Done separated tests for tooltip --- lib/src/tooltip/Tooltip.test.tsx | 33 +++++++++++++++++++++++++++----- lib/src/tooltip/Tooltip.tsx | 2 +- 2 files changed, 29 insertions(+), 6 deletions(-) diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx index 4ef2756c7..5c3835dac 100644 --- a/lib/src/tooltip/Tooltip.test.tsx +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -3,6 +3,7 @@ import { render, waitFor, screen, waitForElementToBeRemoved } from "@testing-lib import DxcTooltip from "./Tooltip"; import DxcButton from "../button/Button"; import userEvent from "@testing-library/user-event"; +import "@testing-library/jest-dom"; (global as any).globalThis = global; (global as any).DOMRect = { @@ -15,19 +16,41 @@ import userEvent from "@testing-library/user-event"; }; describe("Tooltip component tests", () => { - test("Tooltip shows/unshows when hovering/unhovering", async () => { + test("Tooltip does not render by default", async () => { + const { queryByRole } = render( + <DxcTooltip label="Tooltip Test"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + ); + await waitFor(() => { + const tooltipElement = queryByRole("tooltip"); + expect(tooltipElement).toBeFalsy(); + }); + }); + + test("Tooltip renders with correct label on hover", async () => { + const { getByText } = render( + <DxcTooltip label="Tooltip Test"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + ); + const triggerElement = getByText("Hoverable button"); + userEvent.hover(triggerElement); + await screen.findByRole("tooltip", { name: "Tooltip Test" }); + }); + + test("Tooltip stops being rendered when hover is stopped", async () => { const { getByText, queryByRole } = render( - <DxcTooltip label=""> + <DxcTooltip label="Tooltip Test"> <DxcButton label="Hoverable button" /> </DxcTooltip> ); const triggerElement = getByText("Hoverable button"); - expect(queryByRole("tooltip")).toBeFalsy(); userEvent.hover(triggerElement); - expect(await screen.findByRole("tooltip", { name: "Tooltip Test" })).toBeTruthy(); userEvent.unhover(triggerElement); await waitFor(() => { - expect(queryByRole("tooltip")).toBeFalsy(); + const tooltipElement = queryByRole("tooltip"); + expect(tooltipElement).toBeFalsy(); }); }); }); diff --git a/lib/src/tooltip/Tooltip.tsx b/lib/src/tooltip/Tooltip.tsx index 8a5a3d9c0..3aa9ca1f9 100644 --- a/lib/src/tooltip/Tooltip.tsx +++ b/lib/src/tooltip/Tooltip.tsx @@ -22,7 +22,7 @@ const Triangle = () => ( const DxcTooltip = ({ position = "bottom", label, children }: TooltipPropsType): JSX.Element => label ? ( - <Tooltip.Provider delayDuration={0} skipDelayDuration={0}> + <Tooltip.Provider delayDuration={300}> <Tooltip.Root> <Tooltip.Trigger asChild> <TooltipTriggerContainer>{children}</TooltipTriggerContainer> From 7b9bac7bdc95d40bcdb46ebc50cf975a48e6698a Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 7 May 2024 11:33:51 +0200 Subject: [PATCH 27/31] Removed unused import --- lib/src/tooltip/Tooltip.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/tooltip/Tooltip.test.tsx b/lib/src/tooltip/Tooltip.test.tsx index 5c3835dac..70829ae8b 100644 --- a/lib/src/tooltip/Tooltip.test.tsx +++ b/lib/src/tooltip/Tooltip.test.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { render, waitFor, screen, waitForElementToBeRemoved } from "@testing-library/react"; +import { render, waitFor, screen } from "@testing-library/react"; import DxcTooltip from "./Tooltip"; import DxcButton from "../button/Button"; import userEvent from "@testing-library/user-event"; From 941064ab84e4446dc02ceb17dbeda8d1850b6ad0 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 7 May 2024 15:20:16 +0200 Subject: [PATCH 28/31] Added fixes from review --- lib/build-storybook.log | 157 ++++++++++++++++++++++++++++ lib/src/tooltip/Tooltip.stories.tsx | 26 ++--- 2 files changed, 167 insertions(+), 16 deletions(-) create mode 100644 lib/build-storybook.log diff --git a/lib/build-storybook.log b/lib/build-storybook.log new file mode 100644 index 000000000..156089fb5 --- /dev/null +++ b/lib/build-storybook.log @@ -0,0 +1,157 @@ + +> @dxc-technology/halstack-react@0.0.0 build-storybook +> storybook build --output-dir C:\Users\moren\AppData\Local\Temp\chromatic--25420-24RX1Fvg1xRn + +@storybook/cli v8.0.8 + +info => Cleaning outputDir: ..\..\..\..\..\AppData\Local\Temp\chromatic--25420-24RX1Fvg1xRn +info => Loading presets +info => Building manager.. +info => Manager built (253 ms) +info => Building preview.. +WARN No story files found for the specified pattern: src\**\*.mdx +vite v5.2.10 building for production... +transforming... +✓ 341 modules transformed. +rendering chunks... +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/iframe.html  13.16 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-B4GcaC1c.js  0.07 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/useTranslatedLabels-LjFXMuG4.js  0.14 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/useTheme-DeCt7e_e.js  0.14 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/utils-CfKSBaup.js  0.15 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/_commonjsHelpers-Cpj98o6Y.js  0.24 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Typography-BysXeJMi.js  0.26 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ExampleContainer-DgaKcQQn.js  0.29 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Title-BhKU-sbe.js  0.32 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Paragraph-Dc6zofRB.js  0.35 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Inset-dXCwHOYU.js  0.50 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Bleed-DozNaQxs.js  0.50 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-DrFu-skq.js  0.77 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-DXyApvKZ.js  0.83 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-CYD85dwb.js  0.84 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Icon-Exq4GjAI.js  0.93 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Flex-KjEqFDTX.js  0.98 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-CoHr_Wi5.js  1.00 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Image-DX_8NtF0.js  1.09 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/NumberInput-Cj-6m5AZ.js  1.22 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/PasswordInput-BTHLhsqp.js  1.27 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/BaseTypography-mSn7qQAG.js  1.51 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/StatusLight-DU4nx-r1.js  1.57 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ActionIcon-DMzCFSB2.js  1.67 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/entry-preview-BU9KLlPV.js  1.69 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Grid-b2lzGR_f.js  1.78 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Box-B0PNuLF0.js  2.06 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Card-CZZmRX9A.js  2.23 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-CeThVdo_.js  2.37 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-Iw54wP3s.js  2.47 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/BulletedList-D8848Lpn.js  2.48 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/AccordionGroup-ht7X1d_g.js  2.56 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ActionIcon.stories-DyX-Fmwi.js  2.67 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Paragraph.stories-CUo9wygJ.js  2.67 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Badge-BG7b7dLa.js  2.81 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Container-oNdTOFe9.js  2.87 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Link-Csdivrtc.js  2.98 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Paginator-DoYpJ1_z.js  2.99 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-B63p-W8V.js  3.10 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tag-bpDY6bsi.js  3.15 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Heading-CuHG4Wf2.js  3.22 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Chip-Cy2p_xvF.js  3.22 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Icon.stories-Dxual7yb.js  3.28 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-DQtykb1_.js  3.29 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/coreTokens-r70qX632.js  3.65 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/NavTabs-5iqAo-KA.js  4.25 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ResultsetTable-CWSG_01q.js  4.30 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Breadcrumbs-Dt3kDZEf.js  4.32 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Dialog-BNbJal_W.js  4.40 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ProgressBar-BhUxtCo8.js  4.53 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Checkbox-BUXokFnl.js  4.60 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-CQwMPdxT.js  4.64 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Accordion-Y-Za4lCg.js  4.64 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Button-B4c7ml19.js  4.70 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Switch-BVeqpgrD.js  4.88 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Heading.stories-CN-6Ep-B.js  5.05 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ToggleGroup-Bmwk-F8q.js  5.09 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Textarea-DYdJfWkz.js  5.47 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Paginator.stories-BuN4c2vT.js  5.57 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ContextualMenu-tYtwdzyA.js  5.65 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/StatusLight.stories-CXwXwtAQ.js  5.74 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Sidenav-Dk4YwtRG.js  5.93 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Flex.stories-CnBr5biE.js  5.99 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Alert-CJNklSIc.js  6.16 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ApplicationLayout-CP8WziuI.js  6.33 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/RadioGroup-BfAk5uea.js  6.33 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Table-DPKnYzlf.js  6.80 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Spinner-CC6f1eb8.js  6.95 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ProgressBar.stories-C9TMBqm7.js  6.96 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-B3ehnkiM.js  7.16 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/PasswordInput.stories-NS6qVxGN.js  7.26 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Box.stories-C9b7F4Rg.js  7.31 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Slider-iFJoVYjZ.js  7.37 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Breadcrumbs.stories-nMQ9-HUI.js  7.46 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-BAz7FMXc.js  7.62 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Wizard-BJxI4Jrh.js  7.72 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-sVLxC_Lr.js  8.07 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/BulletedList.stories-u5l1G2pP.js  8.13 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ApplicationLayout.stories-BNuMnhB2.js  8.49 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Dropdown-Cp91jy6G.js  8.61 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Header-BozxQZuV.js  8.67 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/NumberInput.stories-BSId3epZ.js  9.10 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ContextualMenu.stories-CFtt5NpQ.js  9.30 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/QuickNav-DK_bDKGf.js  9.56 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tabs-Dsao4aWC.js  9.66 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Switch.stories-BzMBXOBB.js  9.86 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Footer.stories-CWRJrdr-.js  10.19 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tag.stories-DBO1Wnyf.js  10.20 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Spinner.stories-Co2SEs0i.js  10.46 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/FileInput-gZe9sywf.js  10.95 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ToggleGroup.stories-BrWkI564.js  11.24 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Footer-C7edWLiE.js  11.37 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tabs.stories-B2T1Fpy5.js  11.56 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Card.stories-CxrOmLAZ.js  11.70 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Wizard.stories-IysEBSCt.js  11.73 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Inset.stories-BNQvO3Ny.js  11.86 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Slider.stories-AVaBBLMa.js  11.92 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Textarea.stories-CG-l9xKf.js  12.53 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Typography.stories-CB2IdIMD.js  12.89 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Header.stories-DbJaczKw.js  13.07 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Image.stories-BbP4KCLp.js  13.23 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Container.stories-CMeaFarc.js  13.38 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Chip.stories-CupSSW2v.js  13.64 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Grid.stories-3LrEhG2E.js  14.06 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Alert.stories-CWvvODXI.js  14.62 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/TextInput-D_0r0Vvx.js  14.76 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tooltip.stories-DHPuM7wN.js  14.77 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Checkbox.stories-Brl68vrN.js  14.89 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/iframe-g_zcH2-B.js  16.22 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/RadioGroup.stories-DVtZ9V5E.js  16.54 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ResultsetTable.stories-CXiFBqAh.js  16.64 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Badge.stories-BnxCxETi.js  17.20 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/DateInput.stories-D4absccA.js  17.33 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/NavTabs.stories-DOXkqhsm.js  17.48 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Accordion.stories-IqDTLRRn.js  17.66 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Select-BfFBqJvJ.js  18.13 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Sidenav.stories-BdBvXw5i.js  18.59 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Bleed.stories-DO2-YB2w.js  19.63 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Link.stories-CHYRhzF5.js  19.88 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-Bjw36ok-.js  20.71 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Dropdown.stories-Cwozx3Tt.js  23.41 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/DateInput-BQ2EFTeg.js  24.54 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/AccordionGroup.stories-BYozdlRZ.js  24.57 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/TextInput.stories-Bjci_Lhm.js  25.75 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Button.stories-BYq9xMPm.js  26.93 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/FileInput.stories-BZOjI3zA.js  28.83 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Table.stories-CEtLW2KB.js  31.69 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Divider.stories-B44RtZh3.js  33.53 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-BSSXWMQC.js  34.40 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/styled-components.browser.esm-DYBaGJgu.js  35.91 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Dialog.stories-CDXQ7Oiq.js  40.48 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/QuickNav.stories-1BEQ6ovV.js  43.87 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Select.stories-CbCRcvRQ.js  43.92 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/HalstackContext-By_30tU8.js  81.23 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-TCUHuiZB.js 134.03 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/axe-tIjS_RJW.js 575.25 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-Po7X3BzN.js 577.80 kB +../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-Ck_dQuhL.js 580.61 kB +✓ built in 7.13s +info => Preview built (7.88 s) +info => Output directory: C:\Users\moren\AppData\Local\Temp\chromatic--25420-24RX1Fvg1xRn diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index abe95ec1d..915743b5c 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -16,24 +16,20 @@ const Tooltip = () => ( <> <Title title="Default tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset bottom="3rem"> - <DxcTooltip label="Tooltip Test"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> + <DxcTooltip label="Tooltip Test"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> </ExampleContainer> </> ); const LargeTextWithinTooltip = () => ( <> - <Title title="Default tooltip" theme="light" level={4} /> + <Title title="Multiple line tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset bottom="3rem"> - <DxcTooltip label="Tooltip Test with a large text to display in the container while hovering the component"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcInset> + <DxcTooltip label="Tooltip Test with a large text to display in the container while hovering the component"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> </ExampleContainer> </> ); @@ -68,11 +64,9 @@ const RightTooltip = () => ( <> <Title title="Right tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcFlex justifyContent="start"> - <DxcTooltip label="Tooltip Test" position="right"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> - </DxcFlex> + <DxcTooltip label="Tooltip Test" position="right"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> </ExampleContainer> </> ); From fe75741df9b806429adbb20211f14081aa670af6 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 7 May 2024 16:06:29 +0200 Subject: [PATCH 29/31] Deleted build storybook log --- lib/build-storybook.log | 157 ---------------------------------------- 1 file changed, 157 deletions(-) delete mode 100644 lib/build-storybook.log diff --git a/lib/build-storybook.log b/lib/build-storybook.log deleted file mode 100644 index 156089fb5..000000000 --- a/lib/build-storybook.log +++ /dev/null @@ -1,157 +0,0 @@ - -> @dxc-technology/halstack-react@0.0.0 build-storybook -> storybook build --output-dir C:\Users\moren\AppData\Local\Temp\chromatic--25420-24RX1Fvg1xRn - -@storybook/cli v8.0.8 - -info => Cleaning outputDir: ..\..\..\..\..\AppData\Local\Temp\chromatic--25420-24RX1Fvg1xRn -info => Loading presets -info => Building manager.. -info => Manager built (253 ms) -info => Building preview.. -WARN No story files found for the specified pattern: src\**\*.mdx -vite v5.2.10 building for production... -transforming... -✓ 341 modules transformed. -rendering chunks... -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/iframe.html  13.16 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-B4GcaC1c.js  0.07 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/useTranslatedLabels-LjFXMuG4.js  0.14 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/useTheme-DeCt7e_e.js  0.14 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/utils-CfKSBaup.js  0.15 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/_commonjsHelpers-Cpj98o6Y.js  0.24 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Typography-BysXeJMi.js  0.26 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ExampleContainer-DgaKcQQn.js  0.29 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Title-BhKU-sbe.js  0.32 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Paragraph-Dc6zofRB.js  0.35 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Inset-dXCwHOYU.js  0.50 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Bleed-DozNaQxs.js  0.50 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-DrFu-skq.js  0.77 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-DXyApvKZ.js  0.83 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-CYD85dwb.js  0.84 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Icon-Exq4GjAI.js  0.93 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Flex-KjEqFDTX.js  0.98 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-CoHr_Wi5.js  1.00 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Image-DX_8NtF0.js  1.09 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/NumberInput-Cj-6m5AZ.js  1.22 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/PasswordInput-BTHLhsqp.js  1.27 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/BaseTypography-mSn7qQAG.js  1.51 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/StatusLight-DU4nx-r1.js  1.57 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ActionIcon-DMzCFSB2.js  1.67 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/entry-preview-BU9KLlPV.js  1.69 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Grid-b2lzGR_f.js  1.78 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Box-B0PNuLF0.js  2.06 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Card-CZZmRX9A.js  2.23 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-CeThVdo_.js  2.37 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-Iw54wP3s.js  2.47 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/BulletedList-D8848Lpn.js  2.48 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/AccordionGroup-ht7X1d_g.js  2.56 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ActionIcon.stories-DyX-Fmwi.js  2.67 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Paragraph.stories-CUo9wygJ.js  2.67 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Badge-BG7b7dLa.js  2.81 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Container-oNdTOFe9.js  2.87 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Link-Csdivrtc.js  2.98 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Paginator-DoYpJ1_z.js  2.99 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-B63p-W8V.js  3.10 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tag-bpDY6bsi.js  3.15 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Heading-CuHG4Wf2.js  3.22 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Chip-Cy2p_xvF.js  3.22 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Icon.stories-Dxual7yb.js  3.28 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-DQtykb1_.js  3.29 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/coreTokens-r70qX632.js  3.65 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/NavTabs-5iqAo-KA.js  4.25 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ResultsetTable-CWSG_01q.js  4.30 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Breadcrumbs-Dt3kDZEf.js  4.32 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Dialog-BNbJal_W.js  4.40 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ProgressBar-BhUxtCo8.js  4.53 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Checkbox-BUXokFnl.js  4.60 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-CQwMPdxT.js  4.64 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Accordion-Y-Za4lCg.js  4.64 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Button-B4c7ml19.js  4.70 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Switch-BVeqpgrD.js  4.88 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Heading.stories-CN-6Ep-B.js  5.05 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ToggleGroup-Bmwk-F8q.js  5.09 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Textarea-DYdJfWkz.js  5.47 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Paginator.stories-BuN4c2vT.js  5.57 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ContextualMenu-tYtwdzyA.js  5.65 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/StatusLight.stories-CXwXwtAQ.js  5.74 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Sidenav-Dk4YwtRG.js  5.93 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Flex.stories-CnBr5biE.js  5.99 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Alert-CJNklSIc.js  6.16 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ApplicationLayout-CP8WziuI.js  6.33 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/RadioGroup-BfAk5uea.js  6.33 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Table-DPKnYzlf.js  6.80 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Spinner-CC6f1eb8.js  6.95 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ProgressBar.stories-C9TMBqm7.js  6.96 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-B3ehnkiM.js  7.16 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/PasswordInput.stories-NS6qVxGN.js  7.26 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Box.stories-C9b7F4Rg.js  7.31 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Slider-iFJoVYjZ.js  7.37 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Breadcrumbs.stories-nMQ9-HUI.js  7.46 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-BAz7FMXc.js  7.62 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Wizard-BJxI4Jrh.js  7.72 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-sVLxC_Lr.js  8.07 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/BulletedList.stories-u5l1G2pP.js  8.13 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ApplicationLayout.stories-BNuMnhB2.js  8.49 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Dropdown-Cp91jy6G.js  8.61 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Header-BozxQZuV.js  8.67 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/NumberInput.stories-BSId3epZ.js  9.10 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ContextualMenu.stories-CFtt5NpQ.js  9.30 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/QuickNav-DK_bDKGf.js  9.56 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tabs-Dsao4aWC.js  9.66 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Switch.stories-BzMBXOBB.js  9.86 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Footer.stories-CWRJrdr-.js  10.19 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tag.stories-DBO1Wnyf.js  10.20 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Spinner.stories-Co2SEs0i.js  10.46 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/FileInput-gZe9sywf.js  10.95 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ToggleGroup.stories-BrWkI564.js  11.24 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Footer-C7edWLiE.js  11.37 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tabs.stories-B2T1Fpy5.js  11.56 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Card.stories-CxrOmLAZ.js  11.70 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Wizard.stories-IysEBSCt.js  11.73 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Inset.stories-BNQvO3Ny.js  11.86 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Slider.stories-AVaBBLMa.js  11.92 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Textarea.stories-CG-l9xKf.js  12.53 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Typography.stories-CB2IdIMD.js  12.89 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Header.stories-DbJaczKw.js  13.07 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Image.stories-BbP4KCLp.js  13.23 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Container.stories-CMeaFarc.js  13.38 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Chip.stories-CupSSW2v.js  13.64 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Grid.stories-3LrEhG2E.js  14.06 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Alert.stories-CWvvODXI.js  14.62 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/TextInput-D_0r0Vvx.js  14.76 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Tooltip.stories-DHPuM7wN.js  14.77 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Checkbox.stories-Brl68vrN.js  14.89 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/iframe-g_zcH2-B.js  16.22 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/RadioGroup.stories-DVtZ9V5E.js  16.54 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/ResultsetTable.stories-CXiFBqAh.js  16.64 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Badge.stories-BnxCxETi.js  17.20 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/DateInput.stories-D4absccA.js  17.33 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/NavTabs.stories-DOXkqhsm.js  17.48 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Accordion.stories-IqDTLRRn.js  17.66 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Select-BfFBqJvJ.js  18.13 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Sidenav.stories-BdBvXw5i.js  18.59 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Bleed.stories-DO2-YB2w.js  19.63 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Link.stories-CHYRhzF5.js  19.88 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-Bjw36ok-.js  20.71 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Dropdown.stories-Cwozx3Tt.js  23.41 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/DateInput-BQ2EFTeg.js  24.54 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/AccordionGroup.stories-BYozdlRZ.js  24.57 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/TextInput.stories-Bjci_Lhm.js  25.75 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Button.stories-BYq9xMPm.js  26.93 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/FileInput.stories-BZOjI3zA.js  28.83 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Table.stories-CEtLW2KB.js  31.69 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Divider.stories-B44RtZh3.js  33.53 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-BSSXWMQC.js  34.40 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/styled-components.browser.esm-DYBaGJgu.js  35.91 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Dialog.stories-CDXQ7Oiq.js  40.48 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/QuickNav.stories-1BEQ6ovV.js  43.87 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/Select.stories-CbCRcvRQ.js  43.92 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/HalstackContext-By_30tU8.js  81.23 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-TCUHuiZB.js 134.03 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/axe-tIjS_RJW.js 575.25 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/index-Po7X3BzN.js 577.80 kB -../../../../../AppData/Local/Temp/chromatic--25420-24RX1Fvg1xRn/assets/preview-Ck_dQuhL.js 580.61 kB -✓ built in 7.13s -info => Preview built (7.88 s) -info => Output directory: C:\Users\moren\AppData\Local\Temp\chromatic--25420-24RX1Fvg1xRn From 6696dfeba2e2e20f72b81d3f58cb605e9fb7da70 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 7 May 2024 16:26:02 +0200 Subject: [PATCH 30/31] Fixed spacing for tooltip snapshot --- lib/src/tooltip/Tooltip.stories.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index 915743b5c..7748e8684 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -16,9 +16,11 @@ const Tooltip = () => ( <> <Title title="Default tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcTooltip label="Tooltip Test"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> + <DxcInset bottom="3rem"> + <DxcTooltip label="Tooltip Test"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> </ExampleContainer> </> ); @@ -27,9 +29,11 @@ const LargeTextWithinTooltip = () => ( <> <Title title="Multiple line tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcTooltip label="Tooltip Test with a large text to display in the container while hovering the component"> - <DxcButton label="Hoverable button" /> - </DxcTooltip> + <DxcInset bottom="5rem"> + <DxcTooltip label="Tooltip Test with a large text to display in the container while hovering the component"> + <DxcButton label="Hoverable button" /> + </DxcTooltip> + </DxcInset> </ExampleContainer> </> ); From 26c5ca2c0f18ecf3a37fab0e724d116d5b7df882 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Tue, 7 May 2024 17:39:23 +0200 Subject: [PATCH 31/31] Changed margin of large text tooltip --- lib/src/tooltip/Tooltip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/tooltip/Tooltip.stories.tsx b/lib/src/tooltip/Tooltip.stories.tsx index 7748e8684..c859551dd 100644 --- a/lib/src/tooltip/Tooltip.stories.tsx +++ b/lib/src/tooltip/Tooltip.stories.tsx @@ -29,7 +29,7 @@ const LargeTextWithinTooltip = () => ( <> <Title title="Multiple line tooltip" theme="light" level={4} /> <ExampleContainer> - <DxcInset bottom="5rem"> + <DxcInset bottom="5rem" left="1rem"> <DxcTooltip label="Tooltip Test with a large text to display in the container while hovering the component"> <DxcButton label="Hoverable button" /> </DxcTooltip>