From 7411eaf27eb34acd3670d4aa1dd15388fca2217e Mon Sep 17 00:00:00 2001
From: Nick Diehl <47604184+ncdiehl11@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:35:01 -0500
Subject: [PATCH] fix(components, protocol-designer): hug hotkey shortcut tag
 width (#16936)

Add optional shrinkToContent to Tag component

Closes [RQA-3667](https://opentrons.atlassian.net/browse/RQA-3667)
---
 components/src/atoms/Tag/index.tsx            |  6 ++--
 .../localization/en/starting_deck_state.json  |  4 +--
 .../__tests__/ProtocolSteps.test.tsx          |  4 +--
 .../pages/Designer/ProtocolSteps/index.tsx    | 31 ++++++++++++++-----
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/components/src/atoms/Tag/index.tsx b/components/src/atoms/Tag/index.tsx
index c41025dd25b..74c72da486e 100644
--- 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/protocol-designer/src/assets/localization/en/starting_deck_state.json b/protocol-designer/src/assets/localization/en/starting_deck_state.json
index fcf88c2866e..080aa23199d 100644
--- 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
index f68928c3488..2ce91e03263 100644
--- 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
index b5e5810c2da..687553f3dc6 100644
--- 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 ? (