From b205a69371741d3df02bb8290e079eb1a8991b75 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Wed, 10 Apr 2024 11:40:49 +0200 Subject: [PATCH 01/13] Action fixes in the Chip --- lib/src/chip/Chip.stories.tsx | 101 ++++++++++++++++++---------------- lib/src/chip/Chip.tsx | 33 ++++++----- lib/src/chip/types.ts | 71 +++++++++++++++++------- lib/src/common/variables.ts | 1 - 4 files changed, 125 insertions(+), 81 deletions(-) diff --git a/lib/src/chip/Chip.stories.tsx b/lib/src/chip/Chip.stories.tsx index b7d99141c..6584bb022 100644 --- a/lib/src/chip/Chip.stories.tsx +++ b/lib/src/chip/Chip.stories.tsx @@ -33,12 +33,6 @@ c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.11 ); -const smallIconSVG = ( - - - -); - const opinionatedTheme = { chip: { baseColor: "#e6e6e6", @@ -50,33 +44,56 @@ const opinionatedTheme = { export const Chromatic = () => ( <> - - <DxcChip label="Default Chip" /> + <Title title="With prefix (SVG)" theme="light" level={4} /> + <DxcChip label="Prefix" prefixIcon={iconSVG} /> + </ExampleContainer> + <ExampleContainer> + <Title title="With action prefix (SVG)" theme="light" level={4} /> + <DxcChip label="Action prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} /> + </ExampleContainer> + <ExampleContainer> + <Title title="Disabled action prefix (SVG)" theme="light" level={4} /> + <DxcChip label="Disabled action prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} disabled /> </ExampleContainer> <ExampleContainer> - <Title title="Chip with prefix SVG (small icon)" theme="light" level={4} /> - <DxcChip label="Chip with prefix" prefixIcon={smallIconSVG} /> + <Title title="With suffix (Material icon)" theme="light" level={4} /> + <DxcChip label="Suffix" suffixIcon="filled_check_circle" /> </ExampleContainer> <ExampleContainer> - <Title title="Chip with suffix SVG (large icon)" theme="light" level={4} /> - <DxcChip label="Chip with suffix" suffixIcon={iconSVG} /> + <Title title="With action suffix (Material icon)" theme="light" level={4} /> + <DxcChip label="Action suffix" suffixIcon="filled_check_circle" onClickSuffix={() => {}} /> </ExampleContainer> <ExampleContainer> - <Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} /> - <DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon="filled_check_circle" /> + <Title title="Action prefix and suffix" theme="light" level={4} /> + <DxcChip + label="Action prefix and suffix" + prefixIcon="filled_check_circle" + onClickPrefix={() => {}} + suffixIcon={iconSVG} + /> </ExampleContainer> <ExampleContainer> - <Title title="Disabled chip" theme="light" level={4} /> - <DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" /> + <Title title="Disabled action suffix (Material icon)" theme="light" level={4} /> + <DxcChip label="Disabled action suffix" suffixIcon="filled_check_circle" onClickSuffix={() => {}} disabled /> </ExampleContainer> <ExampleContainer> - <Title title="Chip with ellipsis" theme="light" level={4} /> + <Title title="Disabled action prefix and suffix" theme="light" level={4} /> + <DxcChip + label="Disabled" + disabled + prefixIcon={iconSVG} + onClickPrefix={() => {}} + suffixIcon="filled_check_circle" + /> + </ExampleContainer> + <ExampleContainer> + <Title title="With ellipsis" theme="light" level={4} /> <div style={{ width: "200px" }}> <DxcChip label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasd fg ssssssssssss ssss" /> </div> </ExampleContainer> <ExampleContainer> - <Title title="Chip with ellipsis and suffix" theme="light" level={4} /> + <Title title="With ellipsis and suffix" theme="light" level={4} /> <div style={{ width: "200px" }}> <DxcChip suffixIcon={iconSVG} @@ -85,7 +102,7 @@ export const Chromatic = () => ( </div> </ExampleContainer> <ExampleContainer> - <Title title="Chip with ellipsis and prefix" theme="light" level={4} /> + <Title title="With ellipsis and prefix" theme="light" level={4} /> <div style={{ width: "200px" }}> <DxcChip prefixIcon={iconSVG} @@ -94,10 +111,11 @@ export const Chromatic = () => ( </div> </ExampleContainer> <ExampleContainer> - <Title title="Chip with ellipsis, suffix and prefix" theme="light" level={4} /> + <Title title="With ellipsis, action prefix and suffix" theme="light" level={4} /> <div style={{ width: "200px" }}> <DxcChip prefixIcon={iconSVG} + onClickPrefix={() => {}} suffixIcon={iconSVG} label="With ellipsis asdfasdf asdf asdfasdf asdf asdfasdf asdfasdf asdf asdf adfasrfasf afsdg afgasfg asdf asdf asdf asdf asdf asdf asdf afdg asfg asdfg asdf asdf asdf asdfasdf asd fas df asd asdf asdf asdfasdf" /> @@ -134,57 +152,48 @@ export const Chromatic = () => ( </ExampleContainer> <Title title="Opinionated theme" theme="light" level={2} /> <ExampleContainer> - <Title title="Chip with prefix and suffix" theme="light" level={4} /> + <Title title="With prefix and suffix" theme="light" level={4} /> <HalstackProvider theme={opinionatedTheme}> - <DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon="filled_check_circle" /> + <DxcChip label="Chip" prefixIcon={iconSVG} onClickPrefix={() => {}} suffixIcon="filled_check_circle" /> </HalstackProvider> </ExampleContainer> <ExampleContainer> - <Title title="Chip with prefix and suffix" theme="light" level={4} /> + <Title title="With prefix and suffix" theme="light" level={4} /> <HalstackProvider theme={opinionatedTheme}> - <DxcChip label="Chip" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" /> + <DxcChip + label="Disabled" + disabled + prefixIcon={iconSVG} + suffixIcon="filled_check_circle" + onClickSuffix={() => {}} + /> </HalstackProvider> </ExampleContainer> <ExampleContainer pseudoState="pseudo-hover"> <Title title="Hovered" theme="light" level={4} /> <HalstackProvider theme={opinionatedTheme}> - <DxcChip - label="Chip" - prefixIcon={iconSVG} - suffixIcon={iconSVG} - onClickPrefix={() => {}} - onClickSuffix={() => {}} - /> + <DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon={iconSVG} onClickPrefix={() => {}} /> </HalstackProvider> </ExampleContainer> <ExampleContainer pseudoState="pseudo-active"> <Title title="Actived" theme="light" level={4} /> <HalstackProvider theme={opinionatedTheme}> - <DxcChip - label="Chip" - prefixIcon={iconSVG} - suffixIcon={iconSVG} - onClickPrefix={() => {}} - onClickSuffix={() => {}} - /> + <DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon={iconSVG} onClickPrefix={() => {}} /> </HalstackProvider> </ExampleContainer> </> ); + const ChipPrefixFocused = () => ( <ExampleContainer> - <Title title="Chip with prefix" theme="light" level={4} /> - <DxcChip - label="Chip with prefix" - prefixIcon={iconSVG} - onClickPrefix={() => {}} - /> + <Title title="With prefix" theme="light" level={4} /> + <DxcChip label="Prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} /> </ExampleContainer> ); const ChipSuffixFocused = () => ( <ExampleContainer> - <Title title="Chip with suffix" theme="light" level={4} /> - <DxcChip label="Chip with suffix" suffixIcon="filled_delete" onClickSuffix={() => {}} /> + <Title title="With suffix" theme="light" level={4} /> + <DxcChip label="Suffix" suffixIcon="filled_delete" onClickSuffix={() => {}} /> </ExampleContainer> ); diff --git a/lib/src/chip/Chip.tsx b/lib/src/chip/Chip.tsx index 7d3ef522d..24cfa6406 100644 --- a/lib/src/chip/Chip.tsx +++ b/lib/src/chip/Chip.tsx @@ -20,7 +20,7 @@ const DxcChip = ({ return ( <ThemeProvider theme={colorsTheme.chip}> - <Chip disabled={disabled} margin={margin}> + <Chip margin={margin}> {prefixIcon && ( <IconContainer role={typeof onClickPrefix === "function" ? "button" : undefined} @@ -28,12 +28,12 @@ const DxcChip = ({ disabled={disabled} interactuable={typeof onClickPrefix === "function" && !disabled} tabIndex={typeof onClickPrefix === "function" && !disabled ? tabIndex : -1} - onClick={() => onClickPrefix && !disabled && onClickPrefix()} + onClickPrefix={onClickPrefix} > {typeof prefixIcon === "string" ? <DxcIcon icon={prefixIcon} /> : prefixIcon} </IconContainer> )} - {label && <LabelContainer disabled={disabled}>{label}</LabelContainer>} + {label && <LabelContainer>{label}</LabelContainer>} {suffixIcon && ( <IconContainer role={typeof onClickSuffix === "function" ? "button" : undefined} @@ -41,7 +41,7 @@ const DxcChip = ({ disabled={disabled} interactuable={typeof onClickSuffix === "function" && !disabled} tabIndex={typeof onClickSuffix === "function" && !disabled ? tabIndex : -1} - onClick={() => !disabled && onClickSuffix?.()} + onClickSuffix={onClickSuffix} > {typeof suffixIcon === "string" ? <DxcIcon icon={suffixIcon} /> : suffixIcon} </IconContainer> @@ -54,15 +54,14 @@ const DxcChip = ({ const calculateWidth = (margin: ChipPropsType["margin"]) => `calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`; -const Chip = styled.div<{ margin: ChipPropsType["margin"]; disabled: ChipPropsType["disabled"] }>` +const Chip = styled.div<{ margin: ChipPropsType["margin"] }>` box-sizing: border-box; display: inline-flex; align-items: center; gap: ${(props) => props.theme.iconSpacing}; min-height: 40px; max-width: ${(props) => calculateWidth(props.margin)}; - background-color: ${(props) => - (props.disabled && props.theme.disabledBackgroundColor) || props.theme.backgroundColor}; + background-color: ${(props) => props.theme.backgroundColor}; border-radius: ${(props) => props.theme.borderRadius}; border-width: ${(props) => props.theme.borderThickness}; border-style: ${(props) => props.theme.borderStyle}; @@ -81,15 +80,14 @@ const Chip = styled.div<{ margin: ChipPropsType["margin"]; disabled: ChipPropsTy props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""}; margin-left: ${(props) => props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""}; - cursor: ${({ disabled }) => disabled && "not-allowed"}; `; -const LabelContainer = styled.span<{ disabled: ChipPropsType["disabled"] }>` +const LabelContainer = styled.span` font-size: ${(props) => props.theme.fontSize}; font-family: ${(props) => props.theme.fontFamily}; font-weight: ${(props) => props.theme.fontWeight}; font-style: ${(props) => props.theme.fontStyle}; - color: ${(props) => (props.disabled ? props.theme.disabledFontColor : props.theme.fontColor)}; + color: ${(props) => props.theme.fontColor}; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; @@ -97,13 +95,22 @@ const LabelContainer = styled.span<{ disabled: ChipPropsType["disabled"] }>` const IconContainer = styled.div<{ disabled: ChipPropsType["disabled"]; + onClickPrefix?: ChipPropsType["onClickPrefix"]; + onClickSuffix?: ChipPropsType["onClickSuffix"]; interactuable: boolean; }>` display: flex; border-radius: 0.25rem; - color: ${(props) => (props.disabled ? props.theme.disabledIconColor : props.theme.iconColor)}; - ${({ interactuable }) => interactuable && "cursor: pointer;"} - + color: ${(props) => + props.disabled && (props.onClickPrefix || props.onClickSuffix) + ? props.theme.disabledIconColor + : props.theme.iconColor}; + cursor: ${(props) => + props.disabled && (props.onClickPrefix || props.onClickSuffix) + ? "not-allowed" + : props.interactuable + ? "pointer" + : ""}; ${(props) => props.interactuable && ` diff --git a/lib/src/chip/types.ts b/lib/src/chip/types.ts index f79af26ca..4a7d05a56 100644 --- a/lib/src/chip/types.ts +++ b/lib/src/chip/types.ts @@ -8,31 +8,60 @@ type Margin = { type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>; +type Icon = string | SVG; + +type PrefixIconProps = + | { + /** + * Element or path used as icon to be placed before the chip label. + */ + prefixIcon: Icon; + /** + * This function will be called when the prefix is clicked. + */ + onClickPrefix: () => void; + /** + * Element or path used as icon to be placed after the chip label. + */ + suffixIcon?: Icon; + /** + * This function will be called when the suffix is clicked. + */ + onClickSuffix?: never; + /** + * If true, the action icon will be disabled. + */ + disabled?: boolean; + } + | { + prefixIcon?: Icon; + onClickPrefix?: never; + suffixIcon?: never; + onClickSuffix?: () => void; + disabled?: never; + }; + +type SuffixIconProps = + | { + suffixIcon: Icon; + onClickSuffix: () => void; + prefixIcon?: Icon; + onClickPrefix?: never; + disabled?: boolean; + } + | { + suffixIcon?: Icon; + onClickSuffix?: never; + prefixIcon?: never; + onClickPrefix?: () => void; + disabled?: never; + }; + type Props = { /** * Text to be placed on the chip. */ label?: string; - /** - * Element or path used as icon to be placed after the chip label. - */ - suffixIcon?: string | SVG; - /** - * Element or path used as icon to be placed before the chip label. - */ - prefixIcon?: string | SVG; - /** - * This function will be called when the suffix is clicked. - */ - onClickSuffix?: () => void; - /** - * This function will be called when the prefix is clicked. - */ - onClickPrefix?: () => void; - /** - * If true, the component will be disabled. - */ - disabled?: boolean; /** * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes. @@ -42,6 +71,6 @@ type Props = { * Value of the tabindex attribute. */ tabIndex?: number; -}; +} & (PrefixIconProps | SuffixIconProps); export default Props; diff --git a/lib/src/common/variables.ts b/lib/src/common/variables.ts index fd745a7d3..53f32bbad 100644 --- a/lib/src/common/variables.ts +++ b/lib/src/common/variables.ts @@ -193,7 +193,6 @@ export const componentTokens = { }, chip: { backgroundColor: CoreTokens.color_grey_200, - disabledBackgroundColor: CoreTokens.color_grey_100, fontFamily: CoreTokens.type_sans, fontSize: CoreTokens.type_scale_03, fontStyle: CoreTokens.type_normal, From 7d605b4bac9a0b6cdae6df7424b6bf0fd2a9898d Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Wed, 10 Apr 2024 13:01:42 +0200 Subject: [PATCH 02/13] Small change onClick --- lib/src/chip/Chip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/chip/Chip.tsx b/lib/src/chip/Chip.tsx index 24cfa6406..fa566165e 100644 --- a/lib/src/chip/Chip.tsx +++ b/lib/src/chip/Chip.tsx @@ -28,7 +28,7 @@ const DxcChip = ({ disabled={disabled} interactuable={typeof onClickPrefix === "function" && !disabled} tabIndex={typeof onClickPrefix === "function" && !disabled ? tabIndex : -1} - onClickPrefix={onClickPrefix} + onClick={onClickPrefix} > {typeof prefixIcon === "string" ? <DxcIcon icon={prefixIcon} /> : prefixIcon} </IconContainer> @@ -41,7 +41,7 @@ const DxcChip = ({ disabled={disabled} interactuable={typeof onClickSuffix === "function" && !disabled} tabIndex={typeof onClickSuffix === "function" && !disabled ? tabIndex : -1} - onClickSuffix={onClickSuffix} + onClick={onClickSuffix} > {typeof suffixIcon === "string" ? <DxcIcon icon={suffixIcon} /> : suffixIcon} </IconContainer> From 0e4f252a854d2cbbe1483c0697275806757fd401 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Wed, 10 Apr 2024 15:13:15 +0200 Subject: [PATCH 03/13] Small fix onClick --- lib/src/chip/Chip.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/lib/src/chip/Chip.tsx b/lib/src/chip/Chip.tsx index fa566165e..22a4dd8ae 100644 --- a/lib/src/chip/Chip.tsx +++ b/lib/src/chip/Chip.tsx @@ -95,22 +95,15 @@ const LabelContainer = styled.span` const IconContainer = styled.div<{ disabled: ChipPropsType["disabled"]; - onClickPrefix?: ChipPropsType["onClickPrefix"]; - onClickSuffix?: ChipPropsType["onClickSuffix"]; + onClick?: ChipPropsType["onClickPrefix"]; interactuable: boolean; }>` display: flex; border-radius: 0.25rem; color: ${(props) => - props.disabled && (props.onClickPrefix || props.onClickSuffix) - ? props.theme.disabledIconColor - : props.theme.iconColor}; + props.disabled && (props.onClick || props.onClick) ? props.theme.disabledIconColor : props.theme.iconColor}; cursor: ${(props) => - props.disabled && (props.onClickPrefix || props.onClickSuffix) - ? "not-allowed" - : props.interactuable - ? "pointer" - : ""}; + props.disabled && (props.onClick || props.onClick) ? "not-allowed" : props.interactuable ? "pointer" : ""}; ${(props) => props.interactuable && ` From 6c0a79259baad0c0f01bb088240376cd312c5164 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Wed, 10 Apr 2024 17:22:13 +0200 Subject: [PATCH 04/13] Remove unnecessary token --- lib/src/common/variables.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/common/variables.ts b/lib/src/common/variables.ts index 53f32bbad..c28e34dd7 100644 --- a/lib/src/common/variables.ts +++ b/lib/src/common/variables.ts @@ -198,7 +198,6 @@ export const componentTokens = { fontStyle: CoreTokens.type_normal, fontWeight: CoreTokens.type_regular, fontColor: CoreTokens.color_black, - disabledFontColor: CoreTokens.color_grey_500, borderColor: CoreTokens.color_transparent, borderRadius: "80px", borderThickness: CoreTokens.border_width_0, From 5537d13bb5a4769817d2de343f6ab7fd04647412 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Thu, 11 Apr 2024 16:15:28 +0200 Subject: [PATCH 05/13] Several fixes based on feedback --- lib/src/chip/Chip.stories.tsx | 13 +++++++++++++ lib/src/chip/types.ts | 4 +++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/lib/src/chip/Chip.stories.tsx b/lib/src/chip/Chip.stories.tsx index 6584bb022..68a196531 100644 --- a/lib/src/chip/Chip.stories.tsx +++ b/lib/src/chip/Chip.stories.tsx @@ -43,6 +43,10 @@ const opinionatedTheme = { export const Chromatic = () => ( <> + <ExampleContainer> + <Title title="Default" theme="light" level={4} /> + <DxcChip label="Default" /> + </ExampleContainer> <ExampleContainer> <Title title="With prefix (SVG)" theme="light" level={4} /> <DxcChip label="Prefix" prefixIcon={iconSVG} /> @@ -72,6 +76,15 @@ export const Chromatic = () => ( suffixIcon={iconSVG} /> </ExampleContainer> + <ExampleContainer> + <Title title="Prefix and action suffix" theme="light" level={4} /> + <DxcChip + label="Prefix and action suffix" + prefixIcon="filled_check_circle" + suffixIcon={iconSVG} + onClickSuffix={() => {}} + /> + </ExampleContainer> <ExampleContainer> <Title title="Disabled action suffix (Material icon)" theme="light" level={4} /> <DxcChip label="Disabled action suffix" suffixIcon="filled_check_circle" onClickSuffix={() => {}} disabled /> diff --git a/lib/src/chip/types.ts b/lib/src/chip/types.ts index 4a7d05a56..5d5e25897 100644 --- a/lib/src/chip/types.ts +++ b/lib/src/chip/types.ts @@ -57,7 +57,7 @@ type SuffixIconProps = disabled?: never; }; -type Props = { +type CommonProps = { /** * Text to be placed on the chip. */ @@ -73,4 +73,6 @@ type Props = { tabIndex?: number; } & (PrefixIconProps | SuffixIconProps); +type Props = (PrefixIconProps | SuffixIconProps) & CommonProps; + export default Props; From 56aca736d87ac2d1f9f43800c85d8c4abd5eadff Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Thu, 11 Apr 2024 16:21:03 +0200 Subject: [PATCH 06/13] Fix accessibility test --- lib/src/chip/Chip.accessibility.test.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/lib/src/chip/Chip.accessibility.test.js b/lib/src/chip/Chip.accessibility.test.js index cce58b591..e81a90134 100644 --- a/lib/src/chip/Chip.accessibility.test.js +++ b/lib/src/chip/Chip.accessibility.test.js @@ -28,13 +28,22 @@ c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.11 describe("Chip component accessibility tests", () => { it("Should not have basic accessibility issues", async () => { - const { container } = render(<DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" />); + const { container } = render( + <DxcChip margin="small" prefixIcon={iconSVG} onClickPrefix={() => {}} suffixIcon={iconSVG} label="Chip" /> + ); const results = await axe(container); expect(results).toHaveNoViolations(); }); it("Should not have basic accessibility issues for disabled mode", async () => { const { container } = render( - <DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" disabled /> + <DxcChip + margin="small" + prefixIcon={iconSVG} + onClickPrefix={() => {}} + suffixIcon={iconSVG} + label="Chip" + disabled + /> ); const results = await axe(container); expect(results).toHaveNoViolations(); From ae77e2b1ec8f2c0ff94cc9a6afa5bf5a7e977965 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Thu, 11 Apr 2024 16:28:55 +0200 Subject: [PATCH 07/13] Resolve conflicts --- lib/src/chip/Chip.accessibility.test.js | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/lib/src/chip/Chip.accessibility.test.js b/lib/src/chip/Chip.accessibility.test.js index e81a90134..cce58b591 100644 --- a/lib/src/chip/Chip.accessibility.test.js +++ b/lib/src/chip/Chip.accessibility.test.js @@ -28,22 +28,13 @@ c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.11 describe("Chip component accessibility tests", () => { it("Should not have basic accessibility issues", async () => { - const { container } = render( - <DxcChip margin="small" prefixIcon={iconSVG} onClickPrefix={() => {}} suffixIcon={iconSVG} label="Chip" /> - ); + const { container } = render(<DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" />); const results = await axe(container); expect(results).toHaveNoViolations(); }); it("Should not have basic accessibility issues for disabled mode", async () => { const { container } = render( - <DxcChip - margin="small" - prefixIcon={iconSVG} - onClickPrefix={() => {}} - suffixIcon={iconSVG} - label="Chip" - disabled - /> + <DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" disabled /> ); const results = await axe(container); expect(results).toHaveNoViolations(); From 8488db3d91007f30d10ee9c5070cc6720d2f6752 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Thu, 11 Apr 2024 16:36:15 +0200 Subject: [PATCH 08/13] Fixed accessibility test --- lib/src/chip/Chip.accessibility.test.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/lib/src/chip/Chip.accessibility.test.tsx b/lib/src/chip/Chip.accessibility.test.tsx index 6baff07fa..cc5076941 100644 --- a/lib/src/chip/Chip.accessibility.test.tsx +++ b/lib/src/chip/Chip.accessibility.test.tsx @@ -28,13 +28,22 @@ c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.11 describe("Chip component accessibility tests", () => { it("Should not have basic accessibility issues", async () => { - const { container } = render(<DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" />); + const { container } = render( + <DxcChip margin="small" prefixIcon={iconSVG} onClickPrefix={() => {}} suffixIcon={iconSVG} label="Chip" /> + ); const results = await axe(container); expect(results).toHaveNoViolations(); }); it("Should not have basic accessibility issues for disabled mode", async () => { const { container } = render( - <DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" disabled /> + <DxcChip + margin="small" + prefixIcon={iconSVG} + onClickPrefix={() => {}} + suffixIcon={iconSVG} + label="Chip" + disabled + /> ); const results = await axe(container); expect(results).toHaveNoViolations(); From 7cd417675a385e7e8ee5cc6aff6725faeb9b5ed5 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Mon, 15 Apr 2024 15:28:13 +0200 Subject: [PATCH 09/13] Fix Chip types --- lib/src/chip/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/chip/types.ts b/lib/src/chip/types.ts index 5d5e25897..2b6444e51 100644 --- a/lib/src/chip/types.ts +++ b/lib/src/chip/types.ts @@ -37,7 +37,7 @@ type PrefixIconProps = prefixIcon?: Icon; onClickPrefix?: never; suffixIcon?: never; - onClickSuffix?: () => void; + onClickSuffix?: never; disabled?: never; }; @@ -53,7 +53,7 @@ type SuffixIconProps = suffixIcon?: Icon; onClickSuffix?: never; prefixIcon?: never; - onClickPrefix?: () => void; + onClickPrefix?: never; disabled?: never; }; From 7bb23239c26d558dac348f571816d6b37d82b12a Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Mon, 15 Apr 2024 16:02:44 +0200 Subject: [PATCH 10/13] Fixes Chip based on feedback --- lib/src/chip/Chip.stories.tsx | 10 ++++++++++ lib/src/chip/types.ts | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/lib/src/chip/Chip.stories.tsx b/lib/src/chip/Chip.stories.tsx index 68a196531..55f713e15 100644 --- a/lib/src/chip/Chip.stories.tsx +++ b/lib/src/chip/Chip.stories.tsx @@ -99,6 +99,16 @@ export const Chromatic = () => ( suffixIcon="filled_check_circle" /> </ExampleContainer> + <ExampleContainer> + <Title title="Prefix and disabled action suffix" theme="light" level={4} /> + <DxcChip + label="Disabled action suffix" + disabled + prefixIcon={iconSVG} + suffixIcon="filled_check_circle" + onClickSuffix={() => {}} + /> + </ExampleContainer> <ExampleContainer> <Title title="With ellipsis" theme="light" level={4} /> <div style={{ width: "200px" }}> diff --git a/lib/src/chip/types.ts b/lib/src/chip/types.ts index 2b6444e51..cd9c3cb18 100644 --- a/lib/src/chip/types.ts +++ b/lib/src/chip/types.ts @@ -71,7 +71,7 @@ type CommonProps = { * Value of the tabindex attribute. */ tabIndex?: number; -} & (PrefixIconProps | SuffixIconProps); +}; type Props = (PrefixIconProps | SuffixIconProps) & CommonProps; From b02da8aad929aa9c1ce9a1927a1cd8688c512911 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Mon, 15 Apr 2024 16:04:08 +0200 Subject: [PATCH 11/13] Small change --- lib/src/chip/Chip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/chip/Chip.stories.tsx b/lib/src/chip/Chip.stories.tsx index 55f713e15..a228aa226 100644 --- a/lib/src/chip/Chip.stories.tsx +++ b/lib/src/chip/Chip.stories.tsx @@ -92,7 +92,7 @@ export const Chromatic = () => ( <ExampleContainer> <Title title="Disabled action prefix and suffix" theme="light" level={4} /> <DxcChip - label="Disabled" + label="Disabled action prefix" disabled prefixIcon={iconSVG} onClickPrefix={() => {}} From 87c46833065675395b7d76f0035fe53caed8f544 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Mon, 15 Apr 2024 16:27:41 +0200 Subject: [PATCH 12/13] Small change to force Chromatic execution --- lib/src/chip/Chip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/chip/Chip.stories.tsx b/lib/src/chip/Chip.stories.tsx index a228aa226..d222121a4 100644 --- a/lib/src/chip/Chip.stories.tsx +++ b/lib/src/chip/Chip.stories.tsx @@ -103,10 +103,10 @@ export const Chromatic = () => ( <Title title="Prefix and disabled action suffix" theme="light" level={4} /> <DxcChip label="Disabled action suffix" - disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" onClickSuffix={() => {}} + disabled /> </ExampleContainer> <ExampleContainer> From 000c041383ba0bdb1f24fc21b9462187a1df4eb8 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez <rarrojolopez@dxc.com> Date: Mon, 15 Apr 2024 16:37:05 +0200 Subject: [PATCH 13/13] Small change to force Chromatic execution --- lib/src/chip/Chip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/chip/Chip.stories.tsx b/lib/src/chip/Chip.stories.tsx index d222121a4..a228aa226 100644 --- a/lib/src/chip/Chip.stories.tsx +++ b/lib/src/chip/Chip.stories.tsx @@ -103,10 +103,10 @@ export const Chromatic = () => ( <Title title="Prefix and disabled action suffix" theme="light" level={4} /> <DxcChip label="Disabled action suffix" + disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" onClickSuffix={() => {}} - disabled /> </ExampleContainer> <ExampleContainer>