fix(protocol-designer, component): fixes RadioButton and update path …

…tooltip (#16635)

fix RQA-3270, re AUTH-862

<!--
Thanks for taking the time to open a Pull Request (PR)! Please make sure
you've read the "Opening Pull Requests" section of our Contributing
Guide:


https://github.com/Opentrons/opentrons/blob/edge/CONTRIBUTING.md#opening-pull-requests

GitHub provides robust markdown to format your PR. Links, diagrams,
pictures, and videos along with text formatting make it possible to
create a rich and informative PR. For more information on GitHub
markdown, see:


https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax

To ensure your code is reviewed quickly and thoroughly, please fill out
the sections below to the best of your ability!
-->

# Overview

<!--
Describe your PR at a high level. State acceptance criteria and how this
PR fits into other work. Link issues, PRs, and other relevant resources.
-->

Updating the `RadioButton` component to fix the "double-clicking"
behavior when quickly clicking through different paths in the Transfer
step. Also updating the GIF images for path animation.

## Test Plan and Hands on Testing

<!--
Describe your testing of the PR. Emphasize testing not reflected in the
code. Attach protocols, logs, screenshots and any other assets that
support your testing.
-->

## Changelog

<!--
List changes introduced by this PR considering future developers and the
end user. Give careful thought and clear documentation to breaking
changes.
-->
- moved `styled` components outside the `RadioButton` component to
prevent them from being created dynamically
- updated gifs

## Review requests

<!--
- What do you need from reviewers to feel confident this PR is ready to
merge?
- Ask questions.
-->

## Risk assessment

<!--
- Indicate the level of attention this PR needs.
- Provide context to guide reviewers.
- Discuss trade-offs, coupling, and side effects.
- Look for the possibility, even if you think it's small, that your
change may affect some other part of the system.
- For instance, changing return tip behavior may also change the
behavior of labware calibration.
- How do your unit tests and on hands on testing mitigate this PR's
risks and the risk of future regressions?
- Especially in high risk PRs, explain how you know your testing is
enough.
-->

---------

Co-authored-by: shiyaochen <[email protected]>
Co-authored-by: shiyaochen <[email protected]>

components/src/atoms/buttons/RadioButton.tsx

@@ -1,21 +1,20 @@
 import type * as React from 'react'
 import styled, { css } from 'styled-components'
 import { Flex } from '../../primitives'
+import { COLORS, BORDERS } from '../../helix-design-system'
+import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import {
-  ALIGN_CENTER,
-  BORDERS,
-  COLORS,
   CURSOR_DEFAULT,
-  CURSOR_NOT_ALLOWED,
   CURSOR_POINTER,
+  CURSOR_NOT_ALLOWED,
   DIRECTION_ROW,
+  ALIGN_CENTER,
   Icon,
-  RESPONSIVENESS,
-  SPACING,
   StyledText,
-} from '../..'
-import type { IconName } from '../..'
+} from '../../index'
+import type { IconName } from '../../icons'
 import type { StyleProps } from '../../primitives'
+import type { FlattenSimpleInterpolation } from 'styled-components'
 
 interface RadioButtonProps extends StyleProps {
   buttonLabel: string | React.ReactNode
@@ -28,7 +27,7 @@ interface RadioButtonProps extends StyleProps {
   radioButtonType?: 'large' | 'small'
   subButtonLabel?: string
   id?: string
-  maxLines?: number | null
+  maxLines?: number
   //  used for mouseEnter and mouseLeave
   setNoHover?: () => void
   setHovered?: () => void
@@ -51,17 +50,12 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
       : `RadioButtonId_${buttonValue}`,
     largeDesktopBorderRadius = false,
     iconName,
-    maxLines = null,
+    maxLines = 1,
     setHovered,
     setNoHover,
   } = props
-
   const isLarge = radioButtonType === 'large'
 
-  const SettingButton = styled.input`
-    display: none;
-  `
-
   const AVAILABLE_BUTTON_STYLE = css`
     background: ${COLORS.blue35};
 
@@ -81,46 +75,6 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     }
   `
 
-  const DISABLED_BUTTON_STYLE = css`
-    background-color: ${COLORS.grey35};
-    color: ${COLORS.grey50};
-
-    &:hover,
-    &:active {
-      background-color: ${COLORS.grey35};
-    }
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      cursor: ${CURSOR_NOT_ALLOWED};
-    }
-  `
-
-  const SettingButtonLabel = styled.label`
-    border-radius: ${!largeDesktopBorderRadius
-      ? BORDERS.borderRadius40
-      : BORDERS.borderRadius8};
-    cursor: ${CURSOR_POINTER};
-    padding: ${SPACING.spacing12} ${SPACING.spacing16};
-    width: 100%;
-
-    ${isSelected ? SELECTED_BUTTON_STYLE : AVAILABLE_BUTTON_STYLE}
-    ${disabled && DISABLED_BUTTON_STYLE}
-
-    &:focus-visible {
-      outline: 2px solid ${COLORS.blue55};
-    }
-
-    @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-      cursor: ${CURSOR_DEFAULT};
-      padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20};
-      border-radius: ${BORDERS.borderRadius16};
-      display: ${maxLines != null ? '-webkit-box' : undefined};
-      -webkit-line-clamp: ${maxLines ?? undefined};
-      -webkit-box-orient: ${maxLines != null ? 'vertical' : undefined};
-      word-wrap: break-word;
-    }
-  `
-
   const SUBBUTTON_LABEL_STYLE = css`
     color: ${disabled
       ? COLORS.grey50
@@ -129,6 +83,15 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
       : COLORS.grey60};
   `
 
+  const getButtonStyle = (
+    isSelected: boolean,
+    disabled: boolean
+  ): FlattenSimpleInterpolation => {
+    if (disabled) return DISABLED_BUTTON_STYLE
+    if (isSelected) return SELECTED_BUTTON_STYLE
+    return AVAILABLE_BUTTON_STYLE
+  }
+
   return (
     <Flex
       css={css`
@@ -149,10 +112,16 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
       />
       <SettingButtonLabel
         tabIndex={0}
+        isLarge={isLarge}
+        maxLines={maxLines}
+        largeDesktopBorderRadius={largeDesktopBorderRadius}
+        disabled={disabled}
+        isSelected={isSelected}
         role="label"
         htmlFor={id}
         onMouseEnter={setHovered}
         onMouseLeave={setNoHover}
+        css={getButtonStyle(isSelected, disabled)}
       >
         <Flex
           flexDirection={DIRECTION_ROW}
@@ -194,3 +163,54 @@ export function RadioButton(props: RadioButtonProps): JSX.Element {
     </Flex>
   )
 }
+
+const DISABLED_BUTTON_STYLE = css`
+  background-color: ${COLORS.grey35};
+  color: ${COLORS.grey50};
+
+  &:hover,
+  &:active {
+    background-color: ${COLORS.grey35};
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    cursor: ${CURSOR_NOT_ALLOWED};
+  }
+`
+
+const SettingButton = styled.input`
+  display: none;
+`
+
+interface SettingsButtonLabelProps {
+  isSelected: boolean
+  disabled: boolean
+  largeDesktopBorderRadius: boolean
+  isLarge: boolean
+  maxLines?: number | null
+}
+
+const SettingButtonLabel = styled.label<SettingsButtonLabelProps>`
+  border-radius: ${({ largeDesktopBorderRadius }) =>
+    !largeDesktopBorderRadius ? BORDERS.borderRadius40 : BORDERS.borderRadius8};
+  cursor: ${CURSOR_POINTER};
+  padding: ${SPACING.spacing12} ${SPACING.spacing16};
+  width: 100%;
+
+  ${({ disabled }) => disabled && DISABLED_BUTTON_STYLE}
+  &:focus-visible {
+    outline: 2px solid ${COLORS.blue55};
+  }
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    cursor: ${CURSOR_DEFAULT};
+    padding: ${({ largeDesktopBorderRadius }) =>
+      largeDesktopBorderRadius ? SPACING.spacing24 : SPACING.spacing20};
+    border-radius: ${BORDERS.borderRadius16};
+    display: ${({ maxLines }) => (maxLines != null ? '-webkit-box' : 'none')};
+    -webkit-line-clamp: ${({ maxLines }) => maxLines ?? 'none'};
+    -webkit-box-orient: ${({ maxLines }) =>
+      maxLines != null ? 'vertical' : 'none'};
+    word-wrap: break-word;
+  }
+`

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PathField.tsx

@@ -6,6 +6,7 @@ import {
   Flex,
   RadioButton,
   SPACING,
+  TOOLTIP_TOP_START,
   Tooltip,
   useHoverTooltip,
 } from '@opentrons/components'
@@ -62,19 +63,23 @@ interface PathButtonProps {
 
 function PathButton(props: PathButtonProps): JSX.Element {
   const { disabled, onClick, id, path, selected, subtitle } = props
-  const [targetProps, tooltipProps] = useHoverTooltip()
+  const [targetProps, tooltipProps] = useHoverTooltip({
+    placement: TOOLTIP_TOP_START,
+  })
   const { t } = useTranslation(['form', 'protocol_steps'])
   // TODO: update the tooltip and images
   const tooltip = (
-    <Tooltip tooltipProps={tooltipProps}>
-      <Box>{t(`step_edit_form.field.path.title.${path}`)}</Box>
-      <img src={PATH_ANIMATION_IMAGES[path]} />
-      <Box>{subtitle}</Box>
+    <Tooltip tooltipProps={tooltipProps} maxWidth="24.5rem">
+      <Flex gridGap={SPACING.spacing8} flexDirection={DIRECTION_COLUMN}>
+        <Box>{t(`step_edit_form.field.path.title.${path}`)}</Box>
+        <img src={PATH_ANIMATION_IMAGES[path]} width="361px" />
+        <Box>{subtitle}</Box>
+      </Flex>
     </Tooltip>
   )
 
   return (
-    <Flex {...targetProps} width="100%" key={id}>
+    <Flex {...targetProps} key={id}>
       {tooltip}
       <RadioButton
         width="100%"