fix(badge): restore default text transform (#2731)

.changeset/weak-buckets-stare.md

@@ -0,0 +1,5 @@
+---
+"@contentful/f36-badge": patch
+---
+
+fix(badge): restore default text transform capitalizing only the first word

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,9 +63,7 @@ const sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => {
   }
 };
 
-export const getBadgeStyles = (
-  textTransform: CSSProperties['textTransform'] = 'capitalize',
-) => ({
+export const getBadgeStyles = () => ({
   badge: ({ variant, size }: BadgeStylesProps) =>
     css({
       columnGap: tokens.spacing2Xs,
@@ -83,9 +81,21 @@ export const getBadgeStyles = (
     width: '0.875rem',
     height: '0.875rem',
   }),
-  badgeText: css({
-    color: 'currentcolor',
-    lineHeight: 'inherit',
+  badgeText: ({
     textTransform,
-  }),
+  }: {
+    textTransform: BadgeInternalProps['textTransform'];
+  }) =>
+    css([
+      {
+        color: 'currentcolor',
+        lineHeight: 'inherit',
+      },
+      textTransform !== 'none' && {
+        textTransform: 'lowercase',
+        '&::first-letter': {
+          textTransform: 'uppercase',
+        },
+      },
+    ]),
 });

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>