diff --git a/.changeset/mosaic-badge-no-shrink.md b/.changeset/mosaic-badge-no-shrink.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/mosaic-badge-no-shrink.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/mosaic/src/components/badge/badge.styles.ts b/packages/mosaic/src/components/badge/badge.styles.ts index aacab9c9c78..97156a8917d 100644 --- a/packages/mosaic/src/components/badge/badge.styles.ts +++ b/packages/mosaic/src/components/badge/badge.styles.ts @@ -12,6 +12,7 @@ export const styles = stylex.create({ paddingInline: space['2'], alignItems: 'center', display: 'inline-flex', + flexShrink: 0, fontFamily: fontFamilyVars['--cl-font-family-sans'], fontSize: typeScaleVars['--cl-text-xs-size'], fontWeight: fontWeightVars['--cl-font-medium'], diff --git a/packages/mosaic/src/components/entity/entity.browser.test.tsx b/packages/mosaic/src/components/entity/entity.browser.test.tsx new file mode 100644 index 00000000000..9d6c39af54b --- /dev/null +++ b/packages/mosaic/src/components/entity/entity.browser.test.tsx @@ -0,0 +1,26 @@ +import { cleanup, render, screen } from '@testing-library/react'; +import { afterEach, describe, expect, it } from 'vitest'; + +import { Badge } from '../badge'; +import { Entity } from './entity'; + +afterEach(() => cleanup()); + +describe('Entity.Label', () => { + it('truncates the label text and keeps a badge beside it whole', () => { + render( +
+ + Cameron Alexander Walker + Default + +
, + ); + + const name = screen.getByText('Cameron Alexander Walker'); + const badgeText = screen.getByText('Default'); + + expect(name.scrollWidth).toBeGreaterThan(name.clientWidth); + expect(badgeText.scrollWidth).toBe(badgeText.clientWidth); + }); +});