Removing Flex styled elements #135317
Removing Flex styled elements #135317
Conversation
kc13greiner
added
Team:Security
…-ref HEAD~1..HEAD --fix'
|
Pinging @elastic/kibana-security (Team:Security) |
| <> | ||
| {props.children} {!isEqual ? <EuiIcon type="dot" color="success" /> : undefined} | ||
| </> |
There was a problem hiding this comment.
issue: Just to make sure I wasn't going crazy I decided to leverage tools to see if the "jump" I observe (video) when I switch avatar modes is real 🤣 I see this in both Firefox and Chrome with this new markup. Do you see this too or is it just issue on my machine?
MichaelMarcialis
left a comment
MichaelMarcialis
left a comment
There was a problem hiding this comment.
Thanks for making these changes @kc13greiner! Left one suggestion below as an alternative to the previous vertical alignment suggestion. I think that should fix it for all browsers. Assuming it does, going to go ahead and approve this now so I don't hold you up.
| ) : undefined} | ||
| </EuiFlexGroup> | ||
| <> | ||
| {props.children} {!isEqual ? <EuiIcon type="dot" color="success" /> : undefined} |
There was a problem hiding this comment.
Ah, looks like the vertical alignment styling I suggested was fixing it in Chrome, but not Firefox. In that case, let's decrease the icon size to prevent this from happening by using the size prop on EuiIcon. I think it ends up looking better and less distracting at this smaller size anyway, and it seems to correct the issue in all browsers.
| {props.children} {!isEqual ? <EuiIcon type="dot" color="success" /> : undefined} | |
| {props.children} {!isEqual ? <EuiIcon type="dot" color="success" size="s" /> : undefined} |
MichaelMarcialis
left a comment
MichaelMarcialis
left a comment
There was a problem hiding this comment.
Thanks for making these changes. LGTM!
💚 Build SucceededMetrics [docs]Async chunks
History
To update your PR or re-run it, just comment with: |
tylersmalley
added
ci:cloud-deploy
7 participants
Summary
Removed the Flex styled elements around the Form Label as suggested here
I didn't see a 1px jump, so I didn't includevertical-align: text-top;styling on the icon, but please let me know if you still see the jump and we can discuss.UPDATE: After syncing with Oleg, Im now able to see the 1px jump.
vertical-align: text-top;doesn't appear to fix the issue (locally), @MichaelMarcialis Do you have any suggestions on what we could try next?