fix: this is better

contentful · Apr 25, 2024 · 55deb37 · 55deb37
1 parent e40e301
commit 55deb37
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 23 deletions.
diff --git a/packages/components/badge/src/Badge/Badge.styles.ts b/packages/components/badge/src/Badge/Badge.styles.ts
@@ -2,7 +2,7 @@ import tokens from '@contentful/f36-tokens';
 import { css } from 'emotion';
 import type { BadgeVariant, BadgeSize, BadgeStylesProps } from '../types';
 import type { CSSObject } from '@emotion/serialize';
-import { CSSProperties } from 'react';
+import type { BadgeInternalProps } from './Badge';
 
 const variantToStyles = ({ variant }: { variant: BadgeVariant }): CSSObject => {
   switch (variant) {
@@ -63,11 +63,7 @@ const sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {
   }
 };
 
-export const getBadgeStyles = (
-  textTransform:
-    | Extract<CSSProperties['textTransform'], 'none'>
-    | undefined = undefined,
-) => ({
+export const getBadgeStyles = () => ({
   badge: ({ variant, size }: BadgeStylesProps) =>
     css({
       columnGap: tokens.spacing2Xs,
@@ -85,16 +81,21 @@ export const getBadgeStyles = (
     width: '0.875rem',
     height: '0.875rem',
   }),
-  badgeText: css([
-    {
-      color: 'currentcolor',
-      lineHeight: 'inherit',
-    },
-    textTransform !== 'none' && {
-      textTransform: 'lowercase',
-      '&::first-letter': {
-        textTransform: 'uppercase',
+  badgeText: ({
+    textTransform,
+  }: {
+    textTransform: BadgeInternalProps['textTransform'];
+  }) =>
+    css([
+      {
+        color: 'currentcolor',
+        lineHeight: 'inherit',
       },
-    },
-  ]),
+      textTransform !== 'none' && {
+        textTransform: 'lowercase',
+        '&::first-letter': {
+          textTransform: 'uppercase',
+        },
+      },
+    ]),
 });
diff --git a/packages/components/badge/src/Badge/Badge.tsx b/packages/components/badge/src/Badge/Badge.tsx
@@ -1,15 +1,16 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { cx } from 'emotion';
 import {
   Box,
   type CommonProps,
   type PropsWithHTMLElement,
   type ExpandProps,
 } from '@contentful/f36-core';
+import { Caption } from '@contentful/f36-typography';
+import type * as CSS from 'csstype';
 
 import type { BadgeSize, BadgeVariant } from '../types';
 import { getBadgeStyles } from './Badge.styles';
-import { Caption } from '@contentful/f36-typography';
 
 export type BadgeInternalProps = CommonProps & {
   /**
@@ -32,16 +33,20 @@ export type BadgeInternalProps = CommonProps & {
    */
   endIcon?: React.ReactNode;
   /**
-   * Expects any valid CSS text-transform value. If not provided, will default to 'capitalize'
+   * By default the Badge uses CSS to capitalize only the first letter of the
+   * badge text. This CSS is hit by a bug in Firefox that results in the badge
+   * being rendered slightly too wide. To avoid the bug, set this property to
+   * `none` to disable the text transformation. Please be sure the initial
+   * letter of the badge text is already capitalized!
    */
-  textTransform?: CSSProperties['textTransform'];
+  textTransform?: Extract<CSS.Property.TextTransform, 'none'> | undefined;
 };
 
 export type BadgeProps = PropsWithHTMLElement<BadgeInternalProps, 'div'>;
 
 export const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(
   (props, ref) => {
-    const styles = getBadgeStyles(props.textTransform);
+    const styles = getBadgeStyles();
     const {
       children,
       variant = 'primary',
@@ -50,6 +55,7 @@ export const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(
       startIcon,
       endIcon,
       className,
+      textTransform = undefined,
       ...otherProps
     } = props;
 
@@ -75,7 +81,7 @@ export const Badge = React.forwardRef<HTMLDivElement, ExpandProps<BadgeProps>>(
         <Caption
           fontWeight="fontWeightMedium"
           isTruncated
-          className={styles.badgeText}
+          className={styles.badgeText({ textTransform })}
         >
           {children}
         </Caption>