Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(components, protocol-designer): hug hotkey shortcut tag width #16936

Merged
merged 4 commits into from
Nov 21, 2024
Merged

fix(components, protocol-designer): hug hotkey shortcut tag width #16936

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5d9b554
fix(components, protocol-designer): hug hotkey shortcut tag width
ncdiehl11 Nov 21, 2024
ffcb5b8
fix copy and tests
ncdiehl11 Nov 21, 2024
8655f7c
lint
ncdiehl11 Nov 21, 2024
a947ddd
lint (again)
ncdiehl11 Nov 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions components/src/atoms/Tag/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -19,6 +19,7 @@ export interface TagProps {
iconPosition?: 'left' | 'right'
/** Tagicon */
iconName?: IconName
shrinkToContent?: boolean
}

const defaultColors = {
Expand All @@ -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};
Expand Down
4 changes: 2 additions & 2 deletions protocol-designer/src/assets/localization/en/starting_deck_state.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
31 changes: 23 additions & 8 deletions protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { useSelector } from 'react-redux'
import { useTranslation } from 'react-i18next'
import {
ALIGN_CENTER,
Box,
COLORS,
DIRECTION_COLUMN,
Flex,
Expand Down Expand Up @@ -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 ? (
Expand Down
Loading