Repository: Opentrons/opentrons
Pull request #18228: feat(components): update the Toast component to use button for link.
Author: login: vegano1
Created: 2025-05-01T17:57:18Z | Merged: 2025-05-06T15:32:44Z

# Overview

Refactor the Toast component to move the link location to a second button on the left side of the component. This will allow us to use the component to navigate to another route when setting up new modules as part of the module setup on both the ODD and Desktop app.

Closes: [EXEC-1219](https://opentrons.atlassian.net/browse/EXEC-1219)

<img width="965" alt="Screen Shot 2025-05-01 at 1 50 34 PM" src="https://github.com/user-attachments/assets/91bdd680-97b8-44d6-ba8a-8bdbbac0ebb6" />

## Test Plan and Hands on Testing

- [x] Send a protocol to a robot and make sure the Toast looks the same as before
- [x] Check the App update available toast on the Desktop app and make sure it looks and works as expected.

## Changelog

- Change the Toast component linkText and styling to a button to the left of the optional close button.

## Review requests

- Anything I'm missing?

## Risk assessment

Low


[EXEC-1219]: https://opentrons.atlassian.net/browse/EXEC-1219?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


Diff:
diff --git a/components/src/atoms/Toast/ODDToast.stories.tsx b/components/src/atoms/Toast/ODDToast.stories.tsx
index 76da3416c1af..92e3a470226f 100644
--- a/components/src/atoms/Toast/ODDToast.stories.tsx
+++ b/components/src/atoms/Toast/ODDToast.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import { Toast } from '.'
-import { Flex } from '../../primitives'
+import { Flex, STYLE_PROPS } from '../../primitives'
 import {
   DIRECTION_COLUMN,
   DIRECTION_ROW,
@@ -10,7 +10,7 @@ import {
 } from '../../styles'
 import { SPACING, VIEWPORT } from '../../ui-style-constants'
 import { PrimaryButton } from '../buttons'
-import { LegacyStyledText } from '../StyledText'
+import { StyledText } from '../StyledText'
 
 import type { Meta, Story } from '@storybook/react'
 
@@ -18,6 +18,15 @@ export default {
   title: 'ODD/Atoms/Toast',
   component: Toast,
   parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {
+    // Disable all StyleProps
+    ...Object.fromEntries(
+      [...STYLE_PROPS, 'as', 'ref', 'theme', 'forwardedAs'].map(prop => [
+        prop,
+        { table: { disable: true } },
+      ])
+    ),
+  },
 } as Meta
 
 const Template: Story<React.ComponentProps<typeof Toast>> = args => {
@@ -32,14 +41,14 @@ const Template: Story<React.ComponentProps<typeof Toast>> = args => {
       <Flex flexDirection={DIRECTION_ROW} marginY={SPACING.spacing16}>
         <PrimaryButton onClick={handleClick}>Click me</PrimaryButton>
         <Flex flexDirection={DIRECTION_COLUMN} marginLeft={SPACING.spacing8}>
-          <LegacyStyledText as="p">
+          <StyledText as="p">
             When clicking the button, the Toast shows up in the bottom.
-          </LegacyStyledText>
-          <LegacyStyledText as="p">
+          </StyledText>
+          <StyledText as="p">
             Unless you set a duration or disable the timeout, the Toast will
             disappear between 2 and 7 seconds depending on the length of the
             text.
-          </LegacyStyledText>
+          </StyledText>
         </Flex>
       </Flex>
       {isShowToast && (
diff --git a/components/src/atoms/Toast/index.tsx b/components/src/atoms/Toast/index.tsx
index 7eea6203d618..417d6854c2ce 100644
--- a/components/src/atoms/Toast/index.tsx
+++ b/components/src/atoms/Toast/index.tsx
@@ -13,7 +13,7 @@ import {
 } from '../../styles'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { truncateString } from '../../utils'
-import { LegacyStyledText } from '../StyledText'
+import { StyledText } from '../StyledText'
 
 import type {
   DefaultTheme,
@@ -186,20 +186,6 @@ export function Toast(props: ToastProps): JSX.Element {
 
   const ODD_ANIMATION_NONE = css``
 
-  const TEXT_STYLE = css`
-    color: ${COLORS.black90};
-    font-size: ${showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP};
-    font-weight: ${showODDStyle
-      ? TYPOGRAPHY.fontWeightSemiBold
-      : TYPOGRAPHY.fontWeightRegular};
-    line-height: ${showODDStyle
-      ? TYPOGRAPHY.lineHeight28
-      : TYPOGRAPHY.lineHeight20};
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  `
-
   let oddAnimation: FlattenSimpleInterpolation | ThemedCssFunction<DefaultTheme>
 
   if (isClosed) {
@@ -347,19 +333,9 @@ export function Toast(props: ToastProps): JSX.Element {
           width={showODDStyle ? 'auto' : '100%'}
         >
           {headingText.length > 0 ? (
-            <LegacyStyledText
-              color={COLORS.black90}
-              fontSize={
-                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-              }
-              fontWeight={
-                showODDStyle
-                  ? TYPOGRAPHY.fontWeightBold
-                  : TYPOGRAPHY.fontWeightSemiBold
-              }
-              lineHeight={
-                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-              }
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
               marginRight={showODDStyle ? SPACING.spacing4 : undefined}
               maxWidth={showODDStyle ? '30.375rem' : 'auto'}
               overflow="hidden"
@@ -367,59 +343,77 @@ export function Toast(props: ToastProps): JSX.Element {
               whiteSpace={NO_WRAP}
             >
               {headingText}
-            </LegacyStyledText>
+            </StyledText>
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
-            <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              overflow="hidden"
+              text-overflow="ellipsis"
+              white-space="nowrap"
+            >
+              {message}
+            </StyledText>
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
           >
-            {closeText}
-          </LegacyStyledText>
-        </Link>
-      ) : null}
+            <StyledText
+              fontSize={
+                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
+              }
+              fontWeight={
+                showODDStyle
+                  ? TYPOGRAPHY.fontWeightSemiBold
+                  : TYPOGRAPHY.fontWeightRegular
+              }
+              lineHeight={
+                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
+              }
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {linkText}
+            </StyledText>
+          </Link>
+        ) : null}
+        {closeText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onCloseHandler()
+            }}
+            padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
+          >
+            <StyledText
+              oddStyle="bodyTextSemiBold"
+              desktopStyle="bodyDefaultRegular"
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {closeText}
+            </StyledText>
+          </Link>
+        ) : null}
+      </Flex>
       {!closeText && closeButton ? (
         <Btn
           onClick={() => {


Reviews:
user: login: mjhuff
body: Just a heads up, these changes appear to impact desktop toasts:

<img width="483" alt="Screenshot 2025-05-01 at 2 00 28 PM" src="https://github.com/user-attachments/assets/0a4a9b1b-75e3-4604-a6f1-a31f26edaa64" />

state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T18:01:13Z
user: login: koji
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T19:51:11Z
user: login: koji
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T19:55:08Z
user: login: koji
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T19:55:56Z
user: login: koji
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T20:28:25Z
user: login: jerader
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-02T19:59:50Z
user: login: jerader
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-02T20:00:04Z
user: login: jerader
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-02T20:01:12Z
user: login: mjhuff
body: The component looks good with @jerader's suggestions, thanks.

The ticket/figma also request that we update the Toast storybook stories (the ODD one in particular), removing the style props as user-facing parameters. I think once that's done we'll be in a good spot.
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T12:21:17Z
user: login: vegano1
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-05T18:28:23Z
user: login: mjhuff
body: Thank you! 🎉 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-06T15:29:53Z

Review comments:
diff_hunk: @@ -371,55 +371,77 @@ export function Toast(props: ToastProps): JSX.Element {
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
             <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              console.log('link')
path: components/src/atoms/Toast/index.tsx
user: login: koji
body: ```suggestion
             
```
created_at: 2025-05-01T19:51:11Z
author_association: CONTRIBUTOR
diff_hunk: @@ -371,55 +371,77 @@ export function Toast(props: ToastProps): JSX.Element {
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
             <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              console.log('link')
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
           >
-            {closeText}
-          </LegacyStyledText>
-        </Link>
-      ) : null}
+            <LegacyStyledText
+              color={COLORS.black90}
path: components/src/atoms/Toast/index.tsx
user: login: koji
body: for LegacyStyledText and StyledText, the default color is black90 (it's set in globalStyle) so you can remove color for this case.
created_at: 2025-05-01T19:55:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -371,55 +371,77 @@ export function Toast(props: ToastProps): JSX.Element {
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
             <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              console.log('link')
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
           >
-            {closeText}
-          </LegacyStyledText>
-        </Link>
-      ) : null}
+            <LegacyStyledText
+              color={COLORS.black90}
+              fontSize={
+                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
+              }
+              fontWeight={
+                showODDStyle
+                  ? TYPOGRAPHY.fontWeightSemiBold
+                  : TYPOGRAPHY.fontWeightRegular
+              }
+              lineHeight={
+                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
+              }
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {linkText}
+            </LegacyStyledText>
+          </Link>
+        ) : null}
+        {closeText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onCloseHandler()
+            }}
+            padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
+          >
+            <LegacyStyledText
+              color={COLORS.black90}
path: components/src/atoms/Toast/index.tsx
user: login: koji
body: same
created_at: 2025-05-01T19:55:56Z
author_association: CONTRIBUTOR
diff_hunk: @@ -371,55 +371,77 @@ export function Toast(props: ToastProps): JSX.Element {
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
             <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              console.log('link')
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
           >
-            {closeText}
-          </LegacyStyledText>
-        </Link>
-      ) : null}
+            <LegacyStyledText
+              color={COLORS.black90}
path: components/src/atoms/Toast/index.tsx
user: login: koji
body: From the design on Figma, this pr would  need to switch `LegacyStyledText` to `StyledText`
created_at: 2025-05-01T20:28:25Z
author_association: CONTRIBUTOR
diff_hunk: @@ -367,59 +366,78 @@ export function Toast(props: ToastProps): JSX.Element {
               whiteSpace={NO_WRAP}
             >
               {headingText}
-            </LegacyStyledText>
+            </StyledText>
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
-            <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
+            <StyledText css={TEXT_STYLE}>{message}</StyledText>
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
           >
-            {closeText}
-          </LegacyStyledText>
-        </Link>
-      ) : null}
+            <StyledText
path: components/src/atoms/Toast/index.tsx
user: login: jerader
body: `StyledText` has 2 optional props called `oddStyle` and `desktopStyle`. Whenever you use `StyledText`, ideally, you should use those to get most of the styling. 

If you look on figma and you click on the properties tab and copy the typography name for the text for odd you get `ODD/bodyText_Semi` which corresponds with `oddStyle='bodyTextSemiBold'` and for desktop you get `Helix/Product/Body-default-reg` which corresponds with `desktopStyle=bodyDefaultRegular''`

```
<StyledText
              oddStyle="bodyTextSemiBold"
              desktopStyle="bodyDefaultRegular"
              marginRight={showODDStyle ? SPACING.spacing4 : undefined}
              maxWidth={showODDStyle ? '30.375rem' : 'auto'}
              overflow="hidden"
              textOverflow="ellipsis"
              whiteSpace={NO_WRAP}
            >
              {headingText}
            </StyledText>

```
created_at: 2025-05-02T19:59:49Z
author_association: COLLABORATOR
diff_hunk: @@ -367,59 +366,78 @@ export function Toast(props: ToastProps): JSX.Element {
               whiteSpace={NO_WRAP}
             >
               {headingText}
-            </LegacyStyledText>
+            </StyledText>
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
-            <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
+            <StyledText css={TEXT_STYLE}>{message}</StyledText>
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
           >
-            {closeText}
-          </LegacyStyledText>
-        </Link>
-      ) : null}
+            <StyledText
+              fontSize={
+                showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
+              }
+              fontWeight={
+                showODDStyle
+                  ? TYPOGRAPHY.fontWeightSemiBold
+                  : TYPOGRAPHY.fontWeightRegular
+              }
+              lineHeight={
+                showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
+              }
+              textDecoration={
+                showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
+              }
+              textTransform={TYPOGRAPHY.textTransformCapitalize}
+              whiteSpace={NO_WRAP}
+            >
+              {linkText}
+            </StyledText>
+          </Link>
+        ) : null}
+        {closeText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onCloseHandler()
+            }}
+            padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
+          >
+            <StyledText
path: components/src/atoms/Toast/index.tsx
user: login: jerader
body: same here
created_at: 2025-05-02T20:00:04Z
author_association: COLLABORATOR
diff_hunk: @@ -367,59 +366,78 @@ export function Toast(props: ToastProps): JSX.Element {
               whiteSpace={NO_WRAP}
             >
               {headingText}
-            </LegacyStyledText>
+            </StyledText>
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
-            <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
+            <StyledText css={TEXT_STYLE}>{message}</StyledText>
path: components/src/atoms/Toast/index.tsx
user: login: jerader
body: according to figma, looks like even TEXT_STYLE can be replaced
```suggestion
            <StyledText 
            oddStyle="bodyTextSemiBold"
              desktopStyle="bodyDefaultRegular"
            >{message}</StyledText>
```
created_at: 2025-05-02T20:01:11Z
author_association: COLLABORATOR
diff_hunk: @@ -367,59 +366,78 @@ export function Toast(props: ToastProps): JSX.Element {
               whiteSpace={NO_WRAP}
             >
               {headingText}
-            </LegacyStyledText>
+            </StyledText>
           ) : null}
           <Flex alignItems={ALIGN_CENTER}>
-            <LegacyStyledText css={TEXT_STYLE}>{message}</LegacyStyledText>
-            {linkText != null ? (
-              <Link
-                role="button"
-                onClick={() => {
-                  onLinkClick()
-                  onCloseHandler()
-                }}
-                css={TEXT_STYLE}
-                marginLeft={SPACING.spacing4}
-                marginRight={SPACING.spacing8}
-                textDecoration={TYPOGRAPHY.textDecorationUnderline}
-              >
-                {linkText}
-              </Link>
-            ) : null}
+            <StyledText css={TEXT_STYLE}>{message}</StyledText>
           </Flex>
         </Flex>
       </Flex>
-      {closeText ? (
-        <Link
-          role="button"
-          onClick={() => {
-            onCloseHandler()
-          }}
-          padding={`${SPACING.spacing16} ${SPACING.spacing24}`}
-        >
-          <LegacyStyledText
-            color={COLORS.black90}
-            fontSize={
-              showODDStyle ? TYPOGRAPHY.fontSize22 : TYPOGRAPHY.fontSizeP
-            }
-            fontWeight={
-              showODDStyle
-                ? TYPOGRAPHY.fontWeightSemiBold
-                : TYPOGRAPHY.fontWeightRegular
-            }
-            lineHeight={
-              showODDStyle ? TYPOGRAPHY.lineHeight28 : TYPOGRAPHY.lineHeight20
-            }
-            textDecoration={
-              showODDStyle ? 'none' : TYPOGRAPHY.textDecorationUnderline
-            }
-            textTransform={TYPOGRAPHY.textTransformCapitalize}
-            whiteSpace={NO_WRAP}
+
+      <Flex alignItems={ALIGN_CENTER}>
+        {linkText ? (
+          <Link
+            role="button"
+            onClick={() => {
+              onLinkClick()
+              onCloseHandler()
+            }}
+            marginLeft={SPACING.spacing4}
+            marginRight={SPACING.spacing8}
           >
-            {closeText}
-          </LegacyStyledText>
-        </Link>
-      ) : null}
+            <StyledText
path: components/src/atoms/Toast/index.tsx
user: login: vegano1
body: Thank you for pointing this out, its very helpful.
created_at: 2025-05-05T18:28:23Z
author_association: CONTRIBUTOR

PR comments:
user: login: codecov[bot]
created_at: 2025-05-01T19:04:11Z
body: ## [Codecov](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228?dropdown=coverage&src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons) Report
Attention: Patch coverage is `1.69492%` with `58 lines` in your changes missing coverage. Please review.
> Project coverage is 57.33%. Comparing base [(`0a83739`)](https://app.codecov.io/gh/Opentrons/opentrons/commit/0a8373928443324bc1f783e35b175af232a5d4f3?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons) to head [(`ac4cad9`)](https://app.codecov.io/gh/Opentrons/opentrons/commit/ac4cad9e7f17e9847894f910b9c2464c18632c57?dropdown=coverage&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons).
> Report is 13 commits behind head on edge.

| [Files with missing lines](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons) | Patch % | Lines |
|---|---|---|
| [components/src/atoms/Toast/index.tsx](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228?src=pr&el=tree&filepath=components%2Fsrc%2Fatoms%2FToast%2Findex.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons#diff-Y29tcG9uZW50cy9zcmMvYXRvbXMvVG9hc3QvaW5kZXgudHN4) | 1.69% | [58 Missing :warning: ](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons) |

<details><summary>Additional details and impacted files</summary>


[![Impacted file tree graph](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228/graphs/tree.svg?width=650&height=150&src=pr&token=DIJPWI1JiU&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons)](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons)

```diff
@@             Coverage Diff             @@
##             edge   #18228       +/-   ##
===========================================
+ Coverage   21.46%   57.33%   +35.86%     
===========================================
  Files        3054     3057        +3     
  Lines      257001   258627     +1626     
  Branches    30351    31626     +1275     
===========================================
+ Hits        55174   148273    +93099     
+ Misses     201814   110168    -91646     
- Partials       13      186      +173     
```

| [Flag](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228/flags?src=pr&el=flags&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons) | Coverage Δ | |
|---|---|---|
| [protocol-designer](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons) | `19.30% <0.00%> (+0.31%)` | :arrow_up: |
| [step-generation](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228/flags?src=pr&el=flag&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons) | `4.55% <0.00%> (-0.01%)` | :arrow_down: |

Flags with carried forward coverage won't be shown. [Click here](https://docs.codecov.io/docs/carryforward-flags?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons#carryforward-flags-in-the-pull-request-comment) to find out more.

| [Files with missing lines](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons) | Coverage Δ | |
|---|---|---|
| [components/src/atoms/Toast/index.tsx](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228?src=pr&el=tree&filepath=components%2Fsrc%2Fatoms%2FToast%2Findex.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons#diff-Y29tcG9uZW50cy9zcmMvYXRvbXMvVG9hc3QvaW5kZXgudHN4) | `63.37% <1.69%> (-12.70%)` | :arrow_down: |

... and [1819 files with indirect coverage changes](https://app.codecov.io/gh/Opentrons/opentrons/pull/18228/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Opentrons)

</details>
<details><summary> :rocket: New features to boost your workflow: </summary>

- :snowflake: [Test Analytics](https://docs.codecov.com/docs/test-analytics): Detect flaky tests, report on failures, and find test suite problems.
- :package: [JS Bundle Analysis](https://docs.codecov.com/docs/javascript-bundle-analysis): Save yourself from yourself by tracking and limiting bundle sizes in JS merges.
</details>
author_association: NONE
user: login: vegano1
created_at: 2025-05-02T19:48:16Z
body: > Just a heads up, these changes appear to impact desktop toasts:
> 
> <img alt="Screenshot 2025-05-01 at 2 00 28 PM" width="483" src="https://private-user-images.githubusercontent.com/64858653/439678158-0a4a9b1b-75e3-4604-a6f1-a31f26edaa64.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDYyMTU1NzcsIm5iZiI6MTc0NjIxNTI3NywicGF0aCI6Ii82NDg1ODY1My80Mzk2NzgxNTgtMGE0YTliMWItNzVlMy00NjA0LWE2ZjEtYTMxZjI2ZWRhYTY0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTA1MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwNTAyVDE5NDc1N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY2YjU3Y2JhNDk5MjM5NGY0OTI2YzcwNjliZTQ4MDUzYzRiZGM0ZGVkNzE3YmUzNzVhNWI0MTM2NjE0OWRiMTkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Q2HyUT3bPLXNdsUwmCCBp7saQq9qse3u-8zxoAy2idU">

fixed
author_association: CONTRIBUTOR