Skip to content

Commit d9b3e79

Browse files
bsmiley1bsmiley1
committed
Merge remote-tracking branch 'upstream/main' into fix/XI-7052-vertical-tablist-wrapping
2 parents 6d523eb + b0c0454 commit d9b3e79

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+3284
-3109
lines changed

‎.storybook-s2/docs/Colors.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export function Colors() {
99
<Disclosure isQuiet>
1010
<DisclosureTitle>Background colors</DisclosureTitle>
1111
<DisclosurePanel>
12-
<P>The <Code>backgroundColor</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible. Some background colors also automatically update according to states such as <Code>isHovered</Code> (see <Link href="#runtime-conditions" target="_self">runtime conditions</Link> below).</P>
12+
<P>The <Code>backgroundColor</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as backgrounds, so prefer them over global colors where possible.</P>
1313
<div className="sb-unstyled" style={{columnWidth: 120}}>
1414
<Color name="base" className={colorSwatch('base')} />
1515
<Color name="layer-1" className={colorSwatch('layer-1')} />
@@ -74,7 +74,7 @@ export function Colors() {
7474
<Disclosure isQuiet>
7575
<DisclosureTitle>Text colors</DisclosureTitle>
7676
<DisclosurePanel>
77-
<P>The <Code>color</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible. Some text colors also automatically update according to states such as <Code>isHovered</Code> (see <Link href="#runtime-conditions" target="_self">runtime conditions</Link> below).</P>
77+
<P>The <Code>color</Code> property supports the following values, in addition to the semantic and global colors shown below. These colors are specifically chosen to be used as text colors, so prefer them over global colors where possible.</P>
7878
<div className="sb-unstyled" style={{columnWidth: 120}}>
7979
<Color name="accent" className={colorSwatch('accent', 'color')} />
8080
<Color name="neutral" className={colorSwatch('neutral', 'color')} />

‎packages/@react-aria/overlays/src/PortalProvider.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import React, {createContext, ReactNode, useContext} from 'react';
1414

1515
export interface PortalProviderProps {
1616
/** Should return the element where we should portal to. Can clear the context by passing null. */
17-
getContainer?: () => HTMLElement | null,
17+
getContainer?: (() => HTMLElement | null) | null,
1818
/** The content of the PortalProvider. Should contain all children that want to portal their overlays to the element returned by the provided `getContainer()`. */
1919
children: ReactNode
2020
}

‎packages/@react-spectrum/s2/chromatic/ActionButton.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ let combinations = generatePowerset(states);
4141
const Template = (args) => {
4242
let {children, ...otherArgs} = args;
4343
return (
44-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
44+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
4545
{combinations.map(c => {
4646
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4747
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/Badge.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ let chunkSize = Math.ceil(combinations.length / 3);
3838

3939
const Template = ({combos, ...args}) => {
4040
return (
41-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
41+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
4242
{combos.map(c => {
4343
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4444
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/Breadcrumbs.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ let combinations = generatePowerset(states);
5050

5151
const Template = () => {
5252
return (
53-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
53+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
5454
{combinations.map(c => {
5555
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
5656
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/Button.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ let combinations = generatePowerset(states);
4242
const Template = (args) => {
4343
let {children, ...otherArgs} = args;
4444
return (
45-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
45+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
4646
{combinations.map(c => {
4747
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4848
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/ButtonGroup.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const Horizontal = {
6565
render: Template,
6666
args: {
6767
combos: horizontalCombos,
68-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})
68+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})
6969
}
7070
};
7171

@@ -81,6 +81,6 @@ export const Vertical = {
8181
render: Template,
8282
args: {
8383
combos: verticalCombos,
84-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})
84+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})
8585
}
8686
};

‎packages/@react-spectrum/s2/chromatic/Card.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -211,7 +211,7 @@ export const Collection = (args: any) => (
211211
export const PreviewOverlay = (args: any) => (
212212
<Card {...args}>
213213
<CardPreview>
214-
<Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: '[1/1]', objectFit: 'cover', pointerEvents: 'none'})} />
214+
<Image alt="" src={new URL('assets/preview.png', import.meta.url).toString()} styles={style({width: 'full', aspectRatio: 'square', objectFit: 'cover', pointerEvents: 'none'})} />
215215
<Badge
216216
variant="positive"
217217
styles={style({

‎packages/@react-spectrum/s2/chromatic/Checkbox.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ let states = [
3939

4040
const Template = ({combos, ...args}) => {
4141
return (
42-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
42+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
4343
{combos.map(c => {
4444
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4545
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/CheckboxGroup.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const Horizontal = {
6565
render: Template,
6666
args: {
6767
combos: chunks[0],
68-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
68+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 600px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
6969
orientation: 'horizontal'
7070
}
7171
};
@@ -106,7 +106,7 @@ export const Vertical = {
106106
render: Template,
107107
args: {
108108
combos: chunks[0],
109-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
109+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
110110
orientation: 'vertical'
111111
}
112112
};
@@ -157,7 +157,7 @@ export const ContextualHelpStories = {
157157
render: Template,
158158
args: {
159159
combos: contextualHelpChunks[0],
160-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
160+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
161161
orientation: 'horizontal',
162162
contextualHelp: (
163163
<ContextualHelp>
@@ -188,7 +188,7 @@ export const ContextualHelpVertical = {
188188
render: Template,
189189
args: {
190190
...ContextualHelpStories.args,
191-
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'}),
191+
containerStyle: style({display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'}),
192192
orientation: 'vertical'
193193
}
194194
};

‎packages/@react-spectrum/s2/chromatic/ColorField.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ let states = [
3636

3737
const Template = ({combos, ...args}) => {
3838
return (
39-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 450px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
39+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 450px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
4040
{combos.map(c => {
4141
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4242
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/ColorSlider.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ let states = [
4141
let combinations = generatePowerset(states, (merged) => merged.label === null && (merged.showValueLabel === false || merged.contextualHelp));
4242

4343
const Template = (args) => (
44-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
44+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
4545
{combinations.map(c => {
4646
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
4747
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');
@@ -54,7 +54,7 @@ const Template = (args) => (
5454
);
5555

5656
const VerticalTemplate = (args) => (
57-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
57+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
5858
{combinations.map(c => {
5959
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
6060
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/NumberField.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ let combinations = generatePowerset(states);
4747

4848
const Template = ({...args}) => {
4949
return (
50-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
50+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', alignItems: 'center', justifyItems: 'start', gap: 24, width: '100vw'})}>
5151
{combinations.map(c => {
5252
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
5353
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/chromatic/ToggleButton.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ let combinations = generatePowerset(states);
4646
const Template = (args) => {
4747
let {children, ...otherArgs} = args;
4848
return (
49-
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '[100vw]'})}>
49+
<div className={style({display: 'grid', gridTemplateColumns: 'repeat(4, minmax(0, 250px))', gridAutoFlow: 'row', justifyItems: 'start', gap: 24, width: '100vw'})}>
5050
{combinations.map(c => {
5151
let fullComboName = Object.keys(c).map(k => `${k}: ${c[k]}`).join(' ');
5252
let key = Object.keys(c).map(k => shortName(k, c[k])).join(' ');

‎packages/@react-spectrum/s2/src/ActionButton.tsx

Lines changed: 21 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ import {AvatarContext} from './Avatar';
1515
import {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };
1616
import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';
1717
import {centerBaseline} from './CenterBaseline';
18+
import {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };
1819
import {createContext, forwardRef, ReactNode, useContext} from 'react';
1920
import {FocusableRef, FocusableRefValue} from '@react-types/shared';
20-
import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };
2121
import {IconContext} from './Icon';
2222
import {NotificationBadgeContext} from './NotificationBadge';
2323
import {pressScale} from './pressScale';
@@ -61,13 +61,12 @@ export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'styl
6161
// These styles handle both ActionButton and ToggleButton
6262
const iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';
6363
const textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';
64+
const controlStyle = control({shape: 'default', icon: true});
6465
export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({
6566
...focusRing(),
6667
...staticColor(),
67-
display: 'flex',
68-
alignItems: 'center',
68+
...controlStyle,
6969
justifyContent: 'center',
70-
columnGap: 'text-to-visual',
7170
flexShrink: {
7271
default: 1,
7372
isInGroup: 0
@@ -78,11 +77,8 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
7877
flexBasis: {
7978
isJustified: 0
8079
},
81-
font: 'control',
8280
fontWeight: 'medium',
8381
userSelect: 'none',
84-
height: 'control',
85-
minWidth: 'control',
8682
transition: 'default',
8783
forcedColorAdjust: 'none',
8884
backgroundColor: {
@@ -94,8 +90,8 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
9490
}
9591
},
9692
isSelected: {
97-
default: 'neutral',
98-
isEmphasized: 'accent',
93+
default: baseColor('neutral'),
94+
isEmphasized: baseColor('accent'),
9995
isDisabled: {
10096
default: 'gray-100',
10197
isQuiet: 'transparent'
@@ -124,7 +120,7 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
124120
}
125121
},
126122
color: {
127-
default: 'neutral',
123+
default: baseColor('neutral'),
128124
isSelected: {
129125
default: 'gray-25',
130126
isEmphasized: 'white'
@@ -153,95 +149,76 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
153149
forcedColors: 'Highlight'
154150
},
155151
borderStyle: 'none',
156-
paddingX: {
157-
default: 'edge-to-text',
158-
[iconOnly]: 0
159-
},
160-
paddingY: 0,
161152
borderTopStartRadius: {
162-
default: 'control',
153+
default: controlStyle.borderRadius,
163154
density: {
164155
compact: {
165156
default: 'none',
166-
':first-child': 'control'
157+
':first-child': controlStyle.borderRadius
167158
}
168159
}
169160
},
170161
borderTopEndRadius: {
171-
default: 'control',
162+
default: controlStyle.borderRadius,
172163
density: {
173164
compact: {
174165
default: 'none',
175166
orientation: {
176167
horizontal: {
177-
':last-child': 'control'
168+
':last-child': controlStyle.borderRadius
178169
},
179170
vertical: {
180-
':first-child': 'control'
171+
':first-child': controlStyle.borderRadius
181172
}
182173
}
183174
}
184175
}
185176
},
186177
borderBottomStartRadius: {
187-
default: 'control',
178+
default: controlStyle.borderRadius,
188179
density: {
189180
compact: {
190181
default: 'none',
191182
orientation: {
192183
horizontal: {
193-
':first-child': 'control'
184+
':first-child': controlStyle.borderRadius
194185
},
195186
vertical: {
196-
':last-child': 'control'
187+
':last-child': controlStyle.borderRadius
197188
}
198189
}
199190
}
200191
}
201192
},
202193
borderBottomEndRadius: {
203-
default: 'control',
194+
default: controlStyle.borderRadius,
204195
density: {
205196
compact: {
206197
default: 'none',
207-
':last-child': 'control'
198+
':last-child': controlStyle.borderRadius
208199
}
209200
}
210201
},
211-
'--iconMargin': {
212-
type: 'marginTop',
213-
value: {
214-
default: fontRelative(-2),
215-
[iconOnly]: 0
216-
}
217-
},
218202
zIndex: {
219203
isFocusVisible: 2
220204
},
221205
disableTapHighlight: true,
222206
'--badgeTop': {
223207
type: 'top',
224208
value: {
225-
default: '[calc(self(height)/2 - var(--iconWidth)/2)]',
209+
default: 'calc(self(height)/2 - var(--iconWidth)/2)',
226210
[textOnly]: 0
227211
}
228212
},
229-
'--buttonPaddingX': {
230-
type: 'paddingStart',
231-
value: {
232-
default: 'edge-to-text',
233-
[iconOnly]: 0
234-
}
235-
},
236213
'--iconWidth': {
237214
type: 'width',
238215
value: fontRelative(20)
239216
},
240217
'--badgePosition': {
241218
type: 'width',
242219
value: {
243-
default: '[calc(var(--buttonPaddingX) + var(--iconWidth))]',
244-
[iconOnly]: '[calc(self(minWidth)/2 + var(--iconWidth)/2)]',
220+
default: 'calc(self(paddingStart) + var(--iconWidth))',
221+
[iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',
245222
[textOnly]: 'full'
246223
}
247224
}
@@ -302,7 +279,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
302279
<Provider
303280
values={[
304281
[SkeletonContext, null],
305-
[TextContext, {styles: style({paddingY: '--labelPadding', order: 1, truncate: true})}],
282+
[TextContext, {styles: style({order: 1, truncate: true})}],
306283
[IconContext, {
307284
render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
308285
styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
@@ -315,7 +292,7 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
315292
staticColor: staticColor,
316293
size: props.size === 'XS' ? undefined : props.size,
317294
isDisabled: props.isDisabled,
318-
styles: style({position: 'absolute', top: '--badgeTop', insetStart: '[var(--badgePosition)]', marginTop: '[calc((self(height) * -1)/2)]', marginStart: '[calc((self(height) * -1)/2)]'})
295+
styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})
319296
}]
320297
]}>
321298
{typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}

‎packages/@react-spectrum/s2/src/AvatarGroup.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const AvatarGroupContext = createContext<ContextValue<Partial<AvatarGroup
3939

4040
const avatar = style({
4141
marginStart: {
42-
default: '[calc(var(--size) / -4)]',
42+
default: 'calc(var(--size) / -4)',
4343
':first-child': 0
4444
}
4545
});

0 commit comments

Comments
 (0)