ref(ui): Replace `grid-gap` with `gap` (#30939)

docs-ui/stories/assets/iconProps.stories.js

@@ -133,7 +133,7 @@ const SwatchWrapper = styled('div')`
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(5, auto);
-  grid-gap: 16px;
+  gap: 16px;
 `;
 
 const Swatches = styled('div')`

docs-ui/stories/assets/iconSet.stories.js

@@ -39,7 +39,7 @@ const SwatchWrapper = styled('div')`
 const Swatches = styled('div')`
   display: grid;
   grid-template-columns: repeat(auto-fill, 160px);
-  grid-gap: 8px;
+  gap: 8px;
 `;
 
 const Swatch = styled('div')`

docs-ui/stories/components/alert.stories.js

@@ -141,5 +141,5 @@ Expandable.parameters = {
 
 const Grid = styled('div')`
   display: grid;
-  grid-gap: ${space(1)};
+  gap: ${space(1)};
 `;

docs-ui/stories/components/progressBar.stories.js

@@ -23,5 +23,5 @@ _ProgressBar.storyName = 'Progress Bar';
 const Wrapper = styled('div')`
   width: 200px;
   display: grid;
-  grid-gap: ${space(3)};
+  gap: ${space(3)};
 `;

docs-ui/stories/components/progressRing.stories.js

@@ -85,5 +85,5 @@ const Grid = styled('div')`
   grid-template-columns: repeat(auto-fit, 50px);
   align-items: center;
   justify-content: center;
-  grid-gap: 8px;
+  gap: 8px;
 `;

docs-ui/stories/components/scoreCard.stories.js

@@ -38,6 +38,6 @@ Default.storyName = 'Default';
 
 const Wrapper = styled('div')`
   display: grid;
-  grid-gap: ${space(1)};
+  gap: ${space(1)};
   grid-template-columns: repeat(4, minmax(0, 1fr));
 `;

docs-ui/stories/core/colors/tables.tsx

@@ -16,7 +16,7 @@ type ColorGroup = {
 const Wrap = styled('div')`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
-  grid-gap: ${space(2)};
+  gap: ${space(2)};
 
   & > * {
     grid-column-end: span 1;

src/sentry/templates/sentry/debug/chart-renderer.html

@@ -10,7 +10,7 @@
       .charts {
         margin: 2rem;
         display: grid;
-        grid-gap: 1rem;
+        gap: 1rem;
       }
 
       .charts img {

static/app/components/assistant/guideAnchor.tsx

@@ -238,7 +238,7 @@ export default class GuideAnchorWrapper extends React.Component<WrapperProps> {
 const GuideContainer = styled('div')`
   display: grid;
   grid-template-rows: repeat(2, auto);
-  grid-gap: ${space(2)};
+  gap: ${space(2)};
   text-align: center;
   line-height: 1.5;
   background-color: ${p => p.theme.purple300};
@@ -249,7 +249,7 @@ const GuideContainer = styled('div')`
 const GuideContent = styled('div')`
   display: grid;
   grid-template-rows: repeat(2, auto);
-  grid-gap: ${space(1)};
+  gap: ${space(1)};
 
   a {
     color: ${p => p.theme.white};
@@ -269,7 +269,7 @@ const GuideDescription = styled('div')`
 const GuideAction = styled('div')`
   display: grid;
   grid-template-rows: repeat(2, auto);
-  grid-gap: ${space(1)};
+  gap: ${space(1)};
 `;
 
 const StyledButton = styled(Button)`

static/app/components/charts/styles.tsx

@@ -15,7 +15,7 @@ export const SubHeading = styled('h3')`
 export const SectionHeading = styled('h4')`
   display: inline-grid;
   grid-auto-flow: column;
-  grid-gap: ${space(1)};
+  gap: ${space(1)};
   align-items: center;
   color: ${p => p.theme.subText};
   font-size: ${p => p.theme.fontSizeMedium};
@@ -53,7 +53,7 @@ export const ChartControls = styled('div')`
 export const HeaderTitle = styled('div')`
   display: inline-grid;
   grid-auto-flow: column;
-  grid-gap: ${space(1)};
+  gap: ${space(1)};
   font-size: ${p => p.theme.fontSizeLarge};
   color: ${p => p.theme.textColor};
   align-items: center;
@@ -72,7 +72,7 @@ export const HeaderTitleLegend = styled(HeaderTitle)`
 export const HeaderValue = styled('div')`
   display: inline-grid;
   grid-auto-flow: column;
-  grid-gap: ${space(1)};
+  gap: ${space(1)};
   align-items: baseline;
   background-color: ${p => p.theme.background};
   position: absolute;