feat(chips): Add (select), [color] and dark theme to chips. #2242
Conversation
googlebot
added
the
cla: yes
| * Whether or not this chip is selectable. If false, `selected` *cannot* be set to `true`. | ||
| * | ||
| * Note: Disables keyboard *and* programmatic interaction. | ||
| */ |
There was a problem hiding this comment.
Can we instead make this
/**
* Whether or not this chip is selectable. When a chip is not selectable,
* its `selected` state is always ignored.
*/| } | ||
| } | ||
|
|
||
| toggleSelectOnFocusedChip(): void { |
There was a problem hiding this comment.
Should this method me internal (_toggleSelectOnFocusedChip)?
| this._selectable = coerceBooleanProperty(value); | ||
| } | ||
|
|
||
| /** Pass relevant focus events to our key manager. */ |
There was a problem hiding this comment.
This method needs a more public-facing description.
| return this.selected; | ||
| } | ||
|
|
||
| /** Returns the current color of this chip. */ |
There was a problem hiding this comment.
Use:
/** The color of the chip. Can be `primary`, `accent`, or `warn`. */Omit the setter comment (the getter/setter pair is treated as a single property for docs)
| return this._selected; | ||
| } | ||
|
|
||
| /** Programatically sets the selected state of this chip. */ |
| @@ -92,4 +137,27 @@ export class MdChip implements MdFocusable, OnInit, OnDestroy { | |||
| this.focus(); | |||
| } | |||
| } | |||
|
|
|||
| /** Initializes the appropriate CSS classes based on the chip type (basic or standard). */ | |||
| private _initClasses() { | |||
| @@ -26,6 +26,7 @@ export interface MdChipEvent { | |||
| 'tabindex': '-1', | |||
| 'role': 'option', | |||
|
|
|||
| '[class.selected]': 'selected', | |||
| $foreground: map-get($theme, foreground); | ||
|
|
||
| $unselected-background: if($is-dark-theme, md-color($background, card), #e0e0e0); | ||
| $unselected-foreground: if($is-dark-theme, md-color($foreground, text), rgba(0, 0, 0, 0.87)); |
There was a problem hiding this comment.
Why are these not just
$unselected-background: md-color($background, card);
$unselected-foreground: md-color($foreground, text);
// etc.?
The background and foreground colors are already based on whether it's a light/dark theme. Is there some reason the light theme version of these colors aren't appropriate?
topherfangio
force-pushed
the
team/topher/chips-select-120
branch
from
d00d5d9
to
994f00d
Compare
|
@jelbourn Requested changes made. Regarding the left/right arrow keys: I plan to add that at a later date, but many screen readers have difficulty with left/right which can cause problems (and did so with the md1 version). I'd like to do some testing before we add it so that I can work around any problems. |
Add new functionality/options to chips for managing selection/color. *MdChipList Options* - `[selectable]` - Programmatically control whether or not the chips in the list are capable of being selected. - The SPACE key will automatically select the currently focused chip. *MdChip Options* - `[color]` - Programmatically control the selected color of the chip. - `[selected]` - Programmatically control whether or not the chip is selected. - `(select)` - Event emitted when the chip is selected. - `(deselect)` - Event emitted when the chip is deselected. Additionally, adds basic support for dark themeed chips using existing colors from other components in the spec and cleanup demos by using cards and toolbars like other demos. References angular#120.
topherfangio
force-pushed
the
team/topher/chips-select-120
branch
from
994f00d
to
7b61ffe
Compare
|
FYI - I introduced a small bug in my last commit, so I added a new test when I fixed it. Just checks for proper CSS classes when the chip is selected. |
jelbourn
added
pr: lgtm
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Add new functionality/options to chips for managing selection/color.
MdChipList Options
[selectable]- Programmatically control whether or not the chipsin the list are capable of being selected.
MdChip Options
[color]- Programmatically control the selected color of thechip.
[selected]- Programmatically control whether or not the chipis selected.
(select)- Event emitted when the chip is selected.(deselect)- Event emitted when the chip is deselected.Additionally, adds basic support for dark themeed chips using existing
colors from other components in the spec and cleanup demos by using
cards and toolbars like other demos.
References #120.