Skip to content

Commit

Permalink
fix(app, components): fix parameter table styling (#14809)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ncdiehl11
ncdiehl11 authored Apr 5, 2024
1 parent 059c9e7 commit 66b1a3b
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 69 deletions.
87 changes: 48 additions & 39 deletions app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react'
import { useTranslation } from 'react-i18next'
import styled from 'styled-components'
import styled, { css } from 'styled-components'
import { formatRunTimeParameterDefaultValue } from '@opentrons/shared-data'
import {
ALIGN_CENTER,
Expand All @@ -9,6 +9,7 @@ import {
COLORS,
DIRECTION_COLUMN,
DIRECTION_ROW,
DISPLAY_INLINE,
Flex,
Icon,
InfoScreen,
Expand Down Expand Up @@ -96,7 +97,7 @@ export function ProtocolRunRuntimeParameters({
key={`${index}_${parameter.variableName}`}
parameter={parameter}
index={index}
runTimeParametersLength={runTimeParameters.length}
isLast={index === runTimeParameters.length - 1}
t={t}
/>
)
Expand All @@ -113,41 +114,48 @@ export function ProtocolRunRuntimeParameters({
interface StyledTableRowComponentProps {
parameter: RunTimeParameter
index: number
runTimeParametersLength: number
isLast: boolean
t: any
}

const StyledTableRowComponent = (
props: StyledTableRowComponentProps
): JSX.Element => {
const { parameter, index, runTimeParametersLength, t } = props
const { parameter, index, isLast, t } = props
const [targetProps, tooltipProps] = useHoverTooltip()
return (
<StyledTableRow
isLast={index === runTimeParametersLength - 1}
key={`runTimeParameter-${index}`}
>
<StyledTableCell isLast={index === runTimeParametersLength - 1}>
<Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8}>
<StyledText as="p">{parameter.displayName}</StyledText>
{parameter.description != null ? (
<>
<Flex {...targetProps} alignItems={ALIGN_CENTER}>
<Icon
name="information"
size={SPACING.spacing12}
color={COLORS.grey60}
data-testid="Icon"
/>
</Flex>
<Tooltip tooltipProps={tooltipProps}>
{parameter.description}
</Tooltip>
</>
) : null}
</Flex>
<StyledTableRow isLast={isLast} key={`runTimeParameter-${index}`}>
<StyledTableCell display="span">
<StyledText
as="p"
css={css`
display: inline;
padding-right: 8px;
`}
>
{parameter.displayName}
</StyledText>
{parameter.description != null ? (
<>
<Flex
display={DISPLAY_INLINE}
{...targetProps}
alignItems={ALIGN_CENTER}
>
<Icon
name="information"
size={SPACING.spacing12}
color={COLORS.grey60}
data-testid="Icon"
/>
</Flex>
<Tooltip css={TYPOGRAPHY.labelRegular} tooltipProps={tooltipProps}>
{parameter.description}
</Tooltip>
</>
) : null}
</StyledTableCell>
<StyledTableCell isLast={index === runTimeParametersLength - 1}>
<StyledTableCell>
<Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing16}>
<StyledText as="p">
{formatRunTimeParameterDefaultValue(parameter, t)}
Expand All @@ -173,14 +181,14 @@ const StyledTable = styled.table`
`
const StyledTableHeaderContainer = styled.thead`
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 48px;
grid-template-columns: 0.35fr 0.35fr;
grid-gap: ${SPACING.spacing48};
border-bottom: ${BORDERS.lineBorder};
`

const StyledTableHeader = styled.th`
${TYPOGRAPHY.labelSemiBold}
padding: ${SPACING.spacing8};
padding-bottom: ${SPACING.spacing8};
`

interface StyledTableRowProps {
Expand All @@ -189,19 +197,20 @@ interface StyledTableRowProps {

const StyledTableRow = styled.tr<StyledTableRowProps>`
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 48px;
padding-top: ${SPACING.spacing8};
padding-bottom: ${SPACING.spacing8};
grid-template-columns: 0.35fr 0.35fr;
grid-gap: ${SPACING.spacing48};
border-bottom: ${props => (props.isLast ? 'none' : BORDERS.lineBorder)};
align-items: ${ALIGN_CENTER};
`

interface StyledTableCellProps {
isLast: boolean
paddingRight?: string
display?: string
}

const StyledTableCell = styled.td<StyledTableCellProps>`
padding-left: ${SPACING.spacing8};
height: 1.25rem;
align-items: ${ALIGN_CENTER};
display: ${props => (props.display != null ? props.display : 'table-cell')};
padding: ${SPACING.spacing8} 0;
padding-right: ${props =>
props.paddingRight != null ? props.paddingRight : SPACING.spacing16};
`
74 changes: 44 additions & 30 deletions components/src/molecules/ParametersTable/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import * as React from 'react'
import styled from 'styled-components'
import styled, { css } from 'styled-components'
import { formatRunTimeParameterDefaultValue } from '@opentrons/shared-data'
import { BORDERS, COLORS } from '../../helix-design-system'
import { SPACING, TYPOGRAPHY } from '../../ui-style-constants/index'
import { StyledText } from '../../atoms/StyledText'
import { Tooltip, useHoverTooltip } from '../../tooltips'
import { Icon } from '../../icons'
import { Flex } from '../../primitives'
import { ALIGN_CENTER } from '../../styles'
import { DISPLAY_INLINE } from '../../styles'

import type { RunTimeParameter } from '@opentrons/shared-data'

Expand Down Expand Up @@ -82,7 +82,10 @@ export function ParametersTable({
{formatRunTimeParameterDefaultValue(parameter, t)}
</StyledText>
</StyledTableCell>
<StyledTableCell isLast={index === runTimeParameters.length - 1}>
<StyledTableCell
isLast={index === runTimeParameters.length - 1}
paddingRight="0"
>
<StyledText as="p">
{formatRange(parameter, `${min}-${max}`)}
</StyledText>
Expand All @@ -107,30 +110,36 @@ const ParameterName = (props: ParameterNameProps): JSX.Element => {
const [targetProps, tooltipProps] = useHoverTooltip()

return (
<StyledTableCell isLast={isLast}>
<Flex gridGap={SPACING.spacing8}>
<StyledText as="p">{displayName}</StyledText>
{description != null ? (
<>
<Flex {...targetProps} alignItems={ALIGN_CENTER}>
<Icon
name="information"
size={SPACING.spacing12}
color={COLORS.grey60}
data-testid={`Icon_${index}`}
/>
</Flex>
<Tooltip
{...tooltipProps}
backgroundColor={COLORS.black90}
width="8.75rem"
css={TYPOGRAPHY.labelRegular}
>
{description}
</Tooltip>
</>
) : null}
</Flex>
<StyledTableCell display="span" isLast={isLast}>
<StyledText
as="p"
css={css`
display: ${DISPLAY_INLINE};
padding-right: ${SPACING.spacing8};
`}
>
{displayName}
</StyledText>
{description != null ? (
<>
<Flex display={DISPLAY_INLINE} {...targetProps}>
<Icon
name="information"
size={SPACING.spacing12}
color={COLORS.grey60}
data-testid={`Icon_${index}`}
/>
</Flex>
<Tooltip
{...tooltipProps}
backgroundColor={COLORS.black90}
css={TYPOGRAPHY.labelRegular}
width="8.75rem"
>
{description}
</Tooltip>
</>
) : null}
</StyledTableCell>
)
}
Expand All @@ -143,7 +152,8 @@ const StyledTable = styled.table`

const StyledTableHeader = styled.th`
${TYPOGRAPHY.labelSemiBold}
padding: ${SPACING.spacing8};
grid-gap: ${SPACING.spacing16};
padding-bottom: ${SPACING.spacing8};
border-bottom: ${BORDERS.lineBorder};
`

Expand All @@ -152,17 +162,21 @@ interface StyledTableRowProps {
}

const StyledTableRow = styled.tr<StyledTableRowProps>`
padding: ${SPACING.spacing8};
grid-gap: ${SPACING.spacing16};
border-bottom: ${props => (props.isLast ? 'none' : BORDERS.lineBorder)};
`

interface StyledTableCellProps {
isLast: boolean
paddingRight?: string
display?: string
}

const StyledTableCell = styled.td<StyledTableCellProps>`
width: 33%;
padding-left: ${SPACING.spacing8};
display: ${props => (props.display != null ? props.display : 'table-cell')};
padding-top: ${SPACING.spacing12};
padding-bottom: ${props => (props.isLast ? 0 : SPACING.spacing12)};
padding-right: ${props =>
props.paddingRight != null ? props.paddingRight : SPACING.spacing16};
`

0 comments on commit 66b1a3b

Please sign in to comment.