WB-1669: Pill - Add transparent variant (#2190)

## Summary: Adds a transparent variant to the Pill component. This variant is useful for when the Pill is used as a filter, and the user wants to see the background behind the Pill. e.g. <img width="824" alt="Screenshot 2024-02-27 at 10 20 10 AM" src="https://github.com/Khan/wonder-blocks/assets/843075/f35e9d97-0bb0-4fde-ae3e-1149c9c78afe"> Issue: https://khanacademy.atlassian.net/browse/WB-1669 ## Test plan: Verify that the `transparent` variant works as expected. - It's transparent in its resting state. - It uses `offBlack32` in its pressed/active state. https://github.com/Khan/wonder-blocks/assets/843075/18af2d1e-1db1-41cc-bb6d-776d91388c4d Author: jandrade Reviewers: kevinbarabash Required Reviewers: Approved By: kevinbarabash Checks: ✅ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), 🚫 Chromatic - Get results on regular PRs, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), 🚫 Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ dependabot, ✅ gerald, ✅ Publish npm snapshot (ubuntu-latest, 20.x) Pull Request URL: #2190
Khan · Feb 28, 2024 · 0c3cbce · 0c3cbce
1 parent a65c2ac
commit 0c3cbce
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 17 deletions.
diff --git a/.changeset/giant-tigers-shout.md b/.changeset/giant-tigers-shout.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-pill": minor
+---
+
+Add transparent variant
diff --git a/__docs__/wonder-blocks-pill/pill.argtypes.tsx b/__docs__/wonder-blocks-pill/pill.argtypes.tsx
@@ -22,7 +22,7 @@ export default {
         table: {
             type: {
                 summary: `"neutral" | "accent | "info" | "success" |
-                    "warning" | "critical"`,
+                    "warning" | "critical" | "transparent"`,
             },
             defaultValue: {summary: "neutral"},
         },
@@ -35,6 +35,7 @@ export default {
                 "success",
                 "warning",
                 "critical",
+                "transparent",
             ],
             required: false,
         },

diff --git a/__docs__/wonder-blocks-pill/pill.stories.tsx b/__docs__/wonder-blocks-pill/pill.stories.tsx
@@ -112,8 +112,8 @@ Inline.parameters = {
 };
 
 /**
- * There are six kinds of pills: neutral, accent, info, success, warning,
- * and critical. This can be specified using the `kind` prop.
+ * There are seven kinds of pills: neutral, accent, info, success, warning,
+ * critical and transparent. This can be specified using the `kind` prop.
  *
  * The following kinds respond to the following colors:
  * - `neutral`: gray
@@ -122,11 +122,12 @@ Inline.parameters = {
  * - `success`: light green
  * - `warning`: yellow
  * - `critical`: light red
+ * - `transparent`: transparent
  *
- * Pills can also be of three different sizes: small, medium, and large.
- * If the size is not specified, it defaults to medium. Small pills use
- * Wonder Blocks `LabelXSmall` typography, medium pills use Wonder Blocks
- * `LabelSmall`, and large pills use Wonder Blocks `Body`.
+ * Pills can also be of three different sizes: small, medium, and large. If the
+ * size is not specified, it defaults to medium. Small pills use Wonder Blocks
+ * `LabelXSmall` typography, medium pills use Wonder Blocks `LabelSmall`, and
+ * large pills use Wonder Blocks `Body`.
  */
 export const Variants: StoryComponentType = {
     render: () => {
@@ -137,6 +138,7 @@ export const Variants: StoryComponentType = {
             "success",
             "warning",
             "critical",
+            "transparent",
         ];
 
         const sizes: Array<PillSize> = ["small", "medium", "large"];

diff --git a/packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx b/packages/wonder-blocks-pill/src/components/__tests__/pill.test.tsx
@@ -143,13 +143,14 @@ describe("Pill", () => {
     });
 
     test.each`
-        kind          | color
-        ${"neutral"}  | ${tokens.color.offBlack8}
-        ${"accent"}   | ${tokens.color.blue}
-        ${"info"}     | ${tokens.color.fadedBlue16}
-        ${"success"}  | ${tokens.color.fadedGreen16}
-        ${"warning"}  | ${tokens.color.fadedGold16}
-        ${"critical"} | ${tokens.color.fadedRed16}
+        kind             | color
+        ${"neutral"}     | ${tokens.color.offBlack8}
+        ${"accent"}      | ${tokens.color.blue}
+        ${"info"}        | ${tokens.color.fadedBlue16}
+        ${"success"}     | ${tokens.color.fadedGreen16}
+        ${"warning"}     | ${tokens.color.fadedGold16}
+        ${"critical"}    | ${tokens.color.fadedRed16}
+        ${"transparent"} | ${"transparent"}
     `(
         "renders the correct background color for $kind kind",
         ({kind, color}) => {

diff --git a/packages/wonder-blocks-pill/src/components/pill.tsx b/packages/wonder-blocks-pill/src/components/pill.tsx
@@ -21,7 +21,8 @@ export type PillKind =
     | "info"
     | "success"
     | "warning"
-    | "critical";
+    | "critical"
+    | "transparent";
 
 export type PillSize = "small" | "medium" | "large";
 
@@ -222,13 +223,16 @@ const _generateColorStyles = (clickable: boolean, kind: PillKind) => {
         case "critical":
             backgroundColor = tokens.color.fadedRed16;
             break;
+        case "transparent":
+            backgroundColor = "transparent";
+            break;
         case "neutral":
         default:
             backgroundColor = tokens.color.offBlack8;
     }
 
     const activeColor =
-        kind === "neutral"
+        kind === "neutral" || kind === "transparent"
             ? tokens.color.offBlack16
             : mix(tokens.color.offBlack32, backgroundColor);
 
@@ -239,15 +243,21 @@ const _generateColorStyles = (clickable: boolean, kind: PillKind) => {
     const activeOutlineColor =
         kind === "critical" ? tokens.color.activeRed : tokens.color.activeBlue;
 
+    const outline =
+        kind === "transparent"
+            ? `1px solid ${tokens.color.offBlack16}`
+            : "none";
+
     const colorStyles: StyleDeclaration = {
         pill: {
             backgroundColor: backgroundColor,
+            outline,
             color: textColor,
             alignItems: "center",
             justifyContent: "center",
         },
         clickableWrapper: {
-            outline: "none",
+            outline,
 
             ":hover": {
                 outline: `2px solid ${outlineColor}`,