fix(Inline): Problem with alignItems center#1581
Conversation
|
Size stats
|
|
Deploy preview for mistica-web ready!
Deployed with vercel-action |
|
Accessibility report ℹ️ You can run this locally by executing |
|
Screenshot tests report ✔️ All passing |
| containerBase, | ||
| { | ||
| cursor: 'pointer', | ||
| display: 'flex', |
There was a problem hiding this comment.
This change resolve this problem, also improve the ios switch screenshots
| // Propagate alignItems to wrapper divs so icon SVGs (inline elements) are | ||
| // correctly centered within each wrapper, not just the wrappers themselves. | ||
| // Only activates when childDisplay is set (i.e. alignItems !== 'stretch'). | ||
| display: fallbackVar(childDisplay, 'block'), | ||
| alignItems: fallbackVar(childAlignItems, 'normal'), |
There was a problem hiding this comment.
I believe we fall back to block/normal to preserve current behavior when alignItems is stretch, but current behavior is probably wrong. I think we should fallback to flex/stretch: We could remove the conditional in the inline.tsx component and the fallback function here.
There was a problem hiding this comment.
I tried to use flex / stretch values for fallback, but some screenshot breaks
inline cases, the vertical align change in this case
the progressBar stepped disappear
but we have an enhance with flex/stretch in rating!
But i think the first case is quite breaking if we go by this way. wdyt?
There was a problem hiding this comment.
Yeah... Perhaps we can fix it in the future
There was a problem hiding this comment.
music for my eyes
| // Propagate alignItems to wrapper divs so icon SVGs (inline elements) are | ||
| // correctly centered within each wrapper, not just the wrappers themselves. | ||
| // Only activates when childDisplay is set (i.e. alignItems !== 'stretch'). | ||
| display: fallbackVar(childDisplay, 'block'), | ||
| alignItems: fallbackVar(childAlignItems, 'normal'), |
There was a problem hiding this comment.
Yeah... Perhaps we can fix it in the future
There was a problem hiding this comment.
this is expected, we are showing more space than 8px
This PR fix a problem with center alignments in Inline component. You can see the screenshots diff to see the improvement