PIE-3778 Make the Notice icon alignment adjust with the Notice content #294
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for vip-design-system-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
kat3samsin
approved these changes
Nov 6, 2023
|
@andrea-sdl Can you fix the alignment of the icon vertically in some situations? See the screenshot: 
Is this how the Figma is expecting? If so, let me know, I am good! |
|
No, that's not correct. Thanks @djalmaaraujo for pointing that out! |
|
@djalmaaraujo I updated the story + the code, mind trying again? |
djalmaaraujo
approved these changes
Nov 6, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR is the third iteration on improving how we align the NoticeIcon in the Notice.
Our goal is to have the notice align between the first and second line of the content and, if the content is short, be vertically centered.
Context:
In #277 we settled for having two options
Sadly, one might want to add a specific title in the content of the notice and this would show the icon in the middle.
Example:
As such, I decided to see if Flex could help us build a way to have the vertical alignment adjust properly.
Long story short: I was able to 100% match our goals by using an empty div that will stretch if the height is enough (aligning the icon between the first and the second line) and disappear with short content.
Thanks to that, now the icon should properly align.
Result:
Checklist
Steps to Test
Outline the steps to test and verify the PR here.
Example:
npm run dev.