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.

Sign up for GitHub

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

Jump to bottom

Feat(web-react): Deprecating warning icon for the danger color on Alert #1291

Merged
merged 9 commits into from
Mar 5, 2024
Merged

Feat(web-react): Deprecating warning icon for the danger color on Alert #1291

merged 9 commits into from
Mar 5, 2024

Conversation

literat
Copy link
Collaborator

@literat literat commented Feb 23, 2024 •
edited
Loading

Description

I am deprecating the warning icon in favor of the danger icon on Alert component when using the danger color.
Fallback added to the warning icon and also added few console warning messages.

Additional context

I have also introduced DEPRECATIONS-v2.md with this particular deprecation.

Also added a solid border to the Alert component.

Screenshot 2024-02-23 at 15 33 53
Screenshot 2024-02-23 at 15 34 18
Screenshot 2024-02-23 at 15 35 12

Issue reference

Before submitting the PR, please make sure you do the following

  • Read the Contributing Guidelines.
  • Follow the PR Title/Commit Message Convention.
  • Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
  • Ideally, include relevant tests that fail without this PR but pass with it.

@github-actions github-actions bot added the feature New feature or request label Feb 23, 2024
@netlify Netlify
Copy link

netlify bot commented Feb 23, 2024 •
edited
Loading

✅ Deploy Preview for spirit-design-system-demo canceled.

Name Link
🔨 Latest commit ec51422
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-demo/deploys/65e6a6f6ff44d90008ac1505

@netlify Netlify
Copy link

netlify bot commented Feb 23, 2024 •
edited
Loading

✅ Deploy Preview for spirit-design-system-react ready!

Name Link
🔨 Latest commit ec51422
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-react/deploys/65e6a6f637c59c000851d8a9
😎 Deploy Preview https://deploy-preview-1291--spirit-design-system-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify Netlify
Copy link

netlify bot commented Feb 23, 2024 •
edited
Loading

✅ Deploy Preview for spirit-design-system-storybook ready!

Name Link
🔨 Latest commit ec51422
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-storybook/deploys/65e6a6f6ff44d90008ac1503
😎 Deploy Preview https://deploy-preview-1291--spirit-design-system-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@literat literat force-pushed the feat/DS-1156-change-alert-icon branch from 96eac14 to 3f52be6 Compare February 23, 2024 13:36
@netlify Netlify
Copy link

netlify bot commented Feb 23, 2024 •
edited
Loading

✅ Deploy Preview for spirit-design-system-validations canceled.

Name Link
🔨 Latest commit ec51422
🔍 Latest deploy log https://app.netlify.com/sites/spirit-design-system-validations/deploys/65e6a6f6bd4e6e00089ee00a

@coveralls
Copy link

coveralls commented Feb 23, 2024 •
edited
Loading

Coverage Status

coverage: 80.071% (-0.08%) from 80.15%
when pulling ec51422 on feat/DS-1156-change-alert-icon
into ed4df63 on main.

@literat literat marked this pull request as ready for review February 23, 2024 14:31
adamkudrna
adamkudrna approved these changes Feb 27, 2024
View reviewed changes
Copy link
Contributor

@adamkudrna adamkudrna left a comment

Choose a reason for hiding this comment

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

Please make use of design tokens for Alert border. The rest is just grammar nit-picking.

packages/web/src/scss/components/Alert/_Alert.scss Outdated Show resolved Hide resolved
packages/web-twig/src/Resources/components/Alert/Alert.twig Outdated Show resolved Hide resolved
packages/web-twig/DEPRECATIONS-v3.md Outdated Show resolved Hide resolved
packages/web-twig/DEPRECATIONS-v3.md Outdated Show resolved Hide resolved
packages/web-twig/DEPRECATIONS-v3.md Outdated Show resolved Hide resolved
packages/web-react/src/components/Alert/README.md Outdated Show resolved Hide resolved
packages/web-twig/src/Resources/components/Alert/README.md Outdated Show resolved Hide resolved
packages/web-react/src/components/Alert/Alert.tsx Outdated Show resolved Hide resolved
packages/web-react/src/components/Alert/Alert.tsx Outdated Show resolved Hide resolved
packages/web-react/DEPRECATIONS-v2.md Outdated Show resolved Hide resolved
@literat literat force-pushed the feat/DS-1156-change-alert-icon branch from f273d4d to f519d18 Compare February 27, 2024 10:53
@literat literat added the run-visual-tests Runs visual regression testing on this PR label Feb 27, 2024
crishpeen
crishpeen reviewed Feb 27, 2024
View reviewed changes
Copy link
Member

@crishpeen crishpeen left a comment

Choose a reason for hiding this comment

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

Isn't the added border a visual breaking change? 😬

packages/web-react/src/components/Alert/Alert.tsx Outdated Show resolved Hide resolved
@literat literat force-pushed the feat/DS-1156-change-alert-icon branch from 2c6468c to 983ff03 Compare February 27, 2024 15:01
@literat literat force-pushed the feat/DS-1156-change-alert-icon branch from 983ff03 to 495a600 Compare March 4, 2024 14:37
@literat
Copy link
Collaborator Author

literat commented Mar 4, 2024

This branch has been rebased to the https://github.com/lmc-eu/spirit-design-system/pull/1304 to test the icons.

@literat
Copy link
Collaborator Author

literat commented Mar 4, 2024

With applied fallback
Screenshot 2024-03-04 at 15 32 56

With hardcoded danger icon.
Screenshot 2024-03-04 at 15 35 28

@literat literat changed the base branch from main to supernova/spirit-svg-exporter March 4, 2024 14:39
Base automatically changed from supernova/spirit-svg-exporter to main March 4, 2024 15:29
@literat literat force-pushed the feat/DS-1156-change-alert-icon branch 2 times, most recently from 1ace288 to 3a259dd Compare March 4, 2024 16:16
@literat
Copy link
Collaborator Author

literat commented Mar 4, 2024

@adamkudrna FYI, I have also updated the icon in the Toast component.

@crishpeen crishpeen force-pushed the feat/DS-1156-change-alert-icon branch from 3a259dd to 02db78f Compare March 5, 2024 04:46
@literat @crishpeen
Feat(web-react): Deprecate icon for danger color in Alert component
8963fa5 
  * the `warning` icon for the `danger` color is marked as deprecated
  * the `danger` icon for the `danger` color will be used as default in the next major version

refs #DS-1156
literat and others added 8 commits March 5, 2024 00:00
@literat @crishpeen
Docs(web-react): Introducing deprecations list
bfacb6c 
refs #DS-1147
@literat @crishpeen
Feat(web-twig): Deprecate icon for danger color in Alert component
0182198 
  * the `warning` icon for the `danger` color is marked as deprecated
  * the `danger` icon for the `danger` color will be used as default in the next major version

refs #DS-1156
@literat @crishpeen
Docs(web-twig): Introducing deprecations list
13d4f56 
refs #DS-1148
@literat @crishpeen
Feat(web): Add Bordered Alert Feature Flag and showcase it in Demo
35b5616 
refs #DS-1156
@crishpeen
Docs(web-react): Show Bordered Alert Feature Flag in Demo #DS-1156
3e073cd
@crishpeen
Docs(web-twig): Show Bordered Alert Feature Flag in Demo #DS-1156
f86cfee
@literat @crishpeen
Docs(web): Use danger icon for danger color in Alert and Toast
23a2528
@literat @crishpeen
Test(ci): Update visual snapshots of Alert and Toast
ec51422 
  * icon of color danger has been change to danger
@crishpeen crishpeen force-pushed the feat/DS-1156-change-alert-icon branch from 02db78f to ec51422 Compare March 5, 2024 05:00
crishpeen
crishpeen approved these changes Mar 5, 2024
View reviewed changes
Copy link
Member

@crishpeen crishpeen left a comment

Choose a reason for hiding this comment

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

I made the alert border a feature flag.

I still don't like the unavoidable deprecation message, but let's move on. I will bother you with this next time :D and maybe one day we will find a solution :))

@literat
Copy link
Collaborator Author

literat commented Mar 5, 2024

I made the alert border a feature flag.

I still don't like the unavoidable deprecation message, but let's move on. I will bother you with this next time :D and maybe one day we will find a solution :))

@Crispeen Thanks for the feature flag. But maybe you did not notice the change in the Alert component, which is now using the IconContext and this line https://github.com/lmc-eu/spirit-design-system/pull/1291/files#diff-b7c3cc53826892563ecdc39edd3f1cd71a70cd4fe8bafe80b756566f18f33cf6R24 which checks whether the icon exists. So the message is disabled when the icon exists. :-)

@literat literat merged commit 2e394dc into main Mar 5, 2024
35 checks passed
@literat literat deleted the feat/DS-1156-change-alert-icon branch March 5, 2024 11:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pavelklibani pavelklibani pavelklibani approved these changes

@crishpeen crishpeen crishpeen approved these changes

@adamkudrna adamkudrna adamkudrna approved these changes

Assignees

@literat literat

Labels
feature New feature or request run-visual-tests Runs visual regression testing on this PR
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@literat @coveralls @adamkudrna @crishpeen @pavelklibani