feat(input-container): rename input-group to input-container

BREAKING CHANGES: md-input-group is now md-input-container. All components that use this classname will need to be updated to the new name.
momentum-design · Sep 18, 2019 · c1f654e · c1f654e
1 parent cc40380
commit c1f654e
Show file tree

Hide file tree

Showing 103 changed files with 1,177 additions and 1,439 deletions.
diff --git a/angular/src/docs/app/app-routing.module.ts b/angular/src/docs/app/app-routing.module.ts
@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ExampleCheckboxKitchenSinkComponent } from '../../lib/checkbox/examples';
+import { ExampleInputKitchenSinkComponent } from '../../lib/input/examples';
 import { ExampleRadioKitchenSinkComponent } from '../../lib/radio/examples';
 import { KitchenSinkComponent } from './kitchen-sink/kitchen-sink.component';
 import { PlaygroundComponent } from './playground/playground.component';
@@ -14,6 +15,10 @@ const routes: Routes = [
     path: 'kitchen-sink',
     component: KitchenSinkComponent,
     children: [
+      {
+        path: 'input',
+        component: ExampleInputKitchenSinkComponent,
+      },
       {
         path: 'checkbox',
         component: ExampleCheckboxKitchenSinkComponent,

diff --git a/angular/src/docs/app/kitchen-sink/kitchen-sink.component.ts b/angular/src/docs/app/kitchen-sink/kitchen-sink.component.ts
@@ -9,6 +9,7 @@ import { Component } from '@angular/core';
           <md-sidebar-nav>
             <md-sidebar-nav-item title="Playground" routerLink="/playground"></md-sidebar-nav-item>
             <md-sidebar-nav-item title="Kitchen Sink" [expanded]="true" headerLevel="secondary">
+              <md-sidebar-nav-item title="input" [routerLink]="['/kitchen-sink/input']"></md-sidebar-nav-item>
               <md-sidebar-nav-item title="checkbox" [routerLink]="['/kitchen-sink/checkbox']"></md-sidebar-nav-item>
               <md-sidebar-nav-item title="radio" [routerLink]="['/kitchen-sink/radio']"></md-sidebar-nav-item>
             </md-sidebar-nav-item>

diff --git a/angular/src/lib/checkbox-group/checkbox-group.component.ts b/angular/src/lib/checkbox-group/checkbox-group.component.ts
@@ -2,14 +2,20 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'md-checkbox-group',
-  template: `<ng-content></ng-content>`,
-  styles: [],
+  template: `
+    <ng-content></ng-content>
+  `,
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
   host: {
-  'class': 'md-checkbox-group'
-  }
+    class: 'md-checkbox-group',
+  },
 })
 export class CheckboxGroupComponent {
-
-  constructor() { }
-
+  constructor() {}
 }
diff --git a/angular/src/lib/checkbox/checkbox.component.ts b/angular/src/lib/checkbox/checkbox.component.ts
@@ -42,13 +42,13 @@ const CUSTOM_CHECKBOX_CONTROL_VALUE_ACCESSOR: any = {
     <label *ngIf="label" class="md-checkbox__label" [attr.for]="htmlId" (click)="onClick($event)">
       <span>{{ label }}</span>
     </label>
-    <md-input-helper *ngIf="helpText" [message]="helpText"> </md-input-helper>
+    <md-input-helper *ngIf="helpText">{{ helpText }}</md-input-helper>
     <ng-content></ng-content>
   `,
   styles: [],
   providers: [CUSTOM_CHECKBOX_CONTROL_VALUE_ACCESSOR],
   host: {
-    class: 'md-input-group md-checkbox',
+    class: 'md-input-container md-checkbox',
   },
 })
 export class CheckboxComponent implements ControlValueAccessor {

diff --git a/angular/src/lib/combo-box/combo-box.component.ts b/angular/src/lib/combo-box/combo-box.component.ts
@@ -44,7 +44,7 @@ export interface ComboBoxOffset {
       #origin="cdkOverlayOrigin"
       #trigger
     >
-      <md-input-group
+      <md-input-container
         [clear]="clear"
       >
         <input
@@ -63,7 +63,7 @@ export interface ComboBoxOffset {
         >
           <md-icon name="search_20"></md-icon>
         </md-input-section>
-      </md-input-group>
+      </md-input-container>
     </div>
 
     <ng-template

diff --git a/angular/src/lib/combo-box/combo-box.module.ts b/angular/src/lib/combo-box/combo-box.module.ts
@@ -1,20 +1,20 @@
 import { OverlayModule } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ComboBoxComponent } from './combo-box.component';
 import { IconModule } from '../icon';
-import { InputGroupModule } from '../input-group';
 import { InputModule } from '../input';
+import { InputContainerModule } from '../input-container';
 import { InputSectionModule } from '../input-section';
-import { ListItemHeaderModule } from '../list-item-header';
 import { ListItemModule } from '../list-item';
+import { ListItemHeaderModule } from '../list-item-header';
+import { ComboBoxComponent } from './combo-box.component';
 
 @NgModule({
   imports: [
     CommonModule,
     IconModule,
-    InputGroupModule,
+    InputContainerModule,
     InputModule,
     InputSectionModule,
     ListItemModule,

diff --git a/angular/src/lib/combo-box/tests/__snapshots__/combo-box.component.spec.ts.snap b/angular/src/lib/combo-box/tests/__snapshots__/combo-box.component.spec.ts.snap
@@ -22,7 +22,7 @@ exports[`ComboBoxComponent should create and match snapshot 1`] = `
     <div
       cdk-overlay-origin=""
     >
-      <md-input-group
+      <md-input-container
         class="md-input-container"
         ng-reflect-clear="false"
       >
@@ -60,7 +60,7 @@ exports[`ComboBoxComponent should create and match snapshot 1`] = `
         
         
         
-      </md-input-group>
+      </md-input-container>
     </div>
     
   </md-combo-box>

diff --git a/angular/src/lib/combo-box/tests/combo-box.component.spec.ts b/angular/src/lib/combo-box/tests/combo-box.component.spec.ts
@@ -1,15 +1,15 @@
-import { Component, ViewChild, Type } from '@angular/core';
+import { MutationObserverFactory } from '@angular/cdk/observers';
+import { OverlayContainer } from '@angular/cdk/overlay';
+import { Component, Type, ViewChild } from '@angular/core';
 import {
   ComponentFixture,
+  TestBed,
   fakeAsync,
   inject,
-  TestBed,
   tick
 } from '@angular/core/testing';
-import { OverlayContainer } from '@angular/cdk/overlay';
-import { MutationObserverFactory } from '@angular/cdk/observers';
 import { FormsModule } from '@angular/forms';
-import { ComboBoxModule, ComboBoxComponent } from '../../combo-box';
+import { ComboBoxComponent, ComboBoxModule } from '../../combo-box';
 
 @Component({
   selector: 'test-combo-box',
@@ -111,7 +111,7 @@ describe('ComboBoxComponent', () => {
     testComponent.hasSearchIcon = false;
     fixture.detectChanges();
     nativeElement = fixture.nativeElement;
-    expect(nativeElement.querySelector('md-input-group')).toBeTruthy();
+    expect(nativeElement.querySelector('md-input-container')).toBeTruthy();
   });
 
   it('should show options when search string is does exists"', fakeAsync(() => {

diff --git a/angular/src/lib/date-range-picker/date-range-input.component.ts b/angular/src/lib/date-range-picker/date-range-input.component.ts
@@ -1,6 +1,6 @@
-import { Component, Input, ViewChild, ElementRef, Output, EventEmitter, OnInit } from '@angular/core';
+import { BACKSPACE, DELETE, ENTER, SPACE, } from '@angular/cdk/keycodes';
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { DatePickerService } from '../date-picker/date-picker.service';
-import { ENTER, SPACE, BACKSPACE, DELETE, } from '@angular/cdk/keycodes';
 
 @Component({
   selector: 'md-date-range-input',
@@ -37,7 +37,7 @@ import { ENTER, SPACE, BACKSPACE, DELETE, } from '@angular/cdk/keycodes';
     </div>
   `,
   host: {
-    class: 'md-input-group small-5 columns'
+    class: 'md-input-container small-5 columns'
   }
 })
 export class DateRangeInputComponent implements OnInit {

diff --git a/angular/src/lib/editable-textfield/editable-textfield.component.ts b/angular/src/lib/editable-textfield/editable-textfield.component.ts
@@ -18,7 +18,7 @@ const cb = () => {};
 @Component({
   selector: 'md-editable-textfield',
   template: `
-    <md-input-group
+    <md-input-container
       *ngIf="isEditing"
       [class]="
         'md-editable-textfield__editing' +
@@ -42,7 +42,7 @@ const cb = () => {};
         (focus)="onFocus($event)"
         (keydown)="onKeyDown($event)"
       />
-    </md-input-group>
+    </md-input-container>
 
     <!-- Not in Edit Mode -->
     <div

diff --git a/angular/src/lib/editable-textfield/editable-textfield.module.ts b/angular/src/lib/editable-textfield/editable-textfield.module.ts
@@ -1,14 +1,14 @@
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { EditableTextfieldComponent } from './editable-textfield.component';
-import { InputGroupModule } from '../input-group';
 import { InputModule } from '../input';
+import { InputContainerModule } from '../input-container';
+import { EditableTextfieldComponent } from './editable-textfield.component';
 
 @NgModule({
   imports: [
     CommonModule,
-    InputGroupModule,
+    InputContainerModule,
     InputModule,
     FormsModule,
     ReactiveFormsModule

diff --git a/angular/src/lib/editable-textfield/tests/editable-textfield.component.spec.ts b/angular/src/lib/editable-textfield/tests/editable-textfield.component.spec.ts
@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { EditableTextfieldComponent } from '../../editable-textfield';
-import { InputGroupModule } from '../../input-group';
 import { InputModule } from '../../input';
+import { InputContainerModule } from '../../input-container';
 
 describe('EditableTextfieldComponent', () => {
   let component: EditableTextfieldComponent;
@@ -15,7 +15,7 @@ describe('EditableTextfieldComponent', () => {
       imports: [
         CommonModule,
         FormsModule,
-        InputGroupModule,
+        InputContainerModule,
         InputModule,
       ],
     }).compileComponents();