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.

Sign up for GitHub

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

Jump to bottom

docs(material/form-field): add placeholder to prefix/suffix example for better alignment #22775

Merged
merged 1 commit into from
May 25, 2021
Merged

docs(material/form-field): add placeholder to prefix/suffix example for better alignment #22775

merged 1 commit into from
May 25, 2021

Conversation

annieyw
Copy link
Contributor

@annieyw annieyw commented May 24, 2021 •
edited
Loading

#21846

Note: MDC form field should hide text prefix/suffix when label is floating

@annieyw annieyw added the docs This issue is related to documentation label May 24, 2021
@annieyw annieyw requested review from Splaktar and crisbeto May 24, 2021 18:05
@annieyw annieyw requested a review from andrewseguin as a code owner May 24, 2021 18:05
@google-cla google-cla bot added the cla: yes PR author has agreed to Google's Contributor License Agreement label May 24, 2021
crisbeto
crisbeto reviewed May 25, 2021
View reviewed changes
...-examples/material/form-field/form-field-prefix-suffix/form-field-prefix-suffix-example.html
<mat-label>Amount</mat-label>
<input matInput type="number" class="example-right-align">
<span matPrefix>$&nbsp;</span>
<span matSuffix>.00</span>
Copy link
Member

@crisbeto crisbeto May 25, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

My understanding is that the example tried to show how to use text in the prefix/suffix specifically so I'm not sure that we can replace it with an icon. @mmalerba might have more context here.

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes this is supposed to be showing text prefix/suffix, the form-field above already demonstrates icons

@mmalerba
Copy link
Contributor

The MDC form-field actually split the prefix into 2 different selectors: matIconPrefix and matTextPrefix, since coming up with a single method of styling that felt natural for both proved impossible. I don't think we need to back-port that change though, you can can add .demo-* classes to tweak the styling as needed.

@annieyw annieyw changed the title docs(material/form-field): change prefix example to use icon for bett… docs(material/form-field): prefill text prefix/suffix example for better alignment May 25, 2021
@annieyw annieyw added the target: patch This PR is targeted for the next patch release label May 25, 2021
@annieyw
Copy link
Contributor Author

annieyw commented May 25, 2021 •
edited
Loading

Updated change to add placeholder

@annieyw annieyw changed the title docs(material/form-field): prefill text prefix/suffix example for better alignment docs(material/form-field): add placeholder to prefix/suffix example for better alignment May 25, 2021
mmalerba
mmalerba approved these changes May 25, 2021
View reviewed changes
Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

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

LGTM

@mmalerba mmalerba added action: merge The PR is ready for merge by the caretaker merge safe labels May 25, 2021
@wagnermaciel wagnermaciel merged commit 2dc9949 into angular:master May 25, 2021
wagnermaciel pushed a commit that referenced this pull request May 25, 2021
@annieyw @wagnermaciel
docs(material/form-field): add placeholder to prefix/suffix example f…
4a7374f 
…or better alignment (#22775)

(cherry picked from commit 2dc9949)
@annieyw annieyw deleted the ff-example branch May 25, 2021 19:06
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jun 25, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@crisbeto crisbeto crisbeto left review comments

@mmalerba mmalerba mmalerba approved these changes

@Splaktar Splaktar Awaiting requested review from Splaktar

@andrewseguin andrewseguin Awaiting requested review from andrewseguin

Assignees
No one assigned
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement docs This issue is related to documentation target: patch This PR is targeted for the next patch release
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@annieyw @mmalerba @crisbeto @wagnermaciel