fix: remove under positioning

blidblid · Apr 14, 2023 · 5066451 · 5066451
1 parent 0fe6c3e
commit 5066451
Show file tree

Hide file tree

Showing 11 changed files with 25 additions and 113 deletions.
diff --git a/apps/demo/src/lib/components/editor/editor-form.component.html b/apps/demo/src/lib/components/editor/editor-form.component.html
@@ -71,7 +71,7 @@
       <mat-label>Top left position</mat-label>
       <mat-select [formControl]="layoutFormControls.topLeftPosition">
         <mat-option
-          *ngFor="let position of ['above', 'beside', 'under']"
+          *ngFor="let position of ['above', 'beside']"
           [value]="position"
           >{{ position }}</mat-option
         >
@@ -82,7 +82,7 @@
       <mat-label>Top right position</mat-label>
       <mat-select [formControl]="layoutFormControls.topRightPosition">
         <mat-option
-          *ngFor="let position of ['above', 'beside', 'under']"
+          *ngFor="let position of ['above', 'beside']"
           [value]="position"
           >{{ position }}</mat-option
         >
@@ -93,7 +93,7 @@
       <mat-label>Bottom left position</mat-label>
       <mat-select [formControl]="layoutFormControls.bottomLeftPosition">
         <mat-option
-          *ngFor="let position of ['below', 'beside', 'under']"
+          *ngFor="let position of ['below', 'beside']"
           [value]="position"
           >{{ position }}</mat-option
         >
@@ -104,7 +104,7 @@
       <mat-label>Bottom right position</mat-label>
       <mat-select [formControl]="layoutFormControls.bottomRightPosition">
         <mat-option
-          *ngFor="let position of ['below', 'beside', 'under']"
+          *ngFor="let position of ['below', 'beside']"
           [value]="position"
           >{{ position }}</mat-option
         >

diff --git a/libs/angular/package.json b/libs/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@berg-layout/angular",
-  "version": "5.2.0",
+  "version": "5.1.3",
   "devDependencies": {
     "@berg-layout/testing": "*"
   },

diff --git a/libs/core/package.json b/libs/core/package.json
@@ -1,4 +1,4 @@
 {
   "name": "@berg-layout/core",
-  "version": "5.2.0"
+  "version": "5.1.3"
 }
diff --git a/libs/core/src/lib/components/layout/layout-config-private.ts b/libs/core/src/lib/components/layout/layout-config-private.ts
@@ -1,17 +1,11 @@
 export const BERG_LAYOUT_CLASS = 'berg-layout';
 export const BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS = 'berg-layout-top-above-left';
 export const BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS = 'berg-layout-top-above-right';
-export const BERG_LAYOUT_TOP_UNDER_LEFT_CLASS = 'berg-layout-top-under-left';
-export const BERG_LAYOUT_TOP_UNDER_RIGHT_CLASS = 'berg-layout-top-under-right';
+export const BERG_LAYOUT_NO_TRANSITION_CLASS = 'berg-layout-no-transition';
 export const BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS =
   'berg-layout-bottom-below-left';
 export const BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS =
   'berg-layout-bottom-below-right';
-export const BERG_LAYOUT_BOTTOM_UNDER_LEFT_CLASS =
-  'berg-layout-bottom-under-left';
-export const BERG_LAYOUT_BOTTOM_UNDER_RIGHT_CLASS =
-  'berg-layout-bottom-under-right';
-  export const BERG_LAYOUT_NO_TRANSITION_CLASS = 'berg-layout-no-transition';
 export const BERG_LAYOUT_RESIZING_VERTICAL_CLASS =
   'berg-layout-resizing-vertical';
 export const BERG_LAYOUT_RESIZING_HORIZONTAL_CLASS =

diff --git a/libs/core/src/lib/components/layout/layout-model.ts b/libs/core/src/lib/components/layout/layout-model.ts
@@ -37,7 +37,7 @@ export interface BergLayoutInputs {
 export type BergLayoutInput = keyof BergLayoutInputs;
 
 /** Positions of the top panel. */
-export type BergLayoutTopPosition = 'above' | 'beside'  | 'under';
+export type BergLayoutTopPosition = 'above' | 'beside';
 
 /** Positions of the bottom panel. */
-export type BergLayoutBottomPosition = 'below' | 'beside' | 'under';
+export type BergLayoutBottomPosition = 'below' | 'beside';
diff --git a/libs/core/src/lib/components/layout/layout-util-private.ts b/libs/core/src/lib/components/layout/layout-util-private.ts
@@ -6,7 +6,7 @@ import {
 export function validateBergLayoutTopPosition(
   position: string
 ): BergLayoutTopPosition {
-  if (position !== 'above' && position !== 'beside' && position !== 'under') {
+  if (position !== 'above' && position !== 'beside') {
     throw new Error(`Invalid layout top position: ${position}`);
   }
 
@@ -16,7 +16,7 @@ export function validateBergLayoutTopPosition(
 export function validateBergLayoutBottomPosition(
   position: string
 ): BergLayoutBottomPosition {
-  if (position !== 'below' && position !== 'beside' && position !== 'under') {
+  if (position !== 'below' && position !== 'beside') {
     throw new Error(`Invalid layout bottom position: ${position}`);
   }
 

diff --git a/libs/core/src/lib/components/layout/layout.ts b/libs/core/src/lib/components/layout/layout.ts
@@ -11,13 +11,9 @@ import {
 import {
   BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS,
   BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS,
-  BERG_LAYOUT_BOTTOM_UNDER_LEFT_CLASS,
-  BERG_LAYOUT_BOTTOM_UNDER_RIGHT_CLASS,
   BERG_LAYOUT_CLASS,
   BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS,
   BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS,
-  BERG_LAYOUT_TOP_UNDER_LEFT_CLASS,
-  BERG_LAYOUT_TOP_UNDER_RIGHT_CLASS,
 } from './layout-config-private';
 import { BergLayoutInputs } from './layout-model';
 import {
@@ -52,43 +48,31 @@ export class BergLayoutElement extends WebComponent<BergLayoutInputs> {
       },
       {
         topLeftPosition: () => {
-          this.classList.remove(BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS);
-          this.classList.remove(BERG_LAYOUT_TOP_UNDER_LEFT_CLASS);
-
           if (this.values.topLeftPosition === 'above') {
             this.classList.add(BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS);
-          } else if(this.values.topLeftPosition === 'under') {
-            this.classList.add(BERG_LAYOUT_TOP_UNDER_LEFT_CLASS);
+          } else {
+            this.classList.remove(BERG_LAYOUT_TOP_ABOVE_LEFT_CLASS);
           }
         },
         topRightPosition: () => {
-          this.classList.remove(BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS);
-          this.classList.remove(BERG_LAYOUT_TOP_UNDER_RIGHT_CLASS);
-
           if (this.values.topRightPosition === 'above') {
             this.classList.add(BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS);
-          } else if(this.values.topRightPosition === 'under') {
-            this.classList.add(BERG_LAYOUT_TOP_UNDER_RIGHT_CLASS);
+          } else {
+            this.classList.remove(BERG_LAYOUT_TOP_ABOVE_RIGHT_CLASS);
           }
         },
         bottomLeftPosition: () => {
-          this.classList.remove(BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS);
-          this.classList.remove(BERG_LAYOUT_BOTTOM_UNDER_LEFT_CLASS);
-
           if (this.values.bottomLeftPosition === 'below') {
             this.classList.add(BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS);
-          } else if(this.values.bottomLeftPosition === 'under') {
-            this.classList.add(BERG_LAYOUT_BOTTOM_UNDER_LEFT_CLASS);
+          } else {
+            this.classList.remove(BERG_LAYOUT_BOTTOM_BELOW_LEFT_CLASS);
           }
         },
         bottomRightPosition: () => {
-          this.classList.remove(BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS);
-          this.classList.remove(BERG_LAYOUT_BOTTOM_UNDER_RIGHT_CLASS);
-
           if (this.values.bottomRightPosition === 'below') {
             this.classList.add(BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS);
-          } else if(this.values.bottomRightPosition === 'under') {
-            this.classList.add(BERG_LAYOUT_BOTTOM_UNDER_RIGHT_CLASS);
+          } else {
+            this.classList.remove(BERG_LAYOUT_BOTTOM_BELOW_RIGHT_CLASS);
           }
         },
         topInset: () => {

diff --git a/libs/core/src/lib/styles/_core.scss b/libs/core/src/lib/styles/_core.scss
@@ -53,11 +53,11 @@ $transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
       top: calc(var(--berg-layout-top-inset) - var(--berg-panel-top-size));
     }
 
-    .berg-layout-top-above-left &, .berg-layout-top-under-left & {
+    .berg-layout-top-above-left & {
       left: var(--berg-layout-left-inset);
     }
 
-    .berg-layout-top-above-right &, .berg-layout-top-under-right & {
+    .berg-layout-top-above-right & {
       right: var(--berg-layout-right-inset);
     }
 
@@ -123,11 +123,11 @@ $transition: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
       );
     }
 
-    .berg-layout-bottom-below-left &, .berg-layout-bottom-under-left & {
+    .berg-layout-bottom-below-left & {
       left: var(--berg-layout-left-inset);
     }
 
-    .berg-layout-bottom-below-right &, .berg-layout-bottom-under-right & {
+    .berg-layout-bottom-below-right & {
       right: var(--berg-layout-right-inset);
     }
 

diff --git a/libs/react/package.json b/libs/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@berg-layout/react",
-  "version": "5.2.0",
+  "version": "5.1.3",
   "devDependencies": {
     "@berg-layout/testing": "*"
   }

diff --git a/libs/testing/src/lib/run-layout-tests.ts b/libs/testing/src/lib/run-layout-tests.ts
@@ -32,22 +32,6 @@ export const runLayoutTests = (
         );
       });
 
-      it('should render top panel under left', async () => {
-        await render({
-          layout: {
-            topLeftPosition: 'under',
-          },
-        });
-
-        expect(harness.assertedTop.getBoundingClientRect().left).toBe(
-          harness.assertedLeft.getBoundingClientRect().left
-        );
-
-        expect(harness.assertedTop.getBoundingClientRect().top).toBe(
-          harness.assertedLeft.getBoundingClientRect().top
-        );
-      });
-
       it('should render top panel above right', async () => {
         await render({
           layout: {
@@ -72,22 +56,6 @@ export const runLayoutTests = (
         );
       });
 
-      it('should render top panel under right', async () => {
-        await render({
-          layout: {
-            topRightPosition: 'under',
-          },
-        });
-
-        expect(harness.assertedTop.getBoundingClientRect().right).toBe(
-          harness.assertedRight.getBoundingClientRect().right
-        );
-
-        expect(harness.assertedTop.getBoundingClientRect().top).toBe(
-          harness.assertedRight.getBoundingClientRect().top
-        );
-      });
-
       it('should render bottom panel below left', async () => {
         await render({
           layout: {
@@ -112,23 +80,6 @@ export const runLayoutTests = (
         );
       });
 
-      it('should render bottom panel under left', async () => {
-        await render({
-          layout: {
-            bottomLeftPosition: 'under',
-          },
-        });
-
-        expect(harness.assertedBottom.getBoundingClientRect().left).toBe(
-          harness.assertedLeft.getBoundingClientRect().left
-        );
-
-        expect(harness.assertedBottom.getBoundingClientRect().bottom).toBe(
-          harness.assertedLeft.getBoundingClientRect().bottom
-        );
-      });
-
-
       it('should render bottom panel below right', async () => {
         await render({
           layout: {
@@ -152,22 +103,6 @@ export const runLayoutTests = (
           harness.assertedRight.getBoundingClientRect().left
         );
       });
-
-      it('should render bottom panel under right', async () => {
-        await render({
-          layout: {
-            bottomRightPosition: 'under',
-          },
-        });
-
-        expect(harness.assertedBottom.getBoundingClientRect().right).toBe(
-          harness.assertedRight.getBoundingClientRect().right
-        );
-
-        expect(harness.assertedBottom.getBoundingClientRect().bottom).toBe(
-          harness.assertedRight.getBoundingClientRect().bottom
-        );
-      });
     });
 
     describe('insets', () => {

diff --git a/nx.json b/nx.json
@@ -66,6 +66,5 @@
         "style": "scss"
       }
     }
-  },
-  "defaultProject": "demo"
+  }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -66,6 +66,5 @@ @@
             "style": "scss"
           }
         }
-      },
-      "defaultProject": "demo"
+      }
     }