Fix: [DS-395] Switch badge's data-variant to a class (#489)

gsoft-inc · Oct 10, 2024 · 45bb6f6 · 45bb6f6
2 parents 4d831b7 + 7e2cd4c
commit 45bb6f6
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 17 deletions.
diff --git a/.changeset/nasty-schools-judge.md b/.changeset/nasty-schools-judge.md
@@ -0,0 +1,5 @@
+---
+"@hopper-ui/components": patch
+---
+
+In the Badge component, we were using data-variant to be able to add styles in other components based on its variant. Now that we have className render props, we can switch back to using a class for Badge's variant prop.
diff --git a/packages/components/src/Badge/src/Badge.module.css b/packages/components/src/Badge/src/Badge.module.css
@@ -66,62 +66,62 @@
     border-radius: var(--border-radius);
 }
 
-.hop-Badge[data-variant="primary"] {
+.hop-Badge--primary {
     --background-color: var(--hop-Badge-primary-background-color);
     --text-color: var(--hop-Badge-primary-text-color);
 }
 
-.hop-Badge[data-hovered][data-variant="primary"] {
+.hop-Badge--primary[data-hovered] {
     --background-color: var(--hop-Badge-primary-background-color-hovered);
     --text-color: var(--hop-Badge-primary-text-color-hovered);
 }
 
-.hop-Badge[data-pressed][data-variant="primary"] {
+.hop-Badge--primary[data-pressed] {
     --background-color: var(--hop-Badge-primary-background-color-pressed);
     --text-color: var(--hop-Badge-primary-text-color-pressed);
 }
 
-.hop-Badge[data-selected][data-variant="primary"] {
+.hop-Badge--primary[data-selected] {
     --background-color: var(--hop-Badge-primary-background-color-selected);
     --text-color: var(--hop-Badge-primary-text-color-selected);
 }
 
-.hop-Badge[data-variant="secondary"] {
+.hop-Badge--secondary {
     --background-color: var(--hop-Badge-secondary-background-color);
     --text-color: var(--hop-Badge-secondary-text-color);
 }
 
-.hop-Badge[data-hovered][data-variant="secondary"] {
+.hop-Badge--secondary[data-hovered] {
     --background-color: var(--hop-Badge-secondary-background-color-hovered);
     --text-color: var(--hop-Badge-secondary-text-color-hovered);
 }
 
-.hop-Badge[data-pressed][data-variant="secondary"] {
+.hop-Badge--secondary[data-pressed] {
     --background-color: var(--hop-Badge-secondary-background-color-pressed);
     --text-color: var(--hop-Badge-secondary-text-color-pressed);
 }
 
-.hop-Badge[data-selected][data-variant="secondary"] {
+.hop-Badge--secondary[data-selected] {
     --background-color: var(--hop-Badge-secondary-background-color-selected);
     --text-color: var(--hop-Badge-secondary-text-color-selected);
 }
 
-.hop-Badge[data-variant="subdued"] {
+.hop-Badge--subdued {
     --background-color: var(--hop-Badge-subdued-background-color);
     --text-color: var(--hop-Badge-subdued-text-color);
 }
 
-.hop-Badge[data-hovered][data-variant="subdued"] {
+.hop-Badge--subdued[data-hovered] {
     --background-color: var(--hop-Badge-subdued-background-color-hovered);
     --text-color: var(--hop-Badge-subdued-text-color-hovered);
 }
 
-.hop-Badge[data-pressed][data-variant="subdued"] {
+.hop-Badge--subdued[data-pressed] {
     --background-color: var(--hop-Badge-subdued-background-color-pressed);
     --text-color: var(--hop-Badge-subdued-text-color-pressed);
 }
 
-.hop-Badge[data-selected][data-variant="subdued"] {
+.hop-Badge--subdued[data-selected] {
     --background-color: var(--hop-Badge-subdued-background-color-selected);
     --text-color: var(--hop-Badge-subdued-text-color-selected);
 }

diff --git a/packages/components/src/Badge/src/Badge.tsx b/packages/components/src/Badge/src/Badge.tsx
@@ -36,6 +36,11 @@ interface BadgeRenderProps {
      * Whether or not the badge is selected.
      */
     isSelected?: boolean;
+    /**
+    * The visual style of the badge.
+    * @default "primary"
+    */
+    variant?: BadgeVariant;
 }
 
 export interface BadgeProps extends StyledSystemProps, AccessibleSlotProps, RenderProps<BadgeRenderProps> {
@@ -75,7 +80,8 @@ function Badge(props: BadgeProps, ref: ForwardedRef<HTMLSpanElement>) {
         GlobalBadgeCssSelector,
         cssModule(
             styles,
-            "hop-Badge"
+            "hop-Badge",
+            mapOrbiterToHopperVariants(variant)
         ),
         stylingProps.className
     );
@@ -96,7 +102,8 @@ function Badge(props: BadgeProps, ref: ForwardedRef<HTMLSpanElement>) {
             isIndeterminate: isIndeterminate || false,
             isHovered: isHovered || false,
             isPressed: isPressed || false,
-            isSelected: isSelected || false
+            isSelected: isSelected || false,
+            variant: mapOrbiterToHopperVariants(variant)
         }
     });
 
@@ -115,7 +122,6 @@ function Badge(props: BadgeProps, ref: ForwardedRef<HTMLSpanElement>) {
                 data-hovered={isHovered || undefined}
                 data-pressed={isPressed || undefined}
                 data-selected={isSelected || undefined}
-                data-variant={mapOrbiterToHopperVariants(variant)}
             >
                 {!isDot && renderProps.children}
             </OverlineText>

diff --git a/packages/components/src/tag/src/Tag.module.css b/packages/components/src/tag/src/Tag.module.css
@@ -759,7 +759,7 @@
     margin-inline-end: var(--badge-margin-inline-end);
 }
 
-.hop-Tag .hop-Tag__badge[data-variant="subdued"] {
+.hop-Tag .hop-Tag__badge--subdued {
     margin-inline-start: var(--badge-secondary-margin-inline-start);
     color: inherit;
     background: none;

diff --git a/packages/components/src/tag/src/Tag.tsx b/packages/components/src/tag/src/Tag.tsx
@@ -164,7 +164,13 @@ function Tag(props: TagProps, ref: ForwardedRef<HTMLDivElement>) {
                                         size: "sm"
                                     }],
                                     [BadgeContext, {
-                                        className: styles["hop-Tag__badge"],
+                                        className: ({ variant: badgeVariant }) => {
+                                            return cssModule(
+                                                styles,
+                                                "hop-Tag__badge",
+                                                badgeVariant
+                                            );
+                                        },
                                         isDisabled: isDisabled,
                                         isHovered: isHovered,
                                         isPressed: isPressed,