Skip to content

[major] Chip component reimplementation #2379

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

Draft
PelayoFelgueroso wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

[major] Chip component reimplementation #2379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
685a916
First approach to new Chip redesign
PelayoFelgueroso Jan 13, 2026
2286133
-Refacto ActionIcon to allow past actionIcon states.
PelayoFelgueroso Jan 15, 2026
5b05744
Merge branch 'master' into PelayoFelgueroso/chip-reimplementation
PelayoFelgueroso Jan 15, 2026
28f72b8
Add tests
PelayoFelgueroso Jan 15, 2026
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
37 changes: 33 additions & 4 deletions apps/website/screens/components/chip/code/ChipCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,23 @@ import DocFooter from "@/common/DocFooter";
import Example from "@/common/example/Example";
import basicUsage from "./examples/basicUsage";
import icons from "./examples/icons";
import Code, { TableCode } from "@/common/Code";
import Code, { ExtendedTableCode, TableCode } from "@/common/Code";

const avatarTypeString = `{
color?: 'primary' | 'secondary' | 'tertiary' |
'success' | 'info' | 'neutral' | 'warning' | 'error';
disabled?: boolean;
icon?: string | SVG;
imgSrc?: string;
label?: string;
linkHref?: string;
onClick??: () => void;
shape?: 'circle' | 'square';
size?: 'xsmall' | 'small' | 'medium' |
'large' | 'xlarge' | 'xxlarge';
tabIndex?: number';
title?: string;
}`;

const sections = [
{
Expand All @@ -20,6 +36,19 @@ const sections = [
</tr>
</thead>
<tbody>
<tr>
<td>avatar</td>
<td>
<ExtendedTableCode>{avatarTypeString}</ExtendedTableCode>
</td>
<td>
Avatar that will be placed before the chip label only when the chip size is <Code>'medium'</Code> or{" "}
<Code>'large'</Code>.
</td>
<td>
<TableCode>false</TableCode>
</td>
</tr>
<tr>
<td>disabled</td>
<td>
Expand Down Expand Up @@ -80,9 +109,9 @@ const sections = [
<DxcLink newWindow href="https://fonts.google.com/icons">
Material Symbol
</DxcLink>{" "}
name or SVG element as the icon that will be placed before the chip label. When using Material Symbols,
replace spaces with underscores. By default they are outlined if you want it to be filled prefix the
symbol name with <TableCode>"filled_"</TableCode>.
name or SVG element as the icon that will be placed before the chip label when an <Code>avatar</Code> is
not provided. When using Material Symbols, replace spaces with underscores. By default they are outlined
if you want it to be filled prefix the symbol name with <TableCode>"filled_"</TableCode>.
</td>
<td>-</td>
</tr>
Expand Down
68 changes: 62 additions & 6 deletions apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,16 +28,72 @@ const sections = [
<Image src={anatomy} alt="Chip anatomy" />
<DxcBulletedList type="number">
<DxcBulletedList.Item>
<strong>Prefix</strong> <em>(Optional)</em>: the prefix can be an icon or an action icon that provides
additional context or functionality.
<strong>Container</strong> <em>(Required)</em>:
<DxcBulletedList>
<DxcBulletedList.Item>The outer wrapper of the chip.</DxcBulletedList.Item>
<DxcBulletedList.Item>
Defines:
<DxcBulletedList>
<DxcBulletedList.Item>Overall size (Small / Medium / Large)</DxcBulletedList.Item>
<DxcBulletedList.Item>
Interactive area (default, focus, hover, active and disabled)
</DxcBulletedList.Item>
</DxcBulletedList>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
Acts as the main clickable surface when no action icon is present.
</DxcBulletedList.Item>
</DxcBulletedList>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Label:</strong> the primary text that conveys the chip's meaning, such as a tag name or a selected
option. It should be concise, clear, and relevant to the chip's function.
<strong>Left Element</strong> <em>(Optional)</em>: Supported types:
<DxcBulletedList>
<DxcBulletedList.Item>
<strong>Icon</strong>
<DxcBulletedList>
<DxcBulletedList.Item>Allowed in Small, Medium and Large.</DxcBulletedList.Item>
<DxcBulletedList.Item>Used for status, category, or action hint.</DxcBulletedList.Item>
</DxcBulletedList>
</DxcBulletedList.Item>

<DxcBulletedList.Item>
<strong>Avatar</strong>
<DxcBulletedList>
<DxcBulletedList.Item>Allowed only in Medium and Large.</DxcBulletedList.Item>
<DxcBulletedList.Item>Represents people, entities or profiles.</DxcBulletedList.Item>
</DxcBulletedList>
</DxcBulletedList.Item>
</DxcBulletedList>
Small size supports icons only to preserve compactness and clarity.
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Suffix</strong> <em>(Optional)</em>: the suffix can be an icon or an action icon that enhances
interactivity.
<strong>Label</strong> <em>(Required)</em>
<DxcBulletedList>
<DxcBulletedList.Item>Text content displayed inside the chip</DxcBulletedList.Item>
<DxcBulletedList.Item>
Characteristics:
<DxcBulletedList>
<DxcBulletedList.Item>Short, concise text</DxcBulletedList.Item>
<DxcBulletedList.Item>Single-line only(no-wrapping)</DxcBulletedList.Item>
<DxcBulletedList.Item>Truncated when exceeding maximum width</DxcBulletedList.Item>
<DxcBulletedList.Item>Tooltip appears on hover/focus when truncated</DxcBulletedList.Item>
</DxcBulletedList>
</DxcBulletedList.Item>
<DxcBulletedList.Item>Serves as the primary identifier of the chip.</DxcBulletedList.Item>
</DxcBulletedList>
</DxcBulletedList.Item>
<DxcBulletedList.Item>
<strong>Action Icon</strong> <em>(Optional) -</em> Appears at the end of the chip. Common usage:
<DxcBulletedList>
<DxcBulletedList.Item>Remove / clear action (✕)</DxcBulletedList.Item>
<DxcBulletedList.Item>Secondary inline action (if applicable)</DxcBulletedList.Item>
</DxcBulletedList>
Behavior:
<DxcBulletedList>
<DxcBulletedList.Item>Has its own interaction target</DxcBulletedList.Item>
<DxcBulletedList.Item>Does not trigger the main chip action</DxcBulletedList.Item>
<DxcBulletedList.Item>Disabled when the chip is disabled</DxcBulletedList.Item>
</DxcBulletedList>
</DxcBulletedList.Item>
</DxcBulletedList>
</>
Expand Down
43 changes: 32 additions & 11 deletions packages/lib/src/action-icon/ActionIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const ActionIconContainer = styled.div<
hasAction?: boolean;
size: ActionIconPropTypes["size"];
disabled?: ActionIconPropTypes["disabled"];
isAvatar?: boolean;
} & React.AnchorHTMLAttributes<HTMLAnchorElement>
>`
position: relative;
Expand All @@ -40,15 +41,12 @@ const ActionIconContainer = styled.div<
color: inherit;
outline: none;
}
${({ hasAction, disabled, size }) =>

${({ hasAction, disabled, size, isAvatar }) =>
!disabled &&
hasAction &&
css`
cursor: pointer;
&:hover > div:first-child > div:first-child,
&:active > div:first-child > div:first-child {
display: block;
}
&:focus:enabled > div:first-child,
&:active:enabled > div:first-child {
outline-style: solid;
Expand All @@ -59,15 +57,37 @@ const ActionIconContainer = styled.div<
&:focus-visible:enabled {
outline: none;
}
${isAvatar
? css`
&:hover > div:first-child > div:first-child,
&:active > div:first-child > div:first-child {
display: block;
}
`
: css`
&:hover > div:first-child,
&:active > div:first-child {
background-color: var(--color-bg-alpha-light);
}
`}
`}
${({ disabled }) =>

${({ disabled, isAvatar }) =>
disabled &&
css`
cursor: not-allowed;
& > div:first-child > div:first-child {
display: block;
background-color: rgba(255, 255, 255, 0.5);
}
${isAvatar
? css`
& > div:first-child > div:first-child {
display: block;
background-color: rgba(255, 255, 255, 0.5);
}
`
: css`
& > div:first-child > div:first-child {
color: var(--color-fg-neutral-medium);
}
`}
`}
`;

Expand Down Expand Up @@ -155,9 +175,10 @@ const ForwardedActionIcon = forwardRef<RefType, ActionIconPropTypes>(
aria-label={(onClick || linkHref) && (ariaLabel || title || "Action Icon")}
disabled={disabled}
ref={ref}
isAvatar={color !== "transparent"}
>
<ActionIconWrapper shape={shape} color={color} size={size}>
{(!!onClick || !!linkHref) && <Overlay aria-hidden="true" />}
{color !== "transparent" && (!!onClick || !!linkHref || disabled) && <Overlay aria-hidden="true" />}
{content ? (
content
) : (
Expand Down
Loading