Merge branch 'edge' into fix_pd-create-file-hover

Opentrons · Nov 21, 2024 · 48c9f29 · 48c9f29
2 parents dacde6f + 7411eaf
commit 48c9f29
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 36 deletions.
diff --git a/components/src/atoms/Tag/index.tsx b/components/src/atoms/Tag/index.tsx
@@ -1,7 +1,7 @@
 import { css } from 'styled-components'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Flex } from '../../primitives'
-import { ALIGN_CENTER, DIRECTION_ROW } from '../../styles'
+import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { Icon } from '../../icons'
 import { LegacyStyledText } from '../StyledText'
@@ -19,6 +19,7 @@ export interface TagProps {
   iconPosition?: 'left' | 'right'
   /** Tagicon */
   iconName?: IconName
+  shrinkToContent?: boolean
 }
 
 const defaultColors = {
@@ -42,11 +43,12 @@ const TAG_PROPS_BY_TYPE: Record<
 }
 
 export function Tag(props: TagProps): JSX.Element {
-  const { iconName, type, text, iconPosition } = props
+  const { iconName, type, text, iconPosition, shrinkToContent = false } = props
 
   const DEFAULT_CONTAINER_STYLE = css`
     padding: ${SPACING.spacing2} ${SPACING.spacing8};
     border-radius: ${BORDERS.borderRadius4};
+    width: ${shrinkToContent ? FLEX_MAX_CONTENT : 'none'};
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
       border-radius: ${BORDERS.borderRadius8};
       padding: ${SPACING.spacing8} ${SPACING.spacing12};

diff --git a/components/src/atoms/buttons/EmptySelectorButton.tsx b/components/src/atoms/buttons/EmptySelectorButton.tsx
@@ -1,27 +1,18 @@
 import styled from 'styled-components'
 import { Flex } from '../../primitives'
 import {
+  ALIGN_CENTER,
   CURSOR_DEFAULT,
   CURSOR_POINTER,
+  FLEX_MAX_CONTENT,
   Icon,
-  SPACING,
-  StyledText,
   JUSTIFY_CENTER,
   JUSTIFY_START,
-  ALIGN_CENTER,
-  FLEX_MAX_CONTENT,
+  SPACING,
+  StyledText,
 } from '../../index'
-import {
-  black90,
-  blue30,
-  blue50,
-  grey30,
-  grey40,
-  white,
-} from '../../helix-design-system/colors'
-import { borderRadius8 } from '../../helix-design-system/borders'
+import { BORDERS, COLORS } from '../../helix-design-system'
 import type { IconName } from '../../index'
-
 interface EmptySelectorButtonProps {
   onClick: () => void
   text: string
@@ -41,10 +32,9 @@ export function EmptySelectorButton(
       <Flex
         gridGap={SPACING.spacing4}
         padding={SPACING.spacing12}
-        backgroundColor={disabled ? grey30 : blue30}
-        color={disabled ? grey40 : black90}
-        borderRadius={borderRadius8}
-        border={`2px dashed ${disabled ? grey40 : blue50}`}
+        color={disabled ? COLORS.grey40 : COLORS.black90}
+        border={`2px dashed ${disabled ? COLORS.grey40 : COLORS.blue50}`}
+        borderRadius={BORDERS.borderRadius8}
         width="100%"
         height="100%"
         alignItems={ALIGN_CENTER}
@@ -74,10 +64,20 @@ const StyledButton = styled.button<ButtonProps>`
   border: none;
   width: ${FLEX_MAX_CONTENT};
   height: ${FLEX_MAX_CONTENT};
-  cursor: ${({ disabled }) => (disabled ? CURSOR_DEFAULT : CURSOR_POINTER)};
+  cursor: ${CURSOR_POINTER};
+  background-color: ${COLORS.blue30};
+  border-radius: ${BORDERS.borderRadius8};
+
   &:focus-visible {
-    outline: 2px solid ${white};
-    box-shadow: 0 0 0 4px ${blue50};
-    border-radius: ${borderRadius8};
+    outline: 2px solid ${COLORS.white};
+    box-shadow: 0 0 0 4px ${COLORS.blue50};
+    border-radius: ${BORDERS.borderRadius8};
+  }
+  &:hover {
+    background-color: ${COLORS.blue35};
+  }
+  &:disabled {
+    background-color: ${COLORS.grey20};
+    cursor: ${CURSOR_DEFAULT};
   }
 `
diff --git a/protocol-designer/src/assets/localization/en/starting_deck_state.json b/protocol-designer/src/assets/localization/en/starting_deck_state.json
@@ -13,7 +13,7 @@
   "clear_labware": "Clear labware",
   "clear_slot": "Clear slot",
   "clear": "Clear",
-  "command_click_to_multi_select": "Command + Click for multi-select",
+  "command_click_to_multi_select": "^/⌘ + click to select multiple",
   "convert_gen1_to_gen2": "To convert engage heights from GEN1 to GEN2, divide your engage height by 2.",
   "convert_gen2_to_gen1": "To convert engage heights from GEN2 to GEN1, multiply your engage height by 2.",
   "custom": "Custom labware definitions",
@@ -48,7 +48,7 @@
   "read_more_gen1_gen2": "Read more about the differences between GEN1 and GEN2 Magnetic Modules",
   "rename_lab": "Rename labware",
   "reservoir": "Reservoirs",
-  "shift_click_to_select_all": "Shift + Click to select all",
+  "shift_click_to_select_range": "⇧ + click to select range",
   "starting_deck_state": "Starting deck state",
   "tc_slots_occupied_flex": "The Thermocycler needs slots A1 and B1. Slot A1 is occupied",
   "tc_slots_occupied_ot2": "The Thermocycler needs slots 7, 8, 10, and 11. One or more of those slots is occupied",

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
@@ -95,8 +95,8 @@ describe('ProtocolSteps', () => {
   it('renders the hot keys display', () => {
     render()
     screen.getByText('Double-click to edit')
-    screen.getByText('Shift + Click to select all')
-    screen.getByText('Command + Click for multi-select')
+    screen.getByText('⇧ + click to select range')
+    screen.getByText('^/⌘ + click to select multiple')
   })
 
   it('renders the current step name', () => {

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
@@ -3,7 +3,6 @@ import { useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   ALIGN_CENTER,
-  Box,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
@@ -126,13 +125,29 @@ export function ProtocolSteps(): JSX.Element {
           </Flex>
         </Flex>
         {enableHoyKeyDisplay ? (
-          <Box position={POSITION_FIXED} left="21rem" bottom="0.75rem">
-            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-              <Tag text={t('double_click_to_edit')} type="default" />
-              <Tag text={t('shift_click_to_select_all')} type="default" />
-              <Tag text={t('command_click_to_multi_select')} type="default" />
-            </Flex>
-          </Box>
+          <Flex
+            position={POSITION_FIXED}
+            left="21rem"
+            bottom="0.75rem"
+            gridGap={SPACING.spacing6}
+            flexDirection={DIRECTION_COLUMN}
+          >
+            <Tag
+              text={t('double_click_to_edit')}
+              type="default"
+              shrinkToContent
+            />
+            <Tag
+              text={t('shift_click_to_select_range')}
+              type="default"
+              shrinkToContent
+            />
+            <Tag
+              text={t('command_click_to_multi_select')}
+              type="default"
+              shrinkToContent
+            />
+          </Flex>
         ) : null}
       </Flex>
       {formData == null && selectedSubstep ? (