Skip to content

Commit

Permalink
refactor(components): adjust BaseDeck styling (#14219)
Browse files Browse the repository at this point in the history
adjusts BaseDeck styling of slot labels, staging area slot clip positioning, and colors to match
design system deck map

closes RAUT-902, RAUT-861
  • Loading branch information
brenthagen authored Dec 15, 2023
1 parent 5d4845f commit f5a99be
Show file tree
Hide file tree
Showing 8 changed files with 41 additions and 49 deletions.
11 changes: 7 additions & 4 deletions components/src/hardware-sim/BaseDeck/BaseDeck.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ interface BaseDeckProps {
deckLayerBlocklist?: string[]
showExpansion?: boolean
lightFill?: string
mediumFill?: string
darkFill?: string
children?: React.ReactNode
showSlotLabels?: boolean
Expand All @@ -86,7 +87,8 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
modulesOnDeck = [],
labwareOnDeck = [],
lightFill = COLORS.light1,
darkFill = COLORS.darkGreyEnabled,
mediumFill = COLORS.grey2,
darkFill = COLORS.darkBlack70,
deckLayerBlocklist = [],
deckConfig,
showExpansion = true,
Expand Down Expand Up @@ -137,7 +139,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
{showSlotLabels ? (
<SlotLabels
robotType={robotType}
color={darkFill}
color={COLORS.darkBlackEnabled}
show4thColumn={
stagingAreaFixtures.length > 0 ||
wasteChuteStagingAreaFixtures.length > 0
Expand Down Expand Up @@ -177,7 +179,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
trashIconColor={lightFill}
// TODO(bh, 2023-10-09): typeguard fixture location
trashCutoutId={fixture.cutoutId as TrashCutoutId}
backgroundColor={darkFill}
backgroundColor={mediumFill}
/>
</React.Fragment>
))}
Expand All @@ -187,8 +189,8 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
// TODO(bh, 2023-10-09): typeguard fixture location
cutoutId={fixture.cutoutId as typeof WASTE_CHUTE_CUTOUT}
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
wasteChuteColor={mediumFill}
/>
))}
{wasteChuteStagingAreaFixtures.map(fixture => (
Expand All @@ -199,6 +201,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
wasteChuteColor={mediumFill}
/>
))}
</>
Expand Down
32 changes: 16 additions & 16 deletions components/src/hardware-sim/BaseDeck/StagingAreaFixture.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -54,10 +54,10 @@ export function StagingAreaFixture(
<SlotClip d="M326,329.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M457.8,398.9V409H447" stroke={slotClipColor} />,
<SlotClip d="M457.8,329.8v-10.7H447" stroke={slotClipColor} />
<SlotClip d="M488,398.9v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M488,329.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M619.8,398.9v10.1H609" stroke={slotClipColor} />,
<SlotClip d="M619.8,329.8v-10.7H609" stroke={slotClipColor} />
<SlotClip d="M490,398.9v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M490,329.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M621.8,398.9v10.1h-10.8" stroke={slotClipColor} />,
<SlotClip d="M621.8,329.8v-10.7h-10.8" stroke={slotClipColor} />
</>
),
cutoutB3: (
Expand All @@ -70,10 +70,10 @@ export function StagingAreaFixture(
<SlotClip d="M326,222.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M457.8,291.9V302H447" stroke={slotClipColor} />,
<SlotClip d="M457.8,222.8v-10.7H447" stroke={slotClipColor} />
<SlotClip d="M488,291.9v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M488,222.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M619.8,291.9v10.1H609" stroke={slotClipColor} />,
<SlotClip d="M619.8,222.8v-10.7H609" stroke={slotClipColor} />
<SlotClip d="M490,291.9v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M490,222.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M621.8,291.9v10.1h-10.8" stroke={slotClipColor} />,
<SlotClip d="M621.8,222.8v-10.7h-10.8" stroke={slotClipColor} />
</>
),
cutoutC3: (
Expand All @@ -86,10 +86,10 @@ export function StagingAreaFixture(
<SlotClip d="M326,115.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M457.8,185v10.1H447" stroke={slotClipColor} />,
<SlotClip d="M457.8,115.8v-10.7H447" stroke={slotClipColor} />
<SlotClip d="M488,185v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M488,115.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M619.8,185v10.1H609" stroke={slotClipColor} />,
<SlotClip d="M619.8,115.8v-10.7H609" stroke={slotClipColor} />
<SlotClip d="M490,185v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M490,115.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M621.8,185v10.1h-10.8" stroke={slotClipColor} />,
<SlotClip d="M621.8,115.8v-10.7h-10.8" stroke={slotClipColor} />
</>
),
cutoutD3: (
Expand All @@ -102,10 +102,10 @@ export function StagingAreaFixture(
<SlotClip d="M326,8.8V-1.7h10.6" stroke={slotClipColor} />
<SlotClip d="M457.8,77.9V88H447" stroke={slotClipColor} />
<SlotClip d="M457.8,8.8V-1.9H447" stroke={slotClipColor} />
<SlotClip d="M488,77.9v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M488,8.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M619.8,77.9v10.1H609" stroke={slotClipColor} />,
<SlotClip d="M619.8,8.8v-10.7H609" stroke={slotClipColor} />
<SlotClip d="M490,77.9v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M490,8.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M621.8,77.9v10.1h-10.8" stroke={slotClipColor} />,
<SlotClip d="M621.8,8.8v-10.7h-10.8" stroke={slotClipColor} />
</>
),
}
Expand Down
6 changes: 3 additions & 3 deletions components/src/hardware-sim/BaseDeck/WasteChuteFixture.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ interface WasteChuteFixtureProps extends React.SVGProps<SVGGElement> {
deckDefinition: DeckDefinition
moduleType?: ModuleType
fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
wasteChuteColor?: string
showExtensions?: boolean
}

Expand All @@ -32,7 +32,7 @@ export function WasteChuteFixture(
cutoutId,
deckDefinition,
fixtureBaseColor = COLORS.light1,
slotClipColor = COLORS.darkGreyEnabled,
wasteChuteColor = COLORS.grey2,
...restProps
} = props

Expand Down Expand Up @@ -60,7 +60,7 @@ export function WasteChuteFixture(
fill={fixtureBaseColor}
/>
<WasteChute
backgroundColor={slotClipColor}
backgroundColor={wasteChuteColor}
wasteIconColor={fixtureBaseColor}
/>
</g>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ interface WasteChuteStagingAreaFixtureProps
moduleType?: ModuleType
fixtureBaseColor?: React.SVGProps<SVGPathElement>['fill']
slotClipColor?: React.SVGProps<SVGPathElement>['stroke']
wasteChuteColor?: string
showExtensions?: boolean
}

Expand All @@ -26,7 +27,8 @@ export function WasteChuteStagingAreaFixture(
cutoutId,
deckDefinition,
fixtureBaseColor = COLORS.light1,
slotClipColor = COLORS.darkGreyEnabled,
slotClipColor = COLORS.darkBlack70,
wasteChuteColor = COLORS.grey2,
...restProps
} = props

Expand All @@ -53,13 +55,13 @@ export function WasteChuteStagingAreaFixture(
d="M314.8,96.1h329.9c2.4,0,4.3-1.9,4.3-4.3V-5.6c0-2.4-1.9-4.3-4.3-4.3H314.8c-2.4,0-4.3,1.9-4.3,4.3v97.4C310.5,94.2,312.4,96.1,314.8,96.1z"
fill={fixtureBaseColor}
/>
<SlotClip d="M488,77.9v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M488,8.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M619.8,77.9v10.1H609" stroke={slotClipColor} />,
<SlotClip d="M619.8,8.8v-10.7H609" stroke={slotClipColor} />
<SlotClip d="M490,77.9v10.1h10.8" stroke={slotClipColor} />,
<SlotClip d="M490,8.8v-10.5h10.6" stroke={slotClipColor} />,
<SlotClip d="M621.8,77.9v10.1h-10.8" stroke={slotClipColor} />,
<SlotClip d="M621.8,8.8v-10.7h-10.8" stroke={slotClipColor} />
<WasteChute
wasteIconColor={fixtureBaseColor}
backgroundColor={slotClipColor}
backgroundColor={wasteChuteColor}
/>
</g>
)
Expand Down
2 changes: 1 addition & 1 deletion components/src/hardware-sim/DeckConfigurator/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function DeckConfigurator(props: DeckConfiguratorProps): JSX.Element {
handleClickAdd,
handleClickRemove,
lightFill = COLORS.light1,
darkFill = COLORS.darkGreyEnabled,
darkFill = COLORS.darkBlackEnabled,
readOnly = false,
showExpansion = true,
children,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ describe('LocationIcon', () => {
it('should render the proper styles', () => {
const [{ getByTestId }] = render(props)
const locationIcon = getByTestId('LocationIcon_A1')
expect(locationIcon).toHaveStyle(`padding: ${SPACING.spacing2} 0.375rem`)
expect(locationIcon).toHaveStyle(`padding: ${SPACING.spacing4} 0.375rem`)
expect(locationIcon).toHaveStyle('height: 2rem')
expect(locationIcon).toHaveStyle('width: max-content')
expect(locationIcon).toHaveStyle(`border: 2px solid ${COLORS.darkBlack100}`)
Expand Down
20 changes: 4 additions & 16 deletions components/src/molecules/LocationIcon/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,7 @@ import { css } from 'styled-components'
import { Icon } from '../../icons'
import { Flex, Text } from '../../primitives'
import { ALIGN_CENTER } from '../../styles'
import {
BORDERS,
COLORS,
RESPONSIVENESS,
SPACING,
TYPOGRAPHY,
} from '../../ui-style-constants'
import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'

import type { IconName } from '../../icons'
import type { StyleProps } from '../../primitives'
Expand Down Expand Up @@ -40,19 +34,13 @@ const LOCATION_ICON_STYLE = css<{
border: 2px solid ${props => props.color ?? COLORS.darkBlack100};
border-radius: ${BORDERS.borderRadiusSize3};
height: ${props => props.height ?? SPACING.spacing32};
padding: ${SPACING.spacing2} 0.375rem;
width: ${props => props.width ?? 'max-content'};
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
padding: ${SPACING.spacing4}
${props => (props.slotName != null ? SPACING.spacing8 : SPACING.spacing6)};
}
padding: ${SPACING.spacing4}
${props => (props.slotName != null ? SPACING.spacing8 : SPACING.spacing6)};
`

const SLOT_NAME_TEXT_STYLE = css`
${TYPOGRAPHY.pSemiBold}
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
${TYPOGRAPHY.smallBodyTextBold}
}
${TYPOGRAPHY.smallBodyTextBold}
`

export function LocationIcon({
Expand Down
3 changes: 1 addition & 2 deletions protocol-designer/src/components/DeckSetup/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ interface ContentsProps {
}

const lightFill = COLORS.light1
const darkFill = COLORS.darkGreyEnabled
const darkFill = COLORS.darkBlack70

export const DeckSetupContents = (props: ContentsProps): JSX.Element => {
const {
Expand Down Expand Up @@ -631,7 +631,6 @@ export const DeckSetup = (): JSX.Element => {
key={fixture.id}
cutoutId={fixture.location as typeof WASTE_CHUTE_CUTOUT}
deckDefinition={deckDef}
slotClipColor={darkFill}
fixtureBaseColor={lightFill}
/>
))}
Expand Down

0 comments on commit f5a99be

Please sign in to comment.