feat(ui): Provide semantic names for media query breakpoints (#35594)

Migrates our media query breakpoints to semantic naming structure as discussed during our TSC.

docs-ui/components/doDont.tsx

@@ -53,7 +53,7 @@ const Wrapper = styled('div')`
   gap: ${space(2)};
   width: 100%;
   margin: ${space(2)} auto;
-  @media only screen and (max-width: ${p => p.theme.breakpoints[0]}) {
+  @media only screen and (max-width: ${p => p.theme.breakpoints.small}) {
     flex-wrap: wrap;
     margin: ${space(4)} auto;
   }
@@ -85,7 +85,7 @@ const Captions = styled('div')`
   align-items: flex-start;
   width: 100%;
   padding: ${space(1)};
-  @media only screen and (max-width: ${p => p.theme.breakpoints[0]}) {
+  @media only screen and (max-width: ${p => p.theme.breakpoints.small}) {
     flex-wrap: wrap;
   }
 `;
@@ -95,7 +95,7 @@ const LabelWrap = styled('div')`
   flex-shrink: 0;
   width: 6em;
   margin-top: ${space(0.5)};
-  @media only screen and (max-width: ${p => p.theme.breakpoints[0]}) {
+  @media only screen and (max-width: ${p => p.theme.breakpoints.small}) {
     margin-bottom: ${space(0.5)};
   }
 `;

docs-ui/components/docsLinks.tsx

@@ -80,7 +80,7 @@ const LinkWrap = styled(LinkTo)`
   cursor: pointer;
   margin: ${space(1)} 0;
 
-  @media only screen and (max-width: ${p => p.theme.breakpoints[0]}) {
+  @media only screen and (max-width: ${p => p.theme.breakpoints.small}) {
     width: calc((100% - ${space(2)}) / 2);
   }
 `;

docs-ui/components/tableOfContents.tsx

@@ -8,7 +8,7 @@ const Container = styled('div')`
   height: 100%;
   width: 16em;
 
-  @media only screen and (max-width: ${p => p.theme.breakpoints[1]}) {
+  @media only screen and (max-width: ${p => p.theme.breakpoints.medium}) {
     display: none;
   }
 `;

docs-ui/stories/views/layout-thirds.stories.js

@@ -232,7 +232,7 @@ const BorderlessHeader = styled(Layout.Header)`
 const TabLayoutHeader = styled(Layout.Header)`
   padding-top: 0;
 
-  @media (max-width: ${p => p.theme.breakpoints[1]}) {
+  @media (max-width: ${p => p.theme.breakpoints.medium}) {
     padding-top: 0;
   }
 `;

static/app/components/banner.tsx

@@ -100,7 +100,7 @@ const BannerWrapper = styled('div')<BannerWrapperProps>`
   height: 180px;
   color: ${p => p.theme.white};
 
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
     height: 220px;
   }
 `;
@@ -117,7 +117,7 @@ const BannerContent = styled('div')`
 const BannerTitle = styled('h1')`
   margin: 0;
 
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
     font-size: 40px;
   }
 `;
@@ -125,7 +125,7 @@ const BannerTitle = styled('h1')`
 const BannerSubtitle = styled('div')`
   margin: 0;
 
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
     font-size: ${p => p.theme.fontSizeExtraLarge};
   }
 `;

static/app/components/charts/styles.tsx

@@ -32,7 +32,7 @@ export const InlineContainer = styled('div')`
   display: grid;
   align-items: center;
 
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
     grid-auto-flow: column;
     grid-column-gap: ${space(1)};
   }
@@ -42,7 +42,7 @@ export const ChartControls = styled('div')`
   padding: ${space(1)} ${space(1)} ${space(1)} ${space(3)};
   border-top: 1px solid ${p => p.theme.border};
 
-  @media (min-width: ${p => p.theme.breakpoints[0]}) {
+  @media (min-width: ${p => p.theme.breakpoints.small}) {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;

static/app/components/demo/demoHeader.tsx

@@ -99,7 +99,7 @@ const Wrapper = styled('div')<{collapsed: boolean}>`
   border-bottom: 1px solid ${p => p.theme.border};
   z-index: ${p => p.theme.zIndex.settingsSidebarNav};
 
-  @media (max-width: ${p => p.theme.breakpoints[1]}) {
+  @media (max-width: ${p => p.theme.breakpoints.medium}) {
     height: ${p => p.theme.sidebar.mobileHeight};
     margin-left: 0;
   }
@@ -121,7 +121,7 @@ const BaseButton = styled(Button)`
 `;
 
 const RequestDemoBtn = styled(BaseButton)`
-  @media (max-width: ${p => p.theme.breakpoints[0]}) {
+  @media (max-width: ${p => p.theme.breakpoints.small}) {
     display: none;
   }
 `;

static/app/components/discover/performanceCardTable.tsx

@@ -753,7 +753,7 @@ const StyledPanelTable = styled(PanelTable)<{disableTopBorder: boolean}>`
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-top: ${p => (p.disableTopBorder ? 'none' : `1px solid ${p.theme.border}`)};
-  @media (max-width: ${p => p.theme.breakpoints[2]}) {
+  @media (max-width: ${p => p.theme.breakpoints.large}) {
     grid-template-columns: min-content 1fr 1fr 1fr;
   }
 `;

static/app/components/dropdownButton.tsx

@@ -91,7 +91,7 @@ const StyledChevron = styled(IconChevron, {
 }>`
   margin-left: 0.33em;
 
-  @media (max-width: ${p => p.theme.breakpoints[0]}) {
+  @media (max-width: ${p => p.theme.breakpoints.small}) {
     position: ${p => p.rightAlignChevron && 'absolute'};
     right: ${p => p.rightAlignChevron && `${space(2)}`};
   }

static/app/components/dropdownControl.tsx

@@ -181,7 +181,7 @@ const Container = styled('div')<{fullWidth: boolean}>`
   display: inline-block;
   position: relative;
 
-  @media (max-width: ${p => p.theme.breakpoints[0]}) {
+  @media (max-width: ${p => p.theme.breakpoints.small}) {
     width: ${p => p.fullWidth && '100%'};
   }
 `;