feat(optgroup): added optgroup in select and list (#UIM-318)

commitlint.config.js

@@ -29,6 +29,7 @@ module.exports = {
                 'list',
                 'modal',
                 'navbar',
+                'optgroup',
                 'panel',
                 'popover',
                 'progress-bar',

packages/mosaic-examples/mosaic/list/list-groups/list-groups-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

packages/mosaic-examples/mosaic/list/list-groups/list-groups-example.html

@@ -0,0 +1,8 @@
+<mc-list-selection>
+    <mc-optgroup *ngFor="let group of pokemonTypes" [label]="group.name" [disabled]="group.disabled">
+        <mc-list-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
+            {{ pokemon.viewValue }}
+        </mc-list-option>
+    </mc-optgroup>
+    <mc-list-option value="mime-11">Mr. Mime</mc-list-option>
+</mc-list-selection>

packages/mosaic-examples/mosaic/list/list-groups/list-groups-example.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title Basic list
+ */
+@Component({
+    selector: 'list-groups-example',
+    templateUrl: 'list-groups-example.html',
+    styleUrls: ['list-groups-example.css']
+})
+export class ListGroupsExample {
+    pokemonTypes = [
+        {
+            name: 'Grass',
+            pokemon: [
+                { value: 'bulbasaur-0', viewValue: 'Bulbasaur' },
+                { value: 'oddish-1', viewValue: 'Oddish' },
+                { value: 'bellsprout-2', viewValue: 'Bellsprout' }
+            ]
+        },
+        {
+            name: 'Water',
+            disabled: true,
+            pokemon: [
+                { value: 'squirtle-3', viewValue: 'Squirtle' },
+                { value: 'psyduck-4', viewValue: 'Psyduck' },
+                { value: 'horsea-5', viewValue: 'Horsea' }
+            ]
+        },
+        {
+            name: 'Fire',
+            pokemon: [
+                { value: 'charmander-6', viewValue: 'Charmander' },
+                { value: 'vulpix-7', viewValue: 'Vulpix' },
+                { value: 'flareon-8', viewValue: 'Flareon' }
+            ]
+        },
+        {
+            name: 'Psychic',
+            pokemon: [
+                { value: 'mew-9', viewValue: 'Mew' },
+                { value: 'mewtwo-10', viewValue: 'Mewtwo' }
+            ]
+        }
+    ];
+}

packages/mosaic-examples/mosaic/list/module.ts

@@ -1,7 +1,9 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { McListModule } from '@ptsecurity/mosaic/list';
 
+import { ListGroupsExample } from './list-groups/list-groups-example';
 import { ListMultipleCheckboxExample } from './list-multiple-checkbox/list-multiple-checkbox-example';
 import { ListMultipleKeyboardExample } from './list-multiple-keyboard/list-multiple-keyboard-example';
 import { ListOverviewExample } from './list-overview/list-overview-example';
@@ -10,11 +12,13 @@ import { ListOverviewExample } from './list-overview/list-overview-example';
 const EXAMPLES = [
     ListOverviewExample,
     ListMultipleCheckboxExample,
-    ListMultipleKeyboardExample
+    ListMultipleKeyboardExample,
+    ListGroupsExample
 ];
 
 @NgModule({
     imports: [
+        CommonModule,
         FormsModule,
         McListModule
     ],

packages/mosaic-examples/mosaic/select/module.ts

@@ -5,6 +5,7 @@ import { McIconModule } from '@ptsecurity/mosaic/icon';
 import { McInputModule } from '@ptsecurity/mosaic/input';
 import { McSelectModule } from '@ptsecurity/mosaic/select';
 
+import { SelectGroupsExample } from './select-groups/select-groups-example';
 import { SelectMultipleOverviewExample } from './select-multiple-overview/select-multiple-overview-example';
 import { SelectOverviewExample } from './select-overview/select-overview-example';
 import { SelectSearchOverviewExample } from './select-search-overview/select-search-overview-example';
@@ -13,7 +14,8 @@ import { SelectSearchOverviewExample } from './select-search-overview/select-sea
 const EXAMPLES = [
     SelectOverviewExample,
     SelectMultipleOverviewExample,
-    SelectSearchOverviewExample
+    SelectSearchOverviewExample,
+    SelectGroupsExample
 ];
 
 @NgModule({

packages/mosaic-examples/mosaic/select/select-groups/select-groups-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

packages/mosaic-examples/mosaic/select/select-groups/select-groups-example.html

@@ -0,0 +1,8 @@
+<mc-form-field>
+    <mc-select>
+        <mc-optgroup *ngFor="let group of pokemonTypes" [label]="group.name" [disabled]="group.disabled">
+            <mc-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">{{ pokemon.viewValue }}</mc-option>
+        </mc-optgroup>
+        <mc-option value="mime-11">Mr. Mime</mc-option>
+    </mc-select>
+</mc-form-field>

packages/mosaic-examples/mosaic/select/select-groups/select-groups-example.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+
+
+/**
+ * @title Basic Select
+ */
+@Component({
+    selector: 'select-groups-example',
+    templateUrl: 'select-groups-example.html',
+    styleUrls: ['select-groups-example.css']
+})
+export class SelectGroupsExample {
+    pokemonTypes = [
+        {
+            name: 'Grass',
+            pokemon: [
+                { value: 'bulbasaur-0', viewValue: 'Bulbasaur' },
+                { value: 'oddish-1', viewValue: 'Oddish' },
+                { value: 'bellsprout-2', viewValue: 'Bellsprout' }
+            ]
+        },
+        {
+            name: 'Water',
+            disabled: true,
+            pokemon: [
+                { value: 'squirtle-3', viewValue: 'Squirtle' },
+                { value: 'psyduck-4', viewValue: 'Psyduck' },
+                { value: 'horsea-5', viewValue: 'Horsea' }
+            ]
+        },
+        {
+            name: 'Fire',
+            pokemon: [
+                { value: 'charmander-6', viewValue: 'Charmander' },
+                { value: 'vulpix-7', viewValue: 'Vulpix' },
+                { value: 'flareon-8', viewValue: 'Flareon' }
+            ]
+        },
+        {
+            name: 'Psychic',
+            pokemon: [
+                { value: 'mew-9', viewValue: 'Mew' },
+                { value: 'mewtwo-10', viewValue: 'Mewtwo' }
+            ]
+        }
+    ];
+}

packages/mosaic/core/option/_optgroup-theme.scss

@@ -10,13 +10,13 @@
         color: mc-color($foreground, secondary-text);
     }
 
-    .mc-optgroup-disabled .mc-optgroup-label {
-        color: mc-color($foreground, hint-text);
+    .mc-disabled .mc-optgroup-label {
+        color: mc-color($foreground, disabled-text);
     }
 }
 
 @mixin mc-optgroup-typography($config) {
     .mc-optgroup-label {
-        @include mc-typography-level-to-styles($config, body-2);
+        @include mc-typography-level-to-styles($config, subheading);
     }
 }

packages/mosaic/core/option/optgroup.html

@@ -1,2 +1,2 @@
 <label class="mc-optgroup-label" [id]="labelId">{{ label }}</label>
-<ng-content select="mc-option, ng-container"></ng-content>
+<ng-content select="mc-option, mc-list-option, ng-container"></ng-content>

packages/mosaic/core/option/optgroup.scss

@@ -2,6 +2,9 @@
 
 
 .mc-optgroup-label {
+    padding-left: 16px;
+
     @include user-select(none);
+
     cursor: default;
 }

packages/mosaic/core/option/optgroup.ts

@@ -3,14 +3,12 @@ import { Component, ViewEncapsulation, Input, ChangeDetectionStrategy } from '@a
 import { mixinDisabled, CanDisable, CanDisableCtor } from '../common-behaviors/index';
 
 
-// Boilerplate for applying mixins to McOptgroup.
 /** @docs-private */
 export class McOptgroupBase {}
 
 // tslint:disable-next-line: naming-convention
 export const McOptgroupMixinBase: CanDisableCtor & typeof McOptgroupBase = mixinDisabled(McOptgroupBase);
 
-// Counter for unique group ids.
 let uniqueOptgroupIdCounter = 0;
 
 /**
@@ -20,20 +18,16 @@ let uniqueOptgroupIdCounter = 0;
     selector: 'mc-optgroup',
     exportAs: 'mcOptgroup',
     templateUrl: 'optgroup.html',
+    styleUrls: ['./optgroup.css'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush,
     inputs: ['disabled'],
-    styleUrls: ['optgroup.css'],
     host: {
         class: 'mc-optgroup',
-        role: 'group',
-        '[class.mc-optgroup-disabled]': 'disabled',
-        '[attr.aria-disabled]': 'disabled.toString()',
-        '[attr.aria-labelledby]': 'labelId'
+        '[class.mc-disabled]': 'disabled'
     }
 })
 export class McOptgroup extends McOptgroupMixinBase implements CanDisable {
-    /** Label for the option group. */
     @Input() label: string;
 
     /** Unique id for the underlying label. */

packages/mosaic/core/styles/typography/_all-typography.scss

@@ -26,6 +26,7 @@
 @import '../../../tree/tree-theme';
 @import '../../../vertical-navbar/vertical-navbar-theme';
 @import '../../option/option-theme';
+@import '../../option/optgroup-theme';
 
 
 @mixin mosaic-typography($config: null) {
@@ -50,6 +51,7 @@
     @include mc-modal-typography($config);
     @include mc-navbar-typography($config);
     @include mc-option-typography($config);
+    @include mc-optgroup-typography($config);
     @include mc-popover-typography($config);
     @include mc-radio-typography($config);
     @include mc-select-typography($config);

packages/mosaic/core/theming/_all-theme.scss

@@ -33,6 +33,7 @@
 @import '../../tree/tree-theme';
 @import '../../vertical-navbar/vertical-navbar-theme';
 @import '../option/option-theme';
+@import '../option/optgroup-theme';
 @import '../highlight/highlight-theme';
 @import '../visual/panel-theme';
 
@@ -57,6 +58,7 @@
     @include mc-modal-theme($theme);
     @include mc-navbar-theme($theme);
     @include mc-option-theme($theme);
+    @include mc-optgroup-theme($theme);
     @include mc-panel-theme($theme);
     @include mc-popover-theme($theme);
     @include mc-progress-bar-theme($theme);

packages/mosaic/list/_list-theme.scss

@@ -45,6 +45,7 @@
             background: mc-color($primary, if($is-dark-theme, 700, 100));
         }
 
+        &.mc-disabled,
         &[disabled] {
             background: transparent;
 

packages/mosaic/list/list-selection.component.ts

@@ -19,7 +19,8 @@ import {
     OnDestroy,
     OnInit,
     ViewChild,
-    NgZone
+    NgZone,
+    Optional
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FocusKeyManager, IFocusableOption } from '@ptsecurity/cdk/a11y';
@@ -44,7 +45,8 @@ import {
     HasTabIndexCtor,
     mixinTabIndex,
     HasTabIndex,
-    MultipleMode
+    MultipleMode,
+    McOptgroup
 } from '@ptsecurity/mosaic/core';
 import { merge, Observable, Subject, Subscription } from 'rxjs';
 import { startWith, take, takeUntil } from 'rxjs/operators';
@@ -69,6 +71,7 @@ export interface McOptionEvent {
         class: 'mc-list-option',
         '[class.mc-selected]': 'selected',
         '[class.mc-focused]': 'hasFocus',
+        '[class.mc-disabled]': 'disabled',
 
         '(focus)': 'focus()',
         '(blur)': 'blur()',
@@ -97,7 +100,8 @@ export class McListOption implements OnDestroy, OnInit, IFocusableOption {
 
     @Input()
     get disabled() {
-        return this._disabled || (this.listSelection && this.listSelection.disabled);
+        return (this.listSelection && this.listSelection.disabled) || (this.group && this.group.disabled) ||
+            this._disabled;
     }
 
     set disabled(value: any) {
@@ -147,7 +151,8 @@ export class McListOption implements OnDestroy, OnInit, IFocusableOption {
         private elementRef: ElementRef<HTMLElement>,
         private changeDetector: ChangeDetectorRef,
         private ngZone: NgZone,
-        @Inject(forwardRef(() => McListSelection)) public listSelection: McListSelection
+        @Inject(forwardRef(() => McListSelection)) public listSelection: McListSelection,
+        @Optional() readonly group: McOptgroup
     ) {}
 
     ngOnInit() {
@@ -290,8 +295,7 @@ export class McListSelection extends McListSelectionMixinBase implements CanDisa
 
     keyManager: FocusKeyManager<McListOption>;
 
-    // The option components contained within this selection-list.
-    @ContentChildren(McListOption) options: QueryList<McListOption>;
+    @ContentChildren(McListOption, { descendants: true }) options: QueryList<McListOption>;
 
     autoSelect: boolean;
     noUnselect: boolean;

packages/mosaic/list/list.md

@@ -2,9 +2,13 @@
 <!-- example(list-overview) -->
 
 
-### Multiple mode with checkboxes
+#### Multiple mode with checkboxes
 <!-- example(list-multiple-checkbox) -->
 
 
-### Multiple mode without checkboxes
-<!-- example(list-multiple-keyboard) -->
+#### Multiple mode without checkboxes
+<!-- example(list-multiple-keyboard) -->
+
+
+#### Multiple mode without checkboxes
+<!-- example(list-groups) -->

packages/mosaic/list/list.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { A11yModule } from '@ptsecurity/cdk/a11y';
-import { McLineModule, McPseudoCheckboxModule } from '@ptsecurity/mosaic/core';
+import { McLineModule, McOptionModule, McPseudoCheckboxModule } from '@ptsecurity/mosaic/core';
 
 import { McListSelection, McListOption } from './list-selection.component';
 import { McList, McListItem, McListSubheaderCssStyler } from './list.component';
@@ -12,13 +12,15 @@ import { McList, McListItem, McListSubheaderCssStyler } from './list.component';
         CommonModule,
         A11yModule,
         McPseudoCheckboxModule,
-        McLineModule
+        McLineModule,
+        McOptionModule
     ],
     exports: [
         McList,
         McListSelection,
         McListItem,
         McListOption,
+        McOptionModule,
         McListSubheaderCssStyler
     ],
     declarations: [

packages/mosaic/list/list.scss

@@ -45,6 +45,6 @@
     }
 }
 
-.mc-list-option:not([disabled]) {
+.mc-list-option:not([disabled]):not(.mc-disabled){
     cursor: pointer;
 }