Badge: Support text truncation (WordPress#68107)

* Badge: Support text truncation * Stabilize tests against internal DOM changes * Limit width to container * Add changelog Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: jameskoster <[email protected]>
Gulamdastgir-Momin · Jan 23, 2025 · ed457d7 · ed457d7
1 parent 279c6ea
commit ed457d7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 8 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -28,6 +28,7 @@
 
 -   Add new `Badge` component ([#66555](https://github.com/WordPress/gutenberg/pull/66555)).
 -   `Menu`: refactor to more granular sub-components ([#67422](https://github.com/WordPress/gutenberg/pull/67422)).
+-   `Badge`: Support text truncation ([#68107](https://github.com/WordPress/gutenberg/pull/68107)).
 
 ### Internal
 

diff --git a/packages/components/src/badge/index.tsx b/packages/components/src/badge/index.tsx
@@ -56,9 +56,10 @@ function Badge( {
 					icon={ contextBasedIcon() }
 					size={ 16 }
 					fill="currentColor"
+					className="components-badge__icon"
 				/>
 			) }
-			{ children }
+			<span className="components-badge__content">{ children }</span>
 		</span>
 	);
 }

diff --git a/packages/components/src/badge/styles.scss b/packages/components/src/badge/styles.scss
@@ -6,17 +6,18 @@ $badge-colors: (
 );
 
 .components-badge {
+	@include reset;
+
 	background-color: color-mix(in srgb, $white 90%, var(--base-color));
 	color: color-mix(in srgb, $black 50%, var(--base-color));
 	padding: 0 $grid-unit-10;
 	min-height: $grid-unit-30;
+	max-width: 100%;
 	border-radius: $radius-small;
 	font-size: $font-size-small;
 	font-weight: 400;
-	flex-shrink: 0;
 	line-height: $font-line-height-small;
-	width: fit-content;
-	display: flex;
+	display: inline-flex;
 	align-items: center;
 	gap: 2px;
 
@@ -36,3 +37,13 @@ $badge-colors: (
 		}
 	}
 }
+
+.components-badge__icon {
+	flex-shrink: 0;
+}
+
+.components-badge__content {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
diff --git a/packages/components/src/badge/test/index.tsx b/packages/components/src/badge/test/index.tsx
@@ -6,27 +6,32 @@ import { render, screen } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import Badge from '..';
+import _Badge from '..';
+
+const testid = 'my-badge';
+const Badge = ( props: React.ComponentProps< typeof _Badge > ) => (
+	<_Badge data-testid={ testid } { ...props } />
+);
 
 describe( 'Badge', () => {
 	it( 'should render correctly with default props', () => {
 		render( <Badge>Code is Poetry</Badge> );
-		const badge = screen.getByText( 'Code is Poetry' );
+		const badge = screen.getByTestId( testid );
 		expect( badge ).toBeInTheDocument();
 		expect( badge.tagName ).toBe( 'SPAN' );
 		expect( badge ).toHaveClass( 'components-badge' );
 	} );
 
 	it( 'should render as per its intent and contain an icon', () => {
 		render( <Badge intent="error">Code is Poetry</Badge> );
-		const badge = screen.getByText( 'Code is Poetry' );
+		const badge = screen.getByTestId( testid );
 		expect( badge ).toHaveClass( 'components-badge', 'is-error' );
 		expect( badge ).toHaveClass( 'has-icon' );
 	} );
 
 	it( 'should combine custom className with default class', () => {
 		render( <Badge className="custom-class">Code is Poetry</Badge> );
-		const badge = screen.getByText( 'Code is Poetry' );
+		const badge = screen.getByTestId( testid );
 		expect( badge ).toHaveClass( 'components-badge' );
 		expect( badge ).toHaveClass( 'custom-class' );
 	} );