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 TextWithIcon icon alignment #4202
Fix TextWithIcon icon alignment #4202
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for fixing this! It has been bugging me for ages! <3
Please look into my comment though.
content, | ||
tooltipContentIcon, | ||
iconRight = false, | ||
size, | ||
}: Props) => { | ||
return ( | ||
<Flex alignItems="center" className={className}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The className
is used other places than on the event page, so the removal of this will break all of those. Any reason for removing?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not really. Added it back now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good. Thank for the contribution ❤️
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Assuming you also checked the removal of the min-width
for the other use cases of the component 😄
Thanks again!
Description
Fixed wrapping of TextWithIcon component, thus also fixing the alignment of icons. Did this by wrapping the content (the text) in a span, and adding a div wrapping the span with "width: max-content".
Result
before
after
Testing
Tested locally on both laptop, desktop and mobile views.