Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: [M3-8453] - Update error text color in confirmation dialogs to use theme, refactor styling #10828

Merged
merged 3 commits into from
Aug 27, 2024

Conversation

coliu-akamai
Copy link
Contributor

@coliu-akamai coliu-akamai commented Aug 23, 2024

Description 📝

Update error text color in confirmation dialogs to not be hardcoded, as per discussion. Also added some tests/refactored styling to use styled components while I was at it

Changes 🔄

  • updated error text color to use the theme
  • added tests for Confirmation Dialogs
  • refactor styling

Target release date 🗓️

n/a

Preview

Before After
imageimage imageimage

How to test 🧪

Verification steps

  • yarn test components/ConfirmationDialog.test.tsx
  • Verify that Confirmation Dialog styling remains the same throughout the app / verify it remains the same on storybook
  • Except the error text color, verify the error text color has been changed + is easier to see in dark mode

As an Author I have considered 🤔

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@coliu-akamai coliu-akamai self-assigned this Aug 23, 2024
@@ -2,9 +2,12 @@ import { styled } from '@mui/material/styles';
import * as React from 'react';
import { useStyles } from 'tss-react/mui';

import { Button, ButtonProps } from 'src/components/Button/Button';
Copy link
Contributor Author

Choose a reason for hiding this comment

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

this and Dialog.tsx are just eslint changes I saw when I landed on those files while working on this ticket

@coliu-akamai coliu-akamai marked this pull request as ready for review August 23, 2024 20:02
@coliu-akamai coliu-akamai requested a review from a team as a code owner August 23, 2024 20:02
@coliu-akamai coliu-akamai requested review from mjac0bs and AzureLatte and removed request for a team August 23, 2024 20:02
@coliu-akamai
Copy link
Contributor Author

Is 'Changed' the right category for this changeset, or would it be 'Fixed'?
Should I add another changeset for the unit tests and/or style refactoring too?

const StyledErrorText = styled(DialogContentText, {
label: 'StyledErrorText',
})(({ theme }) => ({
color: theme.palette.error.dark,
Copy link
Contributor Author

Choose a reason for hiding this comment

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

...the actual assigned part of this ticket lol

thanks @jaalah-akamai for letting me know which theme color to use!

Copy link
Contributor

@mjac0bs mjac0bs left a comment

Choose a reason for hiding this comment

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

🚀 Thanks, Connie! Looking much better in dark mode now and you did some good clean up, too.

Is 'Changed' the right category for this changeset, or would it be 'Fixed'?

Since it was an incorrect color and (more importantly) that low contrast was an accessibility issue, I would lean towards Fixed and rewording the changeset to be something like: Inaccessible, non-theme error text color in confirmation dialogs. What you have does work, though.

Should I add another changeset for the unit tests and/or style refactoring too?

I wouldn't add a changeset for style refactoring. Adding a Test changeset for the new unit test is up to you - and we could probably be more consistent about when to do this as a team. I think it's a good idea because it's a new file to test a component we didn't have coverage for previously, as opposed to a new test case for an existing file, which I usually don't bother adding a separate changeset for. Thanks for the test coverage!

@mjac0bs mjac0bs added the Add'tl Approval Needed Waiting on another approval! label Aug 26, 2024
@coliu-akamai coliu-akamai changed the title change: [M3-8453] - Update error text color in confirmation dialogs, refactor confirmation dialog styling fix: [M3-8453] - Update error text color in confirmation dialogs to use theme, refactor styling Aug 26, 2024
Copy link

Coverage Report:
Base Coverage: 82.62%
Current Coverage: 82.63%

@AzureLatte AzureLatte added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! Ready for Review labels Aug 27, 2024
@coliu-akamai coliu-akamai merged commit a0e1148 into linode:develop Aug 27, 2024
18 of 19 checks passed
@coliu-akamai coliu-akamai deleted the m3-8453 branch September 6, 2024 19:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants