fix(components, protocol-designer): fix toolbox and transfer tools st…

…yling Add title padding prop to toolbox and set default. Fix shared DropdownMenu component spacing between title and dropdown Closes RQA-3414
Opentrons · Nov 18, 2024 · ed5a290 · ed5a290
1 parent 8744089
commit ed5a290
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 10 deletions.
diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -205,15 +205,11 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     <Flex
       flexDirection={DIRECTION_COLUMN}
       ref={dropDownMenuWrapperRef}
-      gridGap={SPACING.spacing4}
+      gridGap={SPACING.spacing8}
       width={width}
     >
       {title !== null ? (
-        <Flex
-          gridGap={SPACING.spacing8}
-          paddingBottom={SPACING.spacing8}
-          alignItems={ALIGN_CENTER}
-        >
+        <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
           <StyledText
             desktopStyle="bodyDefaultRegular"
             color={disabled ? COLORS.grey35 : COLORS.grey60}

diff --git a/components/src/organisms/Toolbox/index.tsx b/components/src/organisms/Toolbox/index.tsx
@@ -25,6 +25,7 @@ export interface ToolboxProps {
   closeButton?: JSX.Element
   side?: 'left' | 'right'
   horizontalSide?: 'top' | 'bottom'
+  titlePadding?: string
   childrenPadding?: string
   subHeader?: JSX.Element | null
   secondaryHeaderButton?: JSX.Element
@@ -45,6 +46,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
     side = 'right',
     horizontalSide = 'bottom',
     confirmButton,
+    titlePadding = SPACING.spacing16,
     childrenPadding = SPACING.spacing16,
     subHeader,
     secondaryHeaderButton,
@@ -97,7 +99,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
         justifyContent={JUSTIFY_SPACE_BETWEEN}
       >
         <Flex
-          padding={`${SPACING.spacing20} ${SPACING.spacing16}`}
+          padding={titlePadding}
           flexDirection={DIRECTION_COLUMN}
           borderBottom={`1px solid ${COLORS.grey30}`}
         >

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/SubstepsToolbox.tsx
@@ -5,7 +5,6 @@ import {
   Flex,
   Icon,
   PrimaryButton,
-  SPACING,
   StyledText,
   Toolbox,
 } from '@opentrons/components'
@@ -62,7 +61,6 @@ export function SubstepsToolbox(
     substeps.substepType === THERMOCYCLER_PROFILE ? (
     <Toolbox
       width={FLEX_MAX_CONTENT}
-      childrenPadding="0"
       closeButton={<Icon size="2rem" name="close" />}
       onCloseClick={handleClose}
       confirmButton={
@@ -81,7 +79,7 @@ export function SubstepsToolbox(
         </StyledText>
       }
     >
-      <Flex padding={SPACING.spacing12}>
+      <Flex>
         {substeps.substepType === THERMOCYCLER_PROFILE ? (
           <ThermocyclerProfileSubsteps key="substeps" stepId={stepId} />
         ) : (

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/TimelineToolbox.tsx
@@ -66,6 +66,8 @@ export const TimelineToolbox = (): JSX.Element => {
           {t('protocol_timeline')}
         </StyledText>
       }
+      titlePadding={SPACING.spacing12}
+      childrenPadding={SPACING.spacing12}
       confirmButton={formData != null ? undefined : <AddStepButton />}
     >
       <Flex