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

mmalerba · 2018-01-31T18:59:09Z

Demo: https://mmalerba-demo5.firebaseapp.com/input

googlebot · 2018-02-01T22:16:35Z

So there's good news and bad news.

👍 The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

😕 The bad news is that it appears that one or more commits were authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this State. It's up to you to confirm consent of the commit author(s) and merge this pull request when appropriate.

mmalerba · 2018-02-01T22:43:35Z

@jelbourn moved everything into MatInputModule PTAL.

jelbourn · 2018-02-01T22:59:21Z

src/lib/input/_autofill.scss

@@ -0,0 +1,41 @@
+// Core styles that enable monitoring autofill state of inputs.
+@mixin mat-input-autofill {
+  // Keyframes that do nothing, but allow us to monitor when an input becomes autofilled.


Could you elaborate here to explain how this works?

jelbourn · 2018-02-01T23:02:13Z

src/lib/input/autofill.ts

+
+
+/** An event that is emitted when the autofill state of an input changes. */
+export type AutofillEvent = {


Make everything in here @docs-private?

Why? I do want people to be able to use these

Ack, I had thought there was going to be more iteration after this PR.

did add some additional doc comments though

jelbourn · 2018-02-01T23:07:39Z

src/lib/input/autofill.ts

+      }
+    };
+
+    element.addEventListener('animationstart', listener);


Make this a passive listener and run outside the zone?

jelbourn · 2018-02-01T23:08:55Z

src/lib/input/autofill.ts

+  private _monitoredElements = new Map<Element, MonitoredElementInfo>();
+
+  monitor(element: Element): Observable<AutofillEvent> {
+    const info = this._monitoredElements.get(element);


No-op when not on the browser platform?

mmalerba · 2018-02-02T00:08:43Z

comments addressed

jelbourn

LGTM

… 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

…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

angular-automatic-lock-bot · 2019-09-08T07:01:11Z

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.}

mmalerba added pr: needs review target: minor This PR is targeted for the next minor release labels Jan 31, 2018

mmalerba assigned jelbourn Jan 31, 2018

mmalerba requested a review from jelbourn January 31, 2018 18:59

mmalerba requested a review from devversion as a code owner January 31, 2018 18:59

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jan 31, 2018

mmalerba force-pushed the autofill branch from a1723b5 to f2b8a52 Compare February 1, 2018 22:16

mmalerba requested review from amcdnl, andrewseguin, crisbeto, josephperrott, kara and tinayuangao as code owners February 1, 2018 22:16

googlebot added cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla and removed cla: yes PR author has agreed to Google's Contributor License Agreement labels Feb 1, 2018

mmalerba force-pushed the autofill branch from f2b8a52 to 45ad22c Compare February 1, 2018 22:18

mmalerba changed the base branch from master to input-chip February 1, 2018 22:19

mmalerba added cla: yes PR author has agreed to Google's Contributor License Agreement and removed target: minor This PR is targeted for the next minor release cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Feb 1, 2018

mmalerba changed the title ~~feat(cdk): add utilities for custom styling and monitoring state of input autofill~~ feat(input): add utilities for custom styling and monitoring state of input autofill Feb 1, 2018

jelbourn reviewed Feb 1, 2018

View reviewed changes

mmalerba added 5 commits February 1, 2018 15:41

add utility for monitoring input autofill

f5db4be

add scss mixin for styling input autofill colors

04db236

tests

dfbbd0f

move everything from cdk to MatInputModule

a063401

address comments

b247539

mmalerba force-pushed the autofill branch from d869395 to b247539 Compare February 2, 2018 00:04

add doc comments

c038a78

jelbourn approved these changes Feb 2, 2018

View reviewed changes

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Feb 2, 2018

mmalerba merged commit 78e68e4 into angular:input-chip Feb 2, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

mmalerba commented Jan 31, 2018 •

edited

Loading

googlebot commented Feb 1, 2018

mmalerba commented Feb 1, 2018

jelbourn Feb 1, 2018

jelbourn Feb 1, 2018

mmalerba Feb 1, 2018

jelbourn Feb 1, 2018

mmalerba Feb 2, 2018

jelbourn Feb 1, 2018

jelbourn Feb 1, 2018

mmalerba commented Feb 2, 2018

jelbourn left a comment

angular-automatic-lock-bot bot commented Sep 8, 2019



		/** An event that is emitted when the autofill state of an input changes. */
		export type AutofillEvent = {

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

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

Conversation

mmalerba commented Jan 31, 2018 • edited Loading

googlebot commented Feb 1, 2018

mmalerba commented Feb 1, 2018

jelbourn Feb 1, 2018

Choose a reason for hiding this comment

jelbourn Feb 1, 2018

Choose a reason for hiding this comment

mmalerba Feb 1, 2018

Choose a reason for hiding this comment

jelbourn Feb 1, 2018

Choose a reason for hiding this comment

mmalerba Feb 2, 2018

Choose a reason for hiding this comment

jelbourn Feb 1, 2018

Choose a reason for hiding this comment

jelbourn Feb 1, 2018

Choose a reason for hiding this comment

mmalerba commented Feb 2, 2018

jelbourn left a comment

Choose a reason for hiding this comment

angular-automatic-lock-bot bot commented Sep 8, 2019

mmalerba commented Jan 31, 2018 •

edited

Loading