refactor(app): switch grid to DISPLAY_GRID (#16298)

* refactor(app): switch grid to DISPLAY_GRID
Opentrons · Sep 19, 2024 · f2e03cc · f2e03cc
1 parent f92b7b5
commit f2e03cc
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 19 deletions.
diff --git a/app/src/molecules/JogControls/DirectionControl.tsx b/app/src/molecules/JogControls/DirectionControl.tsx
@@ -13,16 +13,17 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
+  DISPLAY_GRID,
   Flex,
   HandleKeypress,
   Icon,
   JUSTIFY_CENTER,
   JUSTIFY_FLEX_START,
   JUSTIFY_SPACE_BETWEEN,
+  LegacyStyledText,
   PrimaryButton,
   RESPONSIVENESS,
   SPACING,
-  LegacyStyledText,
   TEXT_ALIGN_LEFT,
   TYPOGRAPHY,
 } from '@opentrons/components'
@@ -302,7 +303,7 @@ export function DirectionControl(props: DirectionControlProps): JSX.Element {
 }
 
 const ARROW_GRID_STYLES = css`
-  display: grid;
+  display: ${DISPLAY_GRID};
   max-width: 8.75rem;
   grid-template-columns: repeat(6, 1fr);
   grid-template-areas:

diff --git a/app/src/molecules/JogControls/StepSizeControl.tsx b/app/src/molecules/JogControls/StepSizeControl.tsx
@@ -8,12 +8,13 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
+  DISPLAY_GRID,
   Flex,
   HandleKeypress,
   Icon,
+  LegacyStyledText,
   PrimaryButton,
   SPACING,
-  LegacyStyledText,
   TEXT_TRANSFORM_CAPITALIZE,
   TYPOGRAPHY,
 } from '@opentrons/components'
@@ -35,7 +36,7 @@ const stepSizeTranslationKeyByStep: { [stepSize: number]: string } = {
 }
 
 const BUTTON_WRAPPER_STYLE = css`
-  display: grid;
+  display: ${DISPLAY_GRID};
   grid-auto-flow: column;
   grid-gap: ${SPACING.spacing8};
   margin-top: ${SPACING.spacing16};

diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx
@@ -16,6 +16,7 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   DISPLAY_BLOCK,
+  DISPLAY_GRID,
   DropdownMenu,
   Flex,
   Icon,
@@ -754,7 +755,7 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element {
                 }}
               >
                 <Box
-                  display="grid"
+                  display={DISPLAY_GRID}
                   gridTemplateColumns="1fr 3fr"
                   marginRight={SPACING.spacing16}
                 >

diff --git a/...rganisms/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/RunHeaderSectionLower.tsx b/...rganisms/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/RunHeaderSectionLower.tsx
@@ -6,6 +6,7 @@ import {
   BORDERS,
   Box,
   COLORS,
+  DISPLAY_GRID,
   Flex,
   JUSTIFY_FLEX_END,
   SecondaryButton,
@@ -69,7 +70,7 @@ export function RunHeaderSectionLower({
 }
 
 const SECTION_STYLE = css`
-  display: grid;
+  display: ${DISPLAY_GRID};
   grid-template-columns: 4fr 6fr 4fr;
   background-color: ${COLORS.grey10};
   padding: ${SPACING.spacing8};

diff --git a/...rganisms/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/RunHeaderSectionUpper.tsx b/...rganisms/Devices/ProtocolRun/ProtocolRunHeader/RunHeaderContent/RunHeaderSectionUpper.tsx
@@ -2,7 +2,12 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
 
-import { Box, Flex, JUSTIFY_FLEX_END } from '@opentrons/components'
+import {
+  Box,
+  DISPLAY_GRID,
+  Flex,
+  JUSTIFY_FLEX_END,
+} from '@opentrons/components'
 
 import { LabeledValue } from './LabeledValue'
 import { DisplayRunStatus } from '../DisplayRunStatus'
@@ -50,6 +55,6 @@ export function RunHeaderSectionUpper(
 }
 
 const SECTION_STYLE = css`
-  display: grid;
+  display: ${DISPLAY_GRID};
   grid-template-columns: 4fr 3fr 3fr 4fr;
 `
diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
@@ -18,6 +18,7 @@ import {
   COLORS,
   DIRECTION_COLUMN,
   DIRECTION_ROW,
+  DISPLAY_GRID,
   DISPLAY_INLINE,
   Flex,
   Icon,
@@ -259,7 +260,7 @@ const StyledTable = styled.table`
   text-align: left;
 `
 const StyledTableHeaderContainer = styled.thead`
-  display: grid;
+  display: ${DISPLAY_GRID};
   grid-template-columns: 0.35fr 0.35fr;
   grid-gap: ${SPACING.spacing48};
   border-bottom: ${BORDERS.lineBorder};
@@ -275,7 +276,7 @@ interface StyledTableRowProps {
 }
 
 const StyledTableRow = styled.tr<StyledTableRowProps>`
-  display: grid;
+  display: ${DISPLAY_GRID};
   grid-template-columns: 0.35fr 0.35fr;
   grid-gap: ${SPACING.spacing48};
   border-bottom: ${props => (props.isLast ? 'none' : BORDERS.lineBorder)};

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx
@@ -11,12 +11,13 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   DISPLAY_FLEX,
+  DISPLAY_GRID,
   Flex,
   Icon,
   JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
-  MODULE_ICON_NAME_BY_TYPE,
   LabwareRender,
+  MODULE_ICON_NAME_BY_TYPE,
   SIZE_AUTO,
   SPACING,
   StyledText,
@@ -55,7 +56,7 @@ import type { ModuleTypesThatRequireExtraAttention } from '../utils/getModuleTyp
 import type { NestedLabwareInfo } from './getNestedLabwareInfo'
 
 const LabwareRow = styled.div`
-  display: grid;
+  display: ${DISPLAY_GRID};
   grid-template-columns: 90px 12fr;
   border-style: ${BORDERS.styleSolid};
   border-width: 1px;

diff --git a/app/src/organisms/LabwareCard/index.tsx b/app/src/organisms/LabwareCard/index.tsx
@@ -18,6 +18,7 @@ import {
   SPACING,
   LegacyStyledText,
   TYPOGRAPHY,
+  DISPLAY_GRID,
 } from '@opentrons/components'
 
 import { UNIVERSAL_FLAT_ADAPTER_X_DIMENSION } from '../LabwareDetails/Gallery'
@@ -51,7 +52,7 @@ export function LabwareCard(props: LabwareCardProps): JSX.Element {
       height="auto"
       onClick={props.onClick}
       cursor="pointer"
-      display="grid"
+      display={DISPLAY_GRID}
       gridTemplateColumns=" minmax(5rem, 1fr) minmax(7.5rem, 1fr) 4fr minmax(
         3rem,
         1fr

diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
@@ -19,21 +19,22 @@ import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
   DISPLAY_FLEX,
+  DISPLAY_GRID,
   Flex,
   Icon,
   JUSTIFY_CENTER,
   JUSTIFY_SPACE_BETWEEN,
+  LegacyStyledText,
   Link,
+  Modal,
   OVERFLOW_WRAP_ANYWHERE,
   POSITION_RELATIVE,
   PrimaryButton,
   ProtocolDeck,
-  Tabs,
   SIZE_1,
   SIZE_5,
-  Modal,
   SPACING,
-  LegacyStyledText,
+  Tabs,
   TYPOGRAPHY,
 } from '@opentrons/components'
 import {
@@ -81,13 +82,13 @@ import type { StoredProtocolData } from '/app/redux/protocol-storage'
 import type { State, Dispatch } from '/app/redux/types'
 
 const GRID_STYLE = css`
-  display: grid;
+  display: ${DISPLAY_GRID};
   width: 100%;
   grid-template-columns: 26.6% 26.6% 26.6% 20.2%;
 `
 
 const TWO_COL_GRID_STYLE = css`
-  display: grid;
+  display: ${DISPLAY_GRID};
   grid-gap: ${SPACING.spacing24};
   grid-template-columns: 22.5% 77.5%;
 `
@@ -503,7 +504,7 @@ export function ProtocolDetails(
                 </Flex>
                 <Flex
                   css={css`
-                    display: grid;
+                    display: ${DISPLAY_GRID};
                     justify-self: end;
                   `}
                 >