Skip to content

Commit 6d9de85

Browse files
PelayoFelguerosoPelayoFelgueroso
authored
Merge pull request #2302 from dxc-technology/Mil4n0r/fix_badge_semantic
Reimplement badge using semantic token
2 parents 8e4a597 + 11551d3 commit 6d9de85

23 files changed

Lines changed: 191 additions & 152 deletions

File tree

‎apps/website/screens/common/StatusBadge.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ type StatusBadgeProps = {
99
const getBadgeColor = (status: StatusBadgeProps["status"]) => {
1010
switch (status) {
1111
case "required":
12-
return "orange";
12+
return "warning";
1313
case "experimental":
14-
return "blue";
14+
return "secondary";
1515
case "new":
16-
return "purple";
16+
return "primary";
1717
case "stable":
18-
return "green";
18+
return "success";
1919
case "legacy":
20-
return "yellow";
20+
return "tertiary";
2121
default:
22-
return "grey";
22+
return "neutral";
2323
}
2424
};
2525

‎apps/website/screens/common/sidenav/SidenavLogo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const SidenavLogo = ({ subtitle = "Design System" }: { subtitle?: string }) => {
4242
<Subtitle>{subtitle}</Subtitle>
4343
</LogoContainer>
4444
<DxcBadge
45-
color="purple"
45+
color="primary"
4646
label={isDev ? "dev" : pathVersion === "next" ? pathVersion : `v${pathVersion}`}
4747
size="small"
4848
/>

‎apps/website/screens/components/accordion/code/examples/accordions.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const code = `() => {
77
<DxcAccordion independent={false} defaultIndexActive={[0, 2]}>
88
<DxcAccordion.AccordionItem
99
label="Find a person"
10-
badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }}
10+
badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }}
1111
statusLight={<DxcStatusLight label="Active" mode="success" />}
1212
>
1313
<DxcInset space="var(--spacing-padding-l)">
@@ -17,7 +17,7 @@ const code = `() => {
1717
<DxcAccordion.AccordionItem
1818
label="Create a person"
1919
assistiveText="Provide all required info"
20-
badge={{ position: "before", element: <DxcBadge label="POST" color="blue" /> }}
20+
badge={{ position: "before", element: <DxcBadge label="POST" color="secondary" /> }}
2121
defaultIsExpanded
2222
>
2323
<DxcInset space="var(--spacing-padding-l)">
@@ -26,7 +26,7 @@ const code = `() => {
2626
</DxcAccordion.AccordionItem>
2727
<DxcAccordion.AccordionItem
2828
label="Find interactions"
29-
badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="yellow" /> }}
29+
badge={{ position: "before", element: <DxcBadge label="OPTIONS" color="tertiary" /> }}
3030
statusLight={<DxcStatusLight label="Active" mode="warning" />}
3131
defaultIsExpanded
3232
>

‎apps/website/screens/components/accordion/code/examples/badgeStatusLight.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const code = `() => {
77
<DxcAccordion.AccordionItem
88
label="GET request"
99
subLabel="Jan, 20 2025"
10-
badge={{ position: "before", element: <DxcBadge label="GET" color="green" /> }}
10+
badge={{ position: "before", element: <DxcBadge label="GET" color="success" /> }}
1111
statusLight={<DxcStatusLight label="Active" mode="success" />}
1212
>
1313
<DxcInset space="var(--spacing-padding-l)">

‎apps/website/screens/components/accordion/overview/AccordionOverviewPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -256,8 +256,8 @@ const sections = [
256256
Always prioritize the visibility of mandatory elements like the title over optional elements.
257257
</DxcBulletedList.Item>
258258
<DxcBulletedList.Item>
259-
If both a badge and a status light are present, avoid applying semantic colors (e.g., red, green) to the
260-
badge to prevent visual conflict with the status indicator.
259+
If both a badge and a status light are present, avoid applying semantic colors to the badge to prevent
260+
visual conflict with the status indicator.
261261
</DxcBulletedList.Item>
262262
<DxcBulletedList.Item>
263263
Maintain consistency in layout and alignment to support content scanning, especially when multiple

‎apps/website/screens/components/accordion/overview/examples/basicExample.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ const code = `() => {
4848
</DxcAccordion>
4949
<DxcAccordion>
5050
<DxcAccordion.AccordionItem
51-
badge={{ position: "after", element: <DxcBadge label="Enterprise" icon="filled_stars" color="yellow" /> }}
51+
badge={{ position: "after", element: <DxcBadge label="Enterprise" icon="filled_stars" color="tertiary" /> }}
5252
label="Life Policy"
5353
subLabel="Ref — 1236554546"
5454
>

‎apps/website/screens/components/badge/code/BadgeCodePage.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Example from "@/common/example/Example";
66
import contextual from "./examples/contextual";
77
import notification from "./examples/notification";
88
import icons from "./examples/icons";
9+
import StatusBadge from "@/common/StatusBadge";
910

1011
const sections = [
1112
{
@@ -22,13 +23,20 @@ const sections = [
2223
</thead>
2324
<tbody>
2425
<tr>
25-
<td>color</td>
2626
<td>
27-
<TableCode>'grey' | 'blue' | 'green' | 'orange' | 'red' | 'yellow' | 'purple'</TableCode>
27+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
28+
<StatusBadge status="new" />
29+
color
30+
</DxcFlex>
31+
</td>
32+
<td>
33+
<TableCode>
34+
'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'neutral' | 'warning' | 'error'
35+
</TableCode>
2836
</td>
2937
<td>Affects the visual style of the badge. It can be used following semantic purposes or not.</td>
3038
<td>
31-
<TableCode>'grey'</TableCode>
39+
<TableCode>'neutral'</TableCode>
3240
</td>
3341
</tr>
3442
<tr>

‎apps/website/screens/components/badge/code/examples/contextual.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ const code = `() => {
66
<DxcInset space="var(--spacing-padding-xl)">
77
<DxcFlex gap="var(--spacing-gap-xl)" wrap="wrap">
88
<DxcBadge label="Authorized" />
9-
<DxcBadge label="Reserved" color="blue" />
10-
<DxcBadge label="Ready" color="green" />
11-
<DxcBadge label="Pending" color="orange" />
12-
<DxcBadge label="Unfulfilled" color="red" />
13-
<DxcBadge label="Paid" color="yellow" />
14-
<DxcBadge label="Restocked" color="purple" />
9+
<DxcBadge label="Reserved" color="secondary" />
10+
<DxcBadge label="Ready" color="success" />
11+
<DxcBadge label="Pending" color="warning" />
12+
<DxcBadge label="Unfulfilled" color="error" />
13+
<DxcBadge label="Paid" color="tertiary" />
14+
<DxcBadge label="Restocked" color="primary" />
1515
</DxcFlex>
1616
</DxcInset>
1717
);

‎apps/website/screens/components/badge/code/examples/icons.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,12 @@ const code = `() => {
2020
<DxcInset space="var(--spacing-padding-xl)">
2121
<DxcFlex gap="var(--spacing-gap-xl)" wrap="wrap">
2222
<DxcBadge label="Authorized" icon={icon} />
23-
<DxcBadge label="Reserved" color="blue" icon={icon} />
24-
<DxcBadge label="Ready" color="green" icon={icon} />
25-
<DxcBadge label="Pending" color="orange" icon={icon} />
26-
<DxcBadge label="Unfulfilled" color="red" icon="error" />
27-
<DxcBadge label="Paid" color="yellow" icon="euro" />
28-
<DxcBadge label="Restocked" color="purple" icon="refresh" />
23+
<DxcBadge label="Reserved" color="secondary" icon={icon} />
24+
<DxcBadge label="Ready" color="success" icon={icon} />
25+
<DxcBadge label="Pending" color="warning" icon={icon} />
26+
<DxcBadge label="Unfulfilled" color="error" icon="error" />
27+
<DxcBadge label="Paid" color="tertiary" icon="euro" />
28+
<DxcBadge label="Restocked" color="primary" icon="refresh" />
2929
</DxcFlex>
3030
</DxcInset>
3131
);

‎apps/website/screens/components/badge/overview/BadgeOverviewPage.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@ const sections = [
6464
have been made to a certain section of the interface.
6565
</DxcParagraph>
6666
<DxcParagraph>
67-
Only one color is allowed for this badge, which is red, and cannot be changed by any means.
67+
Only one color is allowed for this badge, which is the semantic error (generally red), and cannot be
68+
changed by any means.
6869
</DxcParagraph>
6970
</>
7071
),
@@ -94,14 +95,14 @@ const sections = [
9495
colors are available:
9596
<DxcBulletedList type="circle">
9697
<DxcBulletedList.Item>
97-
Green: positive actions, such as approved, completed, success...
98+
Success: positive actions, such as approved, completed, success...
9899
</DxcBulletedList.Item>
99-
<DxcBulletedList.Item>Blue: informative actions, such as published, in use...</DxcBulletedList.Item>
100+
<DxcBulletedList.Item>Info: informative actions, such as published, in use...</DxcBulletedList.Item>
100101
<DxcBulletedList.Item>
101-
Red: negative actions, such as error, rejection, incomplete...
102+
Warning: alert actions, such as pending or paused actions...
102103
</DxcBulletedList.Item>
103104
<DxcBulletedList.Item>
104-
Orange: alert actions, such as pending or paused actions...
105+
Error: negative actions, such as error, rejection, incomplete...
105106
</DxcBulletedList.Item>
106107
</DxcBulletedList>
107108
</DxcBulletedList.Item>

0 commit comments

Comments
 (0)