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 {