feat(dropdown): rename left right classes for positioning

ng-bootstrap · May 12, 2021 · da5d6d1 · da5d6d1
1 parent 486a929
commit da5d6d1
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 15 deletions.
diff --git a/demo/src/app/components/dropdown/demos/basic/dropdown-basic.html b/demo/src/app/components/dropdown/demos/basic/dropdown-basic.html
@@ -11,7 +11,7 @@
   </div>
 
   <div class="col text-right">
-    <div ngbDropdown placement="top-right" class="d-inline-block">
+    <div ngbDropdown placement="top-end" class="d-inline-block">
       <button class="btn btn-outline-primary" id="dropdownBasic2" ngbDropdownToggle>Toggle dropup</button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
         <button ngbDropdownItem>Action - 1</button>

diff --git a/demo/src/app/components/dropdown/demos/config/dropdown-config.ts b/demo/src/app/components/dropdown/demos/config/dropdown-config.ts
@@ -4,12 +4,12 @@ import {NgbDropdownConfig} from '@ng-bootstrap/ng-bootstrap';
 @Component({
   selector: 'ngbd-dropdown-config',
   templateUrl: './dropdown-config.html',
-  providers: [NgbDropdownConfig] // add NgbDropdownConfig to the component providers
+  providers: [NgbDropdownConfig]  // add NgbDropdownConfig to the component providers
 })
 export class NgbdDropdownConfig {
   constructor(config: NgbDropdownConfig) {
     // customize default values of dropdowns used by this component tree
-    config.placement = 'top-left';
+    config.placement = 'top-start';
     config.autoClose = false;
   }
 }
diff --git a/demo/src/app/components/dropdown/demos/navbar/dropdown-navbar.html b/demo/src/app/components/dropdown/demos/navbar/dropdown-navbar.html
@@ -6,7 +6,7 @@
 </p>
 <p>
   In order to align a dropdown in a navbar to the right while still keeping correct behavior when the navbar is
-  collapsed, the CSS class <code>dropdown-menu-right</code> must be added to the dropdown menu.
+  collapsed, the CSS class <code>dropdown-menu-end</code> must be added to the dropdown menu.
   The second dropdown in this example illustrates it.
 </p>
 <p>
@@ -47,14 +47,14 @@
         <a class="nav-link" tabindex="0" ngbDropdownToggle id="navbarDropdown2" role="button">
           Static right
         </a>
-        <div ngbDropdownMenu aria-labelledby="navbarDropdown2" class="dropdown-menu dropdown-menu-right">
+        <div ngbDropdownMenu aria-labelledby="navbarDropdown2" class="dropdown-menu dropdown-menu-end">
           <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Action</a>
           <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Another action</a>
           <a ngbDropdownItem href="#" (click)="$event.preventDefault()">Something else here</a>
         </div>
       </li>
 
-      <li class="nav-item" ngbDropdown display="dynamic" placement="bottom-right">
+      <li class="nav-item" ngbDropdown display="dynamic" placement="bottom-end">
         <a class="nav-link" tabindex="0" ngbDropdownToggle id="navbarDropdown3" role="button">
           Dynamic
         </a>

diff --git a/demo/src/app/shared/component-wrapper/component-wrapper.component.html b/demo/src/app/shared/component-wrapper/component-wrapper.component.html
@@ -46,7 +46,7 @@ <h1 class="mb-4 mr-auto mr-md-none">{{ component | titlecase }}</h1>
               </svg>
             </span>
 
-            <div class="dropdown-menu-right" ngbDropdownMenu>
+            <div class="dropdown-menu-end" ngbDropdownMenu>
               <ng-template ngFor [ngForOf]="tableOfContents" let-topic>
                 <a *ngIf="topic.title else divider" class="dropdown-item" [routerLink]="['.', this.activeTab]"
                   [fragment]="topic.fragment">{{topic.title}}</a>

diff --git a/demo/src/app/shared/page-wrapper/page-wrapper.component.html b/demo/src/app/shared/page-wrapper/page-wrapper.component.html
@@ -40,7 +40,7 @@ <h1 class="mt-0">{{ pageTitle }}</h1>
               <svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm-6 400H54a6 6 0 0 1-6-6V86a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v340a6 6 0 0 1-6 6zm-42-92v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm0-96v24c0 6.627-5.373 12-12 12H204c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h200c6.627 0 12 5.373 12 12zm-252 12c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36zm0 96c0 19.882-16.118 36-36 36s-36-16.118-36-36 16.118-36 36-36 36 16.118 36 36z"></path></svg>
             </span>
 
-            <div class="dropdown-menu-right" ngbDropdownMenu>
+            <div class="dropdown-menu-end" ngbDropdownMenu>
               <a *ngFor="let topic of tableOfContents"
                  class="dropdown-item" routerLink="." [fragment]="topic.fragment">{{topic.title}}</a>
             </div>

diff --git a/demo/src/style/app.scss b/demo/src/style/app.scss
@@ -1,5 +1,17 @@
 // styles in src/style directory are applied to the whole page
 
+// Temporary fix, as this classes are required for the positioning
+// They existed in bs4, and we must remove them after popper implementation
+.dropdown-menu {
+  &[x-placement^="top"],
+  &[x-placement^="end"],
+  &[x-placement^="bottom"],
+  &[x-placement^="start"] {
+    right: auto;
+    bottom: auto;
+  }
+}
+
 header.navbar {
   background: linear-gradient(135deg, #0143a3, #0273d4);
 }

diff --git a/src/dropdown/dropdown-config.spec.ts b/src/dropdown/dropdown-config.spec.ts
@@ -4,7 +4,7 @@ describe('ngb-dropdown-config', () => {
   it('should have sensible default values', () => {
     const config = new NgbDropdownConfig();
 
-    expect(config.placement).toEqual(['bottom-left', 'bottom-right', 'top-left', 'top-right']);
+    expect(config.placement).toEqual(['bottom-start', 'bottom-end', 'top-start', 'top-end']);
     expect(config.autoClose).toBe(true);
   });
 

diff --git a/src/dropdown/dropdown-config.ts b/src/dropdown/dropdown-config.ts
@@ -10,6 +10,6 @@ import {PlacementArray} from '../util/positioning';
 @Injectable({providedIn: 'root'})
 export class NgbDropdownConfig {
   autoClose: boolean | 'outside' | 'inside' = true;
-  placement: PlacementArray = ['bottom-left', 'bottom-right', 'top-left', 'top-right'];
+  placement: PlacementArray = ['bottom-start', 'bottom-end', 'top-start', 'top-end'];
   container: null | 'body';
 }
diff --git a/src/dropdown/dropdown.spec.ts b/src/dropdown/dropdown.spec.ts
@@ -413,7 +413,7 @@ describe('ngb-dropdown-toggle', () => {
 
   it(`should second placement if the first one doesn't fit`, () => {
     const html = `
-      <div ngbDropdown placement="left-top right-top">
+      <div ngbDropdown placement="start-top end-top">
           <button ngbDropdownToggle>
             <span class="toggle">Toggle dropdown</span>
           </button>

diff --git a/src/dropdown/dropdown.ts b/src/dropdown/dropdown.ts
@@ -173,13 +173,13 @@ export class NgbDropdown implements AfterContentInit, OnDestroy {
   /**
    * The preferred placement of the dropdown.
    *
-   * Possible values are `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`,
-   * `"bottom-right"`, `"left"`, `"left-top"`, `"left-bottom"`, `"right"`, `"right-top"`,
-   * `"right-bottom"`
+   * Possible values are `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`,
+   * `"bottom-end"`, `"start"`, `"start-top"`, `"start-bottom"`, `"end"`, `"end-top"`,
+   * `"end-bottom"`
    *
    * Accepts an array of strings or a string with space separated possible values.
    *
-   * The default order of preference is `"bottom-left bottom-right top-left top-right"`
+   * The default order of preference is `"bottom-start bottom-end top-start top-end"`
    *
    * Please see the [positioning overview](#/positioning) for more details.
    */