From 3f749e50d459ab11b4c5dbc00b03484bf1c6596a Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Fri, 3 Oct 2025 08:52:20 +0200 Subject: [PATCH 1/4] Changed badge API to allow new semantic colors --- .../src/badge/Badge.accessibility.test.tsx | 14 +- packages/lib/src/badge/Badge.stories.tsx | 120 +++++++++++------- packages/lib/src/badge/Badge.tsx | 36 +++--- packages/lib/src/badge/types.ts | 2 +- 4 files changed, 99 insertions(+), 73 deletions(-) diff --git a/packages/lib/src/badge/Badge.accessibility.test.tsx b/packages/lib/src/badge/Badge.accessibility.test.tsx index 1d2bf440ed..10973058fe 100644 --- a/packages/lib/src/badge/Badge.accessibility.test.tsx +++ b/packages/lib/src/badge/Badge.accessibility.test.tsx @@ -15,13 +15,13 @@ describe("Badge component accessibility tests", () => { it("Should not have basic accessibility issues for contextual mode", async () => { const { container } = render( - - - - - - - + + + + + + + ); const results = await axe(container); diff --git a/packages/lib/src/badge/Badge.stories.tsx b/packages/lib/src/badge/Badge.stories.tsx index a27a984443..c262cec793 100644 --- a/packages/lib/src/badge/Badge.stories.tsx +++ b/packages/lib/src/badge/Badge.stories.tsx @@ -54,158 +54,180 @@ const Badge = () => ( - <Title title="Grey" theme="light" level={3} /> + <Title title="Primary" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge label="Label" size="small" /> - <DxcBadge label="Label" size="small" icon={icon} /> + <DxcBadge color="primary" label="Label" size="small" /> + <DxcBadge color="primary" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge label="Label" /> - <DxcBadge label="Label" icon="done" /> + <DxcBadge color="primary" label="Label" /> + <DxcBadge color="primary" label="Label" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge label="Label" size="large" /> - <DxcBadge label="Label" size="large" icon="done" /> + <DxcBadge color="primary" label="Label" size="large" /> + <DxcBadge color="primary" label="Label" size="large" icon={icon} /> </DxcFlex> </ExampleContainer> - <Title title="Blue" theme="light" level={3} /> + <Title title="Secondary" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="blue" label="Label" size="small" /> - <DxcBadge color="blue" label="Label" size="small" icon="done" /> + <DxcBadge color="secondary" label="Label" size="small" /> + <DxcBadge color="secondary" label="Label" size="small" icon="done" /> + </DxcFlex> + <ExampleContainer> + <Title title="Medium" theme="light" level={4} /> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> + <DxcBadge color="secondary" label="Label" /> + <DxcBadge color="secondary" label="Label" icon={icon} /> + </DxcFlex> + </ExampleContainer> + <ExampleContainer> + <Title title="Large" theme="light" level={4} /> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> + <DxcBadge color="secondary" label="Label" size="large" /> + <DxcBadge color="secondary" label="Label" size="large" icon={icon} /> + </DxcFlex> + </ExampleContainer> + </ExampleContainer> + <Title title="Tertiary" theme="light" level={3} /> + <ExampleContainer> + <Title title="Small" theme="light" level={4} /> + <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> + <DxcBadge color="tertiary" label="Label" size="small" /> + <DxcBadge color="tertiary" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="blue" label="Label" /> - <DxcBadge color="blue" label="Label" icon={icon} /> + <DxcBadge color="tertiary" label="Label" /> + <DxcBadge color="tertiary" label="Label" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="blue" label="Label" size="large" /> - <DxcBadge color="blue" label="Label" size="large" icon={icon} /> + <DxcBadge color="tertiary" label="Label" size="large" /> + <DxcBadge color="tertiary" label="Label" size="large" icon="done" /> </DxcFlex> </ExampleContainer> - <Title title="Green" theme="light" level={3} /> + <Title title="Success" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="green" label="Label" size="small" /> - <DxcBadge color="green" label="Label" size="small" icon="done" /> + <DxcBadge color="success" label="Label" size="small" /> + <DxcBadge color="success" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="green" label="Label" /> - <DxcBadge color="green" label="Label" icon="done" /> + <DxcBadge color="success" label="Label" /> + <DxcBadge color="success" label="Label" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="green" label="Label" size="large" /> - <DxcBadge color="green" label="Label" size="large" icon={icon} /> + <DxcBadge color="success" label="Label" size="large" /> + <DxcBadge color="success" label="Label" size="large" icon={icon} /> </DxcFlex> </ExampleContainer> - <Title title="Orange" theme="light" level={3} /> + <Title title="Info" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="orange" label="Label" size="small" /> - <DxcBadge color="orange" label="Label" size="small" icon="done" /> + <DxcBadge color="info" label="Label" size="small" /> + <DxcBadge color="info" label="Label" size="small" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="orange" label="Label" /> - <DxcBadge color="orange" label="Label" icon={icon} /> + <DxcBadge color="info" label="Label" /> + <DxcBadge color="info" label="Label" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="orange" label="Label" size="large" /> - <DxcBadge color="orange" label="Label" size="large" icon={icon} /> + <DxcBadge color="info" label="Label" size="large" /> + <DxcBadge color="info" label="Label" size="large" icon={icon} /> </DxcFlex> </ExampleContainer> - <Title title="Red" theme="light" level={3} /> + <Title title="Neutral" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="red" label="Label" size="small" /> - <DxcBadge color="red" label="Label" size="small" icon="done" /> + <DxcBadge label="Label" size="small" /> + <DxcBadge label="Label" size="small" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="red" label="Label" /> - <DxcBadge color="red" label="Label" icon="done" /> + <DxcBadge label="Label" /> + <DxcBadge label="Label" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="red" label="Label" size="large" /> - <DxcBadge color="red" label="Label" size="large" icon={icon} /> + <DxcBadge label="Label" size="large" /> + <DxcBadge label="Label" size="large" icon="done" /> </DxcFlex> </ExampleContainer> - <Title title="Yellow" theme="light" level={3} /> + <Title title="Warning" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="yellow" label="Label" size="small" /> - <DxcBadge color="yellow" label="Label" size="small" icon="done" /> + <DxcBadge color="warning" label="Label" size="small" /> + <DxcBadge color="warning" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="yellow" label="Label" /> - <DxcBadge color="yellow" label="Label" icon={icon} /> + <DxcBadge color="warning" label="Label" /> + <DxcBadge color="warning" label="Label" icon={icon} /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="yellow" label="Label" size="large" /> - <DxcBadge color="yellow" label="Label" size="large" icon="done" /> + <DxcBadge color="warning" label="Label" size="large" /> + <DxcBadge color="warning" label="Label" size="large" icon={icon} /> </DxcFlex> </ExampleContainer> - <Title title="Purple" theme="light" level={3} /> + <Title title="Error" theme="light" level={3} /> <ExampleContainer> <Title title="Small" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="purple" label="Label" size="small" /> - <DxcBadge color="purple" label="Label" size="small" icon="done" /> + <DxcBadge color="error" label="Label" size="small" /> + <DxcBadge color="error" label="Label" size="small" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Medium" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="purple" label="Label" /> - <DxcBadge color="purple" label="Label" icon={icon} /> + <DxcBadge color="error" label="Label" /> + <DxcBadge color="error" label="Label" icon="done" /> </DxcFlex> </ExampleContainer> <ExampleContainer> <Title title="Large" theme="light" level={4} /> <DxcFlex gap="var(--spacing-gap-xl)" alignItems="center"> - <DxcBadge color="purple" label="Label" size="large" /> - <DxcBadge color="purple" label="Label" size="large" icon={icon} /> + <DxcBadge color="error" label="Label" size="large" /> + <DxcBadge color="error" label="Label" size="large" icon={icon} /> </DxcFlex> </ExampleContainer> </> diff --git a/packages/lib/src/badge/Badge.tsx b/packages/lib/src/badge/Badge.tsx index 2e9d4039bf..cdcb0e8926 100644 --- a/packages/lib/src/badge/Badge.tsx +++ b/packages/lib/src/badge/Badge.tsx @@ -4,34 +4,38 @@ import DxcIcon from "../icon/Icon"; import { Tooltip } from "../tooltip/Tooltip"; const contextualColorMap = { - grey: { - background: "var(--color-bg-neutral-light)", - text: "var(--color-fg-neutral-strongest)", + primary: { + background: "var(--color-bg-primary-lighter)", + text: "var(--color-fg-primary-stronger)", }, - blue: { + secondary: { background: "var(--color-bg-secondary-lighter)", text: "var(--color-fg-secondary-stronger)", }, - green: { + tertiary: { + background: "var(--color-bg-yellow-light)", + text: "var(--color-fg-neutral-yellow-dark)", + }, + success: { background: "var(--color-bg-success-lighter)", text: "var(--color-fg-success-stronger)", }, - orange: { + info: { + background: "var(--color-bg-info-lighter)", + text: "var(--color-fg-info-stronger)", + }, + neutral: { + background: "var(--color-bg-neutral-light)", + text: "var(--color-fg-neutral-strongest)", + }, + warning: { background: "var(--color-bg-warning-lighter)", text: "var(--color-fg-warning-stronger)", }, - red: { + error: { background: "var(--color-bg-error-lighter)", text: "var(--color-fg-error-stronger)", }, - yellow: { - background: "var(--color-bg-yellow-light)", - text: "var(--color-fg-neutral-yellow-dark)", - }, - purple: { - background: "var(--color-bg-primary-lighter)", - text: "var(--color-fg-primary-stronger)", - }, }; const notificationColor = { @@ -136,7 +140,7 @@ const DxcBadge = ({ label, title, mode = "contextual", - color = "grey", + color = "neutral", icon, notificationLimit = 99, size = "medium", diff --git a/packages/lib/src/badge/types.ts b/packages/lib/src/badge/types.ts index 5a16f89cff..d9c3b7c59b 100644 --- a/packages/lib/src/badge/types.ts +++ b/packages/lib/src/badge/types.ts @@ -16,7 +16,7 @@ export type ContextualProps = { /** * Affects the visual style of the badge. It can be used following semantic purposes or not. */ - color?: "grey" | "blue" | "green" | "orange" | "red" | "yellow" | "purple"; + color?: "primary" | "secondary" | "tertiary" | "success" | "info" | "neutral" | "warning" | "error"; }; export type NotificationProps = { From bedca485e6a88ae822910dfaf96470926ce90699 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 3 Oct 2025 09:26:32 +0200 Subject: [PATCH 2/4] Updated badges color to meet new API --- apps/website/screens/common/StatusBadge.tsx | 12 +++++----- .../screens/common/sidenav/SidenavLogo.tsx | 2 +- .../accordion/code/examples/accordions.tsx | 6 ++--- .../code/examples/badgeStatusLight.tsx | 2 +- .../overview/AccordionOverviewPage.tsx | 4 ++-- .../overview/examples/basicExample.tsx | 2 +- .../components/badge/code/BadgeCodePage.tsx | 6 +++-- .../badge/code/examples/contextual.tsx | 12 +++++----- .../components/badge/code/examples/icons.tsx | 12 +++++----- .../badge/overview/BadgeOverviewPage.tsx | 11 +++++---- .../badge/overview/examples/contextual.tsx | 24 +++++++++---------- .../button/overview/ButtonOverviewPage.tsx | 16 ++++++------- .../code/examples/navigationMenu.tsx | 2 +- .../overview/examples/stacking.tsx | 2 +- .../screens/foundations/color/ColorPage.tsx | 14 +++++++---- .../lib/src/accordion/Accordion.stories.tsx | 18 +++++++------- .../ContextualMenu.accessibility.test.tsx | 4 ++-- .../ContextualMenu.stories.tsx | 10 ++++---- 18 files changed, 83 insertions(+), 76 deletions(-) diff --git a/apps/website/screens/common/StatusBadge.tsx b/apps/website/screens/common/StatusBadge.tsx index 36eff8b262..6a1e30a646 100644 --- a/apps/website/screens/common/StatusBadge.tsx +++ b/apps/website/screens/common/StatusBadge.tsx @@ -9,17 +9,17 @@ type StatusBadgeProps = { const getBadgeColor = (status: StatusBadgeProps["status"]) => { switch (status) { case "required": - return "orange"; + return "warning"; case "experimental": - return "blue"; + return "secondary"; case "new": - return "purple"; + return "primary"; case "stable": - return "green"; + return "success"; case "legacy": - return "yellow"; + return "tertiary"; default: - return "grey"; + return "neutral"; } }; diff --git a/apps/website/screens/common/sidenav/SidenavLogo.tsx b/apps/website/screens/common/sidenav/SidenavLogo.tsx index acaa8d2073..8be159388f 100644 --- a/apps/website/screens/common/sidenav/SidenavLogo.tsx +++ b/apps/website/screens/common/sidenav/SidenavLogo.tsx @@ -42,7 +42,7 @@ const SidenavLogo = ({ subtitle = "Design System" }: { subtitle?: string }) => { <Subtitle>{subtitle}</Subtitle> </LogoContainer> <DxcBadge - color="purple" + color="primary" label={isDev ? "dev" : pathVersion === "next" ? pathVersion : `v${pathVersion}`} size="small" /> diff --git a/apps/website/screens/components/accordion/code/examples/accordions.tsx b/apps/website/screens/components/accordion/code/examples/accordions.tsx index ff6402a32b..28fe9f6f47 100644 --- a/apps/website/screens/components/accordion/code/examples/accordions.tsx +++ b/apps/website/screens/components/accordion/code/examples/accordions.tsx @@ -7,7 +7,7 @@ const code = `() => { <DxcAccordion independent={false} defaultIndexActive={[0, 2]}> <DxcAccordion.AccordionItem label="Find a person" - badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }} + badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }} statusLight={<DxcStatusLight label="Active" mode="success" />} > <DxcInset space="var(--spacing-padding-l)"> @@ -17,7 +17,7 @@ const code = `() => { <DxcAccordion.AccordionItem label="Create a person" assistiveText="Provide all required info" - badge={{ position: "before", element: <DxcBadge label="POST" color="blue" /> }} + badge={{ position: "before", element: <DxcBadge label="POST" color="secondary" /> }} defaultIsExpanded > <DxcInset space="var(--spacing-padding-l)"> @@ -26,7 +26,7 @@ const code = `() => { </DxcAccordion.AccordionItem> <DxcAccordion.AccordionItem label="Find interactions" - badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="yellow" /> }} + badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="tertiary" /> }} statusLight={<DxcStatusLight label="Active" mode="warning" />} defaultIsExpanded > diff --git a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx index ca034c1f25..cc09cdc7c8 100644 --- a/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx +++ b/apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx @@ -7,7 +7,7 @@ const code = `() => { <DxcAccordion.AccordionItem label="GET request" subLabel="Jan, 20 2025" - badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }} + badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }} statusLight={<DxcStatusLight label="Active" mode="success" />} > <DxcInset space="var(--spacing-padding-l)"> diff --git a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx index d25c10ce42..7835c3baee 100644 --- a/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx +++ b/apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx @@ -256,8 +256,8 @@ const sections = [ Always prioritize the visibility of mandatory elements like the title over optional elements. </DxcBulletedList.Item> <DxcBulletedList.Item> - If both a badge and a status light are present, avoid applying semantic colors (e.g., red, green) to the - badge to prevent visual conflict with the status indicator. + If both a badge and a status light are present, avoid applying semantic colors to the badge to prevent + visual conflict with the status indicator. </DxcBulletedList.Item> <DxcBulletedList.Item> Maintain consistency in layout and alignment to support content scanning, especially when multiple diff --git a/apps/website/screens/components/accordion/overview/examples/basicExample.tsx b/apps/website/screens/components/accordion/overview/examples/basicExample.tsx index 0938258142..be7d6eb7ac 100644 --- a/apps/website/screens/components/accordion/overview/examples/basicExample.tsx +++ b/apps/website/screens/components/accordion/overview/examples/basicExample.tsx @@ -48,7 +48,7 @@ const code = `() => { </DxcAccordion> <DxcAccordion> <DxcAccordion.AccordionItem - badge={{ position: "after", element: <DxcBadge label="Enterprise" icon="filled_stars" color="yellow" /> }} + badge={{ position: "after", element: <DxcBadge label="Enterprise" icon="filled_stars" color="tertiary" /> }} label="Life Policy" subLabel="Ref — 1236554546" > diff --git a/apps/website/screens/components/badge/code/BadgeCodePage.tsx b/apps/website/screens/components/badge/code/BadgeCodePage.tsx index 4ecb5b374c..0c8b3be9b8 100644 --- a/apps/website/screens/components/badge/code/BadgeCodePage.tsx +++ b/apps/website/screens/components/badge/code/BadgeCodePage.tsx @@ -24,11 +24,13 @@ const sections = [ <tr> <td>color</td> <td> - <TableCode>'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple'</TableCode> + <TableCode> + 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'neutral' | 'warning' | 'error' + </TableCode> </td> <td>Affects the visual style of the badge. It can be used following semantic purposes or not.</td> <td> - <TableCode>'grey'</TableCode> + <TableCode>'neutral'</TableCode> </td> </tr> <tr> diff --git a/apps/website/screens/components/badge/code/examples/contextual.tsx b/apps/website/screens/components/badge/code/examples/contextual.tsx index 058353dc0a..b5d1120bc6 100644 --- a/apps/website/screens/components/badge/code/examples/contextual.tsx +++ b/apps/website/screens/components/badge/code/examples/contextual.tsx @@ -6,12 +6,12 @@ const code = `() => { <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex gap="var(--spacing-gap-xl)" wrap="wrap"> <DxcBadge label="Authorized" /> - <DxcBadge label="Reserved" color="blue" /> - <DxcBadge label="Ready" color="green" /> - <DxcBadge label="Pending" color="orange" /> - <DxcBadge label="Unfulfilled" color="red" /> - <DxcBadge label="Paid" color="yellow" /> - <DxcBadge label="Restocked" color="purple" /> + <DxcBadge label="Reserved" color="secondary" /> + <DxcBadge label="Ready" color="success" /> + <DxcBadge label="Pending" color="warning" /> + <DxcBadge label="Unfulfilled" color="error" /> + <DxcBadge label="Paid" color="tertiary" /> + <DxcBadge label="Restocked" color="primary" /> </DxcFlex> </DxcInset> ); diff --git a/apps/website/screens/components/badge/code/examples/icons.tsx b/apps/website/screens/components/badge/code/examples/icons.tsx index 389e2f973c..67a03ac109 100644 --- a/apps/website/screens/components/badge/code/examples/icons.tsx +++ b/apps/website/screens/components/badge/code/examples/icons.tsx @@ -20,12 +20,12 @@ const code = `() => { <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex gap="var(--spacing-gap-xl)" wrap="wrap"> <DxcBadge label="Authorized" icon={icon} /> - <DxcBadge label="Reserved" color="blue" icon={icon} /> - <DxcBadge label="Ready" color="green" icon={icon} /> - <DxcBadge label="Pending" color="orange" icon={icon} /> - <DxcBadge label="Unfulfilled" color="red" icon="error" /> - <DxcBadge label="Paid" color="yellow" icon="euro" /> - <DxcBadge label="Restocked" color="purple" icon="refresh" /> + <DxcBadge label="Reserved" color="secondary" icon={icon} /> + <DxcBadge label="Ready" color="success" icon={icon} /> + <DxcBadge label="Pending" color="warning" icon={icon} /> + <DxcBadge label="Unfulfilled" color="error" icon="error" /> + <DxcBadge label="Paid" color="tertiary" icon="euro" /> + <DxcBadge label="Restocked" color="primary" icon="refresh" /> </DxcFlex> </DxcInset> ); diff --git a/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx index f607c7093a..7874e9f6d7 100644 --- a/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx +++ b/apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx @@ -64,7 +64,8 @@ const sections = [ have been made to a certain section of the interface. </DxcParagraph> <DxcParagraph> - Only one color is allowed for this badge, which is red, and cannot be changed by any means. + Only one color is allowed for this badge, which is the semantic error (generally red), and cannot be + changed by any means. </DxcParagraph> </> ), @@ -94,14 +95,14 @@ const sections = [ colors are available: <DxcBulletedList type="circle"> <DxcBulletedList.Item> - Green: positive actions, such as approved, completed, success... + Success: positive actions, such as approved, completed, success... </DxcBulletedList.Item> - <DxcBulletedList.Item>Blue: informative actions, such as published, in use...</DxcBulletedList.Item> + <DxcBulletedList.Item>Info: informative actions, such as published, in use...</DxcBulletedList.Item> <DxcBulletedList.Item> - Red: negative actions, such as error, rejection, incomplete... + Warning: alert actions, such as pending or paused actions... </DxcBulletedList.Item> <DxcBulletedList.Item> - Orange: alert actions, such as pending or paused actions... + Error: negative actions, such as error, rejection, incomplete... </DxcBulletedList.Item> </DxcBulletedList> </DxcBulletedList.Item> diff --git a/apps/website/screens/components/badge/overview/examples/contextual.tsx b/apps/website/screens/components/badge/overview/examples/contextual.tsx index 0fe4b0c6d3..5a2475e7e6 100644 --- a/apps/website/screens/components/badge/overview/examples/contextual.tsx +++ b/apps/website/screens/components/badge/overview/examples/contextual.tsx @@ -6,21 +6,21 @@ const code = `() => { <DxcInset space="var(--spacing-padding-xl)"> <DxcFlex gap="var(--spacing-gap-xl)" direction="column"> <DxcFlex gap="var(--spacing-gap-xl)" justifyContent="space-evenly"> - <DxcBadge label="Label" color="green" icon="info" /> - <DxcBadge label="Label" color="blue" icon="info" /> - <DxcBadge label="Label" color="red" icon="info" /> - <DxcBadge label="Label" color="orange" icon="info" /> - <DxcBadge label="Label" color="yellow" icon="info" /> - <DxcBadge label="Label" color="purple" icon="info" /> + <DxcBadge label="Label" color="success" icon="info" /> + <DxcBadge label="Label" color="info" icon="info" /> + <DxcBadge label="Label" color="error" icon="info" /> + <DxcBadge label="Label" color="warning" icon="info" /> + <DxcBadge label="Label" color="tertiary" icon="info" /> + <DxcBadge label="Label" color="primary" icon="info" /> <DxcBadge label="Label" icon="info" /> </DxcFlex> <DxcFlex gap="var(--spacing-gap-xl)" justifyContent="space-evenly"> - <DxcBadge label="Label" color="green" /> - <DxcBadge label="Label" color="blue" /> - <DxcBadge label="Label" color="red" /> - <DxcBadge label="Label" color="orange" /> - <DxcBadge label="Label" color="yellow" /> - <DxcBadge label="Label" color="purple" /> + <DxcBadge label="Label" color="success" /> + <DxcBadge label="Label" color="info" /> + <DxcBadge label="Label" color="error" /> + <DxcBadge label="Label" color="warning" /> + <DxcBadge label="Label" color="tertiary" /> + <DxcBadge label="Label" color="primary" /> <DxcBadge label="Label" /> </DxcFlex> </DxcFlex> diff --git a/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx b/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx index 45a9347131..5eca38f50e 100644 --- a/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx +++ b/apps/website/screens/components/button/overview/ButtonOverviewPage.tsx @@ -168,8 +168,8 @@ const sections = [ </DxcTypography> </td> <td> - Indicates a destructive action or highlights a critical issue. Styled in red. Use for actions like - "Delete", "Remove" or "Cancel Subscription.". + Indicates a destructive action or highlights a critical issue. Use for actions like "Delete", "Remove" + or "Cancel Subscription.". </td> </tr> <tr> @@ -179,8 +179,8 @@ const sections = [ </DxcTypography> </td> <td> - Provides additional information or context. Shown in blue, the brand's secondary color. Use for actions - like "More Info", "Details" or "Learn More.". + Provides additional information or context. Use for actions like "More Info", "Details" or "Learn + More.". </td> </tr> <tr> @@ -190,8 +190,8 @@ const sections = [ </DxcTypography> </td> <td> - Represents a positive action or confirms the completion of a task. Styled in green. Use for actions like - "Confirm", "Complete" or "Approve.". + Represents a positive action or confirms the completion of a task. Use for actions like "Confirm", + "Complete" or "Approve.". </td> </tr> <tr> @@ -201,8 +201,8 @@ const sections = [ </DxcTypography> </td> <td> - Alerts the user to potential issues or actions that need caution. Styled in orange. Use for actions like - "Warning" or "Attention Needed.". + Alerts the user to potential issues or actions that need caution. Use for actions like "Warning" or + "Attention Needed.". </td> </tr> </tbody> diff --git a/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.tsx b/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.tsx index ad5b27aad0..25583e9154 100644 --- a/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.tsx +++ b/apps/website/screens/components/contextual-menu/code/examples/navigationMenu.tsx @@ -15,7 +15,7 @@ const code = `() => { items: [ { label: "Sales data module", - badge: <DxcBadge color="purple" label="Experimental" />, + badge: <DxcBadge color="primary" label="Experimental" />, }, { label: "Central platform" }, ], diff --git a/apps/website/screens/components/radio-group/overview/examples/stacking.tsx b/apps/website/screens/components/radio-group/overview/examples/stacking.tsx index a1ff47f987..89e69a2469 100644 --- a/apps/website/screens/components/radio-group/overview/examples/stacking.tsx +++ b/apps/website/screens/components/radio-group/overview/examples/stacking.tsx @@ -4,7 +4,7 @@ const code = `() => { const options = [ { label: "Red", value: "red" }, { label: "Blue", value: "blue" }, - { label: "Green", value: "gree" }, + { label: "Green", value: "green" }, ]; return ( diff --git a/apps/website/screens/foundations/color/ColorPage.tsx b/apps/website/screens/foundations/color/ColorPage.tsx index 43635d4802..f98df32d86 100644 --- a/apps/website/screens/foundations/color/ColorPage.tsx +++ b/apps/website/screens/foundations/color/ColorPage.tsx @@ -184,16 +184,20 @@ const sections = [ </DxcParagraph> <DxcBulletedList> <DxcBulletedList.Item> - <strong>Green — Success</strong>: Communicates successful operations, confirmations, or valid states. It + <strong>Success</strong>: Communicates successful operations, confirmations, or valid states. It reassures users and reinforces positive outcomes. </DxcBulletedList.Item> <DxcBulletedList.Item> - <strong>Orange — Warning</strong>: Used for cautionary messages or potential risks that don't block - progress but may require attention. + <strong>Info</strong>: Provides additional information, guidance, or context that helps users understand + the current state or available options. </DxcBulletedList.Item> <DxcBulletedList.Item> - <strong>Red — Error</strong>: Indicates destructive actions, form validation errors, or system failures. - It draws immediate attention and signals that something needs user correction or caution. + <strong>Warning</strong>: Used for cautionary messages or potential risks that don't block progress but + may require attention. + </DxcBulletedList.Item> + <DxcBulletedList.Item> + <strong>Error</strong>: Indicates destructive actions, form validation errors, or system failures. It + draws immediate attention and signals that something needs user correction or caution. </DxcBulletedList.Item> </DxcBulletedList> <DxcParagraph> diff --git a/packages/lib/src/accordion/Accordion.stories.tsx b/packages/lib/src/accordion/Accordion.stories.tsx index b67f380ee5..6cbaa6bb91 100644 --- a/packages/lib/src/accordion/Accordion.stories.tsx +++ b/packages/lib/src/accordion/Accordion.stories.tsx @@ -238,7 +238,7 @@ const Accordion = () => ( <DxcAccordion independent defaultIndexActive={0}> <DxcAccordion.AccordionItem label="Find a person" - badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }} + badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }} statusLight={<DxcStatusLight label="Active" mode="success" />} > <DxcInset space="var(--spacing-padding-l)"> @@ -249,7 +249,7 @@ const Accordion = () => ( <DxcAccordion.AccordionItem label="Create a person" assistiveText="Provide all required info" - badge={{ position: "before", element: <DxcBadge label="POST" color="blue" /> }} + badge={{ position: "before", element: <DxcBadge label="POST" color="secondary" /> }} > <DxcInset space="var(--spacing-padding-l)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit @@ -258,7 +258,7 @@ const Accordion = () => ( </DxcAccordion.AccordionItem> <DxcAccordion.AccordionItem label="Find interactions" - badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="yellow" /> }} + badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="tertiary" /> }} statusLight={<DxcStatusLight label="Active" mode="warning" />} > <DxcInset space="var(--spacing-padding-l)"> @@ -337,7 +337,7 @@ const Accordion = () => ( <DxcAccordion.AccordionItem label="Bounce Rate" subLabel="Mon, May 19, 3:17 PM" - badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="green" /> }} + badge={{ position: "after", element: <DxcBadge label="Resolved" icon="check_circle" color="success" /> }} > <DxcInset space="var(--spacing-padding-l)"> To edit your profile you need to go to Settings and click on Profile. @@ -416,7 +416,7 @@ const Accordion = () => ( label="Assure Claims" subLabel="Jan, 09 2025" disabled - badge={{ position: "before", element: <DxcBadge label="Enterprise" color="green" /> }} + badge={{ position: "before", element: <DxcBadge label="Enterprise" color="success" /> }} statusLight={<DxcStatusLight label="Active" mode="success" />} > <DxcInset space="var(--spacing-padding-l)"> @@ -431,7 +431,7 @@ const Accordion = () => ( subLabel="Jan, 09 2025" icon="heart_plus" disabled - badge={{ position: "after", element: <DxcBadge label="Enterprise" color="green" /> }} + badge={{ position: "after", element: <DxcBadge label="Enterprise" color="success" /> }} > <DxcInset space="var(--spacing-padding-l)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit @@ -445,7 +445,7 @@ const Accordion = () => ( <DxcAccordion> <DxcAccordion.AccordionItem label="Find a person" - badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }} + badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }} statusLight={<DxcStatusLight label="Active" mode="success" />} > <DxcInset space="var(--spacing-padding-l)"> @@ -456,7 +456,7 @@ const Accordion = () => ( <DxcAccordion.AccordionItem label="Create a person" assistiveText="Provide all required info" - badge={{ position: "before", element: <DxcBadge label="POST" color="blue" /> }} + badge={{ position: "before", element: <DxcBadge label="POST" color="secondary" /> }} > <DxcInset space="var(--spacing-padding-l)"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit @@ -465,7 +465,7 @@ const Accordion = () => ( </DxcAccordion.AccordionItem> <DxcAccordion.AccordionItem label="Find interactions" - badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="yellow" /> }} + badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="tertiary" /> }} statusLight={<DxcStatusLight label="Active" mode="warning" />} > <DxcInset space="var(--spacing-padding-l)"> diff --git a/packages/lib/src/contextual-menu/ContextualMenu.accessibility.test.tsx b/packages/lib/src/contextual-menu/ContextualMenu.accessibility.test.tsx index 5f546dbcfa..1dab5f6984 100644 --- a/packages/lib/src/contextual-menu/ContextualMenu.accessibility.test.tsx +++ b/packages/lib/src/contextual-menu/ContextualMenu.accessibility.test.tsx @@ -26,7 +26,7 @@ const favIcon = ( const itemsWithTruncatedText = [ { label: "Item with a very long label that should be truncated", - slot: <DxcBadge color="blue" mode="contextual" label="Label" size="small" icon={badgeIcon} title="Badge" />, + slot: <DxcBadge color="secondary" mode="contextual" label="Label" size="small" icon={badgeIcon} title="Badge" />, icon: keyIcon, }, { @@ -57,7 +57,7 @@ const items = [ items: [ { label: "Sales data module", - badge: <DxcBadge color="purple" label="Experimental" />, + badge: <DxcBadge color="primary" label="Experimental" />, }, { label: "Central platform" }, ], diff --git a/packages/lib/src/contextual-menu/ContextualMenu.stories.tsx b/packages/lib/src/contextual-menu/ContextualMenu.stories.tsx index b7f09bbc61..4255e61d33 100644 --- a/packages/lib/src/contextual-menu/ContextualMenu.stories.tsx +++ b/packages/lib/src/contextual-menu/ContextualMenu.stories.tsx @@ -40,13 +40,13 @@ const groupItems = [ { label: "Item 2", icon: "bookmark", - badge: <DxcBadge color="purple" label="Experimental" />, + badge: <DxcBadge color="primary" label="Experimental" />, }, { label: "Selected Item 3", selectedByDefault: true }, ], }, ], - badge: <DxcBadge color="green" label="New" />, + badge: <DxcBadge color="success" label="New" />, }, { label: "Item 4", icon: "key" }, ], @@ -79,11 +79,11 @@ const itemsWithIcon = [ const itemsWithBadge = [ { label: "Item 1", - badge: <DxcBadge color="green" label="New" />, + badge: <DxcBadge color="success" label="New" />, }, { label: "Item 2", - badge: <DxcBadge color="purple" label="Experimental" />, + badge: <DxcBadge color="primary" label="Experimental" />, }, ]; @@ -110,7 +110,7 @@ const sectionsWithScroll = [ const itemsWithTruncatedText = [ { label: "Item with a very long label that should be truncated", - badge: <DxcBadge color="green" label="New" />, + badge: <DxcBadge color="success" label="New" />, icon: ( <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" fill="currentColor"> <path d="M200-120v-640q0-33 23.5-56.5T280-840h400q33 0 56.5 23.5T760-760v640L480-240 200-120Zm80-122 200-86 200 86v-518H280v518Zm0-518h400-400Z" /> From ff15072bd59d975d48a6745bfad87bee2ff35089 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 3 Oct 2025 09:29:55 +0200 Subject: [PATCH 3/4] Added 'new' badge for code page --- .../screens/components/badge/code/BadgeCodePage.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/website/screens/components/badge/code/BadgeCodePage.tsx b/apps/website/screens/components/badge/code/BadgeCodePage.tsx index 0c8b3be9b8..7c63d52a78 100644 --- a/apps/website/screens/components/badge/code/BadgeCodePage.tsx +++ b/apps/website/screens/components/badge/code/BadgeCodePage.tsx @@ -6,6 +6,7 @@ import Example from "@/common/example/Example"; import contextual from "./examples/contextual"; import notification from "./examples/notification"; import icons from "./examples/icons"; +import StatusBadge from "@/common/StatusBadge"; const sections = [ { @@ -22,7 +23,12 @@ const sections = [ </thead> <tbody> <tr> - <td>color</td> + <td> + <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline"> + <StatusBadge status="new" /> + color + </DxcFlex> + </td> <td> <TableCode> 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'neutral' | 'warning' | 'error' From f28cb1d794f0f370e585b1795ea779e56681bf27 Mon Sep 17 00:00:00 2001 From: Mil4n0r <morenocarmonaenrique@gmail.com> Date: Fri, 3 Oct 2025 12:59:20 +0200 Subject: [PATCH 4/4] Fixed AccordionItem color --- packages/lib/src/accordion/AccordionItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/lib/src/accordion/AccordionItem.tsx b/packages/lib/src/accordion/AccordionItem.tsx index 51323530c1..cbae646b33 100644 --- a/packages/lib/src/accordion/AccordionItem.tsx +++ b/packages/lib/src/accordion/AccordionItem.tsx @@ -186,7 +186,7 @@ const AccordionItem = ({ </IconContainer> ) : ( <StatusContainer subLabel={subLabel}> - {disabled ? cloneElement(badge?.element as ReactElement, { color: "grey" }) : badge?.element} + {disabled ? cloneElement(badge?.element as ReactElement, { color: "neutral" }) : badge?.element} </StatusContainer> )} </OptionalElement> @@ -204,7 +204,7 @@ const AccordionItem = ({ )} {badge && badge?.position === "after" && !assistiveText && ( <StatusContainer subLabel={subLabel}> - {disabled ? cloneElement(badge.element as ReactElement, { color: "grey" }) : badge.element} + {disabled ? cloneElement(badge.element as ReactElement, { color: "neutral" }) : badge.element} </StatusContainer> )} {badge?.position !== "after" && statusLight && !assistiveText && (