Skip to content

Conversation

@mmalerba
Copy link
Contributor

@mmalerba mmalerba commented Feb 1, 2018

legacy - https://mmalerba-demo1.firebaseapp.com/input
standard - https://mmalerba-demo2.firebaseapp.com/input
fill - https://mmalerba-demo3.firebaseapp.com/input
outline - https://mmalerba-demo4.firebaseapp.com/input

(Please ignore the text prefix and suffix, those shouldn't be used with the new variants, we need to create some sort of input masking solution to replace them).

@mmalerba mmalerba requested a review from jelbourn February 1, 2018 19:46
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Feb 1, 2018
@mmalerba mmalerba changed the title fix(form-field) fix(form-field): correct prefix & suffix icons as well as select arrow for various form field appearances Feb 1, 2018
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

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

LGTM

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Feb 1, 2018
@mmalerba mmalerba merged commit a0b482b into angular:input-chip Feb 1, 2018
mmalerba added a commit that referenced this pull request Feb 2, 2018
mmalerba added a commit that referenced this pull request Feb 4, 2018
mmalerba added a commit that referenced this pull request Feb 6, 2018
…ter (#9762)

* feat(form-field): support for different spec variants (#9366)

* feat(form-field): implement hover state

[Based on the spec](https://material.io/guidelines/components/text-fields.html#text-fields-states) form fields should have a hover state where the underline gets darkened while the user is hovering and gets replaced by the theme color after the focus the input.

* branch css logic

* extract underline css into standard variant

* box variant underline

* box variant spacing

* add legacy variant

* fix select ellipsis

* move hover state changes out of legacy variant

* add variants section to input demo

* use filter/backface-visibility to address label jumpiness

* address comments

* fix box variant text fuzziness

* remove bluriness fixes that aren't needed anymore

* address comments

* remove the floatLabel=never option in the new variants

* variant --> appearance

* add tests for new label & placeholder behavior

* update demo to use mat-label

* fix bazel build

* feat(chips): Add chip avatar and chip trailing icon (#9557)

* feat(chips): Add chip avatar and chip trailing icon

* Removed MatBasicChip and MatStandardChip

* Add mat-chip-trailing-icon style to MatChipRemove and add examples in
demo

* fix(form-field): rename box to fill and tweak the styles a bit (#9636)

* make some tweaks to the box appearance

* rename 'box' appearance to 'fill'

* feat(form-field): add outline style (#9705)

* remove datepicker reliance on form-field's underlineRef

* add spacing and alignment rules for outline variant

* outline color & thickness

* style tweaks

* correctly position and size the gap

* address comments

* fix(form-field): correct prefix & suffix icons as well as select arrow for various form field appearances (#9743)

* feat(input): add utilities for custom styling and monitoring state of input autofill (#9719)

* add utility for monitoring input autofill

* add scss mixin for styling input autofill colors

* tests

* move everything from cdk to MatInputModule

* address comments

* add doc comments

* fix(form-field): fixes for outline appearance (#9759)

* use the `AutofillMonitor` in `MatInput`

* Make `updateOutlineGap` public so users can call it if needed

* feat(chips): add ripple to chips (#9761)

* fix(form-field, chips): fix tests & lint (#9767)

* undo change that caused darkened color for legacy form field

* fix change detection

* fix(chips): remove margin for chip list (#9793)

* add terminateOnPointerUp to ripple config
@philip-firstorder
Copy link

philip-firstorder commented Feb 15, 2019

The .mat-icon-button still has the icon with font-size: 16px (inherited from input), which is too small, should be 24px.
https://stackblitz.com/angular/onqomvpyegx?file=app%2Finput-clearable-example.ts

See here the guidelines:
https://material.io/design/components/text-fields.html#anatomy
image

@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 Sep 10, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants