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

Open
PelayoFelgueroso wants to merge 8 commits into
base: master
Choose a base branch
from
Open

[major] Chip component reimplementation #2379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 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
0a08b71
-Update Overview Chip documentation based on Notion file
PelayoFelgueroso Jan 16, 2026
d04f219
Complete Chip's documentation
PelayoFelgueroso Jan 19, 2026
11867d0
Refacto Chip stories
PelayoFelgueroso Jan 19, 2026
397b2c5
Put default padding to stories
PelayoFelgueroso Jan 19, 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
106 changes: 63 additions & 43 deletions apps/website/screens/components/chip/code/ChipCodePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,31 @@
import { DxcFlex, DxcLink, DxcTable } from "@dxc-technology/halstack-react";
import { DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
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";
import StatusBadge from "@/common/StatusBadge";
import avatar from "./examples/avatar";

const actionTypeString = `{
icon?: string | (React.ReactNode
& React.SVGProps<SVGSVGElement>);
onClick: () => void;
title?: string;
}`;

const prefixTypeString = `
| string
| SVG
| {
color: 'primary' | 'secondary' | 'tertiary'
| 'success' | 'info' | 'neutral' | 'warning'
| 'error';
icon?: string | SVG;
imgSrc?: string;
label?: string;
}`;

const sections = [
{
Expand All @@ -20,6 +41,19 @@ const sections = [
</tr>
</thead>
<tbody>
<tr>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="new" />
action
</DxcFlex>
</td>
<td>
<ExtendedTableCode>{actionTypeString}</ExtendedTableCode>
</td>
<td>Action to be displayed on the right side of the chip after the label.</td>
<td>-</td>
</tr>
<tr>
<td>disabled</td>
<td>
Expand All @@ -31,7 +65,12 @@ const sections = [
</td>
</tr>
<tr>
<td>label</td>
<td>
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="required" />
label
</DxcFlex>
</td>
<td>
<TableCode>string</TableCode>
</td>
Expand All @@ -50,54 +89,27 @@ const sections = [
<td>-</td>
</tr>
<tr>
<td>onClickPrefix</td>
<td>
<TableCode>{"() => void"}</TableCode>
</td>
<td>
If defined, the prefix icon will be considered a button element. This function will be called when it is
clicked.
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
<StatusBadge status="new" />
prefix
</DxcFlex>
</td>
<td>-</td>
</tr>
<tr>
<td>onClickSuffix</td>
<td>
<TableCode>{"() => void"}</TableCode>
</td>
<td>
If defined, the suffix icon will be considered a button element. This function will be called when it is
clicked.
</td>
<td>-</td>
</tr>
<tr>
<td>prefixIcon</td>
<td>
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
<ExtendedTableCode>{prefixTypeString}</ExtendedTableCode>
</td>
<td>
<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>.
</td>
<td>-</td>
</tr>
<tr>
<td>suffixIcon</td>
<td>
<TableCode>string | {"(React.ReactNode & React.SVGProps <SVGSVGElement>)"}</TableCode>
</td>
<td>
<DxcLink newWindow href="https://fonts.google.com/icons">
Material Symbol
</DxcLink>{" "}
name or SVG element as the icon that will be placed after 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 used as the icon. When using Material Symbols, replace spaces with underscores. By
default, symbols are outlined; to use the filled version, prefix the symbol name with{" "}
<TableCode>"filled_"</TableCode>.
<DxcParagraph>
If a string or SVG is provided, it will be rendered as an icon placed before the chip label. If an
avatar props object is provided, a DxcAvatar will be displayed to the left of the label, only when the
chip size is medium or large.
</DxcParagraph>
</td>
<td>-</td>
</tr>
Expand Down Expand Up @@ -133,6 +145,14 @@ const sections = [
</>
),
},
{
title: "Avatar",
content: (
<>
<Example example={avatar} defaultIsVisible />
</>
),
},
],
},
];
Expand Down
34 changes: 34 additions & 0 deletions apps/website/screens/components/chip/code/examples/avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { DxcChip, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";

const code = `() => {
const icon = (
<svg
xmlns="http://www.w3.org/2000/svg"
height="48"
viewBox="0 -960 960 960"
width="48"
fill="currentColor"
>
<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>
);

return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcFlex gap="var(--spacing-gap-ml)">
<DxcChip label="User" prefix={{color: "primary", }} />
<DxcChip label="User" prefix={{color: "primary", profileName: "Michael Ramirez"}}
action={{ icon: icon, onClick: () => console.log("action clicked") }}
/>
</DxcFlex>
</DxcInset>
);
}`;

const scope = {
DxcChip,
DxcInset,
DxcFlex,
};

export default { code, scope };
13 changes: 5 additions & 8 deletions apps/website/screens/components/chip/code/examples/icons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,14 @@ const code = `() => {
<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("Delete.");
};
const onClickPrefix = () => {
console.log("Favorite.");
};

return (
<DxcInset space="var(--spacing-padding-xl)">
<DxcFlex gap="var(--spacing-gap-ml)">
<DxcChip label="Home" suffixIcon={icon} onClickSuffix={onClickSuffix} />
<DxcChip label="Home" prefixIcon="favorite" onClickPrefix={onClickPrefix} />
<DxcChip label="Home" prefix="home" />
<DxcChip label="Home" prefix="favorite"
action={{ icon: icon, onClick: () => console.log("action clicked") }}
/>
</DxcFlex>
</DxcInset>
);
Expand Down
Loading