[PLAY-1411] Badge Notification Error Variant (#3596)

**What does this PR do?** - ✅ Add a notification error variant that's opaque and red - ✅ Use $error in non-dark mode. Use $error_dark in dark mode. - ✅ Update docs and testing **Screenshots:** <img width="138" alt="Screenshot 2024-08-14 at 9 47 05 AM" src="https://github.com/user-attachments/assets/b5094e42-ba7f-4c4b-9b16-ad158014a6c6"> <img width="135" alt="Screenshot 2024-08-15 at 1 11 24 PM" src="https://github.com/user-attachments/assets/b3a936ba-abf7-487f-9ac0-8ce46e4117b0"> **How to test?** 1. Go to kits/badge/react#notification 2. Make sure the error notification badge is the same as a notification badge, but with a different color 3. Turn on dark mode. The badge color should be red, but better suited for dark mode. 4. Make sure that the normal "colors" are not affected. 5. Repeat the above, but with Rails #### Checklist: - [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new kit`, `deprecated`, or `breaking`. See [Changelog & Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels) for details. - [x] **DEPLOY** I have added the `milano` label to show I'm ready for a review. - [x] **TESTS** I have added test coverage to my code.
powerhome · Aug 23, 2024 · 4b01b9d · 4b01b9d
1 parent 5364cb0
commit 4b01b9d
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 27 deletions.
diff --git a/playbook/app/pb_kits/playbook/pb_badge/_badge.scss b/playbook/app/pb_kits/playbook/pb_badge/_badge.scss
@@ -42,6 +42,10 @@
     color: $white;
   }
 
+  &[class*=_notification_error] {
+    background: $error;
+  }
+
   &.dark {
     border-width: 0;
 
@@ -51,5 +55,10 @@
         color: map-get($status_color_text_dark, $color_name);
       }
     }
+
+    &[class*=_notification_error]  {
+      background: $error_dark;
+      color: $white;
+    }
   }
 }
diff --git a/playbook/app/pb_kits/playbook/pb_badge/_badge.tsx b/playbook/app/pb_kits/playbook/pb_badge/_badge.tsx
@@ -25,7 +25,7 @@ type BadgeProps = {
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
   rounded?: boolean,
   text?: string,
-  variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
+  variant?: "error" | "info" | "neutral" | "notification" | "notificationError" | "primary" | "success" | "warning",
 } & GlobalProps
 const Badge = (props: BadgeProps): React.ReactElement => {
   const {
@@ -45,7 +45,9 @@ const Badge = (props: BadgeProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const css = classnames(
-    buildCss('pb_badge_kit', variant === "success" ? "success_sm" : variant, rounded ? 'rounded' : null),
+    buildCss('pb_badge_kit',
+      variant === "success" ? "success_sm" : variant === "notificationError" ? "notification_error" : variant,
+      rounded ? 'rounded' : ''),
     globalProps(props),
     className
   )

diff --git a/playbook/app/pb_kits/playbook/pb_badge/badge.rb b/playbook/app/pb_kits/playbook/pb_badge/badge.rb
@@ -6,7 +6,7 @@ class Badge < Playbook::KitBase
       prop :rounded, type: Playbook::Props::Boolean, default: false
       prop :text
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[success warning error info neutral notification primary],
+                     values: %w[success warning error info neutral notification notification_error primary],
                      default: "neutral"
 
       def classname

diff --git a/playbook/app/pb_kits/playbook/pb_badge/badge.test.js b/playbook/app/pb_kits/playbook/pb_badge/badge.test.js
@@ -94,15 +94,21 @@ test('displays success variant', () => {
 
 })
 
-test('displays notification variant', () => {
-  render(
-    <Badge
-        data={{ testid: testId }}
-        text="1"
-        variant="notification"
-    />
-  )
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass(`pb_badge_kit_notification`)
-  cleanup()
+test('displays notification variants', () => {
+  [
+    "notification",
+    "notificationError"
+  ].forEach((colorVariant) => {
+    render(
+      <Badge
+          data={{ testid: testId }}
+          text={colorVariant}
+          variant={colorVariant}
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass(`pb_badge_kit_${colorVariant === "notificationError" ? "notification_error" : "notification"}`)
+
+    cleanup()
+  })
 })
diff --git a/playbook/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb b/playbook/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb
@@ -10,3 +10,16 @@
     variant: "notification"
   }) %>
 </div>
+
+<div>
+  <%= pb_rails("badge", props: {
+    text: "1",
+    variant: "notification_error",
+    rounded: true
+  }) %>
+
+  <%= pb_rails("badge", props: {
+    text: "4",
+    variant: "notification_error"
+  }) %>
+</div>
diff --git a/playbook/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx b/playbook/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx
@@ -4,20 +4,39 @@ import Badge from '../_badge'
 const BadgeNotification = (props) => {
   return (
     <>
-      <Badge
-          rounded
-          text="1"
-          variant="notification"
-          {...props}
-      />
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notification"
+            {...props}
+        />
 
-      &nbsp;
+        &nbsp;
 
-      <Badge
-          text="4"
-          variant="notification"
-          {...props}
-      />
+        <Badge
+            text="4"
+            variant="notification"
+            {...props}
+        />
+      </div>
+
+      <div>
+        <Badge
+            rounded
+            text="1"
+            variant="notificationError"
+            {...props}
+        />
+
+        &nbsp;
+
+        <Badge
+            text="4"
+            variant="notificationError"
+            {...props}
+        />
+      </div>
     </>
   )
 }

diff --git a/playbook/spec/pb_kits/playbook/kits/badge_spec.rb b/playbook/spec/pb_kits/playbook/kits/badge_spec.rb
@@ -11,7 +11,7 @@
   it {
     is_expected.to define_enum_prop(:variant)
       .with_default("neutral")
-      .with_values("success", "warning", "error", "info", "neutral", "notification", "primary")
+      .with_values("success", "warning", "error", "info", "neutral", "notification", "notification_error", "primary")
   }
 
   describe "#classname" do
@@ -23,6 +23,7 @@
       expect(subject.new(variant: "error", rounded: true).classname).to eq "pb_badge_kit_error_rounded"
       expect(subject.new(classname: "additional_class").classname).to eq "pb_badge_kit_neutral additional_class"
       expect(subject.new(variant: "notification").classname).to eq "pb_badge_kit_notification"
+      expect(subject.new(variant: "notification_error").classname).to eq "pb_badge_kit_notification_error"
     end
   end
 end