Skip to content

fix: update action button to use grid area to position notification badge #8409

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yihuiliao merged 5 commits into from
Jun 27, 2025
Merged

fix: update action button to use grid area to position notification badge #8409

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f9a3b7d
fix: prevent s2 action button from expanding to fit container
yihuiliao Jun 18, 2025
107e8e0
Merge branch 'main' into s2-actionbutton-container
yihuiliao Jun 24, 2025
54fdc3e
use grid area to position notification badge
yihuiliao Jun 25, 2025
d482a31
fix lint
yihuiliao Jun 25, 2025
dab04f4
reivew follow-up
yihuiliao Jun 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 19 additions & 8 deletions packages/@react-spectrum/s2/src/ActionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
...focusRing(),
...staticColor(),
...controlStyle,
display: 'grid',
justifyContent: 'center',
flexShrink: {
default: 1,
Expand All @@ -79,9 +80,21 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
isJustified: 0
},
fontWeight: 'medium',
width: 'fit',
userSelect: 'none',
transition: 'default',
forcedColorAdjust: 'none',
position: 'relative',
gridTemplateAreas: {
default: ['icon text'],
[iconOnly]: ['icon'],
[textOnly]: ['text']
},
gridTemplateColumns: {
default: ['auto', 'auto'],
[iconOnly]: ['auto'],
[textOnly]: ['auto']
},
backgroundColor: {
default: {
...baseColor('gray-100'),
Expand Down Expand Up @@ -223,8 +236,7 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
'--badgePosition': {
type: 'width',
value: {
default: 'calc(self(paddingStart) + var(--iconWidth))',
[iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',
default: '--iconWidth',
[textOnly]: 'full'
}
},
Expand Down Expand Up @@ -289,10 +301,10 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
<Provider
values={[
[SkeletonContext, null],
[TextContext, {styles: style({order: 1, truncate: true})}],
[TextContext, {styles: style({truncate: true, gridArea: 'text'})}],
[IconContext, {
render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon'})}),
styles: style({size: fontRelative(20), marginStart: '--iconMargin'})
}],
[AvatarContext, {
size: avatarSize[size],
Expand All @@ -301,15 +313,14 @@ export const ActionButton = forwardRef(function ActionButton(props: ActionButton
default: '--iconMargin',
':last-child': 0
},
flexShrink: 0,
order: 0
gridArea: 'icon'
})
}],
[NotificationBadgeContext, {
staticColor: staticColor,
size: props.size === 'XS' ? undefined : props.size,
isDisabled: props.isDisabled,
styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})
styles: style({position: 'absolute', top: '--badgeTop', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc(var(--iconMargin) * 2 + (self(height) * -1)/4)', gridColumnStart: 1, insetStart: '--badgePosition'})
}]
]}>
{typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
Expand Down