feat(chips): Add removal functionality/styling. #4912

tinayuangao · 2017-06-01T17:28:14Z

Continue work of #2476

jelbourn

Thanks for picking this up

jelbourn · 2017-06-02T18:24:28Z

src/demo-app/chips/chips-demo.ts

@@ -39,13 +46,29 @@ export class ChipsDemo {
    alert(message);


While you're in here, could you change this to literally anything but an alert?

jelbourn · 2017-06-02T18:26:23Z

src/demo-app/chips/chips-demo.html

-      <md-input-container>
-        <input mdInput #input (keyup.enter)="add(input)" placeholder="New Contributor..."/>
+      <md-input-container mdChipListContainer>
+        <md-chip-list mdPrefix #chipList>


Is the chip-list inside of input-container going to change in a follow-up PR?

jelbourn · 2017-06-02T18:31:10Z

src/demo-app/chips/chips-demo.ts

+    let value = event.value;
+
+    // Add our person
+    if (value && value.trim() != '') {


Could change this to if ((value || '').trim())

jelbourn · 2017-06-02T18:32:28Z

src/lib/chips/_chips-theme.scss

+
+    }
+
+    &.mat-accent {


Would it make sense to make a mixin here instead of repeating for primary/accent/warn?

jelbourn · 2017-06-02T18:36:23Z

src/lib/chips/chip-input.ts

+
+  /** Register input for chip list */
+  @Input()
+  set mdChipList(value: MdChipList) {


This property should be just chipList and the input should be @Input('mdChipList') and there also needs to be a corresponding input for matChipList

jelbourn · 2017-06-02T21:21:30Z

src/lib/chips/chip.ts

  host: {
    '[class.mat-chip]': 'true',
    'tabindex': '-1',
    'role': 'option',

    '[class.mat-chip-selected]': 'selected',
+    '[class.mat-chip-has-remove-icon]': '_hasRemoveIcon',


Is there any way to avoid having this class on the chip? It seems unnecessarily complicated that the chip has to know whether it contains a remove button.

jelbourn · 2017-06-02T21:27:16Z

src/lib/chips/chip.ts

+    this._hasRemoveIcon = value;
+  }
+
+  protected _checkDisabled(event: Event): boolean {


Can we omit this method? It's name doesn't really tell you what it does and it's just a big side-effect

jelbourn · 2017-06-02T21:29:22Z

src/lib/chips/chips.scss

+}
+
+.mat-chip-list-container .mat-input-placeholder-wrapper {
+  top: -4px;


Having super-specific negative absolute coordinates like this seems like a code smell to me. Is there a way to eliminate this, or to alternatively make it more explainable?

jelbourn · 2017-06-02T21:29:42Z

src/lib/chips/chips.scss

+  top: -4px;
+
+  [dir='rtl'] & {
+    right: 8px;


Make this 8px a variable?

jelbourn · 2017-06-02T21:36:23Z

src/lib/chips/chips.scss

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
+
+  .mat-chip:not(.mat-basic-chip) {


Maybe for a follow-up PR (can add a TODO), but I'd like to get rid of all of the :not(.mat-basic-chip). It raises the specificity such that you can't just target .mat-chip. Would be better to target a CSS class that is only applied when the basic chip directive isn't applied.

tinayuangao · 2017-06-05T23:41:16Z

Comments addressed. Please take another look. Thanks!

jelbourn · 2017-06-06T16:24:42Z

src/lib/chips/chip-input.ts

+}
+
+@Directive({
+  selector: 'input[mdChipList], input[matChipList]',


Thought about this some more- can we make the selector mdChipInputFor?

When the other properties would be, e.g., mdChipInputAddOnBlur

jelbourn · 2017-06-06T16:43:09Z

src/lib/chips/chip-input.ts

+  @Input() separatorKeysCodes: number[] = [ENTER];
+
+  /** Emitted when a chip is to be added. */
+  @Output('mdChipEnd')


What do you think of mdChipInputTokenEnd? Didn't think of that yesterday, and I feel like it captures the intent pretty well

jelbourn · 2017-06-06T16:45:55Z

src/lib/chips/chip-input.ts

+   * Defaults to `[ENTER]`.
+   */
+  // TODO(tinayuangao): Support Set here
+  @Input() separatorKeysCodes: number[] = [ENTER];


This one would be @Input('mdChipInputSeparatorKeyCodes')

jelbourn · 2017-06-06T16:49:37Z

src/lib/chips/chip-list.ts

-  /**
-   * Whether or not this chip is selectable. When a chip is not selectable,
-   * it's selected state is always ignored.
-   */


Why remove this comment?

jelbourn · 2017-06-06T17:21:38Z

src/lib/chips/chip-list.ts

@@ -169,6 +212,14 @@ export class MdChipList implements AfterContentInit, OnDestroy {
  }

  /**
+   * Check the tab index as you should not be allowed to focus an empty list.
+   */
+  protected _checkTabIndex(): void {


Should call this something like _updateTabIndex ("check" by itself doesn't communicate that the function changes anything)

Actually, though, this whole thing seems like it should be a host binding rather than something that is imperatively updated.

jelbourn · 2017-06-06T17:31:01Z

src/lib/chips/chip-list.ts

@@ -48,23 +62,32 @@ import {Subscription} from 'rxjs/Subscription';
 })
 export class MdChipList implements AfterContentInit, OnDestroy {

+  /** When a chip is destroyed, we track the index so we can focus the appropriate next chip. */
+  protected _destroyedIndex: number = null;


What about _lastDestroyedIndex or _mostRecentDestroyedIndex?

jelbourn · 2017-06-06T17:35:52Z

src/lib/chips/chip-list.ts

-  focus() {
-    // TODO: ARIA says this should focus the first `selected` chip.
-    this._keyManager.setFirstItemActive();
+  // TODO: ARIA says this should focus the first `selected` chip if any are selected.


Can you put the TODO inside the function body? I think dgeni won't be able to connect the JsDoc to the function with this in-between.

I would also rephrase:

/** * Focuses the the first non-disabled chip in this chip list, or the associated input when there * are no eligible chips. */

jelbourn · 2017-06-06T17:37:45Z

src/lib/chips/chip-list.ts

-          this._keyManager.onKeydown(event);
-      }
+  /** Attempt to focus an input if we have one. */
+  focusInput() {


This method should be internal

jelbourn · 2017-06-06T17:54:30Z

src/lib/chips/chip-list.ts

+   * Checks to see if a focus chip was recently destroyed so that we can refocus the next closest
+   * one.
+   */
+  protected _checkDestroyedFocus() {


How about _updateFocusForDestroyedChips?

jelbourn · 2017-06-06T17:59:39Z

src/lib/chips/chip-list.ts

+
+    if (this._destroyedIndex != null && chipsArray.length > 0) {
+      // Check whether the destroyed chip was the last item
+      if (this._destroyedIndex >= chipsArray.length) {


This if-else block could be replaced with:

const newFocusIndex = Math.min(this._destroyedIndex, chipsArray.length - 1); this._keyManager.setActiveItem(newFocusIndex);

googlebot · 2017-06-06T18:44:34Z

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 they're okay 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.

jelbourn

LGTM, there's just one lint error

Add the "merge-ready" label when that's fixed

@willshowell

Add events, styling and keyboard controls to allow removable chips. - Add basic styling for a user-provided remove icon. - Add keyboard controls for backspace/delete. - Add `(remove)` event which is emitted when the remove icon or one of the delete keys is pressed. - Add `md-chip-remove` directive which can be applied to `<md-icon>` (or others) to inform the chip of the remove request. Add new directive `mdChipInput` for controlling: - `(chipAdded)` - Event fired when a chip should be added. - `[separatorKeys]` - The list of keycodes that will fire the `(chipAdded)` event. - `[addOnBlur]` - Whether or not to fire the `(chipAdded)` event when the input is blurred. Additionally, fix some issues with dark theme and add styling/support for usage inside the `md-input-container` and add styling for focused chips. BREAKING CHANGE - The `selectable` property of the `md-chip-list` has now been moved to `md-chip` to maintain consistency with the new `removable` option. If you used the following code, ```html <md-chip-list [selectable]="selectable"> <md-chip>My Chip</md-chip> </md-chip-list> ``` you should switch it to ```html <md-chip-list> <md-chip [selectable]="selectable">My Chip</md-chip> </md-chip-list> ``` References angular#120. Closes angular#3143. Hat tip to @willshowell for suggestion to use secondary-text for focus color :-)

tinayuangao · 2017-07-12T18:53:08Z

Comments addressed. Added margin for input. Please take another look. Thanks!

willshowell

I'd like to suggest the following css to help balance the spacing around the remove icon.

.mat-chip-remove {
  margin: 0 -4px 0 4px;
}

Also the chips used to have a transparent border that turned dark when focused. It seems the last update removed that, but now when they are focused, their height increases due to added border:

jelbourn

Also what @willshowell said about the border

jelbourn · 2017-07-12T21:07:10Z

src/lib/chips/chip-list.ts

-import {coerceBooleanProperty} from '@angular/cdk';
+
+/** Utility to check if an input element has no value. */
+function _isInputEmpty(element: HTMLElement): boolean {


I would move this to the bottom of the file (we typically put module-level functions at the bottom). Also can remove the leading _ since it's scoped to this module.

Moved _isInputEmpty to MdChipList.

tinayuangao · 2017-07-12T23:10:14Z

Fixed border outline. Please take another look. Thanks!

jelbourn

LGTM

willshowell · 2017-07-13T13:33:13Z

@tinayuangao @jelbourn just noticed that the .mat-chip-remove.mat-icon styles are in the demo stylesheet rather than chips.scss. Should it be up to the consumer to set the font-size/height/width/alignment of the icon?

jelbourn · 2017-07-14T00:13:07Z

Merging this PR now, can make other fixes in a follow-up

angular-automatic-lock-bot · 2019-09-06T16:03:23Z

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

googlebot added the cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla label Jun 1, 2017

willshowell mentioned this pull request Jun 1, 2017

Are chips going to gain full functionality like tab to complete and x to close? #4913

Closed

tinayuangao force-pushed the chips branch 2 times, most recently from 33174bb to 03d293e Compare June 1, 2017 21:31

tinayuangao requested review from mmalerba and jelbourn June 1, 2017 23:36

tinayuangao added pr: needs review and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Jun 2, 2017

tinayuangao removed the request for review from jelbourn June 2, 2017 18:08

jelbourn changed the title ~~feat(chips): Add remove functionality/styling.~~ feat(chips): Add removal functionality/styling. Jun 2, 2017

jelbourn added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jun 2, 2017

jelbourn mentioned this pull request Jun 2, 2017

feat(chips): Add remove functionality/styling. #2476

Closed

jelbourn reviewed Jun 2, 2017

View reviewed changes

tinayuangao force-pushed the chips branch from afe6a4f to a8e1b54 Compare June 5, 2017 23:35

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 Jun 5, 2017

tinayuangao added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Jun 5, 2017

jelbourn reviewed Jun 6, 2017

View reviewed changes

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 Jun 6, 2017

tinayuangao added cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla labels Jun 6, 2017

jelbourn added pr: lgtm and removed pr: needs review labels Jun 6, 2017

jelbourn approved these changes Jun 6, 2017

View reviewed changes

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 Jun 6, 2017

topherfangio and others added 9 commits July 12, 2017 10:25

sync chip

4a586de

Add chip list container

bceeaee

Address comments

a9afafb

comments addressed

6846f3a

update tab index

ff95fbb

Put MdChipRemove and MdChip in one file to avoid circular dependency

fa248c2

Move native input out of chip-list

8ef5a0c

Sync and rebase & fix test

0fd32a9

tinayuangao force-pushed the chips branch from f2bc806 to d8df570 Compare July 12, 2017 18:12

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 Jul 12, 2017

sync & address comments

f188183

tinayuangao force-pushed the chips branch from d8df570 to f188183 Compare July 12, 2017 18:51

willshowell reviewed Jul 12, 2017

View reviewed changes

jelbourn reviewed Jul 12, 2017

View reviewed changes

sync test & address comments

8143e18

tinayuangao force-pushed the chips branch from 6f1a304 to 8143e18 Compare July 12, 2017 23:08

jelbourn approved these changes Jul 12, 2017

View reviewed changes

jelbourn added action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement and removed cla: no PR author must sign Google's Contributor License Agreement: https://opensource.google.com/docs/cla pr: needs review labels Jul 12, 2017

jelbourn merged commit c82aca9 into angular:master Jul 14, 2017

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(chips): Add removal functionality/styling. #4912

feat(chips): Add removal functionality/styling. #4912

tinayuangao commented Jun 1, 2017

jelbourn left a comment

jelbourn Jun 2, 2017

jelbourn Jun 2, 2017

jelbourn Jun 2, 2017

jelbourn Jun 2, 2017

jelbourn Jun 2, 2017

jelbourn Jun 2, 2017

jelbourn Jun 2, 2017

jelbourn Jun 2, 2017

jelbourn Jun 2, 2017

jelbourn Jun 2, 2017

tinayuangao commented Jun 5, 2017

jelbourn Jun 6, 2017

jelbourn Jun 6, 2017

jelbourn Jun 6, 2017

jelbourn Jun 6, 2017

jelbourn Jun 6, 2017

jelbourn Jun 6, 2017

jelbourn Jun 6, 2017

jelbourn Jun 6, 2017

jelbourn Jun 6, 2017

jelbourn Jun 6, 2017

googlebot commented Jun 6, 2017

jelbourn left a comment

tinayuangao commented Jul 12, 2017

willshowell left a comment

jelbourn left a comment

jelbourn Jul 12, 2017

tinayuangao Jul 12, 2017

tinayuangao commented Jul 12, 2017

jelbourn left a comment

willshowell commented Jul 13, 2017

jelbourn commented Jul 14, 2017

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

feat(chips): Add removal functionality/styling. #4912

feat(chips): Add removal functionality/styling. #4912

Conversation

tinayuangao commented Jun 1, 2017

jelbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tinayuangao commented Jun 5, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

googlebot commented Jun 6, 2017

jelbourn left a comment

Choose a reason for hiding this comment

tinayuangao commented Jul 12, 2017

willshowell left a comment

Choose a reason for hiding this comment

jelbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tinayuangao commented Jul 12, 2017

jelbourn left a comment

Choose a reason for hiding this comment

willshowell commented Jul 13, 2017

jelbourn commented Jul 14, 2017

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