getsentry · TkDodo · Jul 15, 2025 · Jul 14, 2025 · Jul 14, 2025 · Jul 14, 2025
diff --git a/static/app/components/actions/archive.tsx b/static/app/components/actions/archive.tsx
@@ -297,7 +297,7 @@ function ArchiveActions({
   });
 
   return (
-    <ButtonBar merged>
+    <ButtonBar merged gap="none">
       <ArchiveButton
         size={size}
         className={className}

diff --git a/static/app/components/actions/resolve.tsx b/static/app/components/actions/resolve.tsx
@@ -329,7 +329,7 @@ function ResolveActions({
 
   return (
     <Tooltip disabled={!projectFetchError} title={t('Error fetching project')}>
-      <ButtonBar merged>
+      <ButtonBar merged gap="none">
         <ResolveButton
           priority={priority}
           size={size}

diff --git a/static/app/components/alerts/snoozeAlert.tsx b/static/app/components/alerts/snoozeAlert.tsx
@@ -167,7 +167,7 @@ function SnoozeAlert({
     );
   }
   return (
-    <ButtonBar>
+    <ButtonBar gap="none">
       <MuteButton
         size="sm"
         icon={<IconSound />}

diff --git a/static/app/components/assistant/guideAnchor.tsx b/static/app/components/assistant/guideAnchor.tsx
@@ -172,7 +172,7 @@ class BaseGuideAnchor extends Component<Props, State> {
         }}
         wrapperComponent={wrapperComponent ?? GuideAnchorWrapper}
         actions={
-          <ButtonBar gap={1}>
+          <ButtonBar>
             {lastStep ? (
               <TourAction size="xs" onClick={this.handleFinish}>
                 {currentStep.nextText ||

diff --git a/static/app/components/banner.tsx b/static/app/components/banner.tsx
@@ -73,7 +73,7 @@ function Banner({
       <BannerContent>
         <BannerTitle>{title}</BannerTitle>
         <BannerSubtitle>{subtitle}</BannerSubtitle>
-        <StyledButtonBar gap={1}>{children}</StyledButtonBar>
+        <StyledButtonBar>{children}</StyledButtonBar>
       </BannerContent>
     </BannerWrapper>
   );

diff --git a/static/app/components/checkInTimeline/checkInTimeline.stories.tsx b/static/app/components/checkInTimeline/checkInTimeline.stories.tsx
@@ -102,7 +102,7 @@ export default Storybook.story('CheckInTimeline', story => {
           are contiguously the same status will be merged together visually.
         </p>
 
-        <Controls gap={1}>
+        <Controls>
           <DatePageFilter triggerProps={{prefix: 'Time Window'}} />
           <CompactSelect
             triggerProps={{prefix: 'Spacing'}}

diff --git a/static/app/components/confirm.tsx b/static/app/components/confirm.tsx
@@ -324,7 +324,7 @@ function ConfirmModal({
         {makeConfirmMessage()}
       </Body>
       <Footer>
-        <ButtonBar gap={2}>
+        <ButtonBar gap="xl">
           {renderCancelButton ? (
             renderCancelButton({
               closeModal,

@@ -45,7 +45,7 @@ export default Storybook.story('ButtonBar', (story, APIReference) => {
           is handled by the parent component, not the{' '}
           <Storybook.JSXNode name="ButtonBar" /> itself.
         </p>
-        <ButtonBar>
+        <ButtonBar gap="none">
           {['One', 'Two', 'Three'].map(id => (
             <Button key={id} {...makeProps(id)}>
               {id}
@@ -57,7 +57,7 @@ export default Storybook.story('ButtonBar', (story, APIReference) => {
           You can also pass the 'merged' prop to the{' '}
           <Storybook.JSXNode name="ButtonBar" /> to merge the buttons together.
         </p>
-        <ButtonBar merged>
+        <ButtonBar merged gap="none">
           {['One', 'Two', 'Three'].map(id => (
             <Button key={id} {...makeMergedProps(id)}>
               {id}
@@ -69,7 +69,7 @@ export default Storybook.story('ButtonBar', (story, APIReference) => {
           Managing the active state is optional, and you can also just use the buttonbar
           to manage the button layout.
         </p>
-        <ButtonBar merged>
+        <ButtonBar merged gap="none">
           {['One', 'Two', 'Three'].map(id => (
             <Button key={id}>{id}</Button>
           ))}
@@ -79,7 +79,7 @@ export default Storybook.story('ButtonBar', (story, APIReference) => {
           <Storybook.JSXNode name="ButtonBar" />s can have a single button in which case
           it looks like a button.
         </p>
-        <ButtonBar>
+        <ButtonBar gap="none">
           <Button>One Lonely Button</Button>
         </ButtonBar>
       </Fragment>

@@ -1,30 +1,34 @@
+import type {Theme} from '@emotion/react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {StyledButton} from 'sentry/components/core/button';
-// eslint-disable-next-line boundaries/element-types
-import type {ValidSize} from 'sentry/styles/space';
-// eslint-disable-next-line boundaries/element-types
-import {space} from 'sentry/styles/space';
+
+type Gap = keyof Theme['space'];
 
 interface ButtonBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
   children: React.ReactNode;
-  gap?: ValidSize | 0;
+  gap?: Gap;
   merged?: boolean;
 }
 
-export function ButtonBar({children, merged = false, gap = 0, ...props}: ButtonBarProps) {
+export function ButtonBar({
+  children,
+  merged = false,
+  gap = 'md',
+  ...props
+}: ButtonBarProps) {
   return (
     <StyledButtonBar merged={merged} gap={gap} {...props}>
       {children}
     </StyledButtonBar>
   );
 }
 
-const StyledButtonBar = styled('div')<{gap: ValidSize | 0; merged: boolean}>`
+const StyledButtonBar = styled('div')<{gap: Gap; merged: boolean}>`
   display: grid;
   grid-auto-flow: column;
-  grid-column-gap: ${p => (p.gap === 0 ? '0' : space(p.gap))};
+  grid-column-gap: ${p => p.theme.space[p.gap]};
   align-items: center;
 
   ${p => p.merged && MergedButtonBarStyles}

diff --git a/static/app/components/customIgnoreCountModal.tsx b/static/app/components/customIgnoreCountModal.tsx
@@ -78,7 +78,7 @@ export default function CustomIgnoreCountModal(props: Props) {
         />
       </Body>
       <Footer>
-        <ButtonBar gap={1}>
+        <ButtonBar>
           <Button onClick={closeModal}>{t('Cancel')}</Button>
           <Button priority="primary" onClick={handleSubmit}>
             {t('Ignore')}

diff --git a/static/app/components/customIgnoreDurationModal.tsx b/static/app/components/customIgnoreDurationModal.tsx
@@ -105,7 +105,7 @@ export default function CustomIgnoreDurationModal(props: Props) {
         </Alert.Container>
       )}
       <Footer>
-        <ButtonBar gap={1}>
+        <ButtonBar>
           <Button priority="default" onClick={closeModal}>
             {t('Cancel')}
           </Button>

diff --git a/static/app/components/deprecatedSmartSearchBar/index.tsx b/static/app/components/deprecatedSmartSearchBar/index.tsx
@@ -2121,7 +2121,7 @@ class DeprecatedSmartSearchBar extends Component<DefaultProps & Props, State> {
           {useFormWrapper ? <form onSubmit={this.onSubmit}>{input}</form> : input}
         </InputWrapper>
 
-        <ActionsBar gap={0.5}>
+        <ActionsBar gap="xs">
           {query !== '' && !disabled && (
             <ActionButton
               type="button"

diff --git a/static/app/components/deprecatedSmartSearchBar/searchDropdown.tsx b/static/app/components/deprecatedSmartSearchBar/searchDropdown.tsx
@@ -134,7 +134,7 @@ function SearchDropdown({
       )}
 
       <DropdownFooter>
-        <ButtonBar gap={1}>
+        <ButtonBar>
           {runShortcut &&
             visibleShortcuts?.map(shortcut => (
               <Button

diff --git a/static/app/components/errors/detailedError.tsx b/static/app/components/errors/detailedError.tsx
@@ -47,7 +47,7 @@ function DetailedError({className, heading, message, onRetry, hideSupportLinks}:
           <div>{onRetry && <Button onClick={onRetry}>{t('Retry')}</Button>}</div>
 
           {!hideSupportLinks && (
-            <ButtonBar gap={1.5}>
+            <ButtonBar gap="lg">
               {lastEventId && (
                 <Button
                   priority="link"

@@ -290,7 +290,7 @@ export function AutofixChanges({
                 </ChatButton>
               </HeaderText>
               {!prsMade && (
-                <ButtonBar gap={1}>
+                <ButtonBar>
                   {branchesMade ? (
                     step.changes.length === 1 && step.changes[0] ? (
                       <BranchButton change={step.changes[0]} />

@@ -151,7 +151,7 @@ function AutofixInsightCard({
                         }
                       }}
                     />
-                    <ButtonBar merged>
+                    <ButtonBar merged gap="none">
                       <Button
                         type="button"
                         size="sm"
@@ -403,7 +403,7 @@ function CollapsibleChainLink({
                       }
                     }}
                   />
-                  <ButtonBar merged>
+                  <ButtonBar merged gap="none">
                     <Button
                       type="button"
                       size="sm"

@@ -253,7 +253,7 @@ function AutofixRootCauseDisplay({
               <IconChat size="xs" />
             </ChatButton>
           </HeaderText>
-          <ButtonBar>
+          <ButtonBar gap="none">
             <CopyRootCauseButton cause={cause} />
           </ButtonBar>
         </HeaderWrapper>

@@ -116,7 +116,7 @@ export function AutofixSetupWriteAccessModal({
       </Body>
       {!canCreatePullRequests && (
         <Footer>
-          <ButtonBar gap={1}>
+          <ButtonBar>
             <Button onClick={closeModal}>{t('Later')}</Button>
             <LinkButton
               href="https://github.com/apps/seer-by-sentry/installations/new"

@@ -487,13 +487,13 @@ function AutofixSolutionDisplay({
               <IconChat size="xs" />
             </ChatButton>
           </HeaderText>
-          <ButtonBar gap={1}>
-            <ButtonBar>
+          <ButtonBar>
+            <ButtonBar gap="none">
               {!isEditing && (
                 <CopySolutionButton solution={solution} isEditing={isEditing} />
               )}
             </ButtonBar>
-            <ButtonBar>
+            <ButtonBar gap="none">
               <Tooltip
                 isHoverable
                 title={

diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDataSection.tsx
@@ -125,7 +125,7 @@ export default function BreadcrumbsDataSection({
       : BreadcrumbTimeDisplay.ABSOLUTE;
 
   const actions = (
-    <ButtonBar gap={1}>
+    <ButtonBar>
       <Button
         aria-label={t('Open Breadcrumb Search')}
         icon={<IconSearch size="xs" />}

diff --git a/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx b/static/app/components/events/breadcrumbs/breadcrumbsDrawer.tsx
@@ -100,7 +100,7 @@ export function BreadcrumbsDrawer({
   );
 
   const actions = (
-    <ButtonBar gap={1}>
+    <ButtonBar>
       <InputGroup>
         <SearchInput
           size="xs"

diff --git a/static/app/components/events/eventAttachmentActions.tsx b/static/app/components/events/eventAttachmentActions.tsx
@@ -32,7 +32,7 @@ function EventAttachmentActions({
   const hasPreview = hasInlineAttachmentRenderer(attachment);
 
   return (
-    <ButtonBar gap={1}>
+    <ButtonBar>
       {withPreviewButton && (
         <Button
           size="xs"

@@ -576,7 +576,7 @@ function DifferentialFlamegraphChangedFunctionsTitle(props: {
           {props.subtitle}
         </DifferentialFlamegraphChangedFunctionsSubtitleText>
       </DifferentialFlamegraphChangedFunctionsTitleText>
-      <ButtonBar merged>
+      <ButtonBar merged gap="none">
         <DifferentialFlamegraphPaginationButton
           size="xs"
           disabled={!props.onPreviousPageClick}

diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx
@@ -122,7 +122,7 @@ function Screenshot({
       </StyledPanelBody>
       {!onlyRenderScreenshot && (
         <StyledPanelFooter>
-          <ButtonBar gap={1}>
+          <ButtonBar>
             <Button
               size="xs"
               onClick={() =>

diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
@@ -162,7 +162,7 @@ export default function ScreenshotModal({
         </Flex>
       </Body>
       <Footer>
-        <ButtonBar gap={1}>
+        <ButtonBar>
           {onDelete && (
             <Confirm
               confirmText={t('Delete')}

diff --git a/static/app/components/events/eventTagsAndScreenshot/tags.tsx b/static/app/components/events/eventTagsAndScreenshot/tags.tsx
@@ -68,7 +68,7 @@ export function EventTagsDataSection({
   }, [event.tags]);
 
   const actions = (
-    <ButtonBar gap={1}>
+    <ButtonBar>
       {additionalActions}
       <SegmentedControl
         size="xs"

@@ -113,7 +113,7 @@ export default function FeatureFlagInlineCTA({
   }
 
   const actions = (
-    <ButtonBar gap={1}>
+    <ButtonBar>
       {feedbackButton}
       <FeatureFlagSettingsButton orgSlug={organization.slug} />
     </ButtonBar>

@@ -69,7 +69,7 @@ export function EventFeatureFlagDrawer({
   );
 
   const actions = (
-    <ButtonBar gap={1}>
+    <ButtonBar>
       <InputGroup>
         <SearchInput
           size="xs"

@@ -261,7 +261,7 @@ function BaseEventFeatureFlagList({event, group, project}: EventFeatureFlagSecti
   }
 
   const actions = (
-    <ButtonBar gap={1}>
+    <ButtonBar>
       {feedbackButton}
       <FeatureFlagSettingsButton orgSlug={organization.slug} />
       {hasFlags && (

@@ -407,7 +407,7 @@ export default function EditHighlightsModal({
           <IconInfo />
           <div>{t('Changes are applied to all issues for this project')}</div>
         </FooterInfo>
-        <ButtonBar gap={1}>
+        <ButtonBar>
           <Button
             onClick={() => {
               trackAnalytics('highlights.edit_modal.cancel_clicked', {organization});

@@ -286,7 +286,7 @@ export default function HighlightsDataSection({
       data-test-id="event-highlights"
       actions={
         <ErrorBoundary mini>
-          <ButtonBar gap={1}>
+          <ButtonBar>
             {viewAllButton}
             <EditHighlightsButton project={project} event={event} />
           </ButtonBar>

@@ -73,7 +73,7 @@ export function CronTimelineSection({event, organization, project}: Props) {
     (new Date(event.dateReceived).valueOf() - start.valueOf()) / msPerPixel;
 
   const actions = (
-    <ButtonBar gap={1}>
+    <ButtonBar>
       <LinkButton
         size="xs"
         icon={<IconOpen />}

@@ -53,7 +53,7 @@ function Actions({
   const actions = (
     <Access access={['project:write']}>
       {({hasAccess}) => (
-        <ButtonBar gap={1}>
+        <ButtonBar>
           <Tooltip disabled={hasRole} title={noPermissionToDownloadDebugFilesInfo}>
             <LinkButton
               size="xs"

@@ -315,7 +315,7 @@ export function DebugImageDetails({
         </Content>
       </Body>
       <Footer>
-        <StyledButtonBar gap={1}>
+        <StyledButtonBar>
           <LinkButton
             href="https://docs.sentry.io/platforms/native/data-management/debug-files/"
             external

@@ -270,7 +270,7 @@ function StacktraceLinkModal({
         </ModalContainer>
       </Body>
       <Footer>
-        <ButtonBar gap={1}>
+        <ButtonBar>
           <Button onClick={closeModal}>{t('Cancel')}</Button>
           <Button priority="primary" onClick={handleSubmit}>
             {t('Save')}