Skip to content

Commit b5ff840

Browse files
jonrohanjonrohan
authoredDec 6, 2024··
feat(ButtonBase): Remove css modules feature flag from ButtonBase (#5222)
* Remove css modules feature flag from ButtonBase * Update snapshots * Create tender-queens-juggle.md * Update snapshot
·
@primer/react@37.17.0@primer/react@37.7.0
1 parent 6bf3e9e commit b5ff840

File tree

5 files changed

+114
-3468
lines changed

5 files changed

+114
-3468
lines changed
 

‎.changeset/tender-queens-juggle.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": minor
3+
---
4+
5+
feat(ButtonBase): Remove css modules feature flag from ButtonBase

‎packages/react/src/Button/ButtonBase.tsx

+41-174
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import type {ComponentPropsWithRef} from 'react'
2-
import React, {forwardRef, useMemo} from 'react'
2+
import React, {forwardRef} from 'react'
33
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
44
import Box from '../Box'
5-
import type {BetterSystemStyleObject} from '../sx'
6-
import {merge} from '../sx'
7-
import {useTheme} from '../ThemeProvider'
85
import type {ButtonProps} from './types'
9-
import {StyledButton} from './types'
10-
import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles'
6+
import {getAlignContentSize} from './styles'
117
import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
128
import {defaultSxProp} from '../utils/defaultSxProp'
139
import {VisuallyHidden} from '../VisuallyHidden'
@@ -18,20 +14,8 @@ import {ConditionalWrapper} from '../internal/components/ConditionalWrapper'
1814
import {AriaStatus} from '../live-region'
1915
import {clsx} from 'clsx'
2016
import classes from './ButtonBase.module.css'
21-
import {useFeatureFlag} from '../FeatureFlags'
2217
import {isElement} from 'react-is'
2318

24-
const iconWrapStyles = {
25-
display: 'flex',
26-
pointerEvents: 'none',
27-
}
28-
29-
const renderVisual = (Visual: React.ElementType | React.ReactElement, loading: boolean, visualName: string) => (
30-
<Box as="span" data-component={visualName} sx={{...iconWrapStyles}}>
31-
{loading ? <Spinner size="small" /> : isElement(Visual) ? Visual : <Visual />}
32-
</Box>
33-
)
34-
3519
const renderModuleVisual = (
3620
Visual: React.ElementType | React.ReactElement,
3721
loading: boolean,
@@ -70,17 +54,9 @@ const ButtonBase = forwardRef(
7054
...rest
7155
} = props
7256

73-
const enabled = useFeatureFlag('primer_react_css_modules_ga')
7457
const innerRef = React.useRef<HTMLButtonElement>(null)
7558
useRefObjectAsForwardedRef(forwardedRef, innerRef)
7659

77-
const {theme} = useTheme()
78-
const baseStyles = useMemo(() => {
79-
return merge.all([getButtonStyles(theme), getVariantStyles(variant, theme)])
80-
}, [theme, variant])
81-
const sxStyles = useMemo(() => {
82-
return merge<BetterSystemStyleObject>(baseStyles, sxProp)
83-
}, [baseStyles, sxProp])
8460
const uuid = useId(id)
8561
const loadingAnnouncementID = `${uuid}-loading-announcement`
8662

@@ -104,131 +80,7 @@ const ButtonBase = forwardRef(
10480
}, [innerRef])
10581
}
10682

107-
if (enabled) {
108-
if (sxProp !== defaultSxProp) {
109-
return (
110-
<ConditionalWrapper
111-
// If anything is passsed to `loading`, we need the wrapper:
112-
// If we just checked for `loading` as a boolean, the wrapper wouldn't be rendered
113-
// when `loading` is `false`.
114-
// Then, the component re-renders in a way that the button will lose focus when switching between loading states.
115-
if={typeof loading !== 'undefined'}
116-
className={block ? classes.ConditionalWrapper : undefined}
117-
data-loading-wrapper
118-
>
119-
<Box
120-
as={Component}
121-
sx={sxProp}
122-
aria-disabled={loading ? true : undefined}
123-
{...rest}
124-
ref={innerRef}
125-
className={clsx(classes.ButtonBase, className)}
126-
data-block={block ? 'block' : null}
127-
data-inactive={inactive ? true : undefined}
128-
data-loading={Boolean(loading)}
129-
data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
130-
data-size={size}
131-
data-variant={variant}
132-
data-label-wrap={labelWrap}
133-
aria-describedby={[loadingAnnouncementID, ariaDescribedBy]
134-
.filter(descriptionID => Boolean(descriptionID))
135-
.join(' ')}
136-
// aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
137-
// We only set it when the button is in a loading state because it will supercede the aria-label when the screen
138-
// reader announces the button name.
139-
aria-labelledby={
140-
loading
141-
? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ')
142-
: ariaLabelledBy
143-
}
144-
id={id}
145-
onClick={loading ? undefined : onClick}
146-
>
147-
{Icon ? (
148-
loading ? (
149-
<Spinner size="small" />
150-
) : isElement(Icon) ? (
151-
Icon
152-
) : (
153-
<Icon />
154-
)
155-
) : (
156-
<>
157-
<Box
158-
as="span"
159-
data-component="buttonContent"
160-
sx={getAlignContentSize(alignContent)}
161-
className={classes.ButtonContent}
162-
>
163-
{
164-
/* If there are no leading/trailing visuals/actions to replace with a loading spinner,
165-
render a loading spiner in place of the button content. */
166-
loading &&
167-
!LeadingVisual &&
168-
!TrailingVisual &&
169-
!TrailingAction &&
170-
renderModuleVisual(Spinner, loading, 'loadingSpinner', false)
171-
}
172-
{
173-
/* Render a leading visual unless the button is in a loading state.
174-
Then replace the leading visual with a loading spinner. */
175-
LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false)
176-
}
177-
{children && (
178-
<span data-component="text" className={classes.Label} id={loading ? `${uuid}-label` : undefined}>
179-
{children}
180-
</span>
181-
)}
182-
{
183-
/* If there is a count, render a counter label unless there is a trailing visual.
184-
Then render the counter label as a trailing visual.
185-
Replace the counter label or the trailing visual with a loading spinner if:
186-
- the button is in a loading state
187-
- there is no leading visual to replace with a loading spinner
188-
*/
189-
count !== undefined && !TrailingVisual
190-
? renderModuleVisual(
191-
() => (
192-
<CounterLabel className={classes.CounterLabel} data-component="ButtonCounter">
193-
{count}
194-
</CounterLabel>
195-
),
196-
Boolean(loading) && !LeadingVisual,
197-
'trailingVisual',
198-
true,
199-
)
200-
: TrailingVisual
201-
? renderModuleVisual(
202-
TrailingVisual,
203-
Boolean(loading) && !LeadingVisual,
204-
'trailingVisual',
205-
false,
206-
)
207-
: null
208-
}
209-
</Box>
210-
{
211-
/* If there is a trailing action, render it unless the button is in a loading state
212-
and there is no leading or trailing visual to replace with a loading spinner. */
213-
TrailingAction &&
214-
renderModuleVisual(
215-
TrailingAction,
216-
Boolean(loading) && !LeadingVisual && !TrailingVisual,
217-
'trailingAction',
218-
false,
219-
)
220-
}
221-
</>
222-
)}
223-
</Box>
224-
{loading && (
225-
<VisuallyHidden>
226-
<AriaStatus id={loadingAnnouncementID}>{loadingAnnouncement}</AriaStatus>
227-
</VisuallyHidden>
228-
)}
229-
</ConditionalWrapper>
230-
)
231-
}
83+
if (sxProp !== defaultSxProp) {
23284
return (
23385
<ConditionalWrapper
23486
// If anything is passsed to `loading`, we need the wrapper:
@@ -239,10 +91,11 @@ const ButtonBase = forwardRef(
23991
className={block ? classes.ConditionalWrapper : undefined}
24092
data-loading-wrapper
24193
>
242-
<Component
94+
<Box
95+
as={Component}
96+
sx={sxProp}
24397
aria-disabled={loading ? true : undefined}
24498
{...rest}
245-
// @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
24699
ref={innerRef}
247100
className={clsx(classes.ButtonBase, className)}
248101
data-block={block ? 'block' : null}
@@ -262,7 +115,6 @@ const ButtonBase = forwardRef(
262115
loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy
263116
}
264117
id={id}
265-
// @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
266118
onClick={loading ? undefined : onClick}
267119
>
268120
{Icon ? (
@@ -275,7 +127,12 @@ const ButtonBase = forwardRef(
275127
)
276128
) : (
277129
<>
278-
<span data-component="buttonContent" data-align={alignContent} className={classes.ButtonContent}>
130+
<Box
131+
as="span"
132+
data-component="buttonContent"
133+
sx={getAlignContentSize(alignContent)}
134+
className={classes.ButtonContent}
135+
>
279136
{
280137
/* If there are no leading/trailing visuals/actions to replace with a loading spinner,
281138
render a loading spiner in place of the button content. */
@@ -287,7 +144,7 @@ const ButtonBase = forwardRef(
287144
}
288145
{
289146
/* Render a leading visual unless the button is in a loading state.
290-
Then replace the leading visual with a loading spinner. */
147+
Then replace the leading visual with a loading spinner. */
291148
LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false)
292149
}
293150
{children && (
@@ -322,7 +179,7 @@ const ButtonBase = forwardRef(
322179
)
323180
: null
324181
}
325-
</span>
182+
</Box>
326183
{
327184
/* If there is a trailing action, render it unless the button is in a loading state
328185
and there is no leading or trailing visual to replace with a loading spinner. */
@@ -336,7 +193,7 @@ const ButtonBase = forwardRef(
336193
}
337194
</>
338195
)}
339-
</Component>
196+
</Box>
340197
{loading && (
341198
<VisuallyHidden>
342199
<AriaStatus id={loadingAnnouncementID}>{loadingAnnouncement}</AriaStatus>
@@ -345,29 +202,28 @@ const ButtonBase = forwardRef(
345202
</ConditionalWrapper>
346203
)
347204
}
348-
349205
return (
350206
<ConditionalWrapper
351207
// If anything is passsed to `loading`, we need the wrapper:
352208
// If we just checked for `loading` as a boolean, the wrapper wouldn't be rendered
353209
// when `loading` is `false`.
354210
// Then, the component re-renders in a way that the button will lose focus when switching between loading states.
355211
if={typeof loading !== 'undefined'}
356-
sx={{display: block ? 'block' : 'inline-block'}}
212+
className={block ? classes.ConditionalWrapper : undefined}
357213
data-loading-wrapper
358214
>
359-
<StyledButton
360-
as={Component}
361-
sx={sxStyles}
215+
<Component
362216
aria-disabled={loading ? true : undefined}
363217
{...rest}
218+
// @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
364219
ref={innerRef}
365-
className={className}
220+
className={clsx(classes.ButtonBase, className)}
366221
data-block={block ? 'block' : null}
367222
data-inactive={inactive ? true : undefined}
368223
data-loading={Boolean(loading)}
369224
data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
370225
data-size={size}
226+
data-variant={variant}
371227
data-label-wrap={labelWrap}
372228
aria-describedby={[loadingAnnouncementID, ariaDescribedBy]
373229
.filter(descriptionID => Boolean(descriptionID))
@@ -379,6 +235,7 @@ const ButtonBase = forwardRef(
379235
loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy
380236
}
381237
id={id}
238+
// @ts-ignore temporary disable as we migrate to css modules, until we remove PolymorphicForwardRefComponent
382239
onClick={loading ? undefined : onClick}
383240
>
384241
{Icon ? (
@@ -391,23 +248,23 @@ const ButtonBase = forwardRef(
391248
)
392249
) : (
393250
<>
394-
<Box as="span" data-component="buttonContent" sx={getAlignContentSize(alignContent)}>
251+
<span data-component="buttonContent" data-align={alignContent} className={classes.ButtonContent}>
395252
{
396253
/* If there are no leading/trailing visuals/actions to replace with a loading spinner,
397254
render a loading spiner in place of the button content. */
398255
loading &&
399256
!LeadingVisual &&
400257
!TrailingVisual &&
401258
!TrailingAction &&
402-
renderVisual(Spinner, loading, 'loadingSpinner')
259+
renderModuleVisual(Spinner, loading, 'loadingSpinner', false)
403260
}
404261
{
405262
/* Render a leading visual unless the button is in a loading state.
406263
Then replace the leading visual with a loading spinner. */
407-
LeadingVisual && renderVisual(LeadingVisual, Boolean(loading), 'leadingVisual')
264+
LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false)
408265
}
409266
{children && (
410-
<span data-component="text" id={loading ? `${uuid}-label` : undefined}>
267+
<span data-component="text" className={classes.Label} id={loading ? `${uuid}-label` : undefined}>
411268
{children}
412269
</span>
413270
)}
@@ -419,25 +276,35 @@ const ButtonBase = forwardRef(
419276
- there is no leading visual to replace with a loading spinner
420277
*/
421278
count !== undefined && !TrailingVisual
422-
? renderVisual(
423-
() => <CounterLabel data-component="ButtonCounter">{count}</CounterLabel>,
279+
? renderModuleVisual(
280+
() => (
281+
<CounterLabel className={classes.CounterLabel} data-component="ButtonCounter">
282+
{count}
283+
</CounterLabel>
284+
),
424285
Boolean(loading) && !LeadingVisual,
425286
'trailingVisual',
287+
true,
426288
)
427289
: TrailingVisual
428-
? renderVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual')
290+
? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false)
429291
: null
430292
}
431-
</Box>
293+
</span>
432294
{
433295
/* If there is a trailing action, render it unless the button is in a loading state
434296
and there is no leading or trailing visual to replace with a loading spinner. */
435297
TrailingAction &&
436-
renderVisual(TrailingAction, Boolean(loading) && !LeadingVisual && !TrailingVisual, 'trailingAction')
298+
renderModuleVisual(
299+
TrailingAction,
300+
Boolean(loading) && !LeadingVisual && !TrailingVisual,
301+
'trailingAction',
302+
false,
303+
)
437304
}
438305
</>
439306
)}
440-
</StyledButton>
307+
</Component>
441308
{loading && (
442309
<VisuallyHidden>
443310
<AriaStatus id={loadingAnnouncementID}>{loadingAnnouncement}</AriaStatus>

‎packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap

+35-2,084
Large diffs are not rendered by default.

‎packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap

+9-300
Original file line numberDiff line numberDiff line change
@@ -7,295 +7,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
77
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
88
}
99
10-
.c2 {
11-
-webkit-box-pack: center;
12-
-webkit-justify-content: center;
13-
-ms-flex-pack: center;
14-
justify-content: center;
15-
}
16-
1710
.c1 {
18-
border-radius: 6px;
19-
border: 1px solid;
20-
border-color: var(--button-default-borderColor-rest,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));
21-
font-family: inherit;
22-
font-weight: 500;
23-
font-size: 14px;
24-
cursor: pointer;
25-
-webkit-appearance: none;
26-
-moz-appearance: none;
27-
appearance: none;
28-
-webkit-user-select: none;
29-
-moz-user-select: none;
30-
-ms-user-select: none;
31-
user-select: none;
32-
-webkit-text-decoration: none;
33-
text-decoration: none;
34-
text-align: center;
35-
display: -webkit-box;
36-
display: -webkit-flex;
37-
display: -ms-flexbox;
38-
display: flex;
39-
-webkit-align-items: center;
40-
-webkit-box-align: center;
41-
-ms-flex-align: center;
42-
align-items: center;
43-
-webkit-box-pack: justify;
44-
-webkit-justify-content: space-between;
45-
-ms-flex-pack: justify;
46-
justify-content: space-between;
47-
height: 32px;
48-
padding: 0 12px;
49-
gap: 8px;
50-
min-width: -webkit-max-content;
51-
min-width: -moz-max-content;
52-
min-width: max-content;
53-
-webkit-transition: 80ms cubic-bezier(0.65,0,0.35,1);
54-
transition: 80ms cubic-bezier(0.65,0,0.35,1);
55-
-webkit-transition-property: color,fill,background-color,border-color;
56-
transition-property: color,fill,background-color,border-color;
57-
color: var(--button-default-fgColor-rest,var(--color-btn-text,#24292f));
58-
background-color: var(--button-default-bgColor-rest,var(--color-btn-bg,#f6f8fa));
59-
box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow,0 1px 0 rgba(31,35,40,0.04))),var(--button-default-shadow-inset,var(--color-btn-inset-shadow,inset 0 1px 0 rgba(255,255,255,0.25)));
60-
}
61-
62-
.c1:focus:not(:disabled) {
63-
box-shadow: none;
64-
outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
65-
outline-offset: -2px;
66-
}
67-
68-
.c1:focus:not(:disabled):not(:focus-visible) {
69-
outline: solid 1px transparent;
70-
}
71-
72-
.c1:focus-visible:not(:disabled) {
73-
box-shadow: none;
74-
outline: 2px solid var(--fgColor-accent,var(--color-accent-fg,#0969da));
75-
outline-offset: -2px;
76-
}
77-
78-
.c1[href] {
79-
display: -webkit-inline-box;
80-
display: -webkit-inline-flex;
81-
display: -ms-inline-flexbox;
82-
display: inline-flex;
83-
}
84-
85-
.c1[href]:hover {
86-
-webkit-text-decoration: none;
87-
text-decoration: none;
88-
}
89-
90-
.c1:hover {
91-
-webkit-transition-duration: 80ms;
92-
transition-duration: 80ms;
93-
}
94-
95-
.c1:active {
96-
-webkit-transition: none;
97-
transition: none;
98-
}
99-
100-
.c1[data-inactive] {
101-
cursor: auto;
102-
}
103-
104-
.c1:disabled {
105-
cursor: not-allowed;
106-
box-shadow: none;
107-
color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
108-
border-color: var(--button-default-borderColor-disabled,var(--button-default-borderColor-rest,var(--color-btn-border,rgba(31,35,40,0.15))));
109-
background-color: var(--button-default-bgColor-disabled,var(--control-bgColor-disabled,var(--color-input-disabled-bg,rgba(175,184,193,0.2))));
110-
}
111-
112-
.c1:disabled [data-component=ButtonCounter] {
113-
color: inherit;
114-
}
115-
116-
.c1 [data-component=ButtonCounter] {
117-
font-size: 12px;
118-
background-color: var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg,rgba(31,35,40,0.08)));
119-
}
120-
121-
.c1[data-component=IconButton] {
122-
display: inline-grid;
123-
padding: unset;
124-
place-content: center;
125-
width: 32px;
126-
min-width: unset;
127-
}
128-
129-
.c1[data-size="small"] {
130-
padding: 0 8px;
131-
height: 28px;
132-
gap: 4px;
133-
font-size: 12px;
134-
}
135-
136-
.c1[data-size="small"] [data-component="text"] {
137-
line-height: 1.6666667;
138-
}
139-
140-
.c1[data-size="small"] [data-component=ButtonCounter] {
141-
font-size: 12px;
142-
}
143-
144-
.c1[data-size="small"] [data-component="buttonContent"] > :not(:last-child) {
145-
margin-right: 4px;
146-
}
147-
148-
.c1[data-size="small"][data-component=IconButton] {
149-
width: 28px;
150-
padding: unset;
151-
}
152-
153-
.c1[data-size="large"] {
154-
padding: 0 16px;
155-
height: 40px;
156-
gap: 8px;
157-
}
158-
159-
.c1[data-size="large"] [data-component="buttonContent"] > :not(:last-child) {
160-
margin-right: 8px;
161-
}
162-
163-
.c1[data-size="large"][data-component=IconButton] {
164-
width: 40px;
165-
padding: unset;
166-
}
167-
168-
.c1[data-block="block"] {
169-
width: 100%;
170-
}
171-
172-
.c1[data-label-wrap="true"] {
173-
min-width: -webkit-fit-content;
174-
min-width: -moz-fit-content;
175-
min-width: fit-content;
176-
height: unset;
177-
min-height: var(--control-medium-size,2rem);
178-
}
179-
180-
.c1[data-label-wrap="true"] [data-component="buttonContent"] {
181-
-webkit-flex: 1 1 auto;
182-
-ms-flex: 1 1 auto;
183-
flex: 1 1 auto;
184-
-webkit-align-self: stretch;
185-
-ms-flex-item-align: stretch;
186-
align-self: stretch;
187-
padding-block: calc(var(--control-medium-paddingBlock,0.375rem) - 2px);
188-
}
189-
190-
.c1[data-label-wrap="true"] [data-component="text"] {
191-
white-space: unset;
192-
word-break: break-word;
193-
}
194-
195-
.c1[data-label-wrap="true"][data-size="small"] {
196-
height: unset;
197-
min-height: var(--control-small-size,1.75rem);
198-
}
199-
200-
.c1[data-label-wrap="true"][data-size="small"] [data-component="buttonContent"] {
201-
padding-block: calc(var(--control-small-paddingBlock,0.25rem) - 2px);
202-
}
203-
204-
.c1[data-label-wrap="true"][data-size="large"] {
205-
height: unset;
206-
min-height: var(--control-large-size,2.5rem);
207-
padding-inline: var(--control-large-paddingInline-spacious,1rem);
208-
}
209-
210-
.c1[data-label-wrap="true"][data-size="large"] [data-component="buttonContent"] {
211-
padding-block: calc(var(--control-large-paddingBlock,0.625rem) - 2px);
212-
}
213-
214-
.c1[data-inactive]:not([disabled]) {
215-
background-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
216-
border-color: var(--button-inactive-bgColor,var(--button-inactive-bgColor-rest,var(--color-btn-inactive-bg,#eaeef2)));
217-
color: var(--button-inactive-fgColor,var(--button-inactive-fgColor-rest,var(--color-btn-inactive-text,#57606a)));
218-
}
219-
220-
.c1[data-inactive]:not([disabled]):focus-visible {
221-
box-shadow: none;
222-
}
223-
224-
.c1 [data-component="leadingVisual"] {
225-
grid-area: leadingVisual;
226-
}
227-
228-
.c1 [data-component="text"] {
229-
grid-area: text;
230-
line-height: 1.4285714;
231-
white-space: nowrap;
232-
}
233-
234-
.c1 [data-component="trailingVisual"] {
235-
grid-area: trailingVisual;
236-
}
237-
238-
.c1 [data-component="trailingAction"] {
239-
margin-right: -4px;
240-
}
241-
242-
.c1 [data-component="buttonContent"] {
243-
-webkit-flex: 1 0 auto;
244-
-ms-flex: 1 0 auto;
245-
flex: 1 0 auto;
246-
display: grid;
247-
grid-template-areas: "leadingVisual text trailingVisual";
248-
grid-template-columns: min-content minmax(0,auto) min-content;
249-
-webkit-align-items: center;
250-
-webkit-box-align: center;
251-
-ms-flex-align: center;
252-
align-items: center;
253-
-webkit-align-content: center;
254-
-ms-flex-line-pack: center;
255-
align-content: center;
256-
}
257-
258-
.c1 [data-component="buttonContent"] > :not(:last-child) {
259-
margin-right: 8px;
260-
}
261-
262-
.c1 [data-component="loadingSpinner"] {
263-
grid-area: text;
264-
margin-right: 0px !important;
265-
place-self: center;
266-
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
267-
}
268-
269-
.c1 [data-component="loadingSpinner"] + [data-component="text"] {
270-
visibility: hidden;
271-
}
272-
273-
.c1:hover:not([disabled]):not([data-inactive]) {
274-
background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg,#f3f4f6));
275-
border-color: var(--button-default-borderColor-hover,var(--button-default-borderColor-hover,var(--color-btn-hover-border,rgba(31,35,40,0.15))));
276-
}
277-
278-
.c1:active:not([disabled]):not([data-inactive]) {
279-
background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
280-
border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
281-
}
282-
283-
.c1[aria-expanded=true] {
284-
background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg,hsla(220,14%,93%,1)));
285-
border-color: var(--button-default-borderColor-active,var(--button-default-borderColor-active,var(--color-btn-active-border,rgba(31,35,40,0.15))));
286-
}
287-
288-
.c1 [data-component="leadingVisual"],
289-
.c1 [data-component="trailingVisual"],
290-
.c1 [data-component="trailingAction"] {
291-
color: var(--button-color,var(--fgColor-muted,var(--color-fg-muted,#656d76)));
292-
}
293-
294-
.c1[data-component="IconButton"][data-no-visuals]:not(:disabled) {
295-
color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
296-
}
297-
298-
.c3 {
29911
background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
30012
box-shadow: var(--shadow-floating-small,var(--color-overlay-shadow,0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12)));
30113
position: absolute;
@@ -309,22 +21,16 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
30921
visibility: var(--styled-overlay-visibility);
31022
}
31123
312-
.c3:focus {
24+
.c1:focus {
31325
outline: none;
31426
}
31527
316-
.c3[data-reflow-container='true'] {
28+
.c1[data-reflow-container='true'] {
31729
max-width: calc(100vw - 2rem);
31830
}
31931
32032
@media (forced-colors:active) {
321-
.c1:focus {
322-
outline: solid 1px transparent;
323-
}
324-
}
325-
326-
@media (forced-colors:active) {
327-
.c3 {
33+
.c1 {
32834
outline: solid 1px transparent;
32935
}
33036
}
@@ -343,19 +49,22 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
34349
aria-describedby=":rj:-loading-announcement"
34450
aria-expanded="true"
34551
aria-haspopup="true"
346-
class="c1"
52+
class="ButtonBase"
34753
data-loading="false"
34854
data-no-visuals="true"
34955
data-size="medium"
56+
data-variant="default"
35057
id=":rj:"
35158
tabindex="0"
35259
type="button"
35360
>
35461
<span
355-
class="c2"
62+
class="ButtonContent"
63+
data-align="center"
35664
data-component="buttonContent"
35765
>
35866
<span
67+
class="Label"
35968
data-component="text"
36069
>
36170
Anchor Button
@@ -370,7 +79,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
37079
style="position: relative; z-index: 1;"
37180
>
37281
<div
373-
class="c3"
82+
class="c1"
37483
data-focus-trap="active"
37584
height="auto"
37685
role="none"

‎packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap

+24-910
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.