diff --git a/e2e/components/SegmentedControl.test.ts b/e2e/components/SegmentedControl.test.ts index 24e09749352..51a39d58d65 100644 --- a/e2e/components/SegmentedControl.test.ts +++ b/e2e/components/SegmentedControl.test.ts @@ -64,6 +64,10 @@ const stories = [ title: 'Dev: With Css', id: 'components-segmentedcontrol-dev--with-css', }, + { + title: 'Dev: Truncation', + id: 'components-segmentedcontrol-dev--in-narrow-container', + }, ] as const test.describe('SegmentedControl', () => { diff --git a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx index 38519ec7f5a..5b561dab3f2 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx +++ b/packages/react/src/SegmentedControl/SegmentedControl.dev.stories.tsx @@ -31,3 +31,19 @@ export const WithCss = () => ( ) + +export const InNarrowContainer = () => ( +
+ + + Preview + + + Raw + + + Blame + + +
+) diff --git a/packages/react/src/SegmentedControl/SegmentedControl.module.css b/packages/react/src/SegmentedControl/SegmentedControl.module.css index 2717c72816b..2895ae680b0 100644 --- a/packages/react/src/SegmentedControl/SegmentedControl.module.css +++ b/packages/react/src/SegmentedControl/SegmentedControl.module.css @@ -1,14 +1,13 @@ .SegmentedControl { display: inline-flex; - - /* TODO: use primitive `control.{small|medium}.size` when it is available */ - height: 32px; + height: var(--control-medium-size); padding: 0; margin: 0; font-size: var(--text-body-size-medium); background-color: var(--controlTrack-bgColor-rest); border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent); border-radius: var(--borderRadius-medium); + max-width: 100%; &:where([data-full-width]) { display: flex; @@ -16,8 +15,7 @@ } &:where([data-size='small']) { - /* TODO: use primitive `control.{small|medium}.size` when it is available */ - height: 28px; + height: var(--control-small-size); font-size: var(--text-body-size-small); } } @@ -30,6 +28,7 @@ /* stylelint-disable-next-line primer/spacing */ margin-bottom: -1px; flex-grow: 1; + min-width: 0; &:not(:last-child) { /* stylelint-disable-next-line primer/spacing */ @@ -193,15 +192,22 @@ } } -.Text::after { - display: block; - height: 0; +.Text { + flex: 1; overflow: hidden; - font-weight: var(--base-text-weight-semibold); - pointer-events: none; - visibility: hidden; - content: attr(data-text); - user-select: none; + text-overflow: ellipsis; + white-space: nowrap; + + &::after { + display: block; + height: 0; + overflow: hidden; + font-weight: var(--base-text-weight-semibold); + pointer-events: none; + visibility: hidden; + content: attr(data-text); + user-select: none; + } } .LeadingIcon {