Skip to content

Commit 293a019

Browse files
JialeclJialecl
authored
Merge pull request #1609 from dxc-technology/gomezivann/fix-chip
Chip spacing fix
2 parents 2492991 + d621b39 commit 293a019

File tree

7 files changed

+92
-89
lines changed

7 files changed

+92
-89
lines changed

‎lib/src/alert/Alert.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -274,10 +274,7 @@ const AlertCloseAction = styled.button`
274274
&:hover {
275275
background-color: ${(props) => props.theme.hoverActionBackgroundColor};
276276
}
277-
&:focus {
278-
outline: none;
279-
box-shadow: 0 0 0 2px ${(props) => props.theme.focusActionBorderColor};
280-
}
277+
&:focus,
281278
&:focus-visible {
282279
outline: none;
283280
box-shadow: 0 0 0 2px ${(props) => props.theme.focusActionBorderColor};

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

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -81,29 +81,37 @@ export const Chromatic = () => (
8181
</ExampleContainer>
8282
<ExampleContainer>
8383
<Title title="Chip with ellipsis" theme="light" level={4} />
84-
<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" />
84+
<div style={{ width: "200px" }}>
85+
<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" />
86+
</div>
8587
</ExampleContainer>
8688
<ExampleContainer>
8789
<Title title="Chip with ellipsis and suffix" theme="light" level={4} />
88-
<DxcChip
89-
suffixIcon={iconSVG}
90-
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 fgsss"
91-
/>
90+
<div style={{ width: "200px" }}>
91+
<DxcChip
92+
suffixIcon={iconSVG}
93+
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 fgsss"
94+
/>
95+
</div>
9296
</ExampleContainer>
9397
<ExampleContainer>
9498
<Title title="Chip with ellipsis and prefix" theme="light" level={4} />
95-
<DxcChip
96-
prefixIcon={iconSVG}
97-
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 fgsss"
98-
/>
99+
<div style={{ width: "200px" }}>
100+
<DxcChip
101+
prefixIcon={iconSVG}
102+
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 fgsss"
103+
/>
104+
</div>
99105
</ExampleContainer>
100106
<ExampleContainer>
101107
<Title title="Chip with ellipsis, suffix and prefix" theme="light" level={4} />
102-
<DxcChip
103-
prefixIcon={iconSVG}
104-
suffixIcon={iconSVG}
105-
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"
106-
/>
108+
<div style={{ width: "200px" }}>
109+
<DxcChip
110+
prefixIcon={iconSVG}
111+
suffixIcon={iconSVG}
112+
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"
113+
/>
114+
</div>
107115
</ExampleContainer>
108116
<Title title="Margins" theme="light" level={2} />
109117
<ExampleContainer>
@@ -191,16 +199,16 @@ const ChipPrefixFocused = () => (
191199
const ChipSuffixFocused = () => (
192200
<ExampleContainer>
193201
<Title title="Chip with suffix" theme="light" level={4} />
194-
<DxcChip label="Chip with suffix" suffixIcon={iconSVG} onClickSuffix={() => {}} />
202+
<DxcChip label="Chip with suffix" suffixIcon="https://icons-for-free.com/download-icon-close+icon-1320184117228553763_512.png" onClickSuffix={() => {}} />
195203
</ExampleContainer>
196204
);
197205

198206
export const PrefixFocused = ChipPrefixFocused.bind({});
199-
PrefixFocused.play = async ({ canvasElement }) => {
207+
PrefixFocused.play = async () => {
200208
await userEvent.tab();
201209
};
202210

203211
export const SuffixFocused = ChipSuffixFocused.bind({});
204-
SuffixFocused.play = async ({ canvasElement }) => {
212+
SuffixFocused.play = async () => {
205213
await userEvent.tab();
206214
};

‎lib/src/chip/Chip.tsx‎

Lines changed: 33 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -19,59 +19,56 @@ const DxcChip = ({
1919

2020
return (
2121
<ThemeProvider theme={colorsTheme.chip}>
22-
<StyledDxcChip disabled={disabled} margin={margin}>
22+
<Chip disabled={disabled} margin={margin}>
2323
{prefixIcon && (
2424
<IconContainer
25+
role={typeof onClickPrefix === "function" ? "button" : undefined}
2526
disabled={disabled}
26-
prefixIcon
27-
label={label}
27+
interactuable={typeof onClickPrefix === "function" && !disabled}
2828
tabIndex={typeof onClickPrefix === "function" && !disabled ? tabIndex : -1}
2929
onClick={() => onClickPrefix && !disabled && onClickPrefix()}
30-
interactuable={typeof onClickPrefix === "function" && !disabled}
3130
>
3231
{typeof prefixIcon === "string" ? <img src={prefixIcon} /> : prefixIcon}
3332
</IconContainer>
3433
)}
35-
{label && <ChipTextContainer disabled={disabled}>{label}</ChipTextContainer>}
34+
{label && <LabelContainer disabled={disabled}>{label}</LabelContainer>}
3635
{suffixIcon && (
3736
<IconContainer
37+
role={typeof onClickSuffix === "function" ? "button" : undefined}
3838
disabled={disabled}
39-
suffixIcon
40-
label={label}
41-
tabIndex={typeof onClickSuffix === "function" && !disabled ? tabIndex : -1}
42-
onClick={() => onClickSuffix && !disabled && onClickSuffix()}
4339
interactuable={typeof onClickSuffix === "function" && !disabled}
40+
tabIndex={typeof onClickSuffix === "function" && !disabled ? tabIndex : -1}
41+
onClick={() => !disabled && onClickSuffix?.()}
4442
>
4543
{typeof suffixIcon === "string" ? <img src={suffixIcon} /> : suffixIcon}
4644
</IconContainer>
4745
)}
48-
</StyledDxcChip>
46+
</Chip>
4947
</ThemeProvider>
5048
);
5149
};
5250

53-
const getCursor = (interactuable, disabled) => {
54-
if (disabled) return "cursor: not-allowed;";
55-
else if (interactuable) return "cursor: pointer;";
56-
else return "cursor: default; outline:none;";
57-
};
51+
const calculateWidth = (margin: ChipPropsType["margin"]) =>
52+
`calc(100% - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`;
5853

59-
const StyledDxcChip = styled.div<{ margin: ChipPropsType["margin"]; disabled: ChipPropsType["disabled"] }>`
54+
const Chip = styled.div<{ margin: ChipPropsType["margin"]; disabled: ChipPropsType["disabled"] }>`
55+
box-sizing: border-box;
6056
display: inline-flex;
6157
align-items: center;
58+
gap: ${(props) => props.theme.iconSpacing};
6259
min-height: 40px;
63-
max-width: ${({ margin }) => `calc(100% - 40px - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`};
60+
max-width: ${(props) => calculateWidth(props.margin)};
6461
background-color: ${(props) =>
6562
(props.disabled && props.theme.disabledBackgroundColor) || props.theme.backgroundColor};
6663
border-radius: ${(props) => props.theme.borderRadius};
6764
border-width: ${(props) => props.theme.borderThickness};
6865
border-style: ${(props) => props.theme.borderStyle};
6966
border-color: ${(props) => props.theme.borderColor};
67+
7068
padding-top: ${(props) => props.theme.contentPaddingTop};
7169
padding-bottom: ${(props) => props.theme.contentPaddingBottom};
7270
padding-left: ${(props) => props.theme.contentPaddingLeft};
7371
padding-right: ${(props) => props.theme.contentPaddingRight};
74-
7572
margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
7673
margin-top: ${(props) =>
7774
props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
@@ -84,44 +81,41 @@ const StyledDxcChip = styled.div<{ margin: ChipPropsType["margin"]; disabled: Ch
8481
cursor: ${({ disabled }) => disabled && "not-allowed"};
8582
`;
8683

87-
const ChipTextContainer = styled.span<{ disabled: ChipPropsType["disabled"] }>`
84+
const LabelContainer = styled.span<{ disabled: ChipPropsType["disabled"] }>`
8885
font-size: ${(props) => props.theme.fontSize};
8986
font-family: ${(props) => props.theme.fontFamily};
9087
font-weight: ${(props) => props.theme.fontWeight};
9188
font-style: ${(props) => props.theme.fontStyle};
9289
color: ${(props) => (props.disabled ? props.theme.disabledFontColor : props.theme.fontColor)};
93-
cursor: ${({ disabled }) => (disabled && "not-allowed") || "default"};
9490
text-overflow: ellipsis;
9591
white-space: nowrap;
9692
overflow: hidden;
9793
`;
9894

9995
const IconContainer = styled.div<{
100-
prefixIcon?: ChipPropsType["prefixIcon"];
101-
label: ChipPropsType["label"];
102-
suffixIcon?: ChipPropsType["suffixIcon"];
10396
disabled: ChipPropsType["disabled"];
10497
interactuable: boolean;
10598
}>`
10699
display: flex;
107-
${(props) =>
108-
props.prefixIcon
109-
? `margin-right: ${((props.label || props.suffixIcon) && props.theme.iconSpacing) || (props.prefixIcon && "0")};`
110-
: `margin-left: ${((props.label || props.prefixIcon) && props.theme.iconSpacing) || (props.prefixIcon && "0")};`}
100+
border-radius: 0.25rem;
111101
color: ${(props) => (props.disabled ? props.theme.disabledIconColor : props.theme.iconColor)};
112-
${(props) => getCursor(props.interactuable, props.disabled)}
102+
${({ interactuable }) => interactuable && "cursor: pointer;"}
103+
104+
${(props) =>
105+
props.interactuable &&
106+
`
107+
&:hover {
108+
color: ${props.theme.hoverIconColor};
109+
}
110+
&:focus,
111+
&:focus-visible {
112+
outline: ${props.theme.focusBorderThickness} solid ${props.theme.focusColor};
113+
}
114+
&:active {
115+
color: ${props.theme.activeIconColor};
116+
}
117+
`}
113118
114-
&:hover {
115-
color: ${(props) => !props.disabled && props.theme.hoverIconColor};
116-
}
117-
&:focus {
118-
outline-color: ${(props) => !props.disabled && props.theme.focusColor};
119-
outline-width: ${(props) => !props.disabled && props.theme.focusBorderThickness};
120-
${(props) => props.disabled && "outline: none;"}
121-
}
122-
&:active {
123-
color: ${(props) => !props.disabled && props.theme.activeIconColor};
124-
}
125119
img,
126120
svg {
127121
width: ${(props) => props.theme.iconSize};

‎lib/src/text-input/TextInput.tsx‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -738,17 +738,7 @@ const Action = styled.button<{ backgroundType: BackgroundColors }>`
738738
${(props) =>
739739
!props.disabled &&
740740
`
741-
&:focus {
742-
outline: none;
743-
box-shadow: 0 0 0 2px ${
744-
props.backgroundType === "dark"
745-
? props.theme.focusActionBorderColorOnDark
746-
: props.theme.focusActionBorderColor
747-
};
748-
color: ${
749-
props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor
750-
};
751-
}
741+
&:focus,
752742
&:focus-visible {
753743
outline: none;
754744
box-shadow: 0 0 0 2px ${

‎website/screens/components/chip/code/ChipCodePage.tsx‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,22 +29,40 @@ const sections = [
2929
<tr>
3030
<td>prefixIcon: node | string</td>
3131
<td></td>
32-
<td>Element used as icon to be placed before the chip label.</td>
32+
<td>
33+
Element used as icon, placed before the chip label. Note that if
34+
the passed value is an URL (string), the color styling tokens will
35+
not be applied to the image. For the icon to display correctly, an
36+
SVG must be provided to the prop inheriting the component's
37+
styles.
38+
</td>
3339
</tr>
3440
<tr>
3541
<td>suffixIcon: node | string</td>
3642
<td></td>
37-
<td>Element used as icon to be placed after the chip label.</td>
43+
<td>
44+
Element used as icon, placed after the chip label. Note that if
45+
the passed value is an URL (string), the color styling tokens will
46+
not be applied to the image. For the icon to display correctly, an
47+
SVG must be provided to the prop inheriting the component's
48+
styles.
49+
</td>
3850
</tr>
3951
<tr>
4052
<td>onClickPrefix: function</td>
4153
<td></td>
42-
<td>This function will be called when the prefix is clicked.</td>
54+
<td>
55+
If defined, the prefix icon will be considered a button element.
56+
This function will be called when it is clicked.
57+
</td>
4358
</tr>
4459
<tr>
4560
<td>onClickSuffix: function</td>
4661
<td></td>
47-
<td>This function will be called when the suffix is clicked.</td>
62+
<td>
63+
If defined, the suffix icon will be considered a button element.
64+
This function will be called when it is clicked.
65+
</td>
4866
</tr>
4967
<tr>
5068
<td>disabled: boolean</td>

‎website/screens/components/chip/code/examples/icons.ts‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,22 @@ import { DxcChip, DxcInset } from "@dxc-technology/halstack-react";
33
const code = `() => {
44
const icon = (
55
<svg
6-
x="0px"
7-
y="0px"
8-
width="24px"
9-
height="24px"
10-
viewBox="0 0 24 24"
11-
enableBackground="new 0 0 24 24"
6+
xmlns="http://www.w3.org/2000/svg"
7+
height="48"
8+
viewBox="0 -960 960 960"
9+
width="48"
1210
fill="currentColor"
1311
>
14-
<g id="Bounding_Box">
15-
<rect fill="none" width="24" height="24" />
16-
</g>
17-
<g id="Master">
18-
<path d="M19,9.3V4h-3v2.6L12,3L2,12h3v8h5v-6h4v6h5v-8h3L19,9.3z M10,10c0-1.1,0.9-2,2-2s2,0.9,2,2H10z" />
19-
</g>
12+
<path d="m330-288 150-150 150 150 42-42-150-150 150-150-42-42-150 150-150-150-42 42 150 150-150 150 42 42ZM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-83 31.5-156t86-127Q252-817 325-848.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 82-31.5 155T763-197.5q-54 54.5-127 86T480-80Z" />
2013
</svg>
2114
);
15+
const onClickSuffix = () => {
16+
console.log("Copied.");
17+
};
2218
2319
return (
2420
<DxcInset space="2rem">
25-
<DxcChip label="Home" prefixIcon={icon}/>
21+
<DxcChip label="Home" suffixIcon={icon} onClickSuffix={onClickSuffix} />
2622
</DxcInset>
2723
);
2824
}`;

‎website/screens/components/chip/specs/ChipSpecsPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ const sections = [
109109
</tr>
110110
<tr>
111111
<td>
112-
<Code>fontcolor</Code>
112+
<Code>fontColor</Code>
113113
</td>
114114
<td>Label</td>
115115
<td>

0 commit comments

Comments
 (0)