diff --git a/app/src/DesignTokens/Colors/Colors.stories.tsx b/app/src/DesignTokens/Colors/Colors.stories.tsx index 3a28cda86c3..60bbdff3945 100644 --- a/app/src/DesignTokens/Colors/Colors.stories.tsx +++ b/app/src/DesignTokens/Colors/Colors.stories.tsx @@ -3,12 +3,13 @@ import { ALIGN_FLEX_START, BORDERS, COLORS, + CURSOR_POINTER, DIRECTION_COLUMN, DIRECTION_ROW, Flex, JUSTIFY_SPACE_BETWEEN, - SPACING, LegacyStyledText, + SPACING, TYPOGRAPHY, } from '@opentrons/components' @@ -74,7 +75,7 @@ const Template: Story = args => { margin={SPACING.spacing2} // Add some margin between color rows borderRadius={BORDERS.borderRadius4} style={{ - cursor: 'pointer', + cursor: CURSOR_POINTER, border: `1px solid ${COLORS.grey20}`, }} > diff --git a/app/src/atoms/buttons/FloatingActionButton.tsx b/app/src/atoms/buttons/FloatingActionButton.tsx index 5905bdd8fce..76a72cd076b 100644 --- a/app/src/atoms/buttons/FloatingActionButton.tsx +++ b/app/src/atoms/buttons/FloatingActionButton.tsx @@ -6,6 +6,7 @@ import { BORDERS, Btn, COLORS, + CURSOR_DEFAULT, DIRECTION_ROW, Flex, Icon, @@ -33,7 +34,7 @@ export function FloatingActionButton( border-radius: ${BORDERS.borderRadius40}; box-shadow: ${BORDERS.shadowBig}; color: ${contentColor}; - cursor: default; + cursor: ${CURSOR_DEFAULT}; &:active { background-color: ${COLORS.purple55}; diff --git a/app/src/atoms/buttons/IconButton.tsx b/app/src/atoms/buttons/IconButton.tsx index 6506b267529..d86324ed843 100644 --- a/app/src/atoms/buttons/IconButton.tsx +++ b/app/src/atoms/buttons/IconButton.tsx @@ -4,6 +4,7 @@ import { BORDERS, Btn, COLORS, + CURSOR_DEFAULT, Icon, RESPONSIVENESS, } from '@opentrons/components' @@ -39,7 +40,7 @@ export function IconButton(props: IconButtonProps): JSX.Element { color: ${COLORS.grey50}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - cursor: default; + cursor: ${CURSOR_DEFAULT}; } `} {...buttonProps} diff --git a/app/src/atoms/buttons/MediumButton.tsx b/app/src/atoms/buttons/MediumButton.tsx index 7634f3e428f..b25ac0432b9 100644 --- a/app/src/atoms/buttons/MediumButton.tsx +++ b/app/src/atoms/buttons/MediumButton.tsx @@ -5,12 +5,13 @@ import { BORDERS, Btn, COLORS, + CURSOR_DEFAULT, DIRECTION_ROW, DISPLAY_FLEX, Icon, JUSTIFY_CENTER, - SPACING, LegacyStyledText, + SPACING, TYPOGRAPHY, } from '@opentrons/components' import { ODD_FOCUS_VISIBLE } from './constants' @@ -111,7 +112,7 @@ export function MediumButton(props: MediumButtonProps): JSX.Element { : BORDERS.borderRadius16}; box-shadow: none; color: ${MEDIUM_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor}; - cursor: default; + cursor: ${CURSOR_DEFAULT}; &:focus { background-color: ${MEDIUM_BUTTON_PROPS_BY_TYPE[buttonType] diff --git a/app/src/atoms/buttons/SmallButton.tsx b/app/src/atoms/buttons/SmallButton.tsx index 25a494a1488..a177be5a3e0 100644 --- a/app/src/atoms/buttons/SmallButton.tsx +++ b/app/src/atoms/buttons/SmallButton.tsx @@ -5,6 +5,7 @@ import { BORDERS, Btn, COLORS, + CURSOR_DEFAULT, DIRECTION_ROW, Flex, Icon, @@ -105,7 +106,7 @@ export function SmallButton(props: SmallButtonProps): JSX.Element { color: ${SMALL_BUTTON_PROPS_BY_TYPE[buttonType].defaultColor}; background-color: ${SMALL_BUTTON_PROPS_BY_TYPE[buttonType] .defaultBackgroundColor}; - cursor: default; + cursor: ${CURSOR_DEFAULT}; border-radius: ${buttonCategory === 'rounded' ? BORDERS.borderRadius40 : BORDERS.borderRadius16}; diff --git a/app/src/molecules/CollapsibleSection/index.tsx b/app/src/molecules/CollapsibleSection/index.tsx index a11e73be358..3b9d6c4b8d0 100644 --- a/app/src/molecules/CollapsibleSection/index.tsx +++ b/app/src/molecules/CollapsibleSection/index.tsx @@ -4,6 +4,7 @@ import { css } from 'styled-components' import { Btn, COLORS, + CURSOR_POINTER, DIRECTION_COLUMN, Flex, Icon, @@ -42,7 +43,7 @@ export function CollapsibleSection( setIsExpanded(!isExpanded) }} css={{ - cursor: 'pointer', + cursor: CURSOR_POINTER, }} > { e.preventDefault() diff --git a/app/src/molecules/InterventionModal/index.tsx b/app/src/molecules/InterventionModal/index.tsx index aec8c9fea22..f3f784d22f1 100644 --- a/app/src/molecules/InterventionModal/index.tsx +++ b/app/src/molecules/InterventionModal/index.tsx @@ -6,6 +6,9 @@ import { ALIGN_CENTER, BORDERS, COLORS, + CURSOR_DEFAULT, + CURSOR_POINTER, + DIRECTION_COLUMN, Flex, Icon, JUSTIFY_CENTER, @@ -14,9 +17,8 @@ import { POSITION_ABSOLUTE, POSITION_RELATIVE, POSITION_STICKY, - SPACING, - DIRECTION_COLUMN, RESPONSIVENESS, + SPACING, } from '@opentrons/components' import { getIsOnDevice } from '../../redux/config' @@ -101,7 +103,7 @@ const WRAPPER_STYLE = { bottom: '0', zIndex: '1', backgroundColor: `${COLORS.black90}${COLORS.opacity40HexCode}`, - cursor: 'default', + cursor: CURSOR_DEFAULT, 'data-testid': '__otInterventionModalWrapper', } as const @@ -179,7 +181,7 @@ const ICON_STYLE = css` width: ${SPACING.spacing16}; height: ${SPACING.spacing16}; margin: ${SPACING.spacing4}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; @media (${RESPONSIVENESS.touchscreenMediaQuerySpecs}) { width: ${SPACING.spacing32}; diff --git a/app/src/molecules/JogControls/TouchControlButton.tsx b/app/src/molecules/JogControls/TouchControlButton.tsx index 0ad85f1de7d..859541b50de 100644 --- a/app/src/molecules/JogControls/TouchControlButton.tsx +++ b/app/src/molecules/JogControls/TouchControlButton.tsx @@ -1,12 +1,12 @@ import styled from 'styled-components' -import { COLORS, SPACING, BORDERS } from '@opentrons/components' +import { BORDERS, COLORS, CURSOR_DEFAULT, SPACING } from '@opentrons/components' import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants' export const TouchControlButton = styled.button<{ selected: boolean }>` background-color: ${({ selected }) => selected ? COLORS.blue50 : COLORS.blue35}; - cursor: default; + cursor: ${CURSOR_DEFAULT}; border-radius: ${BORDERS.borderRadius16}; box-shadow: none; padding: ${SPACING.spacing8} ${SPACING.spacing20}; diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx index 6a7c3efd034..774bb76f20c 100644 --- a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx +++ b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react' import { describe, it, expect, vi, beforeEach } from 'vitest' import '@testing-library/jest-dom/vitest' import { fireEvent, screen } from '@testing-library/react' -import { COLORS, SPACING, BORDERS } from '@opentrons/components' +import { COLORS, SPACING, BORDERS, CURSOR_POINTER } from '@opentrons/components' import { renderWithProviders } from '../../../__testing-utils__' import { MiniCard } from '../' @@ -30,7 +30,7 @@ describe('MiniCard', () => { expect(miniCard).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`) expect(miniCard).toHaveStyle(`padding: ${SPACING.spacing8}`) expect(miniCard).toHaveStyle(`width: 100%`) - expect(miniCard).toHaveStyle(`cursor: pointer`) + expect(miniCard).toHaveStyle(`cursor: ${CURSOR_POINTER}`) }) it('renders the correct style selectedOptionStyles', () => { @@ -42,7 +42,7 @@ describe('MiniCard', () => { expect(miniCard).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`) expect(miniCard).toHaveStyle(`padding: ${SPACING.spacing8}`) expect(miniCard).toHaveStyle(`width: 100%`) - expect(miniCard).toHaveStyle(`cursor: pointer`) + expect(miniCard).toHaveStyle(`cursor: ${CURSOR_POINTER}`) }) it('renders the correct style errorOptionStyles', () => { @@ -55,7 +55,7 @@ describe('MiniCard', () => { expect(miniCard).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`) expect(miniCard).toHaveStyle(`padding: ${SPACING.spacing8}`) expect(miniCard).toHaveStyle(`width: 100%`) - expect(miniCard).toHaveStyle(`cursor: pointer`) + expect(miniCard).toHaveStyle(`cursor: ${CURSOR_POINTER}`) }) it('calls mock function when clicking mini card', () => { diff --git a/app/src/molecules/MiniCard/index.tsx b/app/src/molecules/MiniCard/index.tsx index 2ae0f6724ad..526b2076ef4 100644 --- a/app/src/molecules/MiniCard/index.tsx +++ b/app/src/molecules/MiniCard/index.tsx @@ -1,6 +1,12 @@ import * as React from 'react' import { css } from 'styled-components' -import { SPACING, Flex, COLORS, BORDERS } from '@opentrons/components' +import { + BORDERS, + COLORS, + CURSOR_POINTER, + Flex, + SPACING, +} from '@opentrons/components' import type { StyleProps } from '@opentrons/components' @@ -17,7 +23,7 @@ const unselectedOptionStyles = css` border-radius: ${BORDERS.borderRadius8}; padding: ${SPACING.spacing8}; width: 100%; - cursor: pointer; + cursor: ${CURSOR_POINTER}; &:hover { background-color: ${COLORS.grey10}; diff --git a/app/src/molecules/UploadInput/index.tsx b/app/src/molecules/UploadInput/index.tsx index 9802f6d28b5..77dc5a2616d 100644 --- a/app/src/molecules/UploadInput/index.tsx +++ b/app/src/molecules/UploadInput/index.tsx @@ -5,21 +5,22 @@ import { ALIGN_CENTER, BORDERS, COLORS, + CURSOR_POINTER, DIRECTION_COLUMN, DISPLAY_FLEX, Flex, Icon, JUSTIFY_CENTER, + LegacyStyledText, POSITION_FIXED, PrimaryButton, SPACING, - LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' const StyledLabel = styled.label` display: ${DISPLAY_FLEX}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; flex-direction: ${DIRECTION_COLUMN}; align-items: ${ALIGN_CENTER}; width: 100%; diff --git a/app/src/organisms/ChildNavigation/index.tsx b/app/src/organisms/ChildNavigation/index.tsx index 00e8d02c36b..da215a69e1a 100644 --- a/app/src/organisms/ChildNavigation/index.tsx +++ b/app/src/organisms/ChildNavigation/index.tsx @@ -14,6 +14,7 @@ import { SPACING, LegacyStyledText, TYPOGRAPHY, + CURSOR_DEFAULT, } from '@opentrons/components' import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants' @@ -128,6 +129,6 @@ const IconButton = styled('button')` background-color: transparent; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - cursor: default; + cursor: ${CURSOR_DEFAULT}; } ` diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx index a5c473982cf..119121fb90c 100644 --- a/app/src/organisms/ChooseProtocolSlideout/index.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/index.tsx @@ -10,6 +10,9 @@ import { BORDERS, Box, COLORS, + CURSOR_AUTO, + CURSOR_DEFAULT, + CURSOR_POINTER, DIRECTION_COLUMN, DIRECTION_ROW, DISPLAY_BLOCK, @@ -549,7 +552,7 @@ export function ChooseProtocolSlideoutComponent( }} css={css` &:hover { - cursor: auto; + cursor: ${CURSOR_AUTO}; } `} > @@ -611,7 +614,7 @@ export function ChooseProtocolSlideoutComponent( @@ -926,13 +929,13 @@ function StoredProtocolList(props: StoredProtocolListProps): JSX.Element { const ENABLED_LINK_CSS = css` ${TYPOGRAPHY.linkPSemiBold} - cursor: pointer; + cursor: ${CURSOR_POINTER}; ` const DISABLED_LINK_CSS = css` ${TYPOGRAPHY.linkPSemiBold} color: ${COLORS.grey40}; - cursor: default; + cursor: ${CURSOR_DEFAULT}; &:hover { color: ${COLORS.grey40}; diff --git a/app/src/organisms/ChooseRobotSlideout/index.tsx b/app/src/organisms/ChooseRobotSlideout/index.tsx index 532be4f7813..629634840fb 100644 --- a/app/src/organisms/ChooseRobotSlideout/index.tsx +++ b/app/src/organisms/ChooseRobotSlideout/index.tsx @@ -9,6 +9,9 @@ import { ALIGN_FLEX_END, BORDERS, COLORS, + CURSOR_AUTO, + CURSOR_DEFAULT, + CURSOR_POINTER, DIRECTION_COLUMN, DIRECTION_ROW, DISPLAY_INLINE_BLOCK, @@ -644,7 +647,7 @@ export function ChooseRobotSlideout( }} css={css` &:hover { - cursor: auto; + cursor: ${CURSOR_AUTO}; } `} > @@ -682,13 +685,13 @@ export function ChooseRobotSlideout( const ENABLED_LINK_CSS = css` ${TYPOGRAPHY.linkPSemiBold} - cursor: pointer; + cursor: ${CURSOR_POINTER}; ` const DISABLED_LINK_CSS = css` ${TYPOGRAPHY.linkPSemiBold} color: ${COLORS.grey40}; - cursor: default; + cursor: ${CURSOR_DEFAULT}; &:hover { color: ${COLORS.grey40}; diff --git a/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx b/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx index 5e9a4fe7241..a715291e351 100644 --- a/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx +++ b/app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx @@ -275,7 +275,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent( diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx index ff456be6d13..aff67233560 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.tsx @@ -15,6 +15,7 @@ import { SPACING, Modal, TYPOGRAPHY, + CURSOR_DEFAULT, } from '@opentrons/components' import { useModulesQuery, @@ -385,7 +386,7 @@ export function AddFixtureModal({ const FIXTURE_BUTTON_STYLE_ODD = css` background-color: ${COLORS.grey35}; - cursor: default; + cursor: ${CURSOR_DEFAULT}; border-radius: ${BORDERS.borderRadius16}; box-shadow: none; diff --git a/app/src/organisms/Devices/HistoricalProtocolRun.tsx b/app/src/organisms/Devices/HistoricalProtocolRun.tsx index 5fc5b3e2580..0309c227edc 100644 --- a/app/src/organisms/Devices/HistoricalProtocolRun.tsx +++ b/app/src/organisms/Devices/HistoricalProtocolRun.tsx @@ -12,6 +12,7 @@ import { OVERFLOW_HIDDEN, SPACING, LegacyStyledText, + CURSOR_POINTER, } from '@opentrons/components' import { formatInterval } from '../RunTimeControl/utils' import { formatTimestamp } from './utils' @@ -125,7 +126,7 @@ export function HistoricalProtocolRun( {props.completeText} @@ -495,7 +496,7 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null { css={TYPOGRAPHY.pSemiBold} marginRight={SPACING.spacing16} id={`RunSetupCard_${props.stepKey}_missingHardwareText`} - whitespace="nowrap" + whitespace={NO_WRAP} > {props.missingHardwareText} @@ -516,7 +517,7 @@ function StepRightElement(props: StepRightElementProps): JSX.Element | null { css={TYPOGRAPHY.pSemiBold} marginRight={SPACING.spacing16} id={`RunSetupCard_${props.stepKey}_incompleteText`} - whitespace="nowrap" + whitespace={NO_WRAP} > {props.incompleteText} @@ -537,7 +538,7 @@ function LearnAboutLPC(): JSX.Element { { // clicking link shouldn't toggle step expanded state e.preventDefault() diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx index 60044410e76..4bd3aad0b38 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/LiquidDetailCard.tsx @@ -6,15 +6,16 @@ import { BORDERS, Box, COLORS, + CURSOR_POINTER, DIRECTION_COLUMN, DIRECTION_ROW, Flex, Icon, JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN, + LegacyStyledText, SIZE_1, SPACING, - LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' import { MICRO_LITERS } from '@opentrons/shared-data' @@ -41,7 +42,7 @@ const LIQUID_CARD_STYLE = css` &:hover { border: 1px solid ${COLORS.grey60}; border-radius: ${BORDERS.borderRadius8}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; } ` const LIQUID_CARD_ODD_STYLE = css` diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx index 34aba75a1e5..7b90074f849 100644 --- a/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx +++ b/app/src/organisms/Devices/ProtocolRun/SetupLiquids/SetupLiquidsList.tsx @@ -6,8 +6,9 @@ import { ALIGN_CENTER, BORDERS, Box, - DeckInfoLabel, COLORS, + CURSOR_POINTER, + DeckInfoLabel, DIRECTION_COLUMN, DIRECTION_ROW, Flex, @@ -149,14 +150,14 @@ export function LiquidsListItem(props: LiquidsListItemProps): JSX.Element { ${CARD_OUTLINE_BORDER_STYLE} &:hover { - cursor: pointer; + cursor: ${CURSOR_POINTER}; border: 1px solid ${COLORS.grey35}; } ` const LIQUID_CARD_ITEM_STYLE = css` border: 1px solid ${COLORS.white}; &:hover { - cursor: pointer; + cursor: ${CURSOR_POINTER}; border: 1px solid ${COLORS.grey30}; } ` diff --git a/app/src/organisms/Devices/RobotOverflowMenu.tsx b/app/src/organisms/Devices/RobotOverflowMenu.tsx index 35363f2d16b..6522897e77f 100644 --- a/app/src/organisms/Devices/RobotOverflowMenu.tsx +++ b/app/src/organisms/Devices/RobotOverflowMenu.tsx @@ -12,6 +12,7 @@ import { DIRECTION_COLUMN, Flex, MenuItem, + NO_WRAP, OverflowBtn, POSITION_ABSOLUTE, POSITION_RELATIVE, @@ -172,7 +173,7 @@ export function RobotOverflowMenu(props: RobotOverflowMenuProps): JSX.Element { /> {showOverflowMenu && !showConnectionTroubleshootingModal ? ( {showOverflowMenu ? ( {t('view_error_details')} diff --git a/app/src/organisms/GripperCard/index.tsx b/app/src/organisms/GripperCard/index.tsx index 389ce296df4..df2ef99fbb5 100644 --- a/app/src/organisms/GripperCard/index.tsx +++ b/app/src/organisms/GripperCard/index.tsx @@ -1,7 +1,12 @@ import * as React from 'react' import { Trans, useTranslation } from 'react-i18next' import { css } from 'styled-components' -import { SPACING, TYPOGRAPHY, LegacyStyledText } from '@opentrons/components' +import { + CURSOR_POINTER, + LegacyStyledText, + SPACING, + TYPOGRAPHY, +} from '@opentrons/components' import { getGripperDisplayName } from '@opentrons/shared-data' import { useCurrentSubsystemUpdateQuery } from '@opentrons/react-api-client' import { Banner } from '../../atoms/Banner' @@ -22,7 +27,7 @@ interface GripperCardProps { } const BANNER_LINK_CSS = css` text-decoration: ${TYPOGRAPHY.textDecorationUnderline}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; margin-left: ${SPACING.spacing8}; ` diff --git a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx index 5c80bdd2ec6..d0634f3282e 100644 --- a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx +++ b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx @@ -19,6 +19,7 @@ import { LegacyStyledText, MenuItem, Modal, + NO_WRAP, OverflowBtn, POSITION_ABSOLUTE, POSITION_RELATIVE, @@ -118,7 +119,7 @@ export function CustomLabwareOverflowMenu( top={SPACING.spacing32} right={0} flexDirection={DIRECTION_COLUMN} - whiteSpace="nowrap" + whiteSpace={NO_WRAP} > {t('show_in_folder')} diff --git a/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx b/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx index 78596b831de..8da1db06d8f 100644 --- a/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx +++ b/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx @@ -5,6 +5,7 @@ import { Flex, MenuItem, MenuList, + NO_WRAP, POSITION_RELATIVE, Tooltip, useHoverTooltip, @@ -151,7 +152,7 @@ export const ModuleOverflowMenu = ( item.onClick(item.isSecondary)} disabled={item.disabledReason || isDisabled} - whiteSpace="nowrap" + whiteSpace={NO_WRAP} > {item.setSetting} diff --git a/app/src/organisms/ModuleCard/hooks.tsx b/app/src/organisms/ModuleCard/hooks.tsx index 2a8ef8f1dc4..43ad848d2ae 100644 --- a/app/src/organisms/ModuleCard/hooks.tsx +++ b/app/src/organisms/ModuleCard/hooks.tsx @@ -1,7 +1,12 @@ import * as React from 'react' import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' import { useTranslation } from 'react-i18next' -import { MenuItem, Tooltip, useHoverTooltip } from '@opentrons/components' +import { + MenuItem, + NO_WRAP, + Tooltip, + useHoverTooltip, +} from '@opentrons/components' import { HEATERSHAKER_MODULE_TYPE, MAGNETIC_MODULE_TYPE, @@ -153,7 +158,7 @@ export function useModuleOverflowMenu( onClick={() => { handleInstructionsClick() }} - whiteSpace="nowrap" + whiteSpace={NO_WRAP} > {t('heater_shaker:show_attachment_instructions')} @@ -244,7 +249,7 @@ export function useModuleOverflowMenu( key={`thermocycler_block_temp_command_btn_${String(module.moduleModel)}`} onClick={sendBlockTempCommand} disabled={isDisabled} - whiteSpace="nowrap" + whiteSpace={NO_WRAP} > {module.data.status !== 'idle' ? t('overflow_menu_deactivate_block') diff --git a/app/src/organisms/Navigation/index.tsx b/app/src/organisms/Navigation/index.tsx index e03a5f443d0..8341e175682 100644 --- a/app/src/organisms/Navigation/index.tsx +++ b/app/src/organisms/Navigation/index.tsx @@ -5,25 +5,26 @@ import { useLocation, NavLink } from 'react-router-dom' import styled from 'styled-components' import { - Icon, - Flex, + ALIGN_CENTER, + ALIGN_FLEX_START, + BORDERS, Box, COLORS, - SPACING, - DIRECTION_ROW, - ALIGN_CENTER, - JUSTIFY_SPACE_BETWEEN, - truncateString, - TYPOGRAPHY, + CURSOR_DEFAULT, DIRECTION_COLUMN, + DIRECTION_ROW, DISPLAY_FLEX, - ALIGN_FLEX_START, - POSITION_STICKY, + Flex, + Icon, + JUSTIFY_SPACE_BETWEEN, + OVERFLOW_SCROLL, POSITION_ABSOLUTE, POSITION_STATIC, - BORDERS, + POSITION_STICKY, RESPONSIVENESS, - OVERFLOW_SCROLL, + SPACING, + truncateString, + TYPOGRAPHY, } from '@opentrons/components' import { ODD_FOCUS_VISIBLE } from '../../atoms/buttons/constants' @@ -242,7 +243,7 @@ const TouchNavLink = styled(NavLink)` } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - cursor: default; + cursor: ${CURSOR_DEFAULT}; } ` @@ -265,6 +266,6 @@ const IconButton = styled('button')` background-color: transparent; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - cursor: default; + cursor: ${CURSOR_DEFAULT}; } ` diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx index d8390ee7941..da16402f0e2 100644 --- a/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx +++ b/app/src/organisms/ODD/RobotSettingsDashboard/RobotSettingButton.tsx @@ -14,9 +14,10 @@ import { Icon, JUSTIFY_CENTER, JUSTIFY_SPACE_BETWEEN, + LegacyStyledText, + NO_WRAP, SPACING, TYPOGRAPHY, - LegacyStyledText, } from '@opentrons/components' import type { IconName } from '@opentrons/components' @@ -65,7 +66,7 @@ export function RobotSettingButton({ gridGap={SPACING.spacing24} alignItems={ALIGN_CENTER} width="100%" - whiteSpace="nowrap" + whiteSpace={NO_WRAP} > {iconName != null ? ( diff --git a/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx b/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx index d1fa185bb32..d2049ef246d 100644 --- a/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx +++ b/app/src/organisms/ODD/RobotSettingsDashboard/UpdateChannel.tsx @@ -11,6 +11,7 @@ import { SPACING, LegacyStyledText, TYPOGRAPHY, + CURSOR_POINTER, } from '@opentrons/components' import { ChildNavigation } from '../../../organisms/ChildNavigation' @@ -34,7 +35,7 @@ const SettingButton = styled.input` const SettingButtonLabel = styled.label` padding: ${SPACING.spacing24}; border-radius: ${BORDERS.borderRadius16}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; background: ${({ isSelected }) => isSelected === true ? COLORS.blue50 : COLORS.blue35}; color: ${({ isSelected }) => isSelected === true && COLORS.white}; diff --git a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx index a31076bea9d..fdf68a337c1 100644 --- a/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx +++ b/app/src/organisms/PipetteWizardFlows/ChoosePipette.tsx @@ -9,6 +9,7 @@ import { ALIGN_FLEX_END, BORDERS, COLORS, + CURSOR_POINTER, DIRECTION_COLUMN, DIRECTION_ROW, Flex, @@ -18,12 +19,12 @@ import { JUSTIFY_SPACE_AROUND, JUSTIFY_SPACE_BETWEEN, LegacyStyledText, + ModalShell, POSITION_ABSOLUTE, PrimaryButton, RESPONSIVENESS, SPACING, TYPOGRAPHY, - ModalShell, } from '@opentrons/components' import { EIGHT_CHANNEL, @@ -55,7 +56,7 @@ const UNSELECTED_OPTIONS_STYLE = css` border-radius: ${BORDERS.borderRadius8}; height: 14.5625rem; width: 14.5625rem; - cursor: pointer; + cursor: ${CURSOR_POINTER}; flex-direction: ${DIRECTION_COLUMN}; justify-content: ${JUSTIFY_CENTER}; align-items: ${ALIGN_CENTER}; diff --git a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx index 59b4590dc7f..b2270f6552e 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx @@ -10,6 +10,7 @@ import { Icon, InfoScreen, MenuItem, + NO_WRAP, OverflowBtn, POSITION_ABSOLUTE, POSITION_RELATIVE, @@ -182,7 +183,7 @@ export const LabwareDetailOverflowMenu = ( {showOverflowMenu ? ( {showOverflowMenu ? ( - + {formatTimeWithUtcLabel(protocol.createdAt)} diff --git a/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx b/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx index 23d593d0933..389566583cc 100644 --- a/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx +++ b/app/src/pages/ODD/QuickTransferDashboard/QuickTransferCard.tsx @@ -15,13 +15,14 @@ import { Flex, Icon, JUSTIFY_SPACE_BETWEEN, + LegacyStyledText, + NO_WRAP, + OVERFLOW_HIDDEN, OVERFLOW_WRAP_ANYWHERE, OVERFLOW_WRAP_BREAK_WORD, SPACING, - LegacyStyledText, TYPOGRAPHY, useLongPress, - OVERFLOW_HIDDEN, } from '@opentrons/components' import { useHost, @@ -221,7 +222,7 @@ export function QuickTransferCard(props: { {transferName} - + {formatTimeWithUtcLabel(quickTransfer.createdAt)} diff --git a/components/src/atoms/Checkbox/index.tsx b/components/src/atoms/Checkbox/index.tsx index da976978728..58da8c1fe4b 100644 --- a/components/src/atoms/Checkbox/index.tsx +++ b/components/src/atoms/Checkbox/index.tsx @@ -5,6 +5,8 @@ import { Flex } from '../../primitives' import { Icon } from '../../icons' import { ALIGN_CENTER, + CURSOR_AUTO, + CURSOR_POINTER, DIRECTION_ROW, FLEX_MAX_CONTENT, JUSTIFY_SPACE_BETWEEN, @@ -46,7 +48,7 @@ export function Checkbox(props: CheckboxProps): JSX.Element { border-radius: ${BORDERS.borderRadiusFull}; padding: ${SPACING.spacing12} ${SPACING.spacing16}; justify-content: ${JUSTIFY_SPACE_BETWEEN}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; &:active { background-color: ${isChecked ? COLORS.blue55 : COLORS.blue40}; @@ -65,7 +67,7 @@ export function Checkbox(props: CheckboxProps): JSX.Element { padding: ${SPACING.spacing20}; border-radius: ${BORDERS.borderRadius16}; width: 100%; - cursor: auto; + cursor: ${CURSOR_AUTO}; } ` diff --git a/components/src/atoms/CheckboxField/index.tsx b/components/src/atoms/CheckboxField/index.tsx index f416a771186..ae7134fcbb5 100644 --- a/components/src/atoms/CheckboxField/index.tsx +++ b/components/src/atoms/CheckboxField/index.tsx @@ -4,7 +4,7 @@ import { SPACING, TYPOGRAPHY } from '../../ui-style-constants' import { COLORS, BORDERS } from '../../helix-design-system' import { Flex, Box } from '../../primitives' import { Icon } from '../../icons' -import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../styles' +import { ALIGN_CENTER, CURSOR_POINTER, JUSTIFY_CENTER } from '../../styles' export interface CheckboxFieldProps { /** change handler */ @@ -55,7 +55,7 @@ const INNER_STYLE_VALUE = css` align-items: ${ALIGN_CENTER}; &:hover { - cursor: pointer; + cursor: ${CURSOR_POINTER}; color: ${COLORS.blue55}; } @@ -81,7 +81,7 @@ const INNER_STYLE_NO_VALUE = css` align-items: ${ALIGN_CENTER}; &:hover { - cursor: pointer; + cursor: ${CURSOR_POINTER}; color: ${COLORS.grey60}; } diff --git a/components/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx b/components/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx index bbcc98e12d5..8114f598fe9 100644 --- a/components/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx +++ b/components/src/atoms/ListButton/ListButtonChildren/ListButtonRadioButton.tsx @@ -4,6 +4,7 @@ import { SPACING } from '../../../ui-style-constants' import { BORDERS, COLORS } from '../../../helix-design-system' import { Flex } from '../../../primitives' import { StyledText } from '../../StyledText' +import { CURSOR_POINTER } from '../../../styles' import type { StyleProps } from '../../../primitives' @@ -62,7 +63,7 @@ export function ListButtonRadioButton( const SettingButtonLabel = styled.label` border-radius: ${BORDERS.borderRadius8}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; padding: 14px ${SPACING.spacing12}; width: 100%; diff --git a/components/src/atoms/ListButton/index.tsx b/components/src/atoms/ListButton/index.tsx index 3445254949e..ab6cb36eb60 100644 --- a/components/src/atoms/ListButton/index.tsx +++ b/components/src/atoms/ListButton/index.tsx @@ -3,6 +3,7 @@ import { css } from 'styled-components' import { Flex } from '../../primitives' import { SPACING } from '../../ui-style-constants' import { BORDERS, COLORS } from '../../helix-design-system' +import { CURSOR_POINTER } from '../../styles' import type { StyleProps } from '../../primitives' export * from './ListButtonChildren/index' @@ -44,7 +45,7 @@ export function ListButton(props: ListButtonProps): JSX.Element { const listButtonProps = LISTBUTTON_PROPS_BY_TYPE[type] const LIST_BUTTON_STYLE = css` - cursor: pointer; + cursor: ${CURSOR_POINTER}; background-color: ${disabled ? COLORS.grey35 : listButtonProps.backgroundColor}; diff --git a/components/src/atoms/Toast/index.tsx b/components/src/atoms/Toast/index.tsx index a80fa75fba8..2e6c05dabaa 100644 --- a/components/src/atoms/Toast/index.tsx +++ b/components/src/atoms/Toast/index.tsx @@ -11,6 +11,7 @@ import { DIRECTION_COLUMN, DIRECTION_ROW, JUSTIFY_SPACE_BETWEEN, + NO_WRAP, } from '../../styles' import { LegacyStyledText } from '../StyledText' import type { @@ -362,7 +363,7 @@ export function Toast(props: ToastProps): JSX.Element { maxWidth={showODDStyle ? '30.375rem' : 'auto'} overflow="hidden" textOverflow="ellipsis" - whiteSpace="nowrap" + whiteSpace={NO_WRAP} > {headingText} @@ -412,7 +413,7 @@ export function Toast(props: ToastProps): JSX.Element { showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline } textTransform={TYPOGRAPHY.textTransformCapitalize} - whiteSpace="nowrap" + whiteSpace={NO_WRAP} > {closeText} diff --git a/components/src/atoms/buttons/LargeButton.tsx b/components/src/atoms/buttons/LargeButton.tsx index 9476a7d693d..55904cdf57f 100644 --- a/components/src/atoms/buttons/LargeButton.tsx +++ b/components/src/atoms/buttons/LargeButton.tsx @@ -9,6 +9,8 @@ import { fontSizeBodyLargeSemiBold } from '../../helix-design-system/product/typ import { ALIGN_CENTER, ALIGN_FLEX_START, + CURSOR_DEFAULT, + CURSOR_POINTER, DIRECTION_COLUMN, DISPLAY_FLEX, JUSTIFY_SPACE_BETWEEN, @@ -158,7 +160,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { background-color: ${ LARGE_BUTTON_PROPS_BY_TYPE[buttonType].defaultBackgroundColor }; - cursor: pointer; + cursor: ${CURSOR_POINTER}; padding: ${SPACING.spacing16} ${SPACING.spacing24}; text-align: ${TYPOGRAPHY.textAlignCenter}; border-radius: ${BORDERS.borderRadiusFull}; @@ -205,7 +207,7 @@ export function LargeButton(props: LargeButtonProps): JSX.Element { } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - cursor: default; + cursor: ${CURSOR_DEFAULT}; align-items: ${ALIGN_FLEX_START}; flex-direction: ${DIRECTION_COLUMN}; border-radius: ${BORDERS.borderRadius16}; diff --git a/components/src/atoms/buttons/RadioButton.tsx b/components/src/atoms/buttons/RadioButton.tsx index d9a9502d6c7..e2a32c72b4d 100644 --- a/components/src/atoms/buttons/RadioButton.tsx +++ b/components/src/atoms/buttons/RadioButton.tsx @@ -5,6 +5,9 @@ import { ALIGN_CENTER, BORDERS, COLORS, + CURSOR_DEFAULT, + CURSOR_NOT_ALLOWED, + CURSOR_POINTER, DIRECTION_ROW, Icon, RESPONSIVENESS, @@ -80,14 +83,14 @@ export function RadioButton(props: RadioButtonProps): JSX.Element { const DISABLED_BUTTON_STYLE = css` background-color: ${COLORS.grey35}; color: ${COLORS.grey50}; - cursor: not-allowed; + cursor: ${CURSOR_NOT_ALLOWED}; ` const SettingButtonLabel = styled.label` border-radius: ${ !largeDesktopBorderRadius ? BORDERS.borderRadius40 : BORDERS.borderRadius8 }; - cursor: pointer; + cursor: ${CURSOR_POINTER}; padding: ${SPACING.spacing12} ${SPACING.spacing16}; width: 100%; @@ -99,7 +102,7 @@ export function RadioButton(props: RadioButtonProps): JSX.Element { } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - cursor: default; + cursor: ${CURSOR_DEFAULT}; padding: ${isLarge ? SPACING.spacing24 : SPACING.spacing20}; border-radius: ${BORDERS.borderRadius16}; display: ${maxLines != null ? '-webkit-box' : undefined}; diff --git a/components/src/atoms/buttons/SecondaryButton.tsx b/components/src/atoms/buttons/SecondaryButton.tsx index a7620495d5c..f999866f9d3 100644 --- a/components/src/atoms/buttons/SecondaryButton.tsx +++ b/components/src/atoms/buttons/SecondaryButton.tsx @@ -3,7 +3,7 @@ import styled from 'styled-components' import { TYPOGRAPHY, SPACING } from '../../ui-style-constants' import { isntStyleProp, styleProps } from '../../primitives' import { BORDERS, COLORS } from '../../helix-design-system' - +import { CURSOR_DEFAULT, CURSOR_POINTER } from '../../index' import type { StyleProps } from '../../index' interface SecondaryButtonProps extends StyleProps { @@ -14,7 +14,7 @@ export const SecondaryButton = styled.button.withConfig({ shouldForwardProp: p => isntStyleProp(p) && p !== 'isDangerous', })` appearance: none; - cursor: pointer; + cursor: ${CURSOR_POINTER}; color: ${props => (props.isDangerous ? COLORS.red50 : COLORS.blue50)}; border: ${BORDERS.lineBorder}; border-color: ${props => (props.isDangerous ? COLORS.red50 : 'initial')}; @@ -55,7 +55,7 @@ export const SecondaryButton = styled.button.withConfig({ box-shadow: none; border-color: ${COLORS.grey30}; color: ${COLORS.grey40}; - cursor: default; + cursor: ${CURSOR_DEFAULT}; } ${styleProps} diff --git a/components/src/modals/ModalShell.tsx b/components/src/modals/ModalShell.tsx index a1a10035be5..27007d0ea89 100644 --- a/components/src/modals/ModalShell.tsx +++ b/components/src/modals/ModalShell.tsx @@ -2,6 +2,7 @@ import * as React from 'react' import styled from 'styled-components' import { ALIGN_CENTER, + CURSOR_DEFAULT, JUSTIFY_CENTER, OVERFLOW_AUTO, POSITION_ABSOLUTE, @@ -82,7 +83,7 @@ const Overlay = styled.div` bottom: 0; z-index: 1; background-color: ${COLORS.black90}${COLORS.opacity40HexCode}; - cursor: default; + cursor: ${CURSOR_DEFAULT}; ` const ContentArea = styled.div<{ zIndex: string | number }>` display: flex; diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx index 3034cb33f3c..924d554cd0d 100644 --- a/components/src/molecules/DropdownMenu/index.tsx +++ b/components/src/molecules/DropdownMenu/index.tsx @@ -4,6 +4,7 @@ import { css } from 'styled-components' import { BORDERS, COLORS } from '../../helix-design-system' import { ALIGN_CENTER, + CURSOR_POINTER, DIRECTION_COLUMN, DIRECTION_ROW, JUSTIFY_SPACE_BETWEEN, @@ -136,7 +137,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element { const DROPDOWN_STYLE = css` flex-direction: ${DIRECTION_ROW}; background-color: ${COLORS.white}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; padding: ${SPACING.spacing8} ${SPACING.spacing12}; border: 1px ${BORDERS.styleSolid} ${showDropdownMenu ? COLORS.blue50 : COLORS.grey50}; diff --git a/components/src/primitives/Btn.tsx b/components/src/primitives/Btn.tsx index 5ea917a3a29..03246c7208f 100644 --- a/components/src/primitives/Btn.tsx +++ b/components/src/primitives/Btn.tsx @@ -17,15 +17,15 @@ const BUTTON_BASE_STYLE = css` border-width: 0; border-style: solid; background-color: transparent; - cursor: pointer; + cursor: ${Styles.CURSOR_POINTER}; &:disabled, &.disabled { - cursor: default; + cursor: ${Styles.CURSOR_DEFAULT}; } @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} { - cursor: default; + cursor: ${Styles.CURSOR_DEFAULT}; } ` diff --git a/components/src/primitives/Link.tsx b/components/src/primitives/Link.tsx index c2bf28e10a0..06c0ca50b2e 100644 --- a/components/src/primitives/Link.tsx +++ b/components/src/primitives/Link.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components' import { styleProps, isntStyleProp } from './style-props' import type { StyleProps, PrimitiveComponent } from './types' +import { CURSOR_POINTER } from '../styles' export interface LinkProps extends StyleProps { /** render link with target="_blank" */ @@ -26,6 +27,6 @@ export const Link: PrimitiveComponent<'a', LinkProps> = styled.a } )` text-decoration: none; - cursor: pointer; + cursor: ${CURSOR_POINTER}; ${styleProps} ` diff --git a/components/src/primitives/style-props.ts b/components/src/primitives/style-props.ts index b7de00e2513..c6c0710e83f 100644 --- a/components/src/primitives/style-props.ts +++ b/components/src/primitives/style-props.ts @@ -54,6 +54,7 @@ const FLEXBOX_PROPS = [ 'alignItems', 'justifyContent', 'flexDirection', + 'flexGrow', 'flexWrap', 'alignSelf', 'whiteSpace', diff --git a/components/src/styles/cursor.ts b/components/src/styles/cursor.ts new file mode 100644 index 00000000000..f4d2b0643ba --- /dev/null +++ b/components/src/styles/cursor.ts @@ -0,0 +1,12 @@ +// cursor +// https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#keyword +export const CURSOR_AUTO = 'auto' +export const CURSOR_CROSSHAIR = 'crosshair' +export const CURSOR_DEFAULT = 'default' +export const CURSOR_GRAB = 'grab' +export const CURSOR_GRABBING = 'grabbing' +export const CURSOR_HELP = 'help' +export const CURSOR_NOT_ALLOWED = 'not-allowed' +export const CURSOR_POINTER = 'pointer' +export const CURSOR_ZOOM_IN = 'zoom-in' +export const CURSOR_WAIT = 'wait' diff --git a/components/src/styles/flexbox.ts b/components/src/styles/flexbox.ts index 2c36936b200..4ee6286b204 100644 --- a/components/src/styles/flexbox.ts +++ b/components/src/styles/flexbox.ts @@ -31,3 +31,9 @@ export const DIRECTION_COLUMN_REVERSE = 'column-reverse' export const WRAP = 'wrap' export const NO_WRAP = 'nowrap' export const WRAP_REVERSE = 'wrap-reverse' + +export const WHITE_SPACE_NORMAL = 'normal' +export const WHITE_SPACE_PRE = 'pre' +export const WHITE_SPACE_PRE_WRAP = 'pre-wrap' +export const WHITE_SPACE_PRE_LINE = 'pre-line' +export const WHITE_SPACE_BREAK_SPACES = 'break-spaces' diff --git a/components/src/styles/index.ts b/components/src/styles/index.ts index aa5ec49761c..83ba2196a3a 100644 --- a/components/src/styles/index.ts +++ b/components/src/styles/index.ts @@ -1,5 +1,6 @@ export * from './borders' export * from './colors' +export * from './cursor' export * from './flexbox' export * from './layout' export * from './position' diff --git a/components/src/tooltips/LegacyTooltip.tsx b/components/src/tooltips/LegacyTooltip.tsx index dac98997f39..b0ea0c32ae2 100644 --- a/components/src/tooltips/LegacyTooltip.tsx +++ b/components/src/tooltips/LegacyTooltip.tsx @@ -6,6 +6,7 @@ import { fontSizeH4 } from '../ui-style-constants/typography' import { spacing8 } from '../ui-style-constants/spacing' import { ARROW_SIZE_PX } from './styles' import { Box } from '../primitives' +import { CURSOR_POINTER } from '../styles' import type { CSSProperties } from 'react' import type { FlattenSimpleInterpolation } from 'styled-components' @@ -60,7 +61,7 @@ export const LegacyTooltip = React.forwardRef(function TooltipComponent( padding: ${spacing8}; color: ${COLORS.white}; filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.2)); - cursor: pointer; + cursor: ${CURSOR_POINTER}; font-size: ${fontSize}; border-radius: ${BORDERS.borderRadius4}; ` diff --git a/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx b/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx index 79a989417fa..6cd42e698c3 100644 --- a/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx +++ b/opentrons-ai-client/src/organisms/MainContentContainer/index.tsx @@ -1,6 +1,6 @@ import React from 'react' import { useTranslation } from 'react-i18next' -import styled, { css } from 'styled-components' +import styled from 'styled-components' import { useAtom } from 'jotai' import { @@ -45,9 +45,7 @@ export function MainContentContainer(): JSX.Element { width="100%" overflowY={OVERFLOW_AUTO} flexDirection={DIRECTION_COLUMN} - css={css` - flex-grow: 1; - `} + flexGrow="1" > {/* Prompt Guide remain as a reference for users. */} diff --git a/protocol-designer/src/NavigationBar.tsx b/protocol-designer/src/NavigationBar.tsx index 182bda62c51..2099f41f957 100644 --- a/protocol-designer/src/NavigationBar.tsx +++ b/protocol-designer/src/NavigationBar.tsx @@ -8,6 +8,7 @@ import { ALIGN_CENTER, Btn, COLORS, + CURSOR_POINTER, DIRECTION_COLUMN, Flex, JUSTIFY_SPACE_BETWEEN, @@ -87,7 +88,7 @@ export function NavigationBar(): JSX.Element | null { const StyledLabel = styled.label` height: 20px; - cursor: pointer; + cursor: ${CURSOR_POINTER}; input[type='file'] { display: none; } diff --git a/protocol-designer/src/components/ComputingSpinner.tsx b/protocol-designer/src/components/ComputingSpinner.tsx index 453bb4cd6e1..921295f27a5 100644 --- a/protocol-designer/src/components/ComputingSpinner.tsx +++ b/protocol-designer/src/components/ComputingSpinner.tsx @@ -1,11 +1,11 @@ import * as React from 'react' import { useSelector } from 'react-redux' import { css } from 'styled-components' -import { Box, POSITION_FIXED } from '@opentrons/components' +import { Box, CURSOR_WAIT, POSITION_FIXED } from '@opentrons/components' import * as fileDataSelectors from '../file-data/selectors' const waitCursorStyle = css` - cursor: wait; + cursor: ${CURSOR_WAIT}; ` export const ComputingSpinner = (): JSX.Element | null => { diff --git a/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx b/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx index b8adad778a4..e1852fe4e03 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx @@ -8,20 +8,21 @@ import { } from '@opentrons/shared-data' import { - Flex, - Text, - Icon, - SPACING, ALIGN_CENTER, BORDERS, - JUSTIFY_CENTER, + Box, COLORS, - TYPOGRAPHY, - useHoverTooltip, - LegacyTooltip, + CURSOR_POINTER, DIRECTION_COLUMN, - Box, + Flex, + Icon, + JUSTIFY_CENTER, LegacyStyledText, + LegacyTooltip, + SPACING, + Text, + TYPOGRAPHY, + useHoverTooltip, } from '@opentrons/components' import { MAX_MAGNETIC_BLOCKS, MAX_MOAM_MODULES } from './ModulesAndOtherTile' import type { StyleProps } from '@opentrons/components' @@ -29,7 +30,7 @@ import type { ModuleType, RobotType } from '@opentrons/shared-data' const ARROW_STYLE = css` color: ${COLORS.grey50}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; &:hover { color: ${COLORS.black80}; } @@ -37,7 +38,7 @@ const ARROW_STYLE = css` const ARROW_STYLE_ACTIVE = css` color: ${COLORS.blue50}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; &:hover { color: ${COLORS.black80}; } diff --git a/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx b/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx index 8e683cd3d8a..9f54d117ff3 100644 --- a/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx +++ b/protocol-designer/src/components/modals/CreateFileWizard/RobotTypeTile.tsx @@ -2,21 +2,22 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { css } from 'styled-components' import { + ALIGN_CENTER, + BORDERS, + COLORS, + CURSOR_POINTER, DIRECTION_COLUMN, + DIRECTION_ROW, Flex, - SPACING, - TYPOGRAPHY, - Text, - COLORS, - BORDERS, JUSTIFY_CENTER, - ALIGN_CENTER, - RESPONSIVENESS, - DIRECTION_ROW, + JUSTIFY_FLEX_END, JUSTIFY_FLEX_START, JUSTIFY_SPACE_BETWEEN, PrimaryButton, - JUSTIFY_FLEX_END, + RESPONSIVENESS, + SPACING, + Text, + TYPOGRAPHY, } from '@opentrons/components' import { FLEX_DISPLAY_NAME, @@ -137,7 +138,7 @@ const UNSELECTED_OPTIONS_STYLE = css` border-radius: ${BORDERS.borderRadius8}; height: 14.5625rem; width: 14.5625rem; - cursor: pointer; + cursor: ${CURSOR_POINTER}; flex-direction: ${DIRECTION_COLUMN}; justify-content: ${JUSTIFY_CENTER}; align-items: ${ALIGN_CENTER}; diff --git a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx index b77811de040..53146ed99f6 100644 --- a/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx +++ b/protocol-designer/src/organisms/EditInstrumentsModal/index.tsx @@ -10,6 +10,7 @@ import { Btn, Checkbox, COLORS, + CURSOR_POINTER, DIRECTION_COLUMN, DIRECTION_ROW, DISPLAY_FLEX, @@ -583,7 +584,7 @@ const StyledLabel = styled.label` text-decoration: ${TYPOGRAPHY.textDecorationUnderline}; font-size: ${PRODUCT.TYPOGRAPHY.fontSizeBodyDefaultSemiBold}; display: ${DISPLAY_INLINE_BLOCK}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; input[type='file'] { display: none; } diff --git a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx index 6f95166d268..3986b2258a4 100644 --- a/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx +++ b/protocol-designer/src/pages/CreateNewProtocolWizard/SelectPipettes.tsx @@ -12,6 +12,7 @@ import { Box, Btn, Checkbox, + CURSOR_POINTER, DIRECTION_COLUMN, DIRECTION_ROW, DISPLAY_FLEX, @@ -494,7 +495,7 @@ const StyledLabel = styled.label` text-decoration: ${TYPOGRAPHY.textDecorationUnderline}; font-size: ${PRODUCT.TYPOGRAPHY.fontSizeBodyDefaultSemiBold}; display: ${DISPLAY_INLINE_BLOCK}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; input[type='file'] { display: none; } diff --git a/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx b/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx index c67022e7d19..2dc111d85dd 100644 --- a/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx +++ b/protocol-designer/src/pages/Designer/DeckSetup/DeckItemHover.tsx @@ -6,6 +6,7 @@ import { ALIGN_CENTER, BORDERS, COLORS, + CURSOR_POINTER, DISPLAY_FLEX, Flex, JUSTIFY_CENTER, @@ -81,7 +82,7 @@ export function DeckItemHover(props: DeckItemHoverProps): JSX.Element | null { color: COLORS.white, fontSize: PRODUCT.TYPOGRAPHY.fontSizeBodyDefaultSemiBold, borderRadius: BORDERS.borderRadius8, - cursor: 'pointer', + cursor: CURSOR_POINTER, }, onMouseEnter: () => { setHover(itemId) diff --git a/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx index 9da8dfab291..dec0d114f83 100644 --- a/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx +++ b/protocol-designer/src/pages/Designer/DeckSetup/LabwareTools.tsx @@ -6,6 +6,7 @@ import { useDispatch, useSelector } from 'react-redux' import { ALIGN_CENTER, CheckboxField, + CURSOR_POINTER, DIRECTION_COLUMN, DISPLAY_INLINE_BLOCK, Flex, @@ -477,7 +478,7 @@ const StyledLabel = styled.label` text-decoration: ${TYPOGRAPHY.textDecorationUnderline}; text-align: ${TYPOGRAPHY.textAlignCenter}; display: ${DISPLAY_INLINE_BLOCK}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; input[type='file'] { display: none; } diff --git a/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx b/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx index 610683b014b..9f03734379d 100644 --- a/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx +++ b/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx @@ -6,6 +6,8 @@ import { useNavigate } from 'react-router-dom' import { BORDERS, COLORS, + CURSOR_AUTO, + CURSOR_POINTER, DIRECTION_COLUMN, Flex, NO_WRAP, @@ -275,7 +277,7 @@ export function SlotOverflowMenu( const MenuButton = styled.button` background-color: ${COLORS.transparent}; border-radius: inherit; - cursor: pointer; + cursor: ${CURSOR_POINTER}; padding: ${SPACING.spacing8} ${SPACING.spacing12}; border: none; border-radius: inherit; @@ -284,6 +286,6 @@ const MenuButton = styled.button` } &:disabled { color: ${COLORS.grey40}; - cursor: auto; + cursor: ${CURSOR_AUTO}; } ` diff --git a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx index 6e36a3ccb19..fb992cab7f0 100644 --- a/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx +++ b/protocol-designer/src/pages/Designer/LiquidsOverflowMenu.tsx @@ -8,6 +8,8 @@ import { BORDERS, Box, COLORS, + CURSOR_AUTO, + CURSOR_POINTER, DIRECTION_COLUMN, Flex, Icon, @@ -97,7 +99,7 @@ export function LiquidsOverflowMenu( } const MenuButton = styled.button` background-color: ${COLORS.transparent}; - cursor: pointer; + cursor: ${CURSOR_POINTER}; padding: ${SPACING.spacing8} ${SPACING.spacing12}; border: none; border-radius: inherit; @@ -106,6 +108,6 @@ const MenuButton = styled.button` } &:disabled { color: ${COLORS.grey40}; - cursor: auto; + cursor: ${CURSOR_AUTO}; } ` diff --git a/protocol-designer/src/pages/Landing/index.tsx b/protocol-designer/src/pages/Landing/index.tsx index d0fe4acdbca..80c2d022d43 100644 --- a/protocol-designer/src/pages/Landing/index.tsx +++ b/protocol-designer/src/pages/Landing/index.tsx @@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next' import { ALIGN_CENTER, COLORS, + CURSOR_POINTER, DIRECTION_COLUMN, Flex, LargeButton, @@ -93,7 +94,7 @@ export function Landing(): JSX.Element { const StyledLabel = styled.label` display: inline-block; - cursor: pointer; + cursor: ${CURSOR_POINTER}; input[type='file'] { display: none; } diff --git a/protocol-designer/src/pages/ProtocolOverview/index.tsx b/protocol-designer/src/pages/ProtocolOverview/index.tsx index 6acf8d2e770..91b7d5d6367 100644 --- a/protocol-designer/src/pages/ProtocolOverview/index.tsx +++ b/protocol-designer/src/pages/ProtocolOverview/index.tsx @@ -20,12 +20,13 @@ import { ListItem, ListItemDescriptor, Modal, + NO_WRAP, PrimaryButton, - SPACING, SecondaryButton, + SPACING, StyledText, - TYPOGRAPHY, ToggleGroup, + TYPOGRAPHY, } from '@opentrons/components' import { getPipetteSpecsV2, @@ -316,7 +317,7 @@ export function ProtocolOverview(): JSX.Element { onClick={() => { navigate('/designer') }} - whiteSpace="nowrap" + whiteSpace={NO_WRAP} height="3.5rem" />