ref(ui): use space tokens for gap on Flex (#95775)

| before | after |
|--------|--------|
| `<Flex gap={space(1)}>` | `<Flex gap=“md”>` | 

This also caught one issue where we did `gap={0.5}` instead of
`gap={space(0.5)}`, resulting in 0.5px spacing, which is pretty likely
not what we wanted.

Author: TkDodo

static/app/components/codecov/branchSelector/branchSelector.tsx

@@ -87,7 +87,7 @@ export function BranchSelector() {
             {...triggerProps}
           >
             <TriggerLabelWrap>
-              <Flex align="center" gap={space(0.75)}>
+              <Flex align="center" gap="sm">
                 <IconContainer>
                   <IconBranch />
                 </IconContainer>

static/app/components/codecov/dateSelector/dateSelector.tsx

@@ -9,7 +9,6 @@ import DropdownButton from 'sentry/components/dropdownButton';
 import {getArbitraryRelativePeriod} from 'sentry/components/timeRangeSelector/utils';
 import {IconCalendar} from 'sentry/icons/iconCalendar';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 
 export const CODECOV_DEFAULT_RELATIVE_PERIODS = {
   '24h': t('Last 24 hours'),
@@ -65,7 +64,7 @@ export function DateSelector() {
             {...triggerProps}
           >
             <TriggerLabelWrap>
-              <Flex align="center" gap={space(0.75)}>
+              <Flex align="center" gap="sm">
                 <IconCalendar />
                 <TriggerLabel>{defaultLabel}</TriggerLabel>
               </Flex>

static/app/components/codecov/integratedOrgSelector/integratedOrgSelector.tsx

@@ -36,7 +36,7 @@ function OrgFooterMessage() {
     <Fragment>
       <AddIntegratedOrgButton />
       <MenuFooterDivider />
-      <Flex justify="flex-start" gap={space(1)}>
+      <Flex justify="flex-start" gap="md">
         <IconInfo size="sm" style={{margin: '2px 0'}} />
         <div>
           <FooterInfoHeading>
@@ -102,7 +102,7 @@ export function IntegratedOrgSelector() {
             {...triggerProps}
           >
             <TriggerLabelWrap>
-              <Flex justify="flex-start" gap={space(0.75)} align="center">
+              <Flex justify="flex-start" gap="sm" align="center">
                 <IconContainer>
                   <IconIntegratedOrg />
                 </IconContainer>

static/app/components/codecov/repoSelector/repoSelector.tsx

@@ -128,7 +128,7 @@ export function RepoSelector() {
             {...triggerProps}
           >
             <TriggerLabelWrap>
-              <Flex align="center" gap={space(0.75)}>
+              <Flex align="center" gap="sm">
                 <IconContainer>
                   <IconRepository />
                 </IconContainer>

static/app/components/contentSliderDiff/contentSliderDiff.stories.tsx

@@ -6,7 +6,6 @@ import GoodStackTraceExample from 'sentry-images/issue_details/good-stack-trace-
 import {Flex} from 'sentry/components/core/layout';
 import QuestionTooltip from 'sentry/components/questionTooltip';
 import * as Storybook from 'sentry/stories';
-import {space} from 'sentry/styles/space';
 
 import {ContentSliderDiff} from '.';
 
@@ -29,11 +28,11 @@ export default Storybook.story('ContentSliderDiff', story => {
         </p>
         <div>
           <ContentSliderDiff.Header>
-            <Flex align="center" gap={space(0.5)}>
+            <Flex align="center" gap="xs">
               Before
               <QuestionTooltip title="This is the before image" size="xs" />
             </Flex>
-            <Flex align="center" gap={space(0.5)}>
+            <Flex align="center" gap="xs">
               After
               <QuestionTooltip title="This is the after image" size="xs" />
             </Flex>

static/app/components/core/badge/alertBadge.tsx

@@ -12,7 +12,6 @@ import {
 } from 'sentry/icons';
 import type {SVGIconProps} from 'sentry/icons/svgIcon';
 import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
 import {withChonk} from 'sentry/utils/theme/withChonk';
 import {IncidentStatus} from 'sentry/views/alerts/types';
 
@@ -51,7 +50,7 @@ export function AlertBadge(props: AlertBadgeProps) {
   );
 
   return (
-    <PaddedContainer data-test-id="alert-badge" align="center" gap={space(1.5)}>
+    <PaddedContainer data-test-id="alert-badge" align="center" gap="lg">
       <DiamondBackground
         {...props}
         role="presentation"

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

@@ -1,14 +1,13 @@
-import type {Theme} from '@emotion/react';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {StyledButton} from 'sentry/components/core/button';
-
-type Gap = keyof Theme['space'];
+// eslint-disable-next-line boundaries/element-types
+import type {Space} from 'sentry/utils/theme/theme';
 
 interface ButtonBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
   children: React.ReactNode;
-  gap?: Gap;
+  gap?: Space;
   merged?: boolean;
 }
 
@@ -25,7 +24,7 @@ export function ButtonBar({
   );
 }
 
-const StyledButtonBar = styled('div')<{gap: Gap; merged: boolean}>`
+const StyledButtonBar = styled('div')<{gap: Space; merged: boolean}>`
   display: grid;
   grid-auto-flow: column;
   grid-column-gap: ${p => p.theme.space[p.gap]};

static/app/components/core/compactSelect/composite.stories.tsx

@@ -4,7 +4,6 @@ import {Button} from 'sentry/components/core/button';
 import {Flex} from 'sentry/components/core/layout';
 import {IconSentry, IconStar} from 'sentry/icons';
 import * as Storybook from 'sentry/stories';
-import {space} from 'sentry/styles/space';
 
 import {CompositeSelect} from './composite';
 import {CompactSelect} from './';
@@ -129,7 +128,7 @@ export default Storybook.story('CompositeSelect', story => {
           <code>CompactSelect</code> deal with multiple single-select sections:
         </p>
 
-        <Flex gap={space(1)}>
+        <Flex gap="md">
           <CompositeSelect
             trigger={triggerProps => (
               <Button

static/app/components/core/layout/flex.tsx

@@ -1,12 +1,16 @@
 import type {CSSProperties} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
+import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
+import type {space} from 'sentry/styles/space';
+import type {Space} from 'sentry/utils/theme/theme';
+
 interface FlexProps {
   align?: CSSProperties['alignItems'];
   direction?: CSSProperties['flexDirection'];
   flex?: CSSProperties['flex'];
-  gap?: CSSProperties['gap'];
+  gap?: Space | ReturnType<typeof space>;
   /**
    * Determines whether the flex container should be displayed as an inline-flex.
    */
@@ -24,7 +28,11 @@ export const Flex = styled('div', {
   flex-direction: ${p => p.direction};
   justify-content: ${p => p.justify};
   align-items: ${p => p.align};
-  gap: ${p => p.gap};
+  ${p =>
+    p.gap &&
+    css`
+      gap: ${p.gap in p.theme.space ? p.theme.space[p.gap as Space] : p.gap};
+    `};
   flex-wrap: ${p => p.wrap};
   flex: ${p => p.flex};
 `;

static/app/components/core/tooltip/index.stories.tsx

@@ -0,0 +1,90 @@
+import {Fragment} from 'react';
+
+import {Button} from 'sentry/components/core/button';
+import {Flex} from 'sentry/components/core/layout';
+import {Tooltip} from 'sentry/components/core/tooltip';
+import * as Storybook from 'sentry/stories';
+
+import types from '!!type-loader!sentry/components/core/tooltip';
+
+export default Storybook.story('Tooltip', (story, APIReference) => {
+  APIReference(types.Tooltip);
+
+  story('Default', () => {
+    return (
+      <Fragment>
+        <p>
+          Tooltip is a component that displays a tooltip when hovering over an element
+          (duh).
+        </p>
+        <p>
+          By default, a tooltip renders a wrapper around the children element and renders
+          the tooltip content in a portal. The wrapper can be skipped by passing the{' '}
+          <Storybook.JSXProperty name="skipWrapper" value="true" /> prop.
+        </p>
+        <Storybook.SideBySide>
+          <Tooltip title="Tooltip">
+            <Button>Hover me</Button>
+          </Tooltip>
+        </Storybook.SideBySide>
+      </Fragment>
+    );
+  });
+
+  story('Hoverable Tooltip', () => {
+    return (
+      <Fragment>
+        <p>
+          A tooltip is not hoverable by default and will hide before the pointer enters
+          it's container - to make it hoverable, pass the{' '}
+          <Storybook.JSXProperty name="isHoverable" value="true" /> prop.
+        </p>
+        <Storybook.SideBySide>
+          <Tooltip title="This can be copied" isHoverable skipWrapper>
+            <Button>Hoverable Tooltip</Button>
+          </Tooltip>
+          <Tooltip title="This cannot be copied" skipWrapper>
+            <Button>Non Hoverable Tooltip</Button>
+          </Tooltip>
+        </Storybook.SideBySide>
+      </Fragment>
+    );
+  });
+
+  story('All Positions', () => {
+    return (
+      <Fragment>
+        <p>
+          Tooltips can be positioned in different directions. Use the{' '}
+          <Storybook.JSXNode name="position" /> prop to control placement.
+        </p>
+        <Flex direction="column" gap="md" align="center">
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '8px',
+              margin: '40px 0 40px 0',
+              alignItems: 'center',
+            }}
+          >
+            <Tooltip title="Top Tooltip Position" position="top" forceVisible>
+              <Button>Top</Button>
+            </Tooltip>
+            <div style={{display: 'flex', gap: '8px'}}>
+              <Tooltip title="Left Tooltip Position" position="left" forceVisible>
+                <Button>Left</Button>
+              </Tooltip>
+              <Tooltip title="Right Tooltip Position" position="right" forceVisible>
+                <Button>Right</Button>
+              </Tooltip>
+            </div>
+            <Tooltip title="Bottom Tooltip Position" position="bottom" forceVisible>
+              <Button>Bottom</Button>
+            </Tooltip>
+          </div>
+        </Flex>
+      </Fragment>
+    );
+  });
+});