feat(components): add css props and style props to components (#16136)

* feat(components): add css props and style props to components

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<ColorsStorybookProps> = args => {
               margin={SPACING.spacing2} // Add some margin between color rows
               borderRadius={BORDERS.borderRadius4}
               style={{
-                cursor: 'pointer',
+                cursor: CURSOR_POINTER,
                 border: `1px solid ${COLORS.grey20}`,
               }}
             >

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};

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}

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]

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};

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,
         }}
       >
         <LegacyStyledText

app/src/molecules/InstrumentCard/MenuOverlay.tsx

@@ -6,6 +6,7 @@ import {
   DIRECTION_COLUMN,
   Flex,
   MenuItem,
+  NO_WRAP,
   POSITION_ABSOLUTE,
 } from '@opentrons/components'
 
@@ -38,7 +39,7 @@ export function MenuOverlay(props: MenuOverlayProps): JSX.Element {
       position={POSITION_ABSOLUTE}
       top="2.25rem"
       right="0"
-      whiteSpace="nowrap"
+      whiteSpace={NO_WRAP}
       zIndex={10}
       onClick={(e: React.MouseEvent) => {
         e.preventDefault()

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};

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};

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', () => {

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};

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%;

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};
   }
 `

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(
             <Flex
               gridGap={SPACING.spacing4}
               alignItems={ALIGN_CENTER}
-              whiteSpace="nowrap"
+              whiteSpace={NO_WRAP}
               marginLeft={`-${SPACING.spacing4}`}
             >
               <Icon name="ot-spinner" spin size="1rem" />
@@ -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};

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};

app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx

@@ -275,7 +275,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
                 <Flex
                   gridGap={SPACING.spacing4}
                   alignItems={ALIGN_CENTER}
-                  whiteSpace="nowrap"
+                  whiteSpace={NO_WRAP}
                   marginLeft={`-${SPACING.spacing4}`}
                 >
                   <Icon name="ot-spinner" spin size="1rem" />

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;