EnxDev commented on code in PR #34067:
URL: https://github.com/apache/superset/pull/34067#discussion_r2212960930
##########
superset-frontend/packages/superset-ui-core/src/components/Button/index.tsx:
##########
@@ -128,10 +132,13 @@ export function Button(props: ButtonProps) {
minWidth: cta ? theme.sizeUnit * 36 : undefined,
minHeight: cta ? theme.sizeUnit * 8 : undefined,
marginLeft: 0,
+ '& > .ant-btn-icon': {
+ display: 'inline-flex',
+ },
'& + .superset-button': {
marginLeft: theme.sizeUnit * 2,
},
- '& > span > :first-of-type': {
+ '& svg': {
Review Comment:
Sure, we just needed to decide to adjust the font size to avoid it or change
the line-height from `line-height: 1.5715;` to line-height: 0 (for the text)
Ant Design encountered issues when using inline-flex due to the way
different fonts handle baselines and how flex containers manage multiline
content:
Different fonts have varying baseline alignments. When inline-flex was used
for the Button component (initially in version 5.21.6), buttons with custom
fonts; such as Mukta; experienced icons that didn't align vertically correctly.
The result: icons looked shifted upward, breaking the visual consistency
`(same us cases)`
Flexbox containers align items based on flex alignment rules, not text
baseline.
With different fonts, the icon (as inline SVG or element) did not match the
text baseline, leading to misaligned icons.
**Why inline-flex caused issues?**
- Flexbox containers align items based on flex alignment rules, not text
baseline.
- With different fonts, the icon (as inline SVG or element) did not match
the text baseline, leading to misaligned icons.
Additionally, switching from inline-block to inline-flex caused layout
regressions for buttons containing multiple lines of text or in tighter layouts:
Previously multilined buttons started being forced onto a single line,
resulting in content overflow in grids or table contexts.
This behavior further contributed to UI inconsistencies across different
button use cases .
So They reverted display back to inline-block for .ant-btn in version 5.22.1
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
