fix(protocol-designer,components): fix dropdown menu expands directio…

…n issue (#16841) * fix(protocol-designer,components): fix dropdown menu expands direction issue
Opentrons · Nov 19, 2024 · 9cbc2cb · 9cbc2cb
1 parent 8ed0043
commit 9cbc2cb
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 14 deletions.
diff --git a/components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx b/components/src/atoms/ListItem/ListItemChildren/ListItemCustomize.tsx
@@ -18,8 +18,8 @@ interface ListItemCustomizeProps {
   label?: string
   dropdown?: DropdownMenuProps
   tag?: TagProps
-  /** temporary prop for dropdown menu  */
-  forceDirection?: boolean
+  /** optional placement of the menu */
+  menuPlacement?: 'auto' | 'top' | 'bottom'
 }
 
 export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
@@ -31,7 +31,7 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
     linkText,
     dropdown,
     tag,
-    forceDirection = false,
+    menuPlacement = 'auto',
   } = props
   return (
     <Flex width="100%" alignItems={ALIGN_CENTER} padding={SPACING.spacing12}>
@@ -53,7 +53,7 @@ export function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element {
           </StyledText>
         ) : null}
         {dropdown != null ? (
-          <DropdownMenu {...dropdown} forceDirection={forceDirection} />
+          <DropdownMenu {...dropdown} menuPlacement={menuPlacement} />
         ) : null}
         {tag != null ? <Tag {...tag} /> : null}
       </Flex>

diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -69,8 +69,8 @@ export interface DropdownMenuProps {
   onBlur?: React.FocusEventHandler<HTMLButtonElement>
   /** optional disabled */
   disabled?: boolean
-  /** force direction for pd after release this will be fixed and remove */
-  forceDirection?: boolean
+  /** optional placement of the menu */
+  menuPlacement?: 'auto' | 'top' | 'bottom'
 }
 
 // TODO: (smb: 4/15/22) refactor this to use html select for accessibility
@@ -90,7 +90,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     disabled = false,
     onFocus,
     onBlur,
-    forceDirection = false,
+    menuPlacement = 'auto',
   } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
   const [showDropdownMenu, setShowDropdownMenu] = React.useState<boolean>(false)
@@ -108,7 +108,11 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
   })
 
   React.useEffect(() => {
-    if (forceDirection) return
+    if (menuPlacement !== 'auto') {
+      setDropdownPosition(menuPlacement)
+      return
+    }
+
     const handlePositionCalculation = (): void => {
       const dropdownRect = dropDownMenuWrapperRef.current?.getBoundingClientRect()
       if (dropdownRect != null) {
@@ -253,7 +257,10 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
                   : TYPOGRAPHY.pRegular};
               `}
             >
-              <StyledText desktopStyle="captionRegular" css={MENU_TEXT_STYLE}>
+              <StyledText
+                desktopStyle="captionRegular"
+                css={LINE_CLAMP_TEXT_STYLE}
+              >
                 {currentOption.name}
               </StyledText>
             </Flex>
@@ -325,11 +332,12 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
   )
 }
 
-const MENU_TEXT_STYLE = css`
+const LINE_CLAMP_TEXT_STYLE = css`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   overflow: ${OVERFLOW_HIDDEN};
   text-overflow: ellipsis;
   word-wrap: break-word;
   -webkit-line-clamp: 1;
+  word-break: break-all;
 `
diff --git a/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx b/protocol-designer/src/organisms/AssignLiquidsModal/LiquidToolbox.tsx
@@ -331,6 +331,7 @@ export function LiquidToolbox(props: LiquidToolboxProps): JSX.Element {
                                 liquidColor: selectLiquidColor,
                               }}
                               onClick={field.onChange}
+                              menuPlacement="bottom"
                             />
                           )
                         }}

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectFixtures.tsx
@@ -158,7 +158,7 @@ export function SelectFixtures(props: WizardTileProps): JSX.Element | null {
                 return (
                   <ListItem type="noActive" key={ae}>
                     <ListItemCustomize
-                      forceDirection
+                      menuPlacement="bottom"
                       linkText={t('remove')}
                       onClick={() => {
                         setValue(

diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectModules.tsx
@@ -258,7 +258,7 @@ export function SelectModules(props: WizardTileProps): JSX.Element | null {
                       return (
                         <ListItem type="noActive" key={`${module.model}`}>
                           <ListItemCustomize
-                            forceDirection
+                            menuPlacement="bottom"
                             dropdown={
                               MOAM_MODULE_TYPES.includes(module.type) &&
                               robotType === FLEX_ROBOT_TYPE

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -300,7 +300,11 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
           </Flex>
         }
       >
-        <div ref={toolsComponentRef}>
+        <div
+          ref={toolsComponentRef}
+          id="stepFormTools"
+          style={{ height: '100%' }}
+        >
           <FormAlerts
             focusedField={focusedField}
             dirtyFields={dirtyFields}

diff --git a/...l-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/index.tsx b/...l-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLabwareTools/index.tsx
@@ -31,6 +31,7 @@ export function MoveLabwareTools(props: StepFormProps): JSX.Element {
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing12}
       paddingY={SPACING.spacing16}
+      height="100%"
     >
       {robotType === FLEX_ROBOT_TYPE ? (
         <>

diff --git a/...c/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerState.tsx b/...c/pages/Designer/ProtocolSteps/StepForm/StepTools/ThermocyclerTools/ThermocyclerState.tsx
@@ -64,7 +64,8 @@ export function ThermocyclerState(props: ThermocyclerStateProps): JSX.Element {
     <Flex
       flexDirection={DIRECTION_COLUMN}
       gridGap={SPACING.spacing4}
-      padding={`0 ${SPACING.spacing16}`}
+      paddingX={SPACING.spacing16}
+      paddingTop={SPACING.spacing16}
     >
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
         <StyledText desktopStyle="bodyDefaultSemiBold">