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

Jump to bottom

refactor(components): adjust BaseDeck styling #14219

Merged
merged 1 commit into from
Dec 15, 2023
Merged

refactor(components): adjust BaseDeck styling #14219

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 7 additions & 4 deletions components/src/hardware-sim/BaseDeck/BaseDeck.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
14 changes: 8 additions & 6 deletions components/src/hardware-sim/BaseDeck/WasteChuteStagingAreaFixture.tsx
View file
Open in desktop
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
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion components/src/molecules/LocationIcon/__tests__/LocationIcon.test.tsx
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@
}

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

Check warning on line 115 in protocol-designer/src/components/DeckSetup/index.tsx

View check run for this annotation

Codecov / codecov/patch

protocol-designer/src/components/DeckSetup/index.tsx#L115 

Added line #L115 was not covered by tests

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