[text field] Fix outline gap without a label in Firefox
Firefox applies the inherited letter-spacing to the zero-width space in the unlabeled legend, which leaves a 0.15px gap in the border. Cap the legend at `maxWidth: 0` when there is no label.
This commit is contained in:
1 parent
f1d4f4a31b
commit
b509eff886
2 files changed
+8
No files matched your search
@@ -39,6 +39,7 @@ const NotchedOutlineLegend = styled('legend', {
|
|||||||
style: {
|
style: {
|
||||||
padding: 0,
|
padding: 0,
|
||||||
lineHeight: '11px', // sync with `height` in `legend` styles
|
lineHeight: '11px', // sync with `height` in `legend` styles
|
||||||
|
maxWidth: 0,
|
||||||
...getTransitionStyles(theme, 'width', {
|
...getTransitionStyles(theme, 'width', {
|
||||||
duration: 150,
|
duration: 150,
|
||||||
easing: theme.transitions.easing.easeOut,
|
easing: theme.transitions.easing.easeOut,
|
||||||
|
|||||||
@@ -64,4 +64,11 @@ describe('<NotchedOutline />', () => {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
it.skipIf(isJsdom())('should not leave a gap in the outline without a label', () => {
|
||||||
|
const { container } = render(
|
||||||
|
<NotchedOutline notched={false} style={{ letterSpacing: '0.00938em' }} />,
|
||||||
|
);
|
||||||
|
expect(container.querySelector('legend').getBoundingClientRect().width).to.equal(0);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
Reference in new issue
Block a user