tabIndex
number
- Value of the tabindex attribute applied to both the component and the prefix and suffix icons
- when a function is given.
+ Value of the tabindex attribute applied to the component when mode is{" "}
+ "selectable" and clear icon when mode is "dismissible".
0
@@ -140,22 +165,14 @@ const sections = [
title: "Examples",
subSections: [
{
- title: "Basic usage",
- content:
-
- );
-
- return (
-
-
- console.log("action clicked") }}
- />
-
-
- );
-}`;
-
-const scope = {
- DxcChip,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/chip/code/examples/basicUsage.tsx b/apps/website/screens/components/chip/code/examples/basicUsage.tsx
deleted file mode 100644
index f6a79ac45c..0000000000
--- a/apps/website/screens/components/chip/code/examples/basicUsage.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { DxcChip, DxcInset, DxcFlex } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- return (
-
-
-
-
- );
-}`;
-
-const scope = {
- DxcChip,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/chip/code/examples/dismissible.tsx b/apps/website/screens/components/chip/code/examples/dismissible.tsx
new file mode 100644
index 0000000000..359a92cd79
--- /dev/null
+++ b/apps/website/screens/components/chip/code/examples/dismissible.tsx
@@ -0,0 +1,79 @@
+import { DxcChip, DxcFlex, DxcInset, DxcSelect } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+type Option = { label: string; value: string; icon: string };
+
+const options: Option[] = [
+ { label: "Electric Car", value: "car", icon: "electric_car" },
+ { label: "Motorcycle", value: "motorcycle", icon: "Motorcycle" },
+ { label: "Train", value: "train", icon: "train" },
+ { label: "Bike", value: "bike", icon: "pedal_bike" },
+];
+
+const findOptionByValue = (value: string): Option | null => options.find((opt) => opt.value === value) ?? null;
+
+type TransportSelectProps = {
+ selectedOptions: Option[];
+ onChange: (selected: Option[]) => void;
+};
+
+const TransportSelect = ({ selectedOptions, onChange }: TransportSelectProps) => {
+ const handleSelectChange = ({ value }: { value: string | string[] }) => {
+ if (Array.isArray(value)) {
+ onChange(value.map((val) => findOptionByValue(val)).filter(Boolean) as Option[]);
+ }
+ };
+
+ return (
+ opt.value)}
+ multiple
+ enableSelectAll
+ />
+ );
+};
+
+const code = `() => {
+ const [selectedOptions, setSelectedOptions] = useState([options[0], options[2]]);
+
+ const handleDismiss = (valueToRemove) => {
+ setSelectedOptions(selectedOptions.filter(opt => opt.value !== valueToRemove));
+ };
+
+ return (
+
+
+
+ {selectedOptions.map((option) => (
+ handleDismiss(option.value)}
+ />
+ ))}
+
+ )}
+
+
+ );
+}`;
+
+const scope = {
+ DxcChip,
+ DxcInset,
+ DxcFlex,
+ useState,
+ options,
+ TransportSelect,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/chip/code/examples/icons.tsx b/apps/website/screens/components/chip/code/examples/icons.tsx
deleted file mode 100644
index 7a61774a73..0000000000
--- a/apps/website/screens/components/chip/code/examples/icons.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { DxcChip, DxcFlex, DxcInset } from "@dxc-technology/halstack-react";
-
-const code = `() => {
- const icon = (
-
-
- );
-
- return (
-
-
- console.log("action clicked") }}
- />
-
-
- );
-}`;
-
-const scope = {
- DxcChip,
- DxcInset,
- DxcFlex,
-};
-
-export default { code, scope };
diff --git a/apps/website/screens/components/chip/code/examples/selectable.tsx b/apps/website/screens/components/chip/code/examples/selectable.tsx
new file mode 100644
index 0000000000..ea4def25a6
--- /dev/null
+++ b/apps/website/screens/components/chip/code/examples/selectable.tsx
@@ -0,0 +1,120 @@
+import { DxcChip, DxcInset, DxcFlex, DxcTable } from "@dxc-technology/halstack-react";
+import { useState } from "react";
+
+type Activity = {
+ id: number;
+ name: string;
+ category: string;
+ duration: string;
+ participants: number;
+};
+
+const allActivities: Activity[] = [
+ { id: 1, name: "Morning Yoga", category: "sports", duration: "1h", participants: 12 },
+ { id: 2, name: "Watercolor Workshop", category: "art", duration: "2h", participants: 8 },
+ { id: 3, name: "Basketball Practice", category: "sports", duration: "1.5h", participants: 10 },
+ { id: 4, name: "Guitar Lessons", category: "music", duration: "1h", participants: 5 },
+ { id: 5, name: "Book Club Meeting", category: "reading", duration: "2h", participants: 15 },
+ { id: 6, name: "Swimming Session", category: "sports", duration: "1h", participants: 8 },
+ { id: 7, name: "Pottery Class", category: "art", duration: "2h", participants: 10 },
+ { id: 8, name: "Piano Recital", category: "music", duration: "1.5h", participants: 20 },
+ { id: 9, name: "Poetry Reading", category: "reading", duration: "1h", participants: 12 },
+ { id: 10, name: "Jazz Band Rehearsal", category: "music", duration: "2h", participants: 6 },
+];
+
+const columns = [
+ { displayValue: "Activity" },
+ { displayValue: "Category" },
+ { displayValue: "Duration" },
+ { displayValue: "Participants" },
+];
+
+const ActivitiesTable = ({ selectedFilters }: { selectedFilters: Record }) => {
+ const activeFilters = Object.keys(selectedFilters).filter((key) => selectedFilters[key]);
+ const filteredActivities =
+ activeFilters.length === 0 ? [] : allActivities.filter((activity) => activeFilters.includes(activity.category));
+ const rows = filteredActivities.map((activity) => [
+ activity.name,
+ activity.category.charAt(0).toUpperCase() + activity.category.slice(1),
+ activity.duration,
+ activity.participants,
+ ]);
+
+ return (
+
+
+
+ {columns.map((col, idx) => (
+ {col.displayValue}
+ ))}
+
+
+
+ {rows.length > 0 ? (
+ rows.map((row, idx) => (
+
+ {row.map((cell, cellIdx) => (
+ {cell}
+ ))}
+
+ ))
+ ) : (
+
+ No activities found. Select at least one category.
+
+ )}
+
+
+ );
+};
+
+const code = `() => {
+ const [selectedFilters, setSelectedFilters] = useState({
+ sports: true,
+ art: false,
+ music: false,
+ reading: false,
+ });
+
+ const filters = [
+ { key: "sports", label: "Sports", icon: "fitness_center" },
+ { key: "art", label: "Art", icon: "palette" },
+ { key: "music", label: "Music", icon: "music_note" },
+ { key: "reading", label: "Reading", icon: "menu_book" },
+ ];
+
+ const handleToggle = (key) => {
+ setSelectedFilters((prev) => ({ ...prev, [key]: !prev[key] }));
+ };
+
+ return (
+
+
+
+ {filters.map((filter) => (
+ handleToggle(filter.key)}
+ />
+ ))}
+
+
+
+
+ );
+}`;
+
+const scope = {
+ DxcChip,
+ DxcInset,
+ DxcFlex,
+ useState,
+ allActivities,
+ ActivitiesTable,
+};
+
+export default { code, scope };
diff --git a/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx b/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
index df86c5436c..fdc65af775 100644
--- a/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
+++ b/apps/website/screens/components/chip/overview/ChipOverviewPage.tsx
@@ -1,14 +1,12 @@
-import { DxcBulletedList, DxcFlex, DxcLink, DxcParagraph, DxcTable } from "@dxc-technology/halstack-react";
+import { DxcBulletedList, DxcFlex, DxcParagraph } from "@dxc-technology/halstack-react";
import QuickNavContainer from "@/common/QuickNavContainer";
import DocFooter from "@/common/DocFooter";
-import anatomy from "./images/chip-anatomy.png";
-import categorization from "./images/chip-categorization.png";
-import searchFilter from "./images/chip-faceted-search-filter.png";
-import states from "./images/chip-states.png";
-import sizeVariants from "./images/chip-size.png";
-import spacing from "./images/chip-spacing.png";
import Image from "@/common/Image";
-import Link from "next/link";
+import anatomy from "./images/chip-anatomy.png";
+import dismissible from "./images/dismissible-chip.png";
+import selectable from "./images/selectable-chip.png";
+import selectableExample from "./images/selectable-example.png";
+import dismissibleExample from "./images/dismissible-example.png";
const sections = [
{
@@ -16,14 +14,14 @@ const sections = [
content: (
<>
- Chips are versatile UI components used to display and manage information in a compact, scannable format. They
- commonly represent selected options, tags, filters, or contextual actions within an interface.
+ Chips help users quickly scan, organize, and interact with content by surfacing relevant items in a clear and
+ lightweight way.
- Chip component supports multiple sizes, optional leading elements (icon or avatar), and an optional action
- icon, while maintaining a consistent structure and interaction model. Clear states, keyboard accessibility,
- and controlled label length ensure the component remains lightweight, reusable, and adaptable across products
- such as filters, forms, and the chatbot experience.
+ They are commonly used to support filtering, categorization, and selection workflows, or to display values
+ generated by user input such as search terms, selected options, or attached items. Chips are typically
+ displayed in groups and are designed to work alongside other interface elements such as inputs, filters, lists
+ and data views, depending on the variant and use case.
),
@@ -35,131 +33,148 @@ const sections = [
- Container : the structural wrapper that holds the chip’s content and defines its visual
- boundaries and spacing. It establishes the chip’s size and layout while remaining informational only.
+ Container : it's the area that holds the chip’s content, defining its shape, size, spacing
+ and interactive states (if applicable) of the component.
- Left Element (Optional) : a leading visual element that adds contextual meaning to
- the chip and helps users quickly recognize its purpose.
+ Left Element : an optional visual element displayed before the label. It can be an icon or
+ an avatar used to provide additional context or help users quickly identify the content.
- Label : the text content inside the chip that identifies and describes the associated item
- or value.
+ Label : displays the textual content of the chip, conveying selection, user input or key
+ filtering data.
- Action Icon (Optional) : a trailing control that enables direct interaction with
- the chip without affecting the container itself.
+ Dismiss action : an action control that allows users to remove the chip from the interface
+ and it’s only present in the dismissible variant of the component.
),
},
{
- title: "Using chips",
+ title: "Variants",
+ content: (
+
+ Depending on how it is used within an interface, the chip component can take two different forms:{" "}
+ selectable chip and dismissible chip . Each variant supports a different
+ interaction pattern and serves a distinct purpose in the interface.
+
+ ),
subSections: [
{
- title: "Categorization",
+ title: "Selectable chip",
content: (
<>
+
- Chips are used to organize and summarize related information such as topics, statuses, or attributes in a
- compact and scannable way. They help users quickly understand key metadata without overwhelming the
- interface.
+ The selectable chip is an interactive element that allows users to{" "}
+ activate or clear options directly within the interface . It is commonly used to filter
+ content, highlight categories or trigger lightweight actions without requiring additional controls such as
+ dropdowns or menus. Selectable chips are typically displayed in groups, allowing users to quickly adjust
+ the information shown on the screen or interact with specific items.
+
- With the redesigned Chip component, categorization chips support consistent sizing, optional leading
- icons, and a clear visual structure while remaining informational and non-interactive. When using chips
- for categorization, ensure labels are concise and relevant to the displayed content to maintain clarity
- and usability.
+ Selectable chips can include an optional left element , which may be either an icon or an
+ avatar, used to visually reinforce the meaning of the chip. Depending on the context, the chip can be
+ displayed in different configurations:
-
+
+ Icon / Avatar + label , when the left element helps reinforce the meaning of the label.
+
+
+ Icon only , when the icon is sufficiently descriptive on its own.
+
+
+ Label only , when additional visual context is not required.
+
+
+
- When used alongside selection or filter controls, chips act as filter facets that allow users to review,
- apply, and remove selected attributes. This enables users to refine results efficiently and maintain
- visibility of their current selections.
+ This flexibility allows selectable chips to adapt to different layouts and levels of visual density. This
+ variant of the chip is often used in situations where users need to quickly explore or organize
+ information without navigating away from the current view.
- In the redesigned Chip component, faceted filter chips support dismissal through the action icon, which is
- the primary interaction point. Clear visual states (hover, focus, active, disabled) help communicate
- interactivity, while optional leading elements (icons or avatars, depending on size){" "}
+ Use cases :
-
+
+ Filtering content within a page , such as refining results in a table, list or dashboard
+
+
+ Segmenting groups of content , for example switching between conversation categories in
+ a messaging interface
+
+
+ Highlighting attributes or tags that help organize large sets of information
+
+
+ Triggering contextual actions , such as marking an item as a favorite or indicating a
+ preference
+
+
+
- Chip component, states are applied to the action icon only, including default, hover, focus, active, and
- disabled. The container remains informational, ensuring interactions are clear, intentional, and
- consistent across use cases.
+ The dismissible chip is used to{" "}
+ represent information generated by user input within an interface . It commonly appears
+ after a user performs an action, such as entering search terms, selecting values from another component or
+ attaching files. In this variant, the chip serves as a visual representation of the input
+ provided by the user.
-
- While{" "}
- badges
- {" "}
- and chips share a similar visual style, they serve different purposes in a user interface:{" "}
- chips are interactive , while badges are static indicators .
+ Unlike selectable chips, dismissible chips are not interactive elements by themselves .
+ Their purpose is to display information that has already been applied or added. The only interactive
+ element in this variant is the dismiss action , which allows users to remove the chip and
+ clear the corresponding value or item.
-
-
-
- Component
- Use case
-
-
-
-
-
- Chip
-
-
- Chips help users categorize, filter, or organize information. They often include keywords or
- metadata, providing quick access to related content and aiding navigation.
-
-
-
-
- Badge
-
-
- Badges function as visual indicators, displaying status or contextual information. They are
- non-interactive and rely on color and text to communicate meaning.
-
-
-
-
-
- ),
- },
- {
- title: "Size variants",
- content: (
- <>
+
- The Chip component is available in three size variants to support different interface densities and use
- cases. Each size follows the same structural pattern while adjusting spacing and supported elements to
- maintain clarity and usability.
+ Dismissible chips always include a label , which describes the value, term, or item being
+ represented. They also include a dismiss action , represented by a close icon, that
+ enables users to remove the chip from the interface. An optional left element , such as an
+ icon or avatar, can be included to provide additional context when needed.
-
+ This variant is typically used in situations where users need to clearly see and manage the values they
+ have entered or selected.
+
+
+
+ Use cases :
+
+
+
+
+ Displaying search terms entered by the user in a search field
+
+
+ Representing applied filters that originate from other components such as selects or
+ filter panels
+
+
+ Showing selected values from inputs such as multi-select fields
+
+
+ Displaying attached items , such as documents or files added to a form or message
+
+
+
+
- Labels should be short and clear , ideally one or two words.
+ Use chips to represent lightweight interactions . Chips should simplify common tasks such
+ as filtering, categorizing or representing input without introducing additional complexity.
- Avoid long text that may cause truncation or wrapping issues.
+ Display chips in groups when possible . Chips are easier to understand when presented
+ alongside related options or values.
- Use sentence case for readability (e.g., "New York" instead of "NEW YORK").
-
-
- Ensure the most important information appears at the beginning of the label, since long labels are
- automatically truncated.
+ Use consistent labeling across chips . When chips appear together, labels should follow
+ the same naming pattern to improve readability and comprehension.
),
},
{
- title: "Avoid overloading the UI with too many chips",
+ title: "Selectable chip",
content: (
- <>
-
-
- Use chips only when necessary to avoid clutter.
-
-
- Group related chips logically and consider collapsible chip groups if the list becomes
- too long.
-
-
-
- Chip component may include one leading informational icon (or avatar) and{" "}
- one action icon . Using multiple informational icons or multiple action icons within the
- same chip is not supported.
-
-
-
- Informational icons should add value to the chip, such as status or category.
-
-
- The action icon should clearly communicate its purpose (e.g., remove or clear).
-
-
- Icons should be easy to recognize and not compete for attention.
-
-
- Follow the guideline: one informational element + one action icon (if needed) .
-
-
-
+
+
+ Use selectable chips for lightweight filtering or categorization . They are most effective
+ when helping users quickly refine or organize visible content.
+
+
+ Group related chips together . Selectable chips should usually appear in clusters that
+ represent related categories or options.
+
+
+ Avoid using selectable chips for mutually exclusive options with strict selection rules .
+ In cases where one option must always remain selected, the correct component to use is our toggle group.
+
+
+ Use icons or avatars only when they add meaningful context . Decorative elements should
+ reinforce the meaning of the chip rather than duplicate the label.
+
+
),
},
{
- title: "Manage chip overflow gracefully",
+ title: "Dismissible chip",
content: (
- When displaying many chips, consider wrapping or horizontal scrolling depending on layout
- constraints.
+ Use dismissible chips to represent user-generated input . They should display values that
+ the user has entered, selected or added through other components.
+
+
+ Always provide a clear and accessible dismiss action . Users should be able to easily
+ remove chips when they want to clear a value or undo an action.
+
+
+ Ensure the label clearly represents the value or item . The label should make it easy for
+ users to understand what information the chip represents.
+
+
+ Place dismissible chips close to the input that generated them . This helps users
+ understand the relationship between the chip and the original action.
- For dynamic or long lists, provide a "Show more" or similar mechanism to prevent visual
- clutter.
+ Use icons or avatars only when they provide additional context . For example, icons can
+ help represent file types, categories or other recognizable items.
),
diff --git a/apps/website/screens/components/chip/overview/images/chip-anatomy.png b/apps/website/screens/components/chip/overview/images/chip-anatomy.png
index 17e34efd0c..0e9be2a22f 100644
Binary files a/apps/website/screens/components/chip/overview/images/chip-anatomy.png and b/apps/website/screens/components/chip/overview/images/chip-anatomy.png differ
diff --git a/apps/website/screens/components/chip/overview/images/chip-categorization.png b/apps/website/screens/components/chip/overview/images/chip-categorization.png
deleted file mode 100644
index 233f45c6b6..0000000000
Binary files a/apps/website/screens/components/chip/overview/images/chip-categorization.png and /dev/null differ
diff --git a/apps/website/screens/components/chip/overview/images/chip-faceted-search-filter.png b/apps/website/screens/components/chip/overview/images/chip-faceted-search-filter.png
deleted file mode 100644
index 043b3f6e31..0000000000
Binary files a/apps/website/screens/components/chip/overview/images/chip-faceted-search-filter.png and /dev/null differ
diff --git a/apps/website/screens/components/chip/overview/images/chip-size.png b/apps/website/screens/components/chip/overview/images/chip-size.png
deleted file mode 100644
index 7e0d8411d0..0000000000
Binary files a/apps/website/screens/components/chip/overview/images/chip-size.png and /dev/null differ
diff --git a/apps/website/screens/components/chip/overview/images/chip-spacing.png b/apps/website/screens/components/chip/overview/images/chip-spacing.png
deleted file mode 100644
index 1e1d4d5806..0000000000
Binary files a/apps/website/screens/components/chip/overview/images/chip-spacing.png and /dev/null differ
diff --git a/apps/website/screens/components/chip/overview/images/chip-states.png b/apps/website/screens/components/chip/overview/images/chip-states.png
deleted file mode 100644
index 80c102e0bc..0000000000
Binary files a/apps/website/screens/components/chip/overview/images/chip-states.png and /dev/null differ
diff --git a/apps/website/screens/components/chip/overview/images/dismissible-chip.png b/apps/website/screens/components/chip/overview/images/dismissible-chip.png
new file mode 100644
index 0000000000..3bd6db5f16
Binary files /dev/null and b/apps/website/screens/components/chip/overview/images/dismissible-chip.png differ
diff --git a/apps/website/screens/components/chip/overview/images/dismissible-example.png b/apps/website/screens/components/chip/overview/images/dismissible-example.png
new file mode 100644
index 0000000000..ea1988d337
Binary files /dev/null and b/apps/website/screens/components/chip/overview/images/dismissible-example.png differ
diff --git a/apps/website/screens/components/chip/overview/images/selectable-chip.png b/apps/website/screens/components/chip/overview/images/selectable-chip.png
new file mode 100644
index 0000000000..e966057d50
Binary files /dev/null and b/apps/website/screens/components/chip/overview/images/selectable-chip.png differ
diff --git a/apps/website/screens/components/chip/overview/images/selectable-example.png b/apps/website/screens/components/chip/overview/images/selectable-example.png
new file mode 100644
index 0000000000..1c9c2b2c31
Binary files /dev/null and b/apps/website/screens/components/chip/overview/images/selectable-example.png differ
diff --git a/packages/lib/src/chip/Chip.accessibility.test.tsx b/packages/lib/src/chip/Chip.accessibility.test.tsx
index eeb66ee5aa..c132a5832a 100644
--- a/packages/lib/src/chip/Chip.accessibility.test.tsx
+++ b/packages/lib/src/chip/Chip.accessibility.test.tsx
@@ -27,14 +27,22 @@ c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.11
describe("Chip component accessibility tests", () => {
it("Should not have basic accessibility issues", async () => {
- const { container } = render(;
-const iconSVG = (
-
-
-
-
-);
-
const smallIconSVG = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
- console.log("action clicked") }} />
-
-
- console.log("action clicked") }}
- />
-
-
-
-
- console.log("action clicked") }}
- 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"
- />
-
-
-
-
- console.log("action clicked") }}
- 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"
- />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- {} }} prefix={{ color: "primary" }} />
+
+
-
- {} }} prefix={{ color: "primary" }} />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- {} }} prefix={{ color: "primary" }} />
+
+
+
+ console.log("Dismissible chip")}
+ />
+ console.log("Dismissible chip")}
+ />
+ console.log("Dismissible chip")} />
+
-
- {} }} prefix={{ color: "primary" }} />
+
+
+
+
+
+
+
+
+
+
+
+ console.log("Dismissible chip")}
+ />
+ console.log("Dismissible chip")}
+ />
+ console.log("Dismissible chip")}
+ />
+
-
- {} }}
- prefix={{ color: "primary" }}
- disabled
- />
+
+
-
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+
-
-
+ console.log("Dismissible chip")}
+ />
+
-
-
+ console.log("Dismissible chip")}
+ />
+
-
-);
-const ChipTooltip = () => (
- <>
-
- {}, title: "Delete" }}
- prefix={{ color: "primary" }}
- />
+
+ console.log("Dismissible chip")}
+ />
+
);
@@ -209,16 +252,3 @@ type Story = StoryObj;
export const Chromatic: Story = {
render: Chip,
};
-
-export const Tooltip: Story = {
- render: ChipTooltip,
- play: async ({ canvasElement }) => {
- const canvas = within(canvasElement);
- const chipLabel = await canvas.findByText("Default with tooltip and very long text");
- await userEvent.hover(chipLabel);
-
- const documentCanvas = within(document.body);
- await documentCanvas.findByRole("tooltip");
- },
- parameters: { chromatic: { delay: 5000 } },
-};
diff --git a/packages/lib/src/chip/Chip.test.tsx b/packages/lib/src/chip/Chip.test.tsx
index c81230be54..a5d3f2178e 100644
--- a/packages/lib/src/chip/Chip.test.tsx
+++ b/packages/lib/src/chip/Chip.test.tsx
@@ -11,21 +11,72 @@ describe("Chip component tests", () => {
const avatar = getByRole("img", { hidden: true });
expect(avatar).toBeTruthy();
});
+ test("Chip renders correctly with custom SVG prefix", () => {
+ const customSVG = (
+
+
+ );
+ const { getByRole } = render(
+
+ );
+ }
+
+ if (isAvatarType(prefix)) {
+ return (
+ {prefix} : undefined;
};
-const DxcChip = ({ action, disabled = false, label, margin, prefix, size = "medium", tabIndex = 0 }: ChipPropsType) => {
- const labelRef = useRef(null);
- const [isTruncated, setIsTruncated] = useState(true);
+const DxcChip = ({
+ disabled = false,
+ label,
+ mode = "selectable",
+ onClick,
+ prefix,
+ selected,
+ tabIndex = 0,
+}: ChipPropsType) => {
+ const [innerSelected, setInnerSelected] = useState(false);
+
+ if (mode === "selectable" && isAvatarType(prefix) && !label) {
+ return null;
+ }
- useEffect(() => {
- const handleEllipsisCheck = () => {
- setIsTruncated(checkEllipsis(labelRef.current));
- };
+ const handleSelectableClick = () => {
+ if (selected == null) {
+ setInnerSelected((prev) => !prev);
+ }
+ onClick?.();
+ };
- handleEllipsisCheck();
- window.addEventListener("resize", handleEllipsisCheck);
- return () => window.removeEventListener("resize", handleEllipsisCheck);
- }, []);
+ const isSelected = selected ?? innerSelected;
return (
-
- {prefix &&
- (typeof prefix === "string" ? (
-
-
- ) : isAvatarType(prefix) && size !== "small" ? (
- {prefix}
- ))}
-
- {label && (
-
-
- {label}
-
-
- )}
+
+
+ {prefix && renderPrefix(prefix, disabled)}
+ {label && {label} }
+
- {action && (
+ {mode === "dismissible" && (
diff --git a/packages/lib/src/chip/types.ts b/packages/lib/src/chip/types.ts
index 7400c2a308..24b9db08a2 100644
--- a/packages/lib/src/chip/types.ts
+++ b/packages/lib/src/chip/types.ts
@@ -1,61 +1,85 @@
-import { Margin, SVG, Space } from "../common/utils";
+import { SVG } from "../common/utils";
import AvatarProps from "../avatar/types";
-type Size = "small" | "medium" | "large";
export type ChipAvatarType = {
color: AvatarProps["color"];
profileName?: AvatarProps["label"];
imageSrc?: AvatarProps["imageSrc"];
icon?: AvatarProps["icon"];
};
-type Action = {
- /**
- * Icon to be placed in the action.
- */
- icon: string | SVG;
+
+type CommonProps = {
/**
- * This function will be called when the user clicks the action.
+ * Function to be called when the chip is clicked or the dismiss action is triggered.
*/
- onClick: () => void;
+ onClick?: () => void;
/**
- * Text representing advisory information related
- * to the button's action. Under the hood, this prop also serves
- * as an accessible label for the component.
+ * Value of the tabindex attribute.
*/
- title?: string;
+ tabIndex?: number;
};
-type Props = {
- /**
- * Action to be displayed on the right side of the chip after the label.
- */
- action?: Action;
+type SelectableChipProps = CommonProps & {
/**
* If true, the component will be disabled.
*/
disabled?: boolean;
/**
- * Text to be placed on the chip.
+ * The whole chip is an interactive element that allows users to activate or clear options directly within the interface.
*/
- label: string;
+ mode?: "selectable";
/**
- * 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.
+ * If true, the component will be selected. This property is only applicable when the mode is "selectable".
+ * If undefined, the component manages its own internal state (uncontrolled mode).
*/
- margin?: Space | Margin;
+ selected?: boolean;
+} & (
+ | {
+ /**
+ * Element, path or avatar used as icon to be placed before the chip label.
+ */
+ prefix: ChipAvatarType;
+ /**
+ * Text to be placed on the chip. Required when using an avatar prefix.
+ */
+ label: string;
+ }
+ | {
+ /**
+ * Element or path used as icon to be placed before the chip label.
+ */
+ prefix: string | SVG;
+ /**
+ * Text to be placed on the chip. Optional when using an icon prefix.
+ */
+ label?: string;
+ }
+ | {
+ prefix?: undefined;
+ /**
+ * Text to be placed on the chip.
+ */
+ label: string;
+ }
+ );
+
+type DismissibleChipProps = CommonProps & {
/**
- * Element, path or avatar used as icon to be placed before the chip label.
+ * Dismissible chip is used to represent information generated by user input within an interface.
*/
- prefix?: string | SVG | ChipAvatarType;
+ mode: "dismissible";
/**
- * Size of the component.
+ * Text to be placed on the chip.
*/
- size?: Size;
-
+ label: string;
/**
- * Value of the tabindex attribute.
+ * Element, path or avatar used as icon to be placed before the chip label.
*/
- tabIndex?: number;
+ prefix?: string | SVG | ChipAvatarType;
+ selected?: never;
+ disabled?: never;
};
+type Props = SelectableChipProps | DismissibleChipProps;
+
export default Props;
diff --git a/packages/lib/src/chip/utils.ts b/packages/lib/src/chip/utils.ts
new file mode 100644
index 0000000000..adbb9804d4
--- /dev/null
+++ b/packages/lib/src/chip/utils.ts
@@ -0,0 +1,59 @@
+import ChipPropsType from "./types";
+
+export const getChipStyles = (mode: ChipPropsType["mode"], selected?: boolean) => {
+ let enabled = "";
+ let hover = "";
+ let active = "";
+ let disabled = "";
+
+ const commonStyles = `
+ &:focus {
+ border-color: transparent;
+ outline: var(--border-width-m) var(--border-style-default) var(--border-color-secondary-medium);
+ }`;
+
+ switch (mode) {
+ case "selectable":
+ if (selected) {
+ enabled = `background-color: var(--color-bg-primary-strong);
+ border-color: transparent;
+ color: var(--color-fg-neutral-bright);`;
+ hover = `background-color: var(--color-bg-primary-stronger);`;
+ active = `background-color: var(--color-bg-primary-stronger);`;
+ disabled = `background-color: var(--color-bg-neutral-lighter);
+ border-color: var(--border-color-neutral-medium);
+ color: var(--color-fg-neutral-medium);
+ cursor: not-allowed;`;
+ } else {
+ enabled = `background-color: var(--color-bg-primary-lightest);
+ border-color: var(--border-color-primary-stronger);
+ color: var(--color-fg-primary-strongest);`;
+ hover = `background-color: var(--color-bg-primary-strong);
+ border-color: transparent;
+ color: var(--color-fg-neutral-bright);`;
+ active = `background-color: var(--color-bg-primary-stronger);
+ border-color: transparent;
+ color: var(--color-fg-neutral-bright);`;
+ disabled = `background-color: var(--color-bg-neutral-lighter);
+ border-color: var(--border-color-neutral-medium);
+ color: var(--color-fg-neutral-medium);
+ cursor: not-allowed;`;
+ }
+ return `${commonStyles}
+ ${enabled}
+ &:hover:enabled {
+ ${hover}
+ }
+ &:active:enabled {
+ ${active}
+ }
+ &:disabled {
+ ${disabled}
+ }`;
+ case "dismissible":
+ enabled = `background-color: var(--color-bg-primary-lightest);
+ border-color: var(--border-color-neutral-lighter);
+ color: var(--color-fg-neutral-strongest);`;
+ return `${enabled}`;
+ }
+};