Skip to content

Commit 6e2cafb

Browse files
jsuarezgonzjsuarezgonz
authored
Merge pull request #1954 from dxc-technology/revert-1943-rarrojolopez/chip-fixes
Revert "Several fixes in the Chip"
2 parents f4dcdd7 + 4d17e77 commit 6e2cafb

File tree

5 files changed

+84
-154
lines changed

5 files changed

+84
-154
lines changed

‎lib/src/chip/Chip.accessibility.test.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -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
2828

2929
describe("Chip component accessibility tests", () => {
3030
it("Should not have basic accessibility issues", async () => {
31-
const { container } = render(
32-
<DxcChip margin="small" prefixIcon={iconSVG} onClickPrefix={() => {}} suffixIcon={iconSVG} label="Chip" />
33-
);
31+
const { container } = render(<DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" />);
3432
const results = await axe(container);
3533
expect(results).toHaveNoViolations();
3634
});
3735
it("Should not have basic accessibility issues for disabled mode", async () => {
3836
const { container } = render(
39-
<DxcChip
40-
margin="small"
41-
prefixIcon={iconSVG}
42-
onClickPrefix={() => {}}
43-
suffixIcon={iconSVG}
44-
label="Chip"
45-
disabled
46-
/>
37+
<DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" disabled />
4738
);
4839
const results = await axe(container);
4940
expect(results).toHaveNoViolations();

‎lib/src/chip/Chip.stories.tsx‎

Lines changed: 46 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@ 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
3333
</svg>
3434
);
3535

36+
const smallIconSVG = (
37+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
38+
<path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Zm0-2.021q1.938-1.729 3.188-2.948 1.25-1.219 1.989-2.125.74-.906 1.031-1.614.292-.709.292-1.396 0-1.229-.833-2.063Q14.833 4 13.604 4q-.729 0-1.364.302-.636.302-1.094.844L10.417 6h-.834l-.729-.854q-.458-.542-1.114-.844Q7.083 4 6.396 4q-1.229 0-2.063.833-.833.834-.833 2.063 0 .687.271 1.364.271.678.989 1.573.719.896 1.98 2.125Q8 13.188 10 14.979Zm0-5.5Z" />
39+
</svg>
40+
);
41+
3642
const opinionatedTheme = {
3743
chip: {
3844
baseColor: "#e6e6e6",
@@ -44,79 +50,33 @@ const opinionatedTheme = {
4450
export const Chromatic = () => (
4551
<>
4652
<ExampleContainer>
47-
<Title title="Default" theme="light" level={4} />
48-
<DxcChip label="Default" />
49-
</ExampleContainer>
50-
<ExampleContainer>
51-
<Title title="With prefix (SVG)" theme="light" level={4} />
52-
<DxcChip label="Prefix" prefixIcon={iconSVG} />
53+
<Title title="Basic chip" theme="light" level={4} />
54+
<DxcChip label="Default Chip" />
5355
</ExampleContainer>
5456
<ExampleContainer>
55-
<Title title="With action prefix (SVG)" theme="light" level={4} />
56-
<DxcChip label="Action prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} />
57+
<Title title="Chip with prefix SVG (small icon)" theme="light" level={4} />
58+
<DxcChip label="Chip with prefix" prefixIcon={smallIconSVG} />
5759
</ExampleContainer>
5860
<ExampleContainer>
59-
<Title title="Disabled action prefix (SVG)" theme="light" level={4} />
60-
<DxcChip label="Disabled action prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} disabled />
61+
<Title title="Chip with suffix SVG (large icon)" theme="light" level={4} />
62+
<DxcChip label="Chip with suffix" suffixIcon={iconSVG} />
6163
</ExampleContainer>
6264
<ExampleContainer>
63-
<Title title="With suffix (Material icon)" theme="light" level={4} />
64-
<DxcChip label="Suffix" suffixIcon="filled_check_circle" />
65-
</ExampleContainer>
66-
<ExampleContainer>
67-
<Title title="With action suffix (Material icon)" theme="light" level={4} />
68-
<DxcChip label="Action suffix" suffixIcon="filled_check_circle" onClickSuffix={() => {}} />
69-
</ExampleContainer>
70-
<ExampleContainer>
71-
<Title title="Action prefix and suffix" theme="light" level={4} />
72-
<DxcChip
73-
label="Action prefix and suffix"
74-
prefixIcon="filled_check_circle"
75-
onClickPrefix={() => {}}
76-
suffixIcon={iconSVG}
77-
/>
65+
<Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} />
66+
<DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
7867
</ExampleContainer>
7968
<ExampleContainer>
80-
<Title title="Prefix and action suffix" theme="light" level={4} />
81-
<DxcChip
82-
label="Prefix and action suffix"
83-
prefixIcon="filled_check_circle"
84-
suffixIcon={iconSVG}
85-
onClickSuffix={() => {}}
86-
/>
87-
</ExampleContainer>
88-
<ExampleContainer>
89-
<Title title="Disabled action suffix (Material icon)" theme="light" level={4} />
90-
<DxcChip label="Disabled action suffix" suffixIcon="filled_check_circle" onClickSuffix={() => {}} disabled />
91-
</ExampleContainer>
92-
<ExampleContainer>
93-
<Title title="Disabled action prefix and suffix" theme="light" level={4} />
94-
<DxcChip
95-
label="Disabled action prefix"
96-
disabled
97-
prefixIcon={iconSVG}
98-
onClickPrefix={() => {}}
99-
suffixIcon="filled_check_circle"
100-
/>
101-
</ExampleContainer>
102-
<ExampleContainer>
103-
<Title title="Prefix and disabled action suffix" theme="light" level={4} />
104-
<DxcChip
105-
label="Disabled action suffix"
106-
disabled
107-
prefixIcon={iconSVG}
108-
suffixIcon="filled_check_circle"
109-
onClickSuffix={() => {}}
110-
/>
69+
<Title title="Disabled chip" theme="light" level={4} />
70+
<DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
11171
</ExampleContainer>
11272
<ExampleContainer>
113-
<Title title="With ellipsis" theme="light" level={4} />
73+
<Title title="Chip with ellipsis" theme="light" level={4} />
11474
<div style={{ width: "200px" }}>
11575
<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" />
11676
</div>
11777
</ExampleContainer>
11878
<ExampleContainer>
119-
<Title title="With ellipsis and suffix" theme="light" level={4} />
79+
<Title title="Chip with ellipsis and suffix" theme="light" level={4} />
12080
<div style={{ width: "200px" }}>
12181
<DxcChip
12282
suffixIcon={iconSVG}
@@ -125,7 +85,7 @@ export const Chromatic = () => (
12585
</div>
12686
</ExampleContainer>
12787
<ExampleContainer>
128-
<Title title="With ellipsis and prefix" theme="light" level={4} />
88+
<Title title="Chip with ellipsis and prefix" theme="light" level={4} />
12989
<div style={{ width: "200px" }}>
13090
<DxcChip
13191
prefixIcon={iconSVG}
@@ -134,11 +94,10 @@ export const Chromatic = () => (
13494
</div>
13595
</ExampleContainer>
13696
<ExampleContainer>
137-
<Title title="With ellipsis, action prefix and suffix" theme="light" level={4} />
97+
<Title title="Chip with ellipsis, suffix and prefix" theme="light" level={4} />
13898
<div style={{ width: "200px" }}>
13999
<DxcChip
140100
prefixIcon={iconSVG}
141-
onClickPrefix={() => {}}
142101
suffixIcon={iconSVG}
143102
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"
144103
/>
@@ -175,48 +134,57 @@ export const Chromatic = () => (
175134
</ExampleContainer>
176135
<Title title="Opinionated theme" theme="light" level={2} />
177136
<ExampleContainer>
178-
<Title title="With prefix and suffix" theme="light" level={4} />
137+
<Title title="Chip with prefix and suffix" theme="light" level={4} />
179138
<HalstackProvider theme={opinionatedTheme}>
180-
<DxcChip label="Chip" prefixIcon={iconSVG} onClickPrefix={() => {}} suffixIcon="filled_check_circle" />
139+
<DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
181140
</HalstackProvider>
182141
</ExampleContainer>
183142
<ExampleContainer>
184-
<Title title="With prefix and suffix" theme="light" level={4} />
143+
<Title title="Chip with prefix and suffix" theme="light" level={4} />
185144
<HalstackProvider theme={opinionatedTheme}>
186-
<DxcChip
187-
label="Disabled"
188-
disabled
189-
prefixIcon={iconSVG}
190-
suffixIcon="filled_check_circle"
191-
onClickSuffix={() => {}}
192-
/>
145+
<DxcChip label="Chip" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
193146
</HalstackProvider>
194147
</ExampleContainer>
195148
<ExampleContainer pseudoState="pseudo-hover">
196149
<Title title="Hovered" theme="light" level={4} />
197150
<HalstackProvider theme={opinionatedTheme}>
198-
<DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon={iconSVG} onClickPrefix={() => {}} />
151+
<DxcChip
152+
label="Chip"
153+
prefixIcon={iconSVG}
154+
suffixIcon={iconSVG}
155+
onClickPrefix={() => {}}
156+
onClickSuffix={() => {}}
157+
/>
199158
</HalstackProvider>
200159
</ExampleContainer>
201160
<ExampleContainer pseudoState="pseudo-active">
202161
<Title title="Actived" theme="light" level={4} />
203162
<HalstackProvider theme={opinionatedTheme}>
204-
<DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon={iconSVG} onClickPrefix={() => {}} />
163+
<DxcChip
164+
label="Chip"
165+
prefixIcon={iconSVG}
166+
suffixIcon={iconSVG}
167+
onClickPrefix={() => {}}
168+
onClickSuffix={() => {}}
169+
/>
205170
</HalstackProvider>
206171
</ExampleContainer>
207172
</>
208173
);
209-
210174
const ChipPrefixFocused = () => (
211175
<ExampleContainer>
212-
<Title title="With prefix" theme="light" level={4} />
213-
<DxcChip label="Prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} />
176+
<Title title="Chip with prefix" theme="light" level={4} />
177+
<DxcChip
178+
label="Chip with prefix"
179+
prefixIcon={iconSVG}
180+
onClickPrefix={() => {}}
181+
/>
214182
</ExampleContainer>
215183
);
216184
const ChipSuffixFocused = () => (
217185
<ExampleContainer>
218-
<Title title="With suffix" theme="light" level={4} />
219-
<DxcChip label="Suffix" suffixIcon="filled_delete" onClickSuffix={() => {}} />
186+
<Title title="Chip with suffix" theme="light" level={4} />
187+
<DxcChip label="Chip with suffix" suffixIcon="filled_delete" onClickSuffix={() => {}} />
220188
</ExampleContainer>
221189
);
222190

‎lib/src/chip/Chip.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,28 +20,28 @@ const DxcChip = ({
2020

2121
return (
2222
<ThemeProvider theme={colorsTheme.chip}>
23-
<Chip margin={margin}>
23+
<Chip disabled={disabled} margin={margin}>
2424
{prefixIcon && (
2525
<IconContainer
2626
role={typeof onClickPrefix === "function" ? "button" : undefined}
2727
aria-label={typeof onClickPrefix === "function" ? "Prefix Action" : undefined}
2828
disabled={disabled}
2929
interactuable={typeof onClickPrefix === "function" && !disabled}
3030
tabIndex={typeof onClickPrefix === "function" && !disabled ? tabIndex : -1}
31-
onClick={onClickPrefix}
31+
onClick={() => onClickPrefix && !disabled && onClickPrefix()}
3232
>
3333
{typeof prefixIcon === "string" ? <DxcIcon icon={prefixIcon} /> : prefixIcon}
3434
</IconContainer>
3535
)}
36-
{label && <LabelContainer>{label}</LabelContainer>}
36+
{label && <LabelContainer disabled={disabled}>{label}</LabelContainer>}
3737
{suffixIcon && (
3838
<IconContainer
3939
role={typeof onClickSuffix === "function" ? "button" : undefined}
4040
aria-label={typeof onClickSuffix === "function" ? "Suffix Action" : undefined}
4141
disabled={disabled}
4242
interactuable={typeof onClickSuffix === "function" && !disabled}
4343
tabIndex={typeof onClickSuffix === "function" && !disabled ? tabIndex : -1}
44-
onClick={onClickSuffix}
44+
onClick={() => !disabled && onClickSuffix?.()}
4545
>
4646
{typeof suffixIcon === "string" ? <DxcIcon icon={suffixIcon} /> : suffixIcon}
4747
</IconContainer>
@@ -54,14 +54,15 @@ const DxcChip = ({
5454
const calculateWidth = (margin: ChipPropsType["margin"]) =>
5555
`calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
5656

57-
const Chip = styled.div<{ margin: ChipPropsType["margin"] }>`
57+
const Chip = styled.div<{ margin: ChipPropsType["margin"]; disabled: ChipPropsType["disabled"] }>`
5858
box-sizing: border-box;
5959
display: inline-flex;
6060
align-items: center;
6161
gap: ${(props) => props.theme.iconSpacing};
6262
min-height: 40px;
6363
max-width: ${(props) => calculateWidth(props.margin)};
64-
background-color: ${(props) => props.theme.backgroundColor};
64+
background-color: ${(props) =>
65+
(props.disabled && props.theme.disabledBackgroundColor) || props.theme.backgroundColor};
6566
border-radius: ${(props) => props.theme.borderRadius};
6667
border-width: ${(props) => props.theme.borderThickness};
6768
border-style: ${(props) => props.theme.borderStyle};
@@ -80,30 +81,29 @@ const Chip = styled.div<{ margin: ChipPropsType["margin"] }>`
8081
props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
8182
margin-left: ${(props) =>
8283
props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
84+
cursor: ${({ disabled }) => disabled && "not-allowed"};
8385
`;
8486

85-
const LabelContainer = styled.span`
87+
const LabelContainer = styled.span<{ disabled: ChipPropsType["disabled"] }>`
8688
font-size: ${(props) => props.theme.fontSize};
8789
font-family: ${(props) => props.theme.fontFamily};
8890
font-weight: ${(props) => props.theme.fontWeight};
8991
font-style: ${(props) => props.theme.fontStyle};
90-
color: ${(props) => props.theme.fontColor};
92+
color: ${(props) => (props.disabled ? props.theme.disabledFontColor : props.theme.fontColor)};
9193
text-overflow: ellipsis;
9294
white-space: nowrap;
9395
overflow: hidden;
9496
`;
9597

9698
const IconContainer = styled.div<{
9799
disabled: ChipPropsType["disabled"];
98-
onClick?: ChipPropsType["onClickPrefix"];
99100
interactuable: boolean;
100101
}>`
101102
display: flex;
102103
border-radius: 0.25rem;
103-
color: ${(props) =>
104-
props.disabled && (props.onClick || props.onClick) ? props.theme.disabledIconColor : props.theme.iconColor};
105-
cursor: ${(props) =>
106-
props.disabled && (props.onClick || props.onClick) ? "not-allowed" : props.interactuable ? "pointer" : ""};
104+
color: ${(props) => (props.disabled ? props.theme.disabledIconColor : props.theme.iconColor)};
105+
${({ interactuable }) => interactuable && "cursor: pointer;"}
106+
107107
${(props) =>
108108
props.interactuable &&
109109
`

0 commit comments

Comments
 (0)