Skip to content
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: fix NotchedOutline misalignment #44342

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

MonstraG
Copy link
Contributor

@MonstraG MonstraG commented Nov 7, 2024

closes: #44341

And may my OCD be satisfied after this.

@mui-bot
Copy link

mui-bot commented Nov 7, 2024

Netlify deploy preview

https://deploy-preview-44342--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 1cba03f

@zannager zannager added component: text field This is the name of the generic UI component, not the React module! component: input labels Nov 7, 2024
Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's better to fix the notch legend instead:

diff --git a/packages/mui-material/src/OutlinedInput/NotchedOutline.js b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
index 0dabd05e27..86f75a276f 100644
--- a/packages/mui-material/src/OutlinedInput/NotchedOutline.js
+++ b/packages/mui-material/src/OutlinedInput/NotchedOutline.js
@@ -55,7 +55,7 @@ const NotchedOutlineLegend = styled('legend', { shouldForwardProp: rootShouldFor
           whiteSpace: 'nowrap',
           '& > span': {
             paddingLeft: 5,
-            paddingRight: 5,
+            paddingRight: 4,
             display: 'inline-block',
             opacity: 0,
             visibility: 'visible',

@MonstraG
Copy link
Contributor Author

I think it's better to fix the notch legend instead:

While that will be better then main branch right now, I think this change misses the root cause of the unequal spacing.
Here is how the input looks like with change made but fieldset set to visible:
image

The white fieldset version is still misaligned with the actual label, but now the empty space to the right of real label is not so big.

It is an acceptable solution, but I don't quite see how it is better?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: text field This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[text field] Outlined input label is one pixel off
5 participants