Skip to content

v5: Floating labels#30449

Merged
mdo merged 15 commits intomainfrom
v5-floating-labels
Oct 28, 2020
Merged

v5: Floating labels#30449
mdo merged 15 commits intomainfrom
v5-floating-labels

Conversation

@mdo
Copy link
Copy Markdown
Member

@mdo mdo commented Mar 25, 2020 •
edited
Loading

@mdo mdo requested a review from a team as a code owner March 25, 2020 00:59
MartijnCuppens
MartijnCuppens reviewed Mar 25, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 25, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss
@mdo mdo mentioned this pull request Mar 25, 2020
Closed
@micka-fdz
Copy link
Copy Markdown

micka-fdz commented Mar 25, 2020

Good news! Is it possible to add support for <textarea> and .form-file elements?

XhmikosR
XhmikosR reviewed Mar 26, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
@MartijnCuppens
Copy link
Copy Markdown
Member

MartijnCuppens commented Mar 28, 2020

It feels a bit odd to me that the label doesn't shrink when The input field is focused, it looks like you're going to type in text before the password text:
image

I would prefer:
image

Thoughts?

MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
MartijnCuppens
MartijnCuppens reviewed Mar 28, 2020
View reviewed changes
Comment thread scss/forms/_form-select.scss
@alecpl
Copy link
Copy Markdown
Contributor

alecpl commented Mar 30, 2020

  1. The "placeholder" color is wrong. Should be grey-ish, now it uses input text color. Is this something possible to fix?
  2. I think I would prefer the way it looks as proposed in Feature Request: Floating Labels #21312 (comment)

@mdo mdo changed the base branch from master to main June 16, 2020 20:04
@mdo mdo force-pushed the v5-floating-labels branch from 855e2a2 to 50a6a16 Compare September 17, 2020 19:06
@mdo
Copy link
Copy Markdown
Member Author

mdo commented Sep 17, 2020

Pushed some changes based on the code review and fixing some conflicts. Also made the change from @MartijnCuppens's suggestion and moved the label on :focus now, too. I dig!

Added textarea support too, @micka-fdz. Unsure about file inputs... those ones are more complicated. Could be an add-on in the future once this gets settled.

@mdo mdo force-pushed the v5-floating-labels branch from 50a6a16 to ab6c6f9 Compare September 21, 2020 01:22
@mdo
Copy link
Copy Markdown
Member Author

mdo commented Sep 21, 2020

Pushed some more updates to address @MartijnCuppens's comments. Wondering if there's some more I can do to make this more bulletproof. Happy to hear out any comments!

@mdo mdo mentioned this pull request Sep 21, 2020
Closed
@ffoodd
Copy link
Copy Markdown
Contributor

ffoodd commented Sep 21, 2020

@mdo Regarding browser support and accessibility, I think my PR against our example (#30966) should help:

  1. Better fallback for Legacy Edge, avoiding to hide labels,
  2. more precise browser support doc.

@patrickhlauke
Copy link
Copy Markdown
Member

patrickhlauke commented Sep 21, 2020

once you/we settled on the definitive version, i can have a quick look accessibility-wise if needed / if you ping me and point me to it.

@mdo mdo force-pushed the v5-floating-labels branch from 0e3a92c to defdf95 Compare October 26, 2020 22:22
@mdo
Copy link
Copy Markdown
Member Author

mdo commented Oct 26, 2020

@eduardogoncalves Yup, pushed a new fix to override that last commit with separated rules. Should be good now.

@mdo
Copy link
Copy Markdown
Member Author

mdo commented Oct 26, 2020

This should be good to go now! Can I get a final review?

mdo and others added 12 commits October 26, 2020 16:46
@mdo
v5: Promote floating labels example to component
d183a80 
- Adds new .form-floating
- Stubs out basics of a docs page
- Removes existing Example
@mdo
Update floating labels to support .form-select, make inputs and selec…
5263856 
…ts more consistent

- To do this, I made the .form-control and .form-select consistent in min-height vs height
- Removed some unused variables now
- Updated -color to be the -color because I don't know why this was any different before
- Update page to include some examples for layout, validation, and value
- Rewrite styles to not modify padding, but instead transform and opacity
@mdo
Streamline and bulletproof some things
3b24fcd 
- Apply some optimizations from code review
- Removed unecessary properties from the label
- Add some comments for what properties are required
- Move from fixed height for labels to height 100% so we can support textareas
- Improve docs a little bit, add ToC
@mdo
Move some values to variables, switch from scaling font-size to scale…
8d68a3a 
…, update transforms
@mdo
Bring over changes from #30966 and add to them to tighten things up
9dec3f3
@XhmikosR @mdo
Delete the now unused example images
4b708e0
@XhmikosR @mdo
Fix typo
11dbcef
@mdo
Allowlist the calc function
db45614
@mdo
Add transform-origin, update transform values
cd6ca5a
@mdo
Test out autofill fix
890078e
@mdo
Fix linter issue
7ae0071
@mdo
Mention it in the migration guide
e4f7f67
@mdo mdo force-pushed the v5-floating-labels branch from 33a0a0c to e4f7f67 Compare October 26, 2020 23:47
@alecpl
Copy link
Copy Markdown
Contributor

alecpl commented Oct 27, 2020

I think I don't like these big inputs (and with strange padding when they are empty). Something like in #30449 (comment) would be better.

@micka-fdz
Copy link
Copy Markdown

micka-fdz commented Oct 27, 2020

I agree, fields are currently much too big.
I prefer this render : https://getbootstrap.com/docs/4.5/examples/floating-labels/

@MartijnCuppens
Copy link
Copy Markdown
Member

MartijnCuppens commented Oct 27, 2020

#30449 (comment) would require an additional background to fix the border and shadow overlap

image

This will look weird if the parent element has another background
image

Or if the background of the input is semi-transparent:
image

But I can agree the input looks a little to big. https://getbootstrap.com/docs/4.5/examples/floating-labels/ might indeed be a better look as @micka-fdz suggests.

@alecpl
Copy link
Copy Markdown
Contributor

alecpl commented Oct 27, 2020

Semi-transparent input is a rare-case that could be just unsupported by floating labels. The other label background issue I could live with if the padding-top was smaller (and maybe with rounded corners). Still I would prefer this over what's proposed in the PR.

@alecpl
Copy link
Copy Markdown
Contributor

alecpl commented Oct 27, 2020

@mdo, in firefox 82 on linux the label animation has some issue. When you focus the input there are two steps of the animation visible, first the label moves up, then it's font size drops to even smaller. Maybe it's a firefox's transform/scale bug. Looks like when the text is moving it is blured then it sharpens. I don't see this in Chrome.

ffoodd
ffoodd approved these changes Oct 27, 2020
View reviewed changes
Comment thread scss/forms/_floating-labels.scss Outdated
pointer-events: none;
border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
transform-origin: 0 0;
@include transition(opacity .1s ease-in-out, transform .1s ease-in-out);
Copy link
Copy Markdown
Contributor

@ffoodd ffoodd Oct 27, 2020

Choose a reason for hiding this comment

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

Shouldn't this value be variable, as we do with $input-transition?
Apart from that, seems fine!

Copy link
Copy Markdown
Contributor

@ffoodd ffoodd Oct 27, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Trying this on both Firefox & Chromium on Ubuntu, I can see a little font rendering jump (more obvious on Firefox). I guess it can be related to the font-stack I updated recently—already mentionned a related bug in #31955 by @MartijnCuppens.

That's unrelated to the PR I guess, I'd need more testing on those using our old font-stack and compare other possibilities… Opening an issue to track this. Edit: #31991

@ffoodd ffoodd mentioned this pull request Oct 27, 2020
Closed
@mdo mdo requested a review from a team as a code owner October 28, 2020 03:02
@mdo mdo merged commit 3e2f9ab into main Oct 28, 2020
@mdo mdo deleted the v5-floating-labels branch October 28, 2020 03:45
@micka-fdz
Copy link
Copy Markdown

micka-fdz commented Oct 30, 2020 •
edited
Loading

Hi @MartijnCuppens, what about my suggestion of inputs height? I think it’s a quick modification. Maybe can I help?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@XhmikosR XhmikosR XhmikosR left review comments

@patrickhlauke patrickhlauke patrickhlauke left review comments

@MartijnCuppens MartijnCuppens MartijnCuppens left review comments

+1 more reviewer

@ffoodd ffoodd ffoodd approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

css feature no-backport-to-v4 v5

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Feature Request: Floating Labels

10 participants

@mdo @micka-fdz @MartijnCuppens @alecpl @ffoodd @patrickhlauke @mmrath @HamedFathi @eduardogoncalves @XhmikosR