Skip to content

Commit 7ee9772

Browse files
krisantrobuskrisantrobus
authored
feat(badge): add notification variant (#3993)
* feat(badge): notifications counter wip * chore(badge): update styling * feat(badge): use new design tokens for notification * feat(badge): changeset * feat(badge): typeocs * feat(badge): lint for variant naming * feat(docs/badge): add variant to docs page * feat(docs/badge): merged counter and notification counter * feat(docs/badge): added notifications in first example
1 parent b04532d commit 7ee9772

File tree

10 files changed

+152
-71
lines changed

10 files changed

+152
-71
lines changed

‎.changeset/smooth-gorillas-care.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/badge": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[Badge] Added a new notification variant

‎.eslintrc.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ module.exports = {
8787
"icon_small",
8888
"error_counter",
8989
"neutral_counter",
90+
"notification_counter",
9091
// unstable props are allowed
9192
"^unstable_",
9293
// this is a temporary prop, if the console patch is removed from components this can be removed too

‎packages/paste-core/components/badge/src/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const BadgeVariants = [
1515
"neutral_counter",
1616
"error_counter",
1717
"default",
18+
"notification_counter",
1819
// the following variants are outdated but still supported to prevent breaking changes
1920
"info",
2021
] as const;

‎packages/paste-core/components/badge/src/styles.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,12 @@ export const badgeVariantStyles: {
110110
color: "colorText",
111111
boxShadow: "shadowBorderWeaker",
112112
},
113+
notification_counter: {
114+
borderRadius: "borderRadiusPill",
115+
backgroundColor: "colorBackgroundNotification",
116+
color: "colorTextInverse",
117+
boxShadow: "shadowBorderNotification",
118+
},
113119
/*
114120
* the following variants are outdated but still supported to prevent breaking changes
115121
*/
@@ -170,6 +176,9 @@ export const badgeButtonStyles: {
170176
error_counter: {
171177
boxShadow: "shadowBorderBottomErrorWeaker",
172178
},
179+
notification_counter: {
180+
boxShadow: "shadowBorderBottomNotificationStronger",
181+
},
173182
// the following variants are outdated but still supported to prevent breaking changes
174183
default: {
175184
boxShadow: "shadowBorderBottomDecorative10Weaker",

‎packages/paste-core/components/badge/stories/index.stories.tsx

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,9 @@ export const AllBadges = (): JSX.Element => (
7777
<Badge as="span" variant="error_counter">
7878
1
7979
</Badge>
80+
<Badge as="span" variant="notification_counter">
81+
100
82+
</Badge>
8083
</Wrapper>
8184
);
8285
export const SmallBadges = (): JSX.Element => (
@@ -126,6 +129,9 @@ export const SmallBadges = (): JSX.Element => (
126129
<Badge as="span" size="small" variant="error_counter">
127130
1
128131
</Badge>
132+
<Badge as="span" size="small" variant="notification_counter">
133+
100
134+
</Badge>
129135
</Wrapper>
130136
);
131137

@@ -1031,3 +1037,52 @@ export const LongTextBadge = (): JSX.Element => (
10311037
</Badge>
10321038
</Wrapper>
10331039
);
1040+
1041+
export const NotificationCounterBadge = (): JSX.Element => (
1042+
<>
1043+
<Heading as="h2" variant="heading40">
1044+
Span
1045+
</Heading>
1046+
<Wrapper>
1047+
<Badge as="span" variant="notification_counter">
1048+
100
1049+
</Badge>
1050+
<Badge as="span" variant="notification_counter">
1051+
100
1052+
</Badge>
1053+
<Badge as="span" variant="notification_counter">
1054+
100
1055+
</Badge>
1056+
</Wrapper>
1057+
<Heading as="h2" variant="heading40">
1058+
Anchor
1059+
</Heading>
1060+
<Wrapper>
1061+
<Badge as="a" href="#" variant="notification_counter">
1062+
100
1063+
</Badge>
1064+
<Badge as="a" href="#" variant="notification_counter">
1065+
100
1066+
</Badge>
1067+
<Badge as="a" href="#" variant="notification_counter">
1068+
100
1069+
</Badge>
1070+
</Wrapper>
1071+
<Heading as="h2" variant="heading40">
1072+
Button
1073+
</Heading>
1074+
<Wrapper>
1075+
<Badge as="button" onClick={() => {}} variant="notification_counter">
1076+
100
1077+
</Badge>
1078+
<Badge as="button" onClick={() => {}} variant="notification_counter">
1079+
100
1080+
</Badge>
1081+
<Badge as="button" onClick={() => {}} variant="notification_counter">
1082+
100
1083+
</Badge>
1084+
</Wrapper>
1085+
</>
1086+
);
1087+
1088+
NotificationCounterBadge.storyName = "Notification Counter Badge";

‎packages/paste-core/components/badge/type-docs.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"BadgeBase": {
33
"variant": {
4-
"type": "| \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"default\"\n | \"info\"",
4+
"type": "| \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"default\"\n | \"notification_counter\"\n | \"info\"",
55
"defaultValue": "null",
66
"required": true,
77
"externalProp": false
@@ -29,7 +29,7 @@
2929
"description": "Underlying HTML element to render. Can be \"span\", \"button\", or \"a\"."
3030
},
3131
"variant": {
32-
"type": "| \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"default\"\n | \"info\"",
32+
"type": "| \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"default\"\n | \"notification_counter\"\n | \"info\"",
3333
"defaultValue": "null",
3434
"required": true,
3535
"externalProp": false

‎packages/paste-core/components/menu/type-docs.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2477,7 +2477,7 @@
24772477
"description": "Toggles the `visible` state"
24782478
},
24792479
"variant": {
2480-
"type": "| \"default\"\n | \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"info\"",
2480+
"type": "| \"default\"\n | \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"notification_counter\"\n | \"info\"",
24812481
"defaultValue": "null",
24822482
"required": true,
24832483
"externalProp": false

‎packages/paste-core/components/popover/type-docs.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3560,7 +3560,7 @@
35603560
},
35613561
"PopoverBadgeButton": {
35623562
"variant": {
3563-
"type": "| \"default\"\n | \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"info\"",
3563+
"type": "| \"default\"\n | \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"notification_counter\"\n | \"info\"",
35643564
"defaultValue": "null",
35653565
"required": true,
35663566
"externalProp": false

‎packages/paste-core/components/side-panel/type-docs.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1712,7 +1712,7 @@
17121712
},
17131713
"SidePanelBadgeButton": {
17141714
"variant": {
1715-
"type": "| \"default\"\n | \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"info\"",
1715+
"type": "| \"default\"\n | \"neutral\"\n | \"warning\"\n | \"error\"\n | \"success\"\n | \"new\"\n | \"subaccount\"\n | \"decorative10\"\n | \"decorative20\"\n | \"decorative30\"\n | \"decorative40\"\n | \"brand10\"\n | \"brand20\"\n | \"brand30\"\n | \"neutral_counter\"\n | \"error_counter\"\n | \"notification_counter\"\n | \"info\"",
17161716
"defaultValue": "null",
17171717
"required": true,
17181718
"externalProp": false

0 commit comments

Comments
 (0)