s/StyledText/LegacyStyledText

LegacyStyledText will use the current styles; a new StyledText implementation will use the helix design system typography.
Opentrons · Jun 20, 2024 · a36f501 · a36f501
1 parent 07dae4b
commit a36f501
Show file tree

Hide file tree

Showing 448 changed files with 3,357 additions and 2,694 deletions.
diff --git a/app/src/App/DesktopAppFallback.tsx b/app/src/App/DesktopAppFallback.tsx
@@ -13,7 +13,7 @@ import {
   DIRECTION_COLUMN,
   Flex,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -45,12 +45,12 @@ export function DesktopAppFallback({ error }: FallbackProps): JSX.Element {
     >
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing32}>
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
-          <StyledText as="p">
+          <LegacyStyledText as="p">
             {t('error_boundary_desktop_app_description')}
-          </StyledText>
-          <StyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
+          </LegacyStyledText>
+          <LegacyStyledText as="p" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
             {error.message}
-          </StyledText>
+          </LegacyStyledText>
         </Flex>
         <AlertPrimaryButton
           alignSelf={ALIGN_FLEX_END}

diff --git a/app/src/App/Navbar.tsx b/app/src/App/Navbar.tsx
@@ -16,7 +16,7 @@ import {
   Link,
   SIZE_2,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -134,12 +134,12 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
         />
         {navRoutes.map(({ name, navLinkTo }: RouteProps) => (
           <NavbarLink key={name} to={navLinkTo as string}>
-            <StyledText
+            <LegacyStyledText
               as="h3"
               margin={`${SPACING.spacing8} 0 ${SPACING.spacing8} ${SPACING.spacing12}`}
             >
               {name}
-            </StyledText>
+            </LegacyStyledText>
           </NavbarLink>
         ))}
       </Flex>

diff --git a/app/src/App/OnDeviceDisplayAppFallback.tsx b/app/src/App/OnDeviceDisplayAppFallback.tsx
@@ -14,7 +14,7 @@ import {
   Flex,
   JUSTIFY_CENTER,
   SPACING,
-  StyledText,
+  LegacyStyledText,
 } from '@opentrons/components'
 
 import { MediumButton } from '../atoms/buttons'
@@ -59,9 +59,9 @@ export function OnDeviceDisplayAppFallback({
         alignItems={ALIGN_CENTER}
         justifyContent={JUSTIFY_CENTER}
       >
-        <StyledText as="p">
+        <LegacyStyledText as="p">
           {t('branded:error_boundary_description')}
-        </StyledText>
+        </LegacyStyledText>
         <MediumButton
           width="100%"
           buttonType="alert"

diff --git a/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx b/app/src/DesignTokens/BorderRadius/BorderRadius.stories.tsx
@@ -7,7 +7,7 @@ import {
   DIRECTION_COLUMN,
   Flex,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -46,9 +46,9 @@ const Template: Story<BorderRadiusStorybookProps> = args => {
           width="100%"
           height="6rem"
         >
-          <StyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightRegular}>
+          <LegacyStyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightRegular}>
             {`${br[0]}" ${br[1]}`}
-          </StyledText>
+          </LegacyStyledText>
           <Box
             width="10rem"
             height="4rem"

diff --git a/app/src/DesignTokens/Colors/Colors.stories.tsx b/app/src/DesignTokens/Colors/Colors.stories.tsx
@@ -8,7 +8,7 @@ import {
   Flex,
   JUSTIFY_CENTER,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -80,25 +80,25 @@ const Template: Story<ColorsStorybookProps> = args => {
           style={{ cursor: 'pointer' }}
           border={`2px solid ${COLORS.black90}`}
         >
-          <StyledText
+          <LegacyStyledText
             color={invertColor(color[1])}
             as="p"
             fontWeight={TYPOGRAPHY.fontWeightRegular}
           >
             {color[0]}
-          </StyledText>
-          <StyledText
+          </LegacyStyledText>
+          <LegacyStyledText
             as="p"
             color={invertColor(color[1])}
             fontWeight={TYPOGRAPHY.fontWeightRegular}
           >
             {color[1]}
-          </StyledText>
+          </LegacyStyledText>
           <Flex height="1rem">
             {copiedColor === color[0] ? (
-              <StyledText as="p" color={invertColor(color[1])}>
+              <LegacyStyledText as="p" color={invertColor(color[1])}>
                 {'copied'}
-              </StyledText>
+              </LegacyStyledText>
             ) : null}
           </Flex>
         </Flex>

diff --git a/app/src/DesignTokens/Spacing/Spacing.stories.tsx b/app/src/DesignTokens/Spacing/Spacing.stories.tsx
@@ -6,7 +6,7 @@ import {
   DIRECTION_COLUMN,
   Flex,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -44,9 +44,9 @@ const Template: Story<SpacingsStorybookProps> = args => {
           width="100%"
           height="6rem"
         >
-          <StyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightRegular}>
+          <LegacyStyledText as="h2" fontWeight={TYPOGRAPHY.fontWeightRegular}>
             {`${spacing[0]} - ${spacing[1]}: ${convertToPx(spacing[1])}`}
-          </StyledText>
+          </LegacyStyledText>
           <Box
             width={spacing[1]}
             height="2rem"

diff --git a/app/src/atoms/Banner/Banner.stories.tsx b/app/src/atoms/Banner/Banner.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { StyledText, TYPOGRAPHY } from '@opentrons/components'
+import { LegacyStyledText, TYPOGRAPHY } from '@opentrons/components'
 import { Banner } from './index'
 import type { Meta, StoryObj } from '@storybook/react'
 
@@ -35,9 +35,12 @@ export const OverriddenExitIcon: Story = {
       console.log('close')
     },
     closeButton: (
-      <StyledText as="p" textDecoration={TYPOGRAPHY.textDecorationUnderline}>
+      <LegacyStyledText
+        as="p"
+        textDecoration={TYPOGRAPHY.textDecorationUnderline}
+      >
         {'Exit'}
-      </StyledText>
+      </LegacyStyledText>
     ),
   },
 }
diff --git a/app/src/atoms/InlineNotification/index.tsx b/app/src/atoms/InlineNotification/index.tsx
@@ -9,7 +9,7 @@ import {
   Icon,
   JUSTIFY_SPACE_BETWEEN,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -81,7 +81,7 @@ export function InlineNotification(
     >
       <Icon {...iconProps} aria-label={`icon_${type}`} />
       <Flex flex="1" alignItems={ALIGN_CENTER}>
-        <StyledText
+        <LegacyStyledText
           fontSize={TYPOGRAPHY.fontSize22}
           fontWeight={TYPOGRAPHY.fontWeightRegular}
           lineHeight={TYPOGRAPHY.lineHeight28}
@@ -94,7 +94,7 @@ export function InlineNotification(
             {fullHeading}
           </span>
           {message != null && fullmessage}
-        </StyledText>
+        </LegacyStyledText>
       </Flex>
       {onCloseClick && (
         <Btn

diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
@@ -11,7 +11,7 @@ import {
   Icon,
   RESPONSIVENESS,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   TEXT_ALIGN_RIGHT,
   TYPOGRAPHY,
   useHoverTooltip,
@@ -249,14 +249,14 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
         <Flex flexDirection={DIRECTION_COLUMN} width="100%">
           {title != null ? (
             <Flex gridGap={SPACING.spacing8}>
-              <StyledText
+              <LegacyStyledText
                 as="label"
                 fontWeight={TYPOGRAPHY.fontWeightSemiBold}
                 htmlFor={props.id}
                 css={TITLE_STYLE}
               >
                 {title}
-              </StyledText>
+              </LegacyStyledText>
               {tooltipText != null ? (
                 <>
                   <Flex {...targetProps}>
@@ -299,18 +299,18 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
             </Flex>
           </Flex>
           {props.caption != null ? (
-            <StyledText
+            <LegacyStyledText
               as="label"
               css={FORM_BOTTOM_SPACE_STYLE}
               color={COLORS.grey60}
             >
               {props.caption}
-            </StyledText>
+            </LegacyStyledText>
           ) : null}
           {hasError ? (
-            <StyledText as="label" css={ERROR_TEXT_STYLE}>
+            <LegacyStyledText as="label" css={ERROR_TEXT_STYLE}>
               {props.error}
-            </StyledText>
+            </LegacyStyledText>
           ) : null}
         </Flex>
       </Flex>

diff --git a/app/src/atoms/InstrumentContainer/index.tsx b/app/src/atoms/InstrumentContainer/index.tsx
@@ -5,7 +5,7 @@ import {
   COLORS,
   Flex,
   SPACING,
-  StyledText,
+  LegacyStyledText,
 } from '@opentrons/components'
 
 interface InstrumentContainerProps {
@@ -26,9 +26,9 @@ export const InstrumentContainer = (
       paddingY={SPACING.spacing2}
       width="max-content"
     >
-      <StyledText as="p" id={id}>
+      <LegacyStyledText as="p" id={id}>
         {displayName}
-      </StyledText>
+      </LegacyStyledText>
     </Flex>
   )
 }
diff --git a/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx b/app/src/atoms/Interstitial/InterstitiallTitleBar.tsx
@@ -9,7 +9,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   POSITION_ABSOLUTE,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   TYPOGRAPHY,
 } from '@opentrons/components'
 
@@ -65,15 +65,15 @@ export function InterstitialTitleBar(
           paddingRight={TYPOGRAPHY.fontSizeH6}
           data-testid={`titlebar_${exit.title}`}
         >
-          <StyledText
+          <LegacyStyledText
             paddingRight={SPACING.spacing8}
             paddingTop={SPACING.spacing4}
             fontWeight={TYPOGRAPHY.fontWeightRegular}
             fontSize={TYPOGRAPHY.fontSizeH3}
             textTransform={TYPOGRAPHY.textTransformCapitalize}
           >
             {exit.title}
-          </StyledText>
+          </LegacyStyledText>
           <Btn
             size="1.5rem"
             onClick={exit.onClick}

diff --git a/app/src/atoms/ListItem/ListItem.stories.tsx b/app/src/atoms/ListItem/ListItem.stories.tsx
@@ -3,7 +3,7 @@ import {
   DIRECTION_COLUMN,
   Flex,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   VIEWPORT,
 } from '@opentrons/components'
 import { ListItem as ListItemComponent } from '.'
@@ -32,15 +32,15 @@ export const ListItem: Story = {
     type: 'noActive',
     children: (
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-        <StyledText as="p">
+        <LegacyStyledText as="p">
           Slot Component: Replace me using the component panel.
-        </StyledText>
-        <StyledText as="p">
+        </LegacyStyledText>
+        <LegacyStyledText as="p">
           Slot Component: Replace me using the component panel.
-        </StyledText>
-        <StyledText as="p">
+        </LegacyStyledText>
+        <LegacyStyledText as="p">
           Slot Component: Replace me using the component panel.
-        </StyledText>
+        </LegacyStyledText>
       </Flex>
     ),
   },

diff --git a/app/src/atoms/MenuList/DropdownMenu.tsx b/app/src/atoms/MenuList/DropdownMenu.tsx
@@ -11,7 +11,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   POSITION_ABSOLUTE,
   SPACING,
-  StyledText,
+  LegacyStyledText,
   TYPOGRAPHY,
   useOnClickOutside,
   POSITION_RELATIVE,
@@ -170,13 +170,13 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     <Flex flexDirection={DIRECTION_COLUMN} ref={dropDownMenuWrapperRef}>
       {title !== null ? (
         <Flex gridGap={SPACING.spacing8}>
-          <StyledText
+          <LegacyStyledText
             as="label"
             fontWeight={TYPOGRAPHY.fontWeightSemiBold}
             paddingBottom={SPACING.spacing8}
           >
             {title}
-          </StyledText>
+          </LegacyStyledText>
           {tooltipText != null ? (
             <>
               <Flex {...targetProps}>
@@ -200,7 +200,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
           css={DROPDOWN_STYLE}
           tabIndex={tabIndex}
         >
-          <StyledText
+          <LegacyStyledText
             css={css`
               ${dropdownType === 'rounded'
                 ? TYPOGRAPHY.pSemiBold
@@ -211,7 +211,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             `}
           >
             {currentOption.name}
-          </StyledText>
+          </LegacyStyledText>
           {showDropdownMenu ? (
             <Icon size="0.75rem" name="menu-down" transform="rotate(180deg)" />
           ) : (
@@ -248,13 +248,13 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
         )}
       </Flex>
       {caption != null ? (
-        <StyledText
+        <LegacyStyledText
           as="label"
           paddingTop={SPACING.spacing4}
           color={COLORS.grey60}
         >
           {caption}
-        </StyledText>
+        </LegacyStyledText>
       ) : null}
     </Flex>
   )