-
+
{}}
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 +175,48 @@ export const Chromatic = () => (
-
+
-
+ {}} suffixIcon="filled_check_circle" />
-
+
-
+ {}}
+ />
- {}}
- onClickSuffix={() => {}}
- />
+ {}} />
- {}}
- onClickSuffix={() => {}}
- />
+ {}} />
);
+
const ChipPrefixFocused = () => (
-
- {}}
- />
+
+ {}} />
);
const ChipSuffixFocused = () => (
-
- {}} />
+
+ {}} />
);
diff --git a/lib/src/chip/Chip.tsx b/lib/src/chip/Chip.tsx
index 7d3ef522d..22a4dd8ae 100644
--- a/lib/src/chip/Chip.tsx
+++ b/lib/src/chip/Chip.tsx
@@ -20,7 +20,7 @@ const DxcChip = ({
return (
-
+
{prefixIcon && (
onClickPrefix && !disabled && onClickPrefix()}
+ onClick={onClickPrefix}
>
{typeof prefixIcon === "string" ? : prefixIcon}
)}
- {label && {label}}
+ {label && {label}}
{suffixIcon && (
!disabled && onClickSuffix?.()}
+ onClick={onClickSuffix}
>
{typeof suffixIcon === "string" ? : suffixIcon}
@@ -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,15 @@ const LabelContainer = styled.span<{ disabled: ChipPropsType["disabled"] }>`
const IconContainer = styled.div<{
disabled: ChipPropsType["disabled"];
+ onClick?: ChipPropsType["onClickPrefix"];
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.onClick || props.onClick) ? props.theme.disabledIconColor : props.theme.iconColor};
+ cursor: ${(props) =>
+ props.disabled && (props.onClick || props.onClick) ? "not-allowed" : props.interactuable ? "pointer" : ""};
${(props) =>
props.interactuable &&
`
diff --git a/lib/src/chip/types.ts b/lib/src/chip/types.ts
index f79af26ca..cd9c3cb18 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;
-type Props = {
+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?: never;
+ disabled?: never;
+ };
+
+type SuffixIconProps =
+ | {
+ suffixIcon: Icon;
+ onClickSuffix: () => void;
+ prefixIcon?: Icon;
+ onClickPrefix?: never;
+ disabled?: boolean;
+ }
+ | {
+ suffixIcon?: Icon;
+ onClickSuffix?: never;
+ prefixIcon?: never;
+ onClickPrefix?: never;
+ disabled?: never;
+ };
+
+type CommonProps = {
/**
* 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.
@@ -44,4 +73,6 @@ type Props = {
tabIndex?: number;
};
+type Props = (PrefixIconProps | SuffixIconProps) & CommonProps;
+
export default Props;
diff --git a/lib/src/common/variables.ts b/lib/src/common/variables.ts
index fd745a7d3..c28e34dd7 100644
--- a/lib/src/common/variables.ts
+++ b/lib/src/common/variables.ts
@@ -193,13 +193,11 @@ 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,
fontWeight: CoreTokens.type_regular,
fontColor: CoreTokens.color_black,
- disabledFontColor: CoreTokens.color_grey_500,
borderColor: CoreTokens.color_transparent,
borderRadius: "80px",
borderThickness: CoreTokens.border_width_0,