Skip to content

Chip spacing fix #1609

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 7, 2023
Merged

Chip spacing fix #1609

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5adbd85
Chip spacing fix
GomezIvann Jun 2, 2023
2fa01d3
Improvements to the Chip
GomezIvann Jun 2, 2023
3aa0ae2
Chip code page updates
GomezIvann Jun 2, 2023
08acc54
Fix typo in Chip specs page
GomezIvann Jun 5, 2023
81e265d
Updates based on feedback
GomezIvann Jun 7, 2023
d621b39
Merge branch 'master' into gomezivann/fix-chip
Jialecl Jun 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 1 addition & 4 deletions lib/src/alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,10 +274,7 @@ const AlertCloseAction = styled.button`
&:hover {
background-color: ${(props) => props.theme.hoverActionBackgroundColor};
}
&:focus {
outline: none;
box-shadow: 0 0 0 2px ${(props) => props.theme.focusActionBorderColor};
}
&:focus,
&:focus-visible {
outline: none;
box-shadow: 0 0 0 2px ${(props) => props.theme.focusActionBorderColor};
Expand Down
42 changes: 25 additions & 17 deletions lib/src/chip/Chip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,29 +81,37 @@ export const Chromatic = () => (
</ExampleContainer>
<ExampleContainer>
<Title title="Chip with ellipsis" theme="light" level={4} />
<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 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} />
<DxcChip
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 asdfasd fgsss"
/>
<div style={{ width: "200px" }}>
<DxcChip
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 asdfasd fgsss"
/>
</div>
</ExampleContainer>
<ExampleContainer>
<Title title="Chip with ellipsis and prefix" theme="light" level={4} />
<DxcChip
prefixIcon={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 asdfasd fgsss"
/>
<div style={{ width: "200px" }}>
<DxcChip
prefixIcon={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 asdfasd fgsss"
/>
</div>
</ExampleContainer>
<ExampleContainer>
<Title title="Chip with ellipsis, suffix and prefix" theme="light" level={4} />
<DxcChip
prefixIcon={iconSVG}
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"
/>
<div style={{ width: "200px" }}>
<DxcChip
prefixIcon={iconSVG}
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"
/>
</div>
</ExampleContainer>
<Title title="Margins" theme="light" level={2} />
<ExampleContainer>
Expand Down Expand Up @@ -191,16 +199,16 @@ const ChipPrefixFocused = () => (
const ChipSuffixFocused = () => (
<ExampleContainer>
<Title title="Chip with suffix" theme="light" level={4} />
<DxcChip label="Chip with suffix" suffixIcon={iconSVG} onClickSuffix={() => {}} />
<DxcChip label="Chip with suffix" suffixIcon="https://icons-for-free.com/download-icon-close+icon-1320184117228553763_512.png" onClickSuffix={() => {}} />
</ExampleContainer>
);

export const PrefixFocused = ChipPrefixFocused.bind({});
PrefixFocused.play = async ({ canvasElement }) => {
PrefixFocused.play = async () => {
await userEvent.tab();
};

export const SuffixFocused = ChipSuffixFocused.bind({});
SuffixFocused.play = async ({ canvasElement }) => {
SuffixFocused.play = async () => {
await userEvent.tab();
};
72 changes: 33 additions & 39 deletions lib/src/chip/Chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,59 +19,56 @@ const DxcChip = ({

return (
<ThemeProvider theme={colorsTheme.chip}>
<StyledDxcChip disabled={disabled} margin={margin}>
<Chip disabled={disabled} margin={margin}>
{prefixIcon && (
<IconContainer
role={typeof onClickPrefix === "function" ? "button" : undefined}
disabled={disabled}
prefixIcon
label={label}
interactuable={typeof onClickPrefix === "function" && !disabled}
tabIndex={typeof onClickPrefix === "function" && !disabled ? tabIndex : -1}
onClick={() => onClickPrefix && !disabled && onClickPrefix()}
interactuable={typeof onClickPrefix === "function" && !disabled}
>
{typeof prefixIcon === "string" ? <img src={prefixIcon} /> : prefixIcon}
</IconContainer>
)}
{label && <ChipTextContainer disabled={disabled}>{label}</ChipTextContainer>}
{label && <LabelContainer disabled={disabled}>{label}</LabelContainer>}
{suffixIcon && (
<IconContainer
role={typeof onClickSuffix === "function" ? "button" : undefined}
disabled={disabled}
suffixIcon
label={label}
tabIndex={typeof onClickSuffix === "function" && !disabled ? tabIndex : -1}
onClick={() => onClickSuffix && !disabled && onClickSuffix()}
interactuable={typeof onClickSuffix === "function" && !disabled}
tabIndex={typeof onClickSuffix === "function" && !disabled ? tabIndex : -1}
onClick={() => !disabled && onClickSuffix?.()}
>
{typeof suffixIcon === "string" ? <img src={suffixIcon} /> : suffixIcon}
</IconContainer>
)}
</StyledDxcChip>
</Chip>
</ThemeProvider>
);
};

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

const StyledDxcChip = styled.div<{ margin: ChipPropsType["margin"]; disabled: ChipPropsType["disabled"] }>`
const Chip = styled.div<{ margin: ChipPropsType["margin"]; disabled: ChipPropsType["disabled"] }>`
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: ${(props) => props.theme.iconSpacing};
min-height: 40px;
max-width: ${({ margin }) => `calc(100% - 40px - ${getMargin(margin, "left")} - ${getMargin(margin, "right")})`};
max-width: ${(props) => calculateWidth(props.margin)};
background-color: ${(props) =>
(props.disabled && props.theme.disabledBackgroundColor) || props.theme.backgroundColor};
border-radius: ${(props) => props.theme.borderRadius};
border-width: ${(props) => props.theme.borderThickness};
border-style: ${(props) => props.theme.borderStyle};
border-color: ${(props) => props.theme.borderColor};

padding-top: ${(props) => props.theme.contentPaddingTop};
padding-bottom: ${(props) => props.theme.contentPaddingBottom};
padding-left: ${(props) => props.theme.contentPaddingLeft};
padding-right: ${(props) => props.theme.contentPaddingRight};

margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
margin-top: ${(props) =>
props.margin && typeof props.margin === "object" && props.margin.top ? spaces[props.margin.top] : ""};
Expand All @@ -84,44 +81,41 @@ const StyledDxcChip = styled.div<{ margin: ChipPropsType["margin"]; disabled: Ch
cursor: ${({ disabled }) => disabled && "not-allowed"};
`;

const ChipTextContainer = styled.span<{ disabled: ChipPropsType["disabled"] }>`
const LabelContainer = styled.span<{ disabled: ChipPropsType["disabled"] }>`
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)};
cursor: ${({ disabled }) => (disabled && "not-allowed") || "default"};
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
`;

const IconContainer = styled.div<{
prefixIcon?: ChipPropsType["prefixIcon"];
label: ChipPropsType["label"];
suffixIcon?: ChipPropsType["suffixIcon"];
disabled: ChipPropsType["disabled"];
interactuable: boolean;
}>`
display: flex;
${(props) =>
props.prefixIcon
? `margin-right: ${((props.label || props.suffixIcon) && props.theme.iconSpacing) || (props.prefixIcon && "0")};`
: `margin-left: ${((props.label || props.prefixIcon) && props.theme.iconSpacing) || (props.prefixIcon && "0")};`}
border-radius: 0.25rem;
color: ${(props) => (props.disabled ? props.theme.disabledIconColor : props.theme.iconColor)};
${(props) => getCursor(props.interactuable, props.disabled)}
${({ interactuable }) => interactuable && "cursor: pointer;"}

${(props) =>
props.interactuable &&
`
&:hover {
color: ${props.theme.hoverIconColor};
}
&:focus,
&:focus-visible {
outline: ${props.theme.focusBorderThickness} solid ${props.theme.focusColor};
}
&:active {
color: ${props.theme.activeIconColor};
}
`}

&:hover {
color: ${(props) => !props.disabled && props.theme.hoverIconColor};
}
&:focus {
outline-color: ${(props) => !props.disabled && props.theme.focusColor};
outline-width: ${(props) => !props.disabled && props.theme.focusBorderThickness};
${(props) => props.disabled && "outline: none;"}
}
&:active {
color: ${(props) => !props.disabled && props.theme.activeIconColor};
}
img,
svg {
width: ${(props) => props.theme.iconSize};
Expand Down
12 changes: 1 addition & 11 deletions lib/src/text-input/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -738,17 +738,7 @@ const Action = styled.button<{ backgroundType: BackgroundColors }>`
${(props) =>
!props.disabled &&
`
&:focus {
outline: none;
box-shadow: 0 0 0 2px ${
props.backgroundType === "dark"
? props.theme.focusActionBorderColorOnDark
: props.theme.focusActionBorderColor
};
color: ${
props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor
};
}
&:focus,
&:focus-visible {
outline: none;
box-shadow: 0 0 0 2px ${
Expand Down
26 changes: 22 additions & 4 deletions website/screens/components/chip/code/ChipCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,40 @@ const sections = [
<tr>
<td>prefixIcon: node | string</td>
<td></td>
<td>Element used as icon to be placed before the chip label.</td>
<td>
Element used as icon, placed before the chip label. Note that if
the passed value is an URL (string), the color styling tokens will
not be applied to the image. For the icon to display correctly, an
SVG must be provided to the prop inheriting the component's
styles.
</td>
</tr>
<tr>
<td>suffixIcon: node | string</td>
<td></td>
<td>Element used as icon to be placed after the chip label.</td>
<td>
Element used as icon, placed after the chip label. Note that if
the passed value is an URL (string), the color styling tokens will
not be applied to the image. For the icon to display correctly, an
SVG must be provided to the prop inheriting the component's
styles.
</td>
</tr>
<tr>
<td>onClickPrefix: function</td>
<td></td>
<td>This function will be called when the prefix is clicked.</td>
<td>
If defined, the prefix icon will be considered a button element.
This function will be called when it is clicked.
</td>
</tr>
<tr>
<td>onClickSuffix: function</td>
<td></td>
<td>This function will be called when the suffix is clicked.</td>
<td>
If defined, the suffix icon will be considered a button element.
This function will be called when it is clicked.
</td>
</tr>
<tr>
<td>disabled: boolean</td>
Expand Down
22 changes: 9 additions & 13 deletions website/screens/components/chip/code/examples/icons.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,22 @@ import { DxcChip, DxcInset } from "@dxc-technology/halstack-react";
const code = `() => {
const icon = (
<svg
x="0px"
y="0px"
width="24px"
height="24px"
viewBox="0 0 24 24"
enableBackground="new 0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 -960 960 960"
width="48"
fill="currentColor"
>
<g id="Bounding_Box">
<rect fill="none" width="24" height="24" />
</g>
<g id="Master">
<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" />
</g>
<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" />
</svg>
);
const onClickSuffix = () => {
console.log("Copied.");
};

return (
<DxcInset space="2rem">
<DxcChip label="Home" prefixIcon={icon}/>
<DxcChip label="Home" suffixIcon={icon} onClickSuffix={onClickSuffix} />
</DxcInset>
);
}`;
Expand Down
2 changes: 1 addition & 1 deletion website/screens/components/chip/specs/ChipSpecsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ const sections = [
</tr>
<tr>
<td>
<Code>fontcolor</Code>
<Code>fontColor</Code>
</td>
<td>Label</td>
<td>
Expand Down