feat(chips): Initial skeleton/demo. #1855

topherfangio · 2016-11-14T18:14:01Z

Create the initial Chips skeleton with a very basic working demo of static, styled chips.

References #120.

topherfangio · 2016-11-14T18:50:13Z

@jelbourn Sorry; I just remembered that we discussed changing this to md-chip-list. I will do that and resubmit.

jelbourn

Need skeleton for unit tests as well.

jelbourn · 2016-11-16T00:44:21Z

src/lib/chips/chip-list.ts

+
+  static COMPONENT_CONFIG: Component = {
+    moduleId: module.id,
+    selector: 'md-chip-list, [md-chip-list]',


I don't think we need to do the attribute selector until we have a strong use-case for it.

jelbourn · 2016-11-16T00:47:51Z

src/lib/chips/chip-list.ts

+      'role': 'listbox',
+    },
+    queries: {
+      items: new ContentChildren(MdChip)


I suspect this specifically (using new Something in this metadata) won't work in AoT compile.

I will play with this in the AoT and see what happens, but I realized it's actually not used in the skeleton (I built the skeleton by deleting code from what I showed you before) so I will remove it from this PR and probably have it in my next one.

jelbourn · 2016-11-16T00:48:27Z

src/lib/chips/chip-list.ts

+@Component(MdChipList.COMPONENT_CONFIG)
+export class MdChipList {
+
+  static COMPONENT_CONFIG: Component = {


If this does work in AoT mode, then it should just be an exported constant, not a static member on the MdChipList

Either way, though, I'm tempted to say let's not worry about this for the initial version and add a TODO to explore the idea later.

jelbourn · 2016-11-16T00:52:40Z

src/lib/chips/chip-list.ts

+  constructor(private _elementRef: ElementRef) {}
+
+  ngAfterContentInit(): void {
+    this._elementRef.nativeElement.classList.add('md-chips');


You should be able to add class to the host oject in the component metadata for this:

host: { 'class': 'md-chip-list' }

Same for chip below.

jelbourn · 2016-11-16T00:53:08Z

src/lib/chips/chip.ts

+  Component,
+  ElementRef,
+  Renderer
+} from '@angular/core';


Only need to wrap like this if it's longer than 100 cols.

jelbourn · 2016-11-16T00:53:51Z

src/lib/chips/chips.scss

+  border-radius: $md-chip-horizontal-padding * 2;
+
+  background-color: #E0E0E0;
+  color: rgba(0, 0, 0, 0.87);


All colors should be in a _chips-theme.scss file. See the other components for an example.

jelbourn · 2016-11-16T00:54:56Z

src/lib/chips/chips.scss

+  background-color: #E0E0E0;
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 13px;
+  line-height: 16px;


I'm not sure we should be setting font-size and line-height. Could we use whatever value is current applied on this element?

@hansl thoughts on this?

Would love some additional guidance on this. Those values were set based off of the spec, so if we are allowing users to deviate, it may change some other values (like the border raidus in particular).

Is there any plan to use em or rem instead of pixels?

jelbourn · 2016-11-16T00:56:01Z

Also there's a lint error on CI.

Create the initial Chips skeleton with a very basic working demo of static, styled chips. References angular#120.

topherfangio · 2016-11-17T06:03:02Z

@jelbourn Ready for re-review. Made all requested changes except for removing font-size/line-height as I'm not sure what to replace it with. Would love some more feedback on that.

jelbourn · 2016-11-17T17:50:03Z

LGTM

jelbourn · 2016-11-17T17:50:34Z

@kara FYI this will need new build rules.

fxck · 2016-11-25T14:58:45Z

src/lib/chips/chips.scss

+
+.md-chip {
+  display: inline-block;
+  padding: $md-chip-vertical-padding $md-chip-horizontal-padding


no need to repeat these,

padding: $md-chip-vertical-padding $md-chip-horizontal-padding;

is enough

Indeed; will fix in my next PR.

angular-automatic-lock-bot · 2019-09-06T04:02:50Z

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

topherfangio added the pr: needs review label Nov 14, 2016

topherfangio assigned jelbourn Nov 14, 2016

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Nov 14, 2016

topherfangio added in progress This issue is currently in progress and removed pr: needs review labels Nov 14, 2016

topherfangio force-pushed the team/topher/chips-skeleton-120 branch from e553b8a to 6c4d602 Compare November 15, 2016 15:27

topherfangio added pr: needs review and removed in progress This issue is currently in progress labels Nov 15, 2016

jelbourn reviewed Nov 16, 2016

View reviewed changes

topherfangio added in progress This issue is currently in progress and removed pr: needs review labels Nov 17, 2016

topherfangio force-pushed the team/topher/chips-skeleton-120 branch from 6c4d602 to df01963 Compare November 17, 2016 05:31

feat(chips): Initial skeleton/demo.

fb22bbe

Create the initial Chips skeleton with a very basic working demo of static, styled chips. References angular#120.

topherfangio force-pushed the team/topher/chips-skeleton-120 branch from df01963 to fb22bbe Compare November 17, 2016 05:51

topherfangio added pr: needs review and removed in progress This issue is currently in progress labels Nov 17, 2016

jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker and removed pr: needs review labels Nov 17, 2016

fxck reviewed Nov 25, 2016

View reviewed changes

tinayuangao merged commit edf5cdf into angular:master Nov 29, 2016

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): Initial skeleton/demo. #1855

feat(chips): Initial skeleton/demo. #1855

topherfangio commented Nov 14, 2016 •

edited

Loading

topherfangio commented Nov 14, 2016

jelbourn left a comment

jelbourn Nov 16, 2016

jelbourn Nov 16, 2016

topherfangio Nov 17, 2016

jelbourn Nov 16, 2016

jelbourn Nov 16, 2016

jelbourn Nov 16, 2016

jelbourn Nov 16, 2016

jelbourn Nov 16, 2016

topherfangio Nov 17, 2016

jelbourn commented Nov 16, 2016

topherfangio commented Nov 17, 2016

jelbourn commented Nov 17, 2016

jelbourn commented Nov 17, 2016

fxck Nov 25, 2016

topherfangio Nov 25, 2016

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

feat(chips): Initial skeleton/demo. #1855

feat(chips): Initial skeleton/demo. #1855

Conversation

topherfangio commented Nov 14, 2016 • edited Loading

topherfangio commented Nov 14, 2016

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

jelbourn commented Nov 16, 2016

topherfangio commented Nov 17, 2016

jelbourn commented Nov 17, 2016

jelbourn commented Nov 17, 2016

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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

topherfangio commented Nov 14, 2016 •

edited

Loading