fix: icon layout in input-group

ng-bootstrap · May 12, 2021 · e4ac56a · e4ac56a
1 parent 5ec43b6
commit e4ac56a
Show file tree

Hide file tree

Showing 12 changed files with 16 additions and 42 deletions.
diff --git a/demo/src/app/components/datepicker/demos/adapter/datepicker-adapter.html b/demo/src/app/components/datepicker/demos/adapter/datepicker-adapter.html
@@ -23,9 +23,7 @@
         <div class="input-group">
           <input class="form-control" placeholder="dd/mm/yyyy"
                  name="d2" #c2="ngModel" [(ngModel)]="model2" ngbDatepicker #d2="ngbDatepicker">
-          <div class="input-group-append">
-            <button class="btn btn-outline-secondary calendar" (click)="d2.toggle()" type="button"></button>
-          </div>
+          <button class="btn btn-outline-secondary calendar" (click)="d2.toggle()" type="button"></button>
         </div>
       </div>
     </form>

diff --git a/demo/src/app/components/datepicker/demos/config/datepicker-config.html b/demo/src/app/components/datepicker/demos/config/datepicker-config.html
@@ -5,9 +5,7 @@
     <div class="input-group">
       <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
-      </div>
+      <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
     </div>
   </div>
 </form>
diff --git a/demo/src/app/components/datepicker/demos/customday/datepicker-customday.html b/demo/src/app/components/datepicker/demos/customday/datepicker-customday.html
@@ -5,9 +5,7 @@
     <div class="input-group">
       <input class="form-control" placeholder="yyyy-mm-dd"
              name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled" #d="ngbDatepicker">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
-      </div>
+      <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
     </div>
   </div>
 </form>

diff --git a/demo/src/app/components/datepicker/demos/footertemplate/datepicker-footertemplate.html b/demo/src/app/components/datepicker/demos/footertemplate/datepicker-footertemplate.html
@@ -5,9 +5,7 @@
     <div class="input-group">
       <input class="form-control" placeholder="yyyy-mm-dd"
              name="dp" [(ngModel)]="model" ngbDatepicker [footerTemplate]="footerTemplate" #d="ngbDatepicker">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
-      </div>
+      <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
     </div>
   </div>
 </form>

diff --git a/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.html b/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.html
@@ -11,9 +11,7 @@
       <input class="form-control" placeholder="yyyy-mm-dd"
              name="dp" [displayMonths]="displayMonths" [navigation]="navigation" [outsideDays]="outsideDays"
              [showWeekNumbers]="showWeekNumbers" ngbDatepicker #d="ngbDatepicker">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
-      </div>
+      <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
     </div>
   </div>
 </form>

diff --git a/demo/src/app/components/datepicker/demos/popup/datepicker-popup.html b/demo/src/app/components/datepicker/demos/popup/datepicker-popup.html
@@ -3,9 +3,7 @@
     <div class="input-group">
       <input class="form-control" placeholder="yyyy-mm-dd"
              name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
-      </div>
+      <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
     </div>
   </div>
 </form>

diff --git a/demo/src/app/components/datepicker/demos/positiontarget/datepicker-positiontarget.html b/demo/src/app/components/datepicker/demos/positiontarget/datepicker-positiontarget.html
@@ -6,9 +6,7 @@
       <input class="form-control" placeholder="yyyy-mm-dd"
              name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker"
              [placement]="placement" [positionTarget]="buttonEl">
-      <div class="input-group-append">
-        <button #buttonEl class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
-      </div>
+      <button #buttonEl class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
     </div>
   </div>
 </form>

diff --git a/demo/src/app/components/datepicker/demos/range-popup/datepicker-range-popup.html b/demo/src/app/components/datepicker/demos/range-popup/datepicker-range-popup.html
@@ -31,9 +31,7 @@
              name="dpFromDate"
              [value]="formatter.format(fromDate)"
              (input)="fromDate = validateInput(fromDate, dpFromDate.value)">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button>
-      </div>
+      <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button>
     </div>
   </div>
   <div class="form-group ms-2">
@@ -43,9 +41,7 @@
              name="dpToDate"
              [value]="formatter.format(toDate)"
              (input)="toDate = validateInput(toDate, dpToDate.value)">
-      <div class="input-group-append">
-        <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button>
-      </div>
+      <button class="btn btn-outline-secondary calendar" (click)="datepicker.toggle()" type="button"></button>
     </div>
   </div>
 </form>

diff --git a/demo/src/app/components/modal/demos/basic/modal-basic.html b/demo/src/app/components/modal/demos/basic/modal-basic.html
@@ -11,9 +11,7 @@ <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
         <label for="dateOfBirth">Date of birth</label>
         <div class="input-group">
           <input id="dateOfBirth" class="form-control" placeholder="yyyy-mm-dd" name="dp" ngbDatepicker #dp="ngbDatepicker">
-          <div class="input-group-append">
-            <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
-          </div>
+          <button class="btn btn-outline-secondary calendar" (click)="dp.toggle()" type="button"></button>
         </div>
       </div>
     </form>

diff --git a/e2e-app/src/app/datepicker/focus/datepicker-focus.component.html b/e2e-app/src/app/datepicker/focus/datepicker-focus.component.html
@@ -6,11 +6,9 @@ <h3>Datepicker focus tests</h3>
       <input class="form-control" name="dp" placeholder="yyyy-mm-dd" #d="ngbDatepicker" ngbDatepicker [(ngModel)]="model"
              [disabled]="disabled" [minDate]="{year: 2000, month: 1, day: 1}" [maxDate]="{year: 2100, month: 1, day: 1}"
              [startDate]="startDate">
-      <div class="input-group-append">
-        <div tabindex="0" class="btn btn-outline-secondary" role="button" id="toggle" (click)="d.toggle()">Toggle</div>
-        <button class="btn btn-outline-secondary" type="button" id="selectDate" (click)="model = {year: 2018, month: 8, day: 10}">10
-          AUG 2018</button>
-      </div>
+      <div tabindex="0" class="btn btn-outline-secondary" role="button" id="toggle" (click)="d.toggle()">Toggle</div>
+      <button class="btn btn-outline-secondary" type="button" id="selectDate" (click)="model = {year: 2018, month: 8, day: 10}">10
+        AUG 2018</button>
     </div>
 
     <div ngbDropdown class="d-inline-block ms-3">

diff --git a/e2e-app/src/app/modal/nesting/modal-nesting.component.html b/e2e-app/src/app/modal/nesting/modal-nesting.component.html
@@ -15,9 +15,7 @@ <h4 class="modal-title">Modal with nested popups</h4>
         <div class="input-group">
           <input id="datepicker" class="form-control" placeholder="yyyy-mm-dd" name="dp"
                  ngbDatepicker #dp="ngbDatepicker" [startDate]="{year: 2018, month: 1}">
-          <div class="input-group-append">
-            <button class="btn btn-outline-secondary" id="datepicker-button" (click)="dp.toggle()" type="button">Open</button>
-          </div>
+          <button class="btn btn-outline-secondary" id="datepicker-button" (click)="dp.toggle()" type="button">Open</button>
         </div>
       </div>
 

diff --git a/ssr-app/src/app/components/datepicker.component.ts b/ssr-app/src/app/components/datepicker.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'datepicker-component',
@@ -12,9 +12,7 @@ import { Component } from '@angular/core';
         <div class="input-group">
           <input class="form-control" placeholder="yyyy-mm-dd"
                  name="popup" [(ngModel)]="model2" ngbDatepicker #d="ngbDatepicker">
-          <div class="input-group-append">
-            <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">Open</button>
-          </div>
+          <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">Open</button>
         </div>
       </div>
     </form>