Skip to content

fix: toast colors#1307

Open
benjamin-lyon wants to merge 14 commits into
mainfrom
fix/toast-colors
Open

fix: toast colors#1307
benjamin-lyon wants to merge 14 commits into
mainfrom
fix/toast-colors

Conversation

@benjamin-lyon

@benjamin-lyon benjamin-lyon commented Jul 1, 2026

Copy link
Copy Markdown
Contributor

Jira links

User story


  • Needs to be tested locally by reviewer

Copilot AI review requested due to automatic review settings July 1, 2026 14:06
@benjamin-lyon benjamin-lyon changed the title Fix/toast colors fix: toast colors Jul 1, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR refactors Toast variant color handling to better control container/background, button/icon foreground/hover states, and the duration progress fill, aligning Toast visuals across variants.

Changes:

  • Replaced the old TOAST_COLORS shape with a more granular set of variant color tokens (container/control/progress).
  • Updated Toast markup to use new styled subcomponents (Title, Description, HeaderIcon, ActionButton, CloseButton) for variant-driven styling.
  • Enhanced Storybook stories to better showcase duration behavior across variants and adjusted action button text.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File Description
src/molecules/Toast/Toast.utils.ts Updates the toast variant color token map to new keys for container/control/progress styling.
src/molecules/Toast/Toast.tsx Switches Toast rendering to new styled subcomponents and wires variant props through.
src/molecules/Toast/Toast.styles.ts Introduces new styled subcomponents and applies variant-aware styling for icon/button/progress bar.
src/molecules/Toast/Toast.stories.tsx Updates stories to render duration across all variants and tweaks action labeling.
Comments suppressed due to low confidence (1)

src/molecules/Toast/Toast.tsx:114

  • Elements with role="progressbar" should have an accessible name (e.g. aria-label or aria-describedby). Adding an aria-label prevents screen readers from announcing an unnamed progress bar.
        <DurationBar
          role="progressbar"
          $variant={variant}
          $duration={duration}
        />

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/molecules/Toast/Toast.styles.ts
Comment thread src/molecules/Toast/Toast.styles.ts
@github-actions

github-actions Bot commented Jul 1, 2026

Copy link
Copy Markdown

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 100% (🎯 100%) 17467 / 17467
🔵 Statements 100% (🎯 100%) 17467 / 17467
🔵 Functions 99.92% (🎯 100%) 1297 / 1298
🔵 Branches 100% (🎯 100%) 4459 / 4459
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/molecules/Toast/Toast.styles.ts 100% 100% 96.15% 100%
src/molecules/Toast/Toast.tsx 100% 100% 100% 100%
src/molecules/Toast/Toast.utils.ts 100% 100% 100% 100%
Generated in workflow #2372 for commit 21ae49b by the Vitest Coverage Report Action

Copilot AI review requested due to automatic review settings July 2, 2026 07:33

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

Comment thread src/molecules/Toast/Toast.styles.ts
Comment thread src/molecules/Toast/Toast.stories.tsx
Copilot AI review requested due to automatic review settings July 2, 2026 10:34

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

Comment thread src/molecules/Toast/Toast.styles.ts
@benjamin-lyon
benjamin-lyon marked this pull request as ready for review July 3, 2026 11:36
@benjamin-lyon
benjamin-lyon requested a review from a team as a code owner July 3, 2026 11:36

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 1 comment.

Comment thread src/molecules/Toast/Toast.styles.ts
Copilot AI review requested due to automatic review settings July 8, 2026 08:05

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

Comment thread src/molecules/Toast/Toast.styles.ts
Comment thread src/molecules/Toast/Toast.styles.ts
Copilot AI review requested due to automatic review settings July 8, 2026 08:27

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.

Comment thread src/molecules/Toast/Toast.styles.ts
Comment thread src/molecules/Toast/Toast.tsx
Comment thread src/molecules/Toast/Toast.stories.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants