fix: change custom-select by form-select

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

Hide file tree

Showing 8 changed files with 12 additions and 13 deletions.
diff --git a/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.html b/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.html
@@ -21,24 +21,24 @@
 <hr/>
 
 <div class="d-flex flex-wrap align-content-between p-2">
-  <select class="custom-select" [(ngModel)]="displayMonths">
+  <select class="form-select" [(ngModel)]="displayMonths">
     <option [ngValue]="1">One month</option>
     <option [ngValue]="2">Two months</option>
     <option [ngValue]="3">Three months</option>
   </select>
 
-  <select class="custom-select" [(ngModel)]="navigation">
+  <select class="form-select" [(ngModel)]="navigation">
     <option value="none">Without navigation</option>
     <option value="select">With select boxes</option>
     <option value="arrows">Without select boxes</option>
   </select>
 
-  <select class="custom-select" [(ngModel)]="showWeekNumbers">
+  <select class="form-select" [(ngModel)]="showWeekNumbers">
     <option [ngValue]="true">Week numbers</option>
     <option [ngValue]="false">No week numbers</option>
   </select>
 
-  <select class="custom-select" [(ngModel)]="outsideDays">
+  <select class="form-select" [(ngModel)]="outsideDays">
     <option value="visible">Visible outside days</option>
     <option value="hidden">Hidden outside days</option>
     <option value="collapsed">Collapsed outside days</option>

diff --git a/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.ts b/demo/src/app/components/datepicker/demos/multiple/datepicker-multiple.ts
@@ -4,14 +4,13 @@ import {Component} from '@angular/core';
   selector: 'ngbd-datepicker-multiple',
   templateUrl: './datepicker-multiple.html',
   styles: [`
-    select.custom-select {
+    select.form-select {
       margin: 0.5rem 0.5rem 0 0;
       width: auto;
     }
   `]
 })
 export class NgbdDatepickerMultiple {
-
   displayMonths = 2;
   navigation = 'select';
   showWeekNumbers = false;

diff --git a/demo/src/app/components/datepicker/demos/positiontarget/datepicker-positiontarget.html b/demo/src/app/components/datepicker/demos/positiontarget/datepicker-positiontarget.html
@@ -18,7 +18,7 @@
 <div class="row">
   <div class="col-sm-3">
     <label for="placement">Placement</label>
-    <select id="placement" class="custom-select form-control" [(ngModel)]="placement">
+    <select id="placement" class="form-select form-control" [(ngModel)]="placement">
       <option value="top">Top</option>
       <option value="bottom">Bottom</option>
       <option value="left">Left</option>

diff --git a/demo/src/app/components/table/demos/complete/table-complete.html b/demo/src/app/components/table/demos/complete/table-complete.html
@@ -40,7 +40,7 @@
       [collectionSize]="(total$ | async)!" [(page)]="service.page" [pageSize]="service.pageSize">
     </ngb-pagination>
 
-    <select class="custom-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
+    <select class="form-select" style="width: auto" name="pageSize" [(ngModel)]="service.pageSize">
       <option [ngValue]="2">2 items per page</option>
       <option [ngValue]="4">4 items per page</option>
       <option [ngValue]="6">6 items per page</option>

diff --git a/demo/src/app/components/table/demos/pagination/table-pagination.html b/demo/src/app/components/table/demos/pagination/table-pagination.html
@@ -26,7 +26,7 @@
   <ngb-pagination [collectionSize]="collectionSize" [(page)]="page" [pageSize]="pageSize" (pageChange)="refreshCountries()">
   </ngb-pagination>
 
-  <select class="custom-select" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="refreshCountries()">
+  <select class="form-select" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="refreshCountries()">
     <option [ngValue]="2">2 items per page</option>
     <option [ngValue]="4">4 items per page</option>
     <option [ngValue]="6">6 items per page</option>

diff --git a/demo/src/style/app.scss b/demo/src/style/app.scss
@@ -410,7 +410,7 @@ ngb-datepicker.rtl {
   direction: rtl;
 }
 
-ngb-datepicker.rtl ngb-datepicker-navigation-select select.custom-select {
+ngb-datepicker.rtl ngb-datepicker-navigation-select select.form-select {
   background-position: left 0.25rem center;
 }
 

diff --git a/src/datepicker/datepicker-navigation-select.scss b/src/datepicker/datepicker-navigation-select.scss
@@ -1,4 +1,4 @@
-ngb-datepicker-navigation-select > .custom-select {
+ngb-datepicker-navigation-select > .form-select {
   flex: 1 1 auto;
   padding: 0 0.5rem;
   font-size: 0.875rem;

diff --git a/src/datepicker/datepicker-navigation-select.ts b/src/datepicker/datepicker-navigation-select.ts
@@ -22,15 +22,15 @@ import {NgbDatepickerI18n} from './datepicker-i18n';
   template: `
     <select #month
       [disabled]="disabled"
-      class="custom-select"
+      class="form-select"
       i18n-aria-label="@@ngb.datepicker.select-month" aria-label="Select month"
       i18n-title="@@ngb.datepicker.select-month" title="Select month"
       (change)="changeMonth($any($event).target.value)">
         <option *ngFor="let m of months" [attr.aria-label]="i18n.getMonthFullName(m, date?.year)"
                 [value]="m">{{ i18n.getMonthShortName(m, date?.year) }}</option>
     </select><select #year
       [disabled]="disabled"
-      class="custom-select"
+      class="form-select"
       i18n-aria-label="@@ngb.datepicker.select-year" aria-label="Select year"
       i18n-title="@@ngb.datepicker.select-year" title="Select year"
       (change)="changeYear($any($event).target.value)">