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

feat: Update <Alert> component's design #806

Merged
merged 9 commits into from
Oct 31, 2023
Merged

Conversation

frankieyan
Copy link
Member

@frankieyan frankieyan commented Oct 30, 2023

Short description

This changes the alert component's icons and default colours.

Figma ref

Before After
image image

Test Plan

  • Go to the Alerts story and verify that it looks like the Figma mocks above
  • Go to the input components stories (password, select, textarea, textfield) and verify that their tone="error" states have a red border, and are using a new --reactist-inputs-alert variable

PR Checklist

  • Added tests for bugs / new features
  • Updated docs (storybooks, readme)
  • Executed npm run validate and made sure no errors / warnings were shown
  • Described changes in CHANGELOG.md
  • Bumped version in package.json and package-lock.json (npm --no-git-tag-version version <major|minor|patch>) ref
  • Reviewed and approved Chromatic visual regression tests in CI

Versioning

Minor

@frankieyan frankieyan marked this pull request as ready for review October 30, 2023 23:43
@frankieyan frankieyan requested review from a team and jvalente and removed request for a team October 31, 2023 00:31
<Columns space="small" alignY="top">
<Column width="content">
<Columns space="small" alignY="center">
<Column width="content" exceptionallySetClassName={styles.icon}>
Copy link
Contributor

@jvalente jvalente Oct 31, 2023

Choose a reason for hiding this comment

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

Setting the class exceptionally preferable to applying styles directly to the svg?

Copy link
Member Author

Choose a reason for hiding this comment

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

We can also apply it directly to the SVG 👍 updated

Copy link
Contributor

Choose a reason for hiding this comment

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

haha, my curiosity was honest and totally not a hint towards a change. 😅

I feel kinda "meh" when looking at this differences and wanted to take the opportunity to learn.

Copy link
Member Author

Choose a reason for hiding this comment

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

No problem :) applying the class to the column was kinda weird to see anyway.

Copy link
Contributor

@jvalente jvalente left a comment

Choose a reason for hiding this comment

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

😍

@frankieyan frankieyan merged commit c3fe38b into main Oct 31, 2023
2 checks passed
@frankieyan frankieyan deleted the frankie/alert-icons branch October 31, 2023 16:20
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