Skip to content

Commit

Permalink
Merge branch 'edge' into refactor_move-styled-text-into-components
Browse files Browse the repository at this point in the history
  • Loading branch information
koji committed Mar 25, 2024
2 parents 4f975b0 + 40236b5 commit 09a7974
Show file tree
Hide file tree
Showing 10 changed files with 485 additions and 72 deletions.
2 changes: 2 additions & 0 deletions app/src/assets/localization/en/protocol_details.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"modules": "modules",
"name": "Name",
"no_available_robots_found": "No available robots found",
"no_custom_values": "No custom values specified",
"no_parameters": "No parameters specified in this protocol",
"no_summary": "no summary specified for this protocol.",
"not_connected": "not connected",
Expand All @@ -58,6 +59,7 @@
"range": "Range",
"read_less": "read less",
"read_more": "read more",
"restore_defaults": "Restore default values",
"right_mount": "right mount",
"robot_configuration": "robot configuration",
"robot_is_busy_with_protocol": "{{robotName}} is busy with {{protocolName}} in {{runStatus}} state. Do you want to clear it and proceed?",
Expand Down
55 changes: 38 additions & 17 deletions app/src/atoms/InputField/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
TYPOGRAPHY,
TEXT_ALIGN_RIGHT,
} from '@opentrons/components'
import { StyledText } from '../text'

Check failure on line 16 in app/src/atoms/InputField/index.tsx

View workflow job for this annotation

GitHub Actions / js checks

Cannot find module '../text' or its corresponding type declarations.

Check failure on line 16 in app/src/atoms/InputField/index.tsx

View workflow job for this annotation

GitHub Actions / js checks

Cannot find module '../text' or its corresponding type declarations.

export const INPUT_TYPE_NUMBER = 'number' as const
export const INPUT_TYPE_TEXT = 'text' as const
Expand Down Expand Up @@ -183,7 +184,7 @@ function Input(props: InputFieldProps): JSX.Element {
`

const FORM_BOTTOM_SPACE_STYLE = css`
padding-bottom: ${SPACING.spacing4};
padding: ${SPACING.spacing4} 0rem;
@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
padding-bottom: 0;
}
Expand Down Expand Up @@ -230,40 +231,60 @@ function Input(props: InputFieldProps): JSX.Element {
return (
<Flex flexDirection={DIRECTION_COLUMN} width="100%">
{props.title != null ? (
<Flex css={TITLE_STYLE}>{props.title}</Flex>
<Flex as="label" htmlFor={inputProps.id} css={TITLE_STYLE}>
{props.title}
</Flex>
) : null}
<Flex width="100%" flexDirection={DIRECTION_COLUMN} css={OUTER_CSS}>
<Flex
css={INPUT_FIELD}
alignItems={ALIGN_CENTER}
as="label"
for={inputProps.id}
onClick={() => {
if (props.id != null) {
document.getElementById(props.id)?.focus()
}
}}
>
<input
{...inputProps}
data-testid={props.id}
value={value}
placeholder={placeHolder}
onWheel={event => event.currentTarget.blur()} // prevent value change with scrolling
/>
{props.units != null ? (
<Flex css={UNITS_STYLE}>{props.units}</Flex>
) : null}
</Flex>
<Flex
{props.error != null ? (
<Flex
color={COLORS.grey60}
fontSize={TYPOGRAPHY.fontSizeLabel}
paddingTop={SPACING.spacing4}
flexDirection={DIRECTION_COLUMN}
>
<Flex css={ERROR_TEXT_STYLE}>{props.error}</Flex>
</Flex>
) : null}
</Flex>
{props.caption != null ? (
<StyledText
as="label"
css={FORM_BOTTOM_SPACE_STYLE}
color={COLORS.grey60}
fontSize={TYPOGRAPHY.fontSizeLabel}
paddingTop={SPACING.spacing4}
flexDirection={DIRECTION_COLUMN}
>
{props.caption != null ? (
<Flex css={FORM_BOTTOM_SPACE_STYLE}>{props.caption}</Flex>
) : null}
{props.secondaryCaption != null ? (
<Flex css={FORM_BOTTOM_SPACE_STYLE}>{props.secondaryCaption}</Flex>
) : null}
<Flex css={ERROR_TEXT_STYLE}>{props.error}</Flex>
</Flex>
</Flex>
{props.caption}
</StyledText>
) : null}
{props.secondaryCaption != null ? (
<StyledText
as="label"
css={FORM_BOTTOM_SPACE_STYLE}
color={COLORS.grey60}
>
{props.secondaryCaption}
</StyledText>
) : null}
</Flex>
)
}
111 changes: 70 additions & 41 deletions app/src/atoms/MenuList/DropdownMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import {
StyledText,
TYPOGRAPHY,
useOnClickOutside,
POSITION_RELATIVE,
} from '@opentrons/components'
import { MenuItem } from './MenuItem'

Expand All @@ -22,13 +23,16 @@ export interface DropdownOption {
value: string
}

export type DropdownBorder = 'rounded' | 'neutral'

export interface DropdownMenuProps {
filterOptions: DropdownOption[]
onClick: (value: string) => void
currentOption: DropdownOption
width?: string
dropdownType?: 'rounded' | 'neutral'
dropdownType?: DropdownBorder
title?: string
caption?: string | null
}

// TODO: (smb: 4/15/22) refactor this to use html select for accessibility
Expand All @@ -41,6 +45,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
width = '9.125rem',
dropdownType = 'rounded',
title,
caption,
} = props
const [showDropdownMenu, setShowDropdownMenu] = React.useState<boolean>(false)
const toggleSetShowDropdownMenu = (): void => {
Expand All @@ -65,6 +70,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
align-items: ${ALIGN_CENTER};
justify-content: ${JUSTIFY_SPACE_BETWEEN};
width: ${width};
height: 2.25rem;
&:hover {
border: 1px ${BORDERS.styleSolid}
Expand All @@ -88,53 +94,76 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
`

return (
<Flex flexDirection={DIRECTION_COLUMN}>
<Flex flexDirection={DIRECTION_COLUMN} ref={dropDownMenuWrapperRef}>
{title !== null ? (
<StyledText as="labelSemiBold" paddingBottom={SPACING.spacing8}>
<StyledText
as="label"
fontWeight={TYPOGRAPHY.fontWeightSemiBold}
paddingBottom={SPACING.spacing8}
>
{title}
</StyledText>
) : null}
<Flex
onClick={(e: MouseEvent) => {
e.preventDefault()
toggleSetShowDropdownMenu()
}}
css={DROPDOWN_STYLE}
ref={dropDownMenuWrapperRef}
>
<StyledText css={TYPOGRAPHY.pSemiBold}>{currentOption.name}</StyledText>
{showDropdownMenu ? (
<Icon height="0.75rem" name="menu-down" transform="rotate(180deg)" />
) : (
<Icon height="0.75rem" name="menu-down" />
)}
</Flex>
{showDropdownMenu && (
<Flex flexDirection={DIRECTION_COLUMN} position={POSITION_RELATIVE}>
<Flex
zIndex={2}
borderRadius={BORDERS.borderRadius8}
boxShadow="0px 1px 3px rgba(0, 0, 0, 0.2)"
position={POSITION_ABSOLUTE}
backgroundColor={COLORS.white}
top="8.5rem"
left={SPACING.spacing16}
flexDirection={DIRECTION_COLUMN}
width={width}
ref={dropDownMenuWrapperRef}
onClick={(e: MouseEvent) => {
e.preventDefault()
toggleSetShowDropdownMenu()
}}
css={DROPDOWN_STYLE}
>
{filterOptions.map((option, index) => (
<MenuItem
key={index}
onClick={() => {
onClick(option.value)
setShowDropdownMenu(false)
}}
>
{option.name}
</MenuItem>
))}
<StyledText
css={css`
${dropdownType === 'rounded'
? TYPOGRAPHY.pSemiBold
: TYPOGRAPHY.pRegular}
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`}
>
{currentOption.name}
</StyledText>
{showDropdownMenu ? (
<Icon size="1.2rem" name="menu-down" transform="rotate(180deg)" />
) : (
<Icon size="1.2rem" name="menu-down" />
)}
</Flex>
)}
{showDropdownMenu && (
<Flex
zIndex={2}
borderRadius={BORDERS.borderRadius8}
boxShadow={BORDERS.tinyDropShadow}
position={POSITION_ABSOLUTE}
backgroundColor={COLORS.white}
flexDirection={DIRECTION_COLUMN}
width={width}
top="2.5rem"
>
{filterOptions.map((option, index) => (
<MenuItem
key={`${option.name}-${index}`}
onClick={() => {
onClick(option.value)
setShowDropdownMenu(false)
}}
>
{option.name}
</MenuItem>
))}
</Flex>
)}
</Flex>
{caption != null ? (
<StyledText
as="label"
paddingTop={SPACING.spacing4}
color={COLORS.grey60}
>
{caption}
</StyledText>
) : null}
</Flex>
)
}
24 changes: 16 additions & 8 deletions app/src/atoms/SelectField/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import type {
CSSObjectWithLabel,
DropdownIndicatorProps,
} from 'react-select'
import type { DropdownBorder } from '../MenuList/DropdownMenu'

export interface SelectOption {
value: string
Expand All @@ -31,29 +32,36 @@ export type SelectProps = ReactSelectProps<SelectOption>

interface SelectComponentProps extends SelectProps {
width?: string
dropdownType?: DropdownBorder
}

const VOID_STYLE: unknown = undefined
const NO_STYLE_FN = (): CSSObjectWithLabel => VOID_STYLE as CSSObjectWithLabel

export function Select(props: SelectComponentProps): JSX.Element {
const { dropdownType, menuIsOpen, width } = props
const CLEAR_DEFAULT_STYLES_AND_SET_NEW_STYLES: StylesConfig<SelectOption> = {
clearIndicator: NO_STYLE_FN,
control: (styles: CSSObjectWithLabel) => ({
...styles,
borderRadius: BORDERS.borderRadiusFull,
border: BORDERS.lineBorder,
width: props.width ?? 'auto',
borderRadius:
dropdownType === 'rounded'
? BORDERS.borderRadiusFull
: BORDERS.borderRadius4,
border: `1px ${BORDERS.styleSolid} ${
menuIsOpen ? COLORS.blue50 : COLORS.grey50
}`,
width: width ?? 'auto',
height: SPACING.spacing16,
borderColor: COLORS.grey30,
boxShadow: 'none',
padding: SPACING.spacing6,
flexDirection: DIRECTION_ROW,
'&:hover': {
borderColor: COLORS.grey60,
borderColor: COLORS.grey50,
},
'&:active': {
borderColor: COLORS.grey60,
borderColor: COLORS.blue50,
},
}),
container: (styles: CSSObjectWithLabel) => ({
Expand Down Expand Up @@ -83,7 +91,7 @@ export function Select(props: SelectComponentProps): JSX.Element {
menu: (styles: CSSObjectWithLabel) => ({
...styles,
backgroundColor: COLORS.white,
width: props.width != null ? props.width : 'auto',
width: width != null ? width : 'auto',
boxShadowcha: '0px 1px 3px rgba(0, 0, 0, 0.2)',
borderRadius: '4px 4px 0px 0px',
marginTop: SPACING.spacing4,
Expand Down Expand Up @@ -155,9 +163,9 @@ function DropdownIndicator(
width={SPACING.spacing20}
>
{Boolean(props.selectProps.menuIsOpen) ? (
<Icon transform="rotate(180deg)" name="menu-down" height="1.25rem" />
<Icon transform="rotate(180deg)" name="menu-down" height="1rem" />
) : (
<Icon name="menu-down" height="1.25rem" />
<Icon name="menu-down" height="1rem" />
)}
</Box>
</components.DropdownIndicator>
Expand Down
Loading

0 comments on commit 09a7974

Please sign in to comment.