Skip to content

[pickers] Mark active range position field section with underline#16938

Merged
LukasTy merged 20 commits into
mui:masterfrom
LukasTy:mark-range-field-current-section
Apr 9, 2025
Merged

[pickers] Mark active range position field section with underline#16938
LukasTy merged 20 commits into
mui:masterfrom
LukasTy:mark-range-field-current-section

Conversation

@LukasTy

@LukasTy LukasTy commented Mar 12, 2025

Copy link
Copy Markdown
Member

Follow up on #9431.

Adds active range section underlining in the field when the Picker is open.

Warning

Chrome seems buggy with transparent text decoration and still renders it in a default color. 🙈

Screen.Recording.2025-03-12.at.14.59.04.mov

Exhausted explored options

  • 🚫 text-decoration: underline
    • has visual anomalies across browsers
    • no easy option to define offset that would be compatible across Text Field variants
    • no transition with solution (none -> underline) that works on Chrome (changing the color from transparent)
  • 🚫 border-bottom
    • no easy option to define offset that would be compatible across Text Field variants

Current solution

Element or pseudo-element that would be absolutely positioned within relate TextField.

@LukasTy LukasTy added plan: Pro Impact at least one Pro user. scope: pickers Changes related to the date/time pickers. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. design This is about UI or UX design, please involve a designer. labels Mar 12, 2025
@LukasTy LukasTy self-assigned this Mar 12, 2025
@mui-bot

mui-bot commented Mar 12, 2025

Copy link
Copy Markdown

@github-actions github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Mar 19, 2025
@github-actions

Copy link
Copy Markdown
Contributor

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@LukasTy LukasTy added this to the 8.0.0 milestone Mar 25, 2025
@github-actions github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 8, 2025

@noraleonte noraleonte left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Awesome work! 🎉 💙
Leaving some suggestions/ a potential fix for the positioning and slightly off widths of the activeBar
Before:
image
After:
image

@LukasTy
LukasTy requested a review from noraleonte April 9, 2025 17:16

@noraleonte noraleonte left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Amazing work! 🎉 💪

@LukasTy
LukasTy merged commit a250064 into mui:master Apr 9, 2025
@LukasTy
LukasTy deleted the mark-range-field-current-section branch April 9, 2025 21:40
bernardobelchior pushed a commit to bernardobelchior/mui-x that referenced this pull request Apr 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

design This is about UI or UX design, please involve a designer. plan: Pro Impact at least one Pro user. scope: pickers Changes related to the date/time pickers. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants