[NG] fix input group styles/tests

closes vmware-archive#3084 closes vmware-archive#3083

Signed-off-by: Cory Rylan <crylan@vmware.com>

gemini/tests/set1/datepicker.js

@@ -46,7 +46,7 @@ gemini.suite('datepicker', child => {
       .before((actions, find) => {
         actions.waitForElementToShow('.clr-example-2', WAIT_TIME);
         actions.wait(WAIT_LOAD_TIME);
-        this.trigger = find('.clr-example-2 .datepicker-trigger');
+        this.trigger = find('.clr-example-2 .clr-input-group-icon-action');
       })
       .setCaptureElements('.clr-example-2')
       .capture('default')
@@ -62,7 +62,7 @@ gemini.suite('datepicker', child => {
       .before((actions, find) => {
         actions.waitForElementToShow('.clr-example-2', WAIT_TIME);
         actions.wait(WAIT_LOAD_TIME);
-        this.trigger = find('.clr-example-2 .datepicker-trigger');
+        this.trigger = find('.clr-example-2 .clr-input-group-icon-action');
         actions.click(this.trigger);
         actions.wait(WAIT_LOAD_TIME);
       })
@@ -76,7 +76,7 @@ gemini.suite('datepicker', child => {
       .before((actions, find) => {
         actions.waitForElementToShow('.clr-example-2', WAIT_TIME);
         actions.wait(WAIT_LOAD_TIME);
-        this.trigger = find('.clr-example-2 .datepicker-trigger');
+        this.trigger = find('.clr-example-2 .clr-input-group-icon-action');
         actions.click(this.trigger);
         actions.wait(WAIT_LOAD_TIME);
         this.monthpickerTrigger = find('.monthpicker-trigger');
@@ -95,7 +95,7 @@ gemini.suite('datepicker', child => {
       .before((actions, find) => {
         actions.waitForElementToShow('.clr-example-2', WAIT_TIME);
         actions.wait(WAIT_LOAD_TIME);
-        this.trigger = find('.clr-example-2 .datepicker-trigger');
+        this.trigger = find('.clr-example-2 .clr-input-group-icon-action');
         actions.click(this.trigger);
         actions.wait(WAIT_LOAD_TIME);
         this.yearpickerTrigger = find('.yearpicker-trigger');

src/clr-angular/forms/datepicker/_datepicker.clarity.scss

@@ -39,6 +39,7 @@
     white-space: nowrap;
   }
 
+  // legacy can be removed when old layout is removed
   .datepicker-trigger {
     @include generate-calendar-button();
 

src/clr-angular/forms/datepicker/date-container.spec.ts

@@ -67,6 +67,11 @@ export default function() {
 
     // @deprecated these tests refer to the old forms layout only and can be removed when its removed
     describe('Deprecated View', () => {
+      beforeEach(() => {
+        context.clarityDirective.newFormsLayout = false;
+        context.detectChanges();
+      });
+
       it('applies the date-container class');
 
       it('renders the datepicker toggle button based on the enabled service', () => {
@@ -116,17 +121,17 @@ export default function() {
 
       it('renders the datepicker toggle button based on the enabled service', () => {
         expect(enabledService.isEnabled).toBe(true);
-        expect(context.clarityElement.querySelector('.datepicker-trigger')).not.toBeNull();
+        expect(context.clarityElement.querySelector('.clr-input-group-icon-action')).not.toBeNull();
 
         enabledService.fakeIsEnabled = false;
         context.detectChanges();
 
-        expect(context.clarityElement.querySelector('.datepicker-trigger')).toBeNull();
+        expect(context.clarityElement.querySelector('.clr-input-group-icon-action')).toBeNull();
       });
 
       it('clicking on the button toggles the datepicker popover', () => {
         spyOn(context.clarityDirective, 'toggleDatepicker');
-        const button: HTMLButtonElement = context.clarityElement.querySelector('.datepicker-trigger');
+        const button: HTMLButtonElement = context.clarityElement.querySelector('.clr-input-group-icon-action');
 
         button.click();
         context.detectChanges();
@@ -139,10 +144,10 @@ export default function() {
         expect(context.clarityElement.querySelector('input')).not.toBeNull();
       });
 
-      it('shows the datepicker view manager when .datepicker-trigger is clicked', () => {
+      it('shows the datepicker view manager when icon button is clicked', () => {
         expect(context.clarityElement.querySelector('clr-datepicker-view-manager')).toBeNull();
 
-        const button: HTMLButtonElement = context.clarityElement.querySelector('.datepicker-trigger');
+        const button: HTMLButtonElement = context.clarityElement.querySelector('.clr-input-group-icon-action');
         button.click();
         context.detectChanges();
 

src/clr-angular/forms/datepicker/date-container.ts

@@ -55,8 +55,8 @@ import { IS_NEW_FORMS_LAYOUT } from '../common/providers/new-forms.service';
         <div class="clr-input-wrapper">
           <div class="clr-input-group" [class.clr-focus]="focus">
             <ng-container *ngTemplateOutlet="clrDate"></ng-container>
-            <button type="button" class="datepicker-trigger" (click)="toggleDatepicker($event)" *ngIf="isEnabled" [attr.title]="commonStrings.open" [disabled]="control?.disabled">
-              <clr-icon shape="calendar" class="clr-input-group-icon-action"></clr-icon>
+            <button type="button" class="clr-input-group-icon-action" (click)="toggleDatepicker($event)" *ngIf="isEnabled" [attr.title]="commonStrings.open" [disabled]="control?.disabled">
+              <clr-icon shape="calendar"></clr-icon>
             </button>
             <clr-datepicker-view-manager *clrIfOpen clrFocusTrap></clr-datepicker-view-manager>
           </div>

src/clr-angular/forms/styles/_input-group.clarity.scss

@@ -6,7 +6,7 @@
   .clr-input-group {
     @include form-fields-appearance($clr-forms-border-color);
     @include input-border-bottom-animation($clr-forms-focused-color);
-    margin-right: $clr-forms-baseline * 4;
+    padding-right: $clr-forms-baseline * 4;
     max-width: calc(100% - 1rem);
     height: 24px;
 
@@ -29,7 +29,7 @@
     .clr-input-group-icon-action {
       @include clr-no-styles-button();
       color: $clr-forms-focused-color;
-      margin: 0 $clr-forms-baseline * 1.5;
+      padding: 0 $clr-forms-baseline * 1.5;
     }
   }
 
@@ -40,6 +40,10 @@
   .clr-error .clr-input-group {
     border-bottom-color: $clr-forms-invalid-color;
     @include input-border-bottom-animation($clr-forms-invalid-color);
-    margin-right: $clr-forms-baseline;
+    padding-right: $clr-forms-baseline;
+  }
+
+  .clr-form-horizontal .clr-input-group {
+    padding-right: 0;
   }
 }

src/clr-angular/layout/_login.clarity.scss

@@ -93,6 +93,7 @@
             & > .clr-input-group {
               max-width: 100%;
               width: 100%;
+              padding-right: 0.4rem;
 
               & > .clr-input {
                 width: calc(100% - 1rem);