Skip to content

Commit 1b0a508

Browse files
hectahertzhectahertz
authored
Implementation
1 parent 4cf5647 commit 1b0a508

File tree

2 files changed

+128
-43
lines changed

2 files changed

+128
-43
lines changed

‎packages/react/src/SegmentedControl/SegmentedControl.module.css‎

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,119 @@
1010
border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest, transparent);
1111
border-radius: var(--borderRadius-medium);
1212

13-
&:where([data-full-width]) {
13+
/* Responsive full-width */
14+
&[data-full-width] {
1415
display: flex;
1516
width: 100%;
1617
}
1718

19+
&[data-full-width-narrow] {
20+
@media (--viewportRange-narrow) {
21+
display: flex;
22+
width: 100%;
23+
}
24+
}
25+
26+
&[data-full-width-regular] {
27+
@media (--viewportRange-regular) {
28+
display: flex;
29+
width: 100%;
30+
}
31+
}
32+
33+
&[data-full-width-wide] {
34+
@media (--viewportRange-wide) {
35+
display: flex;
36+
width: 100%;
37+
}
38+
}
39+
40+
/* Hide when dropdown variant is active */
41+
&[data-variant-dropdown] {
42+
display: none;
43+
}
44+
45+
&[data-variant-narrow='dropdown'] {
46+
@media (--viewportRange-narrow) {
47+
display: none;
48+
}
49+
}
50+
51+
&[data-variant-regular='dropdown'] {
52+
@media (--viewportRange-regular) {
53+
display: none;
54+
}
55+
}
56+
57+
&[data-variant-wide='dropdown'] {
58+
@media (--viewportRange-wide) {
59+
display: none;
60+
}
61+
}
62+
63+
/* Handle hideLabels variant - hide button text */
64+
&[data-variant-hideLabels] .Text {
65+
display: none;
66+
}
67+
68+
&[data-variant-narrow='hideLabels'] {
69+
@media (--viewportRange-narrow) {
70+
.Text {
71+
display: none;
72+
}
73+
}
74+
}
75+
76+
&[data-variant-regular='hideLabels'] {
77+
@media (--viewportRange-regular) {
78+
.Text {
79+
display: none;
80+
}
81+
}
82+
}
83+
84+
&[data-variant-wide='hideLabels'] {
85+
@media (--viewportRange-wide) {
86+
.Text {
87+
display: none;
88+
}
89+
}
90+
}
91+
1892
&:where([data-size='small']) {
1993
/* TODO: use primitive `control.{small|medium}.size` when it is available */
2094
height: 28px;
2195
font-size: var(--text-body-size-small);
2296
}
2397
}
2498

99+
.DropdownContainer {
100+
display: none;
101+
102+
/* Show when dropdown variant is active */
103+
&[data-variant='dropdown'] {
104+
display: block;
105+
}
106+
107+
&[data-variant-narrow='dropdown'] {
108+
@media (--viewportRange-narrow) {
109+
display: block;
110+
}
111+
}
112+
113+
&[data-variant-regular='dropdown'] {
114+
@media (--viewportRange-regular) {
115+
display: block;
116+
}
117+
}
118+
119+
&[data-variant-wide='dropdown'] {
120+
@media (--viewportRange-wide) {
121+
display: block;
122+
}
123+
}
124+
}
125+
25126
.Item {
26127
position: relative;
27128
display: block;

‎packages/react/src/SegmentedControl/SegmentedControl.tsx‎

Lines changed: 26 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import SegmentedControlIconButton from './SegmentedControlIconButton'
66
import {ActionList} from '../ActionList'
77
import {ActionMenu} from '../ActionMenu'
88
import type {ResponsiveValue} from '../hooks/useResponsiveValue'
9-
import {useResponsiveValue} from '../hooks/useResponsiveValue'
9+
import {getResponsiveAttributes} from '../internal/utils/getResponsiveAttributes'
1010
import type {WidthOnlyViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
1111
import {isElement} from 'react-is'
1212
import classes from './SegmentedControl.module.css'
@@ -45,8 +45,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
4545
React.Children.toArray(children).some(
4646
child => React.isValidElement<SegmentedControlButtonProps>(child) && child.props.defaultSelected !== undefined,
4747
)
48-
const responsiveVariant = useResponsiveValue(variant, 'default')
49-
const isFullWidth = useResponsiveValue(fullWidth, false)
48+
5049
const selectedSegments = React.Children.toArray(children).map(
5150
child =>
5251
React.isValidElement<SegmentedControlButtonProps | SegmentedControlIconButtonProps>(child) &&
@@ -110,9 +109,13 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
110109
)
111110
}
112111

113-
return responsiveVariant === 'dropdown' ? (
114-
// Render the 'dropdown' variant of the SegmentedControlButton or SegmentedControlIconButton
115-
<>
112+
// Check if dropdown variant is used at any breakpoint
113+
const hasDropdownVariant =
114+
typeof variant === 'object' && variant !== null && Object.values(variant).includes('dropdown')
115+
116+
// Render dropdown variant if needed
117+
const dropdownContent = hasDropdownVariant && (
118+
<div className={classes.DropdownContainer} {...getResponsiveAttributes('variant', variant)}>
116119
<ActionMenu>
117120
{/*
118121
The aria-label is only provided as a backup when the designer or engineer neglects to show a label for the SegmentedControl.
@@ -150,15 +153,18 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
150153
</ActionList>
151154
</ActionMenu.Overlay>
152155
</ActionMenu>
153-
</>
154-
) : (
155-
// Render a segmented control
156+
</div>
157+
)
158+
159+
// Render segmented control (default or hideLabels variant)
160+
const segmentedControlContent = (
156161
<ul
157162
aria-label={ariaLabel}
158163
aria-labelledby={ariaLabelledby}
159164
ref={segmentedControlContainerRef}
160165
className={clsx(classes.SegmentedControl, className)}
161-
data-full-width={isFullWidth || undefined}
166+
{...getResponsiveAttributes('full-width', fullWidth)}
167+
{...getResponsiveAttributes('variant', variant)}
162168
data-size={size}
163169
{...rest}
164170
>
@@ -186,43 +192,21 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
186192
},
187193
}
188194

189-
// Render the 'hideLabels' variant of the SegmentedControlButton
190-
if (
191-
responsiveVariant === 'hideLabels' &&
192-
React.isValidElement<SegmentedControlButtonProps>(child) &&
193-
(child.type === Button || isSlot(child, Button))
194-
) {
195-
const {
196-
'aria-label': childAriaLabel,
197-
leadingVisual,
198-
leadingIcon,
199-
children: childPropsChildren,
200-
...restChildProps
201-
} = child.props
202-
// Use leadingVisual if provided, otherwise fall back to leadingIcon
203-
const visual = leadingVisual ?? leadingIcon
204-
if (!visual) {
205-
// eslint-disable-next-line no-console
206-
console.warn('A `leadingVisual` or `leadingIcon` prop is required when hiding visible labels')
207-
} else {
208-
return (
209-
<SegmentedControlIconButton
210-
aria-label={childAriaLabel || childPropsChildren}
211-
icon={visual}
212-
// Width is now handled by CSS: 32px default, 100% when data-full-width is set on parent
213-
className={classes.IconButton}
214-
{...sharedChildProps}
215-
{...restChildProps}
216-
/>
217-
)
218-
}
219-
}
220-
221195
// Render the children as-is and add the shared child props
222196
return React.cloneElement(child, sharedChildProps)
223197
})}
224198
</ul>
225199
)
200+
201+
// Return both variants when dropdown is used, otherwise just the segmented control
202+
return hasDropdownVariant ? (
203+
<>
204+
{dropdownContent}
205+
{segmentedControlContent}
206+
</>
207+
) : (
208+
segmentedControlContent
209+
)
226210
}
227211

228212
Root.displayName = 'SegmentedControl'

0 commit comments

Comments
 (0)