From c897edd74d80b2f944be7352ee1ad12f51e11464 Mon Sep 17 00:00:00 2001 From: Brent Hagen Date: Thu, 18 Jan 2024 11:51:44 -0500 Subject: [PATCH] refactor(components): adjust config fixture base stroke and position (#14316) provides additional spacing between config fixtures by adding a stroke to the base SVG and adjusting positioning accordingly closes RAUT-867 --- .../__tests__/SecondaryButton.test.tsx | 10 ++-- .../DeckConfigurator/EmptyConfigFixture.tsx | 18 +++++-- .../StagingAreaConfigFixture.tsx | 45 ++++------------- .../TrashBinConfigFixture.tsx | 49 ++++++------------- .../WasteChuteConfigFixture.tsx | 47 ++++-------------- .../DeckConfigurator/constants.ts | 49 +++++++++++++++++-- .../hardware-sim/DeckConfigurator/index.tsx | 18 ++++--- 7 files changed, 105 insertions(+), 131 deletions(-) diff --git a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx index 2c455bb2477..7a79348982d 100644 --- a/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx +++ b/components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx @@ -58,13 +58,9 @@ describe('SecondaryButton', () => { it('applies the correct states to the button - focus-visible', () => { const { getByText } = render(props) const button = getByText('secondary button') - expect(button).toHaveStyleRule( - 'box-shadow', - `0 0 0 3px ${COLORS.yellow50}`, - { - modifier: ':focus-visible', - } - ) + expect(button).toHaveStyleRule('box-shadow', `0 0 0 3px ${COLORS.blue50}`, { + modifier: ':focus-visible', + }) }) it('renders secondary button with text and different background color', () => { diff --git a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx index fe1009a7898..be6e4d3a9ce 100644 --- a/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/EmptyConfigFixture.tsx @@ -7,7 +7,13 @@ import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles' import { BORDERS } from '../../ui-style-constants' import { COLORS } from '../../helix-design-system' import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject' -import { FIXTURE_HEIGHT, SINGLE_SLOT_FIXTURE_WIDTH } from './constants' +import { + COLUMN_1_X_ADJUSTMENT, + COLUMN_3_X_ADJUSTMENT, + FIXTURE_HEIGHT, + SINGLE_SLOT_FIXTURE_WIDTH, + Y_ADJUSTMENT, +} from './constants' import type { CutoutId, DeckDefinition } from '@opentrons/shared-data' @@ -34,15 +40,17 @@ export function EmptyConfigFixture( const [xSlotPosition = 0, ySlotPosition = 0] = standardSlotCutout?.position ?? [] - const isLeftSideofDeck = + const isColumnOne = fixtureLocation === 'cutoutA1' || fixtureLocation === 'cutoutB1' || fixtureLocation === 'cutoutC1' || fixtureLocation === 'cutoutD1' - const xAdjustment = isLeftSideofDeck ? -101.5 : -17 + const xAdjustment = isColumnOne + ? COLUMN_1_X_ADJUSTMENT + : COLUMN_3_X_ADJUSTMENT const x = xSlotPosition + xAdjustment - const yAdjustment = -10 - const y = ySlotPosition + yAdjustment + + const y = ySlotPosition + Y_ADJUSTMENT return ( ) } - -const STAGING_AREA_CONFIG_STYLE_READ_ONLY = css` - display: ${DISPLAY_FLEX}; - align-items: ${ALIGN_CENTER}; - background-color: ${COLORS.grey50}; - border-radius: ${BORDERS.borderRadiusSize1}; - color: ${COLORS.white}; - grid-gap: ${SPACING.spacing8}; - justify-content: ${JUSTIFY_CENTER}; - width: 100%; -` - -const STAGING_AREA_CONFIG_STYLE_EDITABLE = css` - ${STAGING_AREA_CONFIG_STYLE_READ_ONLY} - - &:active { - background-color: ${COLORS.grey60}; - } - - &:hover { - background-color: ${COLORS.grey55}; - } - - &:focus-visible { - border: 3px solid ${COLORS.blue50}; - } -` diff --git a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx index cc6591ba4cd..9a9a100d92f 100644 --- a/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/TrashBinConfigFixture.tsx @@ -1,16 +1,19 @@ import * as React from 'react' -import { css } from 'styled-components' import { Icon } from '../../icons' import { Btn, Text } from '../../primitives' -import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles' -import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { TYPOGRAPHY } from '../../ui-style-constants' import { COLORS } from '../../helix-design-system' import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject' import { + COLUMN_1_X_ADJUSTMENT, + COLUMN_3_X_ADJUSTMENT, + CONFIG_STYLE_EDITABLE, + CONFIG_STYLE_READ_ONLY, FIXTURE_HEIGHT, SINGLE_SLOT_FIXTURE_WIDTH, TRASH_BIN_DISPLAY_NAME, + Y_ADJUSTMENT, } from './constants' import type { CutoutId, DeckDefinition } from '@opentrons/shared-data' @@ -37,15 +40,17 @@ export function TrashBinConfigFixture( */ const [xSlotPosition = 0, ySlotPosition = 0] = trashBinCutout?.position ?? [] - const isLeftSideofDeck = + const isColumnOne = fixtureLocation === 'cutoutA1' || fixtureLocation === 'cutoutB1' || fixtureLocation === 'cutoutC1' || fixtureLocation === 'cutoutD1' - const xAdjustment = isLeftSideofDeck ? -101.5 : -17 + const xAdjustment = isColumnOne + ? COLUMN_1_X_ADJUSTMENT + : COLUMN_3_X_ADJUSTMENT const x = xSlotPosition + xAdjustment - const yAdjustment = -10 - const y = ySlotPosition + yAdjustment + + const y = ySlotPosition + Y_ADJUSTMENT return ( ) } - -const TRASH_BIN_CONFIG_STYLE_READ_ONLY = css` - display: ${DISPLAY_FLEX}; - align-items: ${ALIGN_CENTER}; - background-color: ${COLORS.grey50}; - border-radius: ${BORDERS.borderRadiusSize1}; - color: ${COLORS.white}; - justify-content: ${JUSTIFY_CENTER}; - grid-gap: ${SPACING.spacing8}; - width: 100%; -` - -const TRASH_BIN_CONFIG_STYLE_EDTIABLE = css` - ${TRASH_BIN_CONFIG_STYLE_READ_ONLY} - - &:active { - background-color: ${COLORS.grey60}; - } - - &:hover { - background-color: ${COLORS.grey55}; - } - - &:focus-visible { - } -` diff --git a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx index fc166a181ca..1932fe3674b 100644 --- a/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx +++ b/components/src/hardware-sim/DeckConfigurator/WasteChuteConfigFixture.tsx @@ -1,17 +1,19 @@ import * as React from 'react' -import { css } from 'styled-components' import { Icon } from '../../icons' import { Btn, Text } from '../../primitives' -import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles' -import { BORDERS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { TYPOGRAPHY } from '../../ui-style-constants' import { COLORS } from '../../helix-design-system' import { RobotCoordsForeignObject } from '../Deck/RobotCoordsForeignObject' import { - WASTE_CHUTE_DISPLAY_NAME, + COLUMN_3_X_ADJUSTMENT, + CONFIG_STYLE_EDITABLE, + CONFIG_STYLE_READ_ONLY, FIXTURE_HEIGHT, STAGING_AREA_FIXTURE_WIDTH, SINGLE_SLOT_FIXTURE_WIDTH, + WASTE_CHUTE_DISPLAY_NAME, + Y_ADJUSTMENT, } from './constants' import type { CutoutId, DeckDefinition } from '@opentrons/shared-data' @@ -44,10 +46,8 @@ export function WasteChuteConfigFixture( const [xSlotPosition = 0, ySlotPosition = 0] = wasteChuteCutout?.position ?? [] - const xAdjustment = -17 - const x = xSlotPosition + xAdjustment - const yAdjustment = -10 - const y = ySlotPosition + yAdjustment + const x = xSlotPosition + COLUMN_3_X_ADJUSTMENT + const y = ySlotPosition + Y_ADJUSTMENT return ( ) } - -const WASTE_CHUTE_CONFIG_STYLE_READ_ONLY = css` - display: ${DISPLAY_FLEX}; - align-items: ${ALIGN_CENTER}; - background-color: ${COLORS.grey50}; - border-radius: ${BORDERS.borderRadiusSize1}; - color: ${COLORS.white}; - justify-content: ${JUSTIFY_CENTER}; - grid-gap: ${SPACING.spacing8}; - width: 100%; -` - -const WASTE_CHUTE_CONFIG_STYLE_EDITABLE = css` - ${WASTE_CHUTE_CONFIG_STYLE_READ_ONLY} - - &:active { - background-color: ${COLORS.grey60}; - } - - &:hover { - background-color: ${COLORS.grey55}; - } - - &:focus-visible { - border: 3px solid ${COLORS.blue50}; - } -` diff --git a/components/src/hardware-sim/DeckConfigurator/constants.ts b/components/src/hardware-sim/DeckConfigurator/constants.ts index 79f246274e3..87adc4abe7a 100644 --- a/components/src/hardware-sim/DeckConfigurator/constants.ts +++ b/components/src/hardware-sim/DeckConfigurator/constants.ts @@ -1,6 +1,49 @@ -export const FIXTURE_HEIGHT = 106.0 -export const SINGLE_SLOT_FIXTURE_WIDTH = 246.5 -export const STAGING_AREA_FIXTURE_WIDTH = 318.5 +import { css } from 'styled-components' + +import { COLORS } from '../../helix-design-system' +import { ALIGN_CENTER, DISPLAY_FLEX, JUSTIFY_CENTER } from '../../styles' +import { BORDERS, SPACING } from '../../ui-style-constants' + +/** + * These are Flex deck configurator-only values to position a foreign object + * Position is relative to deck definition slot positions and a custom stroke applied to the single slot fixture SVG + */ +export const FIXTURE_HEIGHT = 102.0 +export const SINGLE_SLOT_FIXTURE_WIDTH = 243.5 +export const STAGING_AREA_FIXTURE_WIDTH = 314.5 + +export const COLUMN_1_X_ADJUSTMENT = -100 +export const COLUMN_3_X_ADJUSTMENT = -15.5 +export const Y_ADJUSTMENT = -8 + export const STAGING_AREA_DISPLAY_NAME = 'Staging area' export const TRASH_BIN_DISPLAY_NAME = 'Trash bin' export const WASTE_CHUTE_DISPLAY_NAME = 'Waste chute' + +// common config styles for staging area, trash bin, waste chute +export const CONFIG_STYLE_READ_ONLY = css` + display: ${DISPLAY_FLEX}; + align-items: ${ALIGN_CENTER}; + background-color: ${COLORS.grey50}; + border-radius: ${BORDERS.borderRadiusSize1}; + color: ${COLORS.white}; + grid-gap: ${SPACING.spacing8}; + justify-content: ${JUSTIFY_CENTER}; + width: 100%; +` + +export const CONFIG_STYLE_EDITABLE = css` + ${CONFIG_STYLE_READ_ONLY} + + &:active { + background-color: ${COLORS.grey60}; + } + + &:hover { + background-color: ${COLORS.grey55}; + } + + &:focus-visible { + border: 3px solid ${COLORS.blue50}; + } +` diff --git a/components/src/hardware-sim/DeckConfigurator/index.tsx b/components/src/hardware-sim/DeckConfigurator/index.tsx index f4aff0eecf2..9378471d8e0 100644 --- a/components/src/hardware-sim/DeckConfigurator/index.tsx +++ b/components/src/hardware-sim/DeckConfigurator/index.tsx @@ -91,14 +91,16 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element { viewBox={`${deckDef.cornerOffsetFromOrigin[0]} ${deckDef.cornerOffsetFromOrigin[1]} ${deckDef.dimensions[0]} ${deckDef.dimensions[1]}`} > {deckDef.locations.cutouts.map(cutout => ( - + // give the outside of the base fixture svgs a stroke for extra spacing + + + ))} {stagingAreaFixtures.map(({ cutoutId }) => (