feat: add simplified checkbox component for usage in other components #2619
Conversation
googlebot
added
the
cla: yes
Adds the `md-pseudo-checkbox`, which is a simplified version of `md-checkbox`, that doesn't have the expensive SVG animations or the form control logic. This will be useful for multiple selection in `md-select`, as well as other components in the future. Relates to angular#2412.
crisbeto
force-pushed
the
pseudo-checkbox-strikes-back
branch
from
dc485ba
to
d88365d
Compare
| @@ -132,7 +136,8 @@ export {NoConflictStyleCompatibilityMode} from './compatibility/no-conflict-mode | |||
| PortalModule, | |||
| OverlayModule, | |||
| A11yModule, | |||
| MdOptionModule | |||
| MdOptionModule, | |||
| MdSelectionModule | |||
| border-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function, | ||
| background-color $md-checkbox-transition-duration $md-linear-out-slow-in-timing-function; | ||
|
|
||
| &::after { |
There was a problem hiding this comment.
Add a comment explaining what the ::after element is used for?
| cursor: default; | ||
| } | ||
|
|
||
| .md-pseudo-checkbox-indeterminate::after { |
There was a problem hiding this comment.
I'm not sure that the pseudo-checkbox needs an indeterminate state; did you have something in mind for it?
Also same question for disabled
There was a problem hiding this comment.
We definitely need the disabled state since select options can be disabled. Regarding the indeterminate state, we don't need it for the select, but I'd imagine that it would come in handy for other components (e.g. the "select all" functionality in the data table or potentially in the selection list).
| @@ -0,0 +1,10 @@ | |||
| @import './variables'; | |||
There was a problem hiding this comment.
File should be _checkbox-common.scss to be consistent with other shared styles
| export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate'; | ||
|
|
||
| /** | ||
| * Simplified checkbox without any of the underlying form control logic |
There was a problem hiding this comment.
How about...
Component that shows a simplified checkbox without including any kind of "real" checkbox.
Meant to be used when the checkbox is purely decorative and a large number of them will be
included, such as for the options in a multi-select. Uses no SVGs or complex animations.
Note that this component will be completely invisible to screen-reader users. This is *not*
interchangeable with <md-checkbox> and should not be used if the user would directly interact
with the checkbox. The pseudo-checkbox should only be used as an implementation detail of
more complex components that appropriately handle selected / checked state.
| @Input() disabled: boolean = false; | ||
|
|
||
| /** Color of the checkbox. */ | ||
| @Input() |
There was a problem hiding this comment.
Instead of doing an @Input for color and disabled, perhaps we should just include the class directly? My reasoning is that it more clearly communicates that it's not a real checkbox and is only for show.
@kara thoughts?
There was a problem hiding this comment.
I guess that it's mainly for consistency. Regarding communication, this is intended for internal usage anyway, it shouldn't be an issue if people look at the readme.
|
Addressed the feedback @jelbourn. |
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. |
Adds the
md-pseudo-checkbox, which is a simplified version ofmd-checkbox, that doesn't have the expensive SVG animations or the form control logic. This will be useful for multiple selection inmd-select, as well as other components in the future.Relates to #2412.