ref(ui): make "md" the new buttonBar gap default (#95551)

The `ButtonBar` component now:

- takes spacing tokens as value for the `gap` prop
- defaults to `gap=“md”`, as this were most of the usages

That means places where we had `<ButtonBar gap=“1”>` are now just
`<ButtonBar>`, whereas we need to pass `gap=“none”` explicitly in places
where we want no spacing.

Author: TkDodo

static/app/components/actions/archive.tsx

@@ -297,7 +297,7 @@ function ArchiveActions({
   });
 
   return (
-    <ButtonBar merged>
+    <ButtonBar merged gap="none">
       <ArchiveButton
         size={size}
         className={className}

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}

static/app/components/alerts/snoozeAlert.tsx

@@ -167,7 +167,7 @@ function SnoozeAlert({
     );
   }
   return (
-    <ButtonBar>
+    <ButtonBar gap="none">
       <MuteButton
         size="sm"
         icon={<IconSound />}

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 ||

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>
   );

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'}}

static/app/components/confirm.tsx

@@ -324,7 +324,7 @@ function ConfirmModal({
         {makeConfirmMessage()}
       </Body>
       <Footer>
-        <ButtonBar gap={2}>
+        <ButtonBar gap="xl">
           {renderCancelButton ? (
             renderCancelButton({
               closeModal,

static/app/components/core/button/buttonBar.stories.tsx

@@ -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>

static/app/components/core/button/buttonBar.tsx

@@ -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}

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')}