From 514013ca799d1552678a986973fa4a310761b159 Mon Sep 17 00:00:00 2001 From: denkristoffer Date: Thu, 25 Apr 2024 13:32:12 +0200 Subject: [PATCH 1/3] fix(badge): restore default text transform --- .../badge/src/Badge/Badge.styles.ts | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/components/badge/src/Badge/Badge.styles.ts b/packages/components/badge/src/Badge/Badge.styles.ts index cc1ea4d997..b661f21a80 100644 --- a/packages/components/badge/src/Badge/Badge.styles.ts +++ b/packages/components/badge/src/Badge/Badge.styles.ts @@ -64,7 +64,9 @@ const sizeToStyles = ({ size }: { size: BadgeSize }): CSSObject => { }; export const getBadgeStyles = ( - textTransform: CSSProperties['textTransform'] = 'capitalize', + textTransform: + | Extract + | undefined = undefined, ) => ({ badge: ({ variant, size }: BadgeStylesProps) => css({ @@ -83,9 +85,16 @@ export const getBadgeStyles = ( width: '0.875rem', height: '0.875rem', }), - badgeText: css({ - color: 'currentcolor', - lineHeight: 'inherit', - textTransform, - }), + badgeText: css([ + { + color: 'currentcolor', + lineHeight: 'inherit', + }, + textTransform !== 'none' && { + textTransform: 'lowercase', + '&::first-letter': { + textTransform: 'uppercase', + }, + }, + ]), }); From e40e3010d31ef39ab787520c5d61013f0bf49bd0 Mon Sep 17 00:00:00 2001 From: Kristoffer Date: Thu, 25 Apr 2024 13:34:11 +0200 Subject: [PATCH 2/3] Create weak-buckets-stare.md --- .changeset/weak-buckets-stare.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/weak-buckets-stare.md diff --git a/.changeset/weak-buckets-stare.md b/.changeset/weak-buckets-stare.md new file mode 100644 index 0000000000..9f9522817b --- /dev/null +++ b/.changeset/weak-buckets-stare.md @@ -0,0 +1,5 @@ +--- +"@contentful/f36-badge": patch +--- + +fix(badge): restore default text transform capitalizing only the first word From 55deb37d53e6a0e460a4de46883b4c86ca965b11 Mon Sep 17 00:00:00 2001 From: denkristoffer Date: Thu, 25 Apr 2024 15:43:30 +0200 Subject: [PATCH 3/3] fix: this is better --- .../badge/src/Badge/Badge.styles.ts | 35 ++++++++++--------- packages/components/badge/src/Badge/Badge.tsx | 18 ++++++---- 2 files changed, 30 insertions(+), 23 deletions(-) diff --git a/packages/components/badge/src/Badge/Badge.styles.ts b/packages/components/badge/src/Badge/Badge.styles.ts index b661f21a80..b8d00e97a2 100644 --- 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 - | 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 index 461a60902a..063ddd52e9 100644 --- a/packages/components/badge/src/Badge/Badge.tsx +++ b/packages/components/badge/src/Badge/Badge.tsx @@ -1,4 +1,4 @@ -import React, { CSSProperties } from 'react'; +import React from 'react'; import { cx } from 'emotion'; import { Box, @@ -6,10 +6,11 @@ import { 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 | undefined; }; export type BadgeProps = PropsWithHTMLElement; export const Badge = React.forwardRef>( (props, ref) => { - const styles = getBadgeStyles(props.textTransform); + const styles = getBadgeStyles(); const { children, variant = 'primary', @@ -50,6 +55,7 @@ export const Badge = React.forwardRef>( startIcon, endIcon, className, + textTransform = undefined, ...otherProps } = props; @@ -75,7 +81,7 @@ export const Badge = React.forwardRef>( {children}