Merge pull request #630 from takenet/bugfix/position-dropdown

fix(dropdown): adding property to position the dropdown manually
takenet · Jul 17, 2023 · 4ed09f8 · 4ed09f8
2 parents 74fa8d6 + 76aeca1
commit 4ed09f8
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 8 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -25,7 +25,7 @@ import { typeDate } from "./components/datepicker/datepicker";
 import { languages } from "./utils/languages";
 import { DaysList } from "./components/datepicker/datepicker-interface";
 import { stateSelect } from "./components/datepicker/datepicker-period/datepicker-period";
-import { activeMode } from "./components/dropdown/dropdown";
+import { activeMode, DropdownPostionType } from "./components/dropdown/dropdown";
 import { alignItems, breakpoint, direction, flexWrap, gap, justifyContent, margin, padding } from "./components/grid/grid-interface";
 import { IconSize, IconTheme, IconType as IconType1 } from "./components/icon/icon-interface";
 import { IllustrationType } from "./components/illustration/illustration-interface";
@@ -580,6 +580,10 @@ export namespace Components {
           * Open. Used to open/close the dropdown.
          */
         "open"?: boolean;
+        /**
+          * Used to set tooltip position
+         */
+        "position"?: DropdownPostionType;
         "toggle": () => Promise<void>;
     }
     interface BdsExpansionPanel {
@@ -3273,6 +3277,10 @@ declare namespace LocalJSX {
           * Open. Used to open/close the dropdown.
          */
         "open"?: boolean;
+        /**
+          * Used to set tooltip position
+         */
+        "position"?: DropdownPostionType;
     }
     interface BdsExpansionPanel {
     }

diff --git a/src/components/dropdown/dropdown.scss b/src/components/dropdown/dropdown.scss
@@ -42,6 +42,10 @@
       left: 0;
     }
 
+    &__center {
+      left: calc(50% - 122px);
+    }
+
     &__right {
       right: 0;
     }

diff --git a/src/components/dropdown/dropdown.tsx b/src/components/dropdown/dropdown.tsx
@@ -14,9 +14,19 @@ import {
 import { getScrollParent, positionAbsoluteElement } from '../../utils/position-element';
 
 export type activeMode = 'hover' | 'click';
-export type dropdownPosition = 'bottom' | 'right';
+export type dropVerticalPosition = 'bottom' | 'top';
+export type dropHorizontalPosition = 'left' | 'center' | 'right';
 export type subMenuState = 'close' | 'pending' | 'open';
 
+export type DropdownPostionType =
+  | 'auto'
+  | 'top-center'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'bottom-left';
+
 @Component({
   tag: 'bds-dropdown',
   styleUrl: 'dropdown.scss',
@@ -46,6 +56,11 @@ export class BdsDropdown implements ComponentInterface {
    */
   @Prop({ mutable: true, reflect: true }) public open?: boolean = false;
 
+  /**
+   * Used to set tooltip position
+   */
+  @Prop() position?: DropdownPostionType = 'auto';
+
   /**
    * bdsToggle. Event to return selected date value.
    */
@@ -65,7 +80,17 @@ export class BdsDropdown implements ComponentInterface {
   }
 
   componentDidLoad() {
-    this.validatePositionDrop();
+    if (this.position != 'auto') {
+      this.setDefaultPlacement(this.position);
+    } else {
+      this.validatePositionDrop();
+    }
+  }
+
+  private setDefaultPlacement(value: DropdownPostionType) {
+    const arrayPosition = value.split('-');
+    this.dropElement.classList.add(`dropdown__basic__${arrayPosition[0]}`);
+    this.dropElement.classList.add(`dropdown__basic__${arrayPosition[1]}`);
   }
 
   private validatePositionDrop() {
@@ -85,7 +110,12 @@ export class BdsDropdown implements ComponentInterface {
 
   @Watch('open')
   protected isOpenChanged(open: boolean): void {
-    if (open) this.validatePositionDrop();
+    if (open)
+      if (this.position != 'auto') {
+        this.setDefaultPlacement(this.position);
+      } else {
+        this.validatePositionDrop();
+      }
   }
 
   @Method()

diff --git a/src/components/dropdown/readme.md b/src/components/dropdown/readme.md
@@ -7,10 +7,11 @@
 
 ## Properties
 
-| Property     | Attribute     | Description                            | Type                 | Default   |
-| ------------ | ------------- | -------------------------------------- | -------------------- | --------- |
-| `activeMode` | `active-mode` | Open. Used to open/close the dropdown. | `"click" \| "hover"` | `'click'` |
-| `open`       | `open`        | Open. Used to open/close the dropdown. | `boolean`            | `false`   |
+| Property     | Attribute     | Description                            | Type                                                                                                        | Default   |
+| ------------ | ------------- | -------------------------------------- | ----------------------------------------------------------------------------------------------------------- | --------- |
+| `activeMode` | `active-mode` | Open. Used to open/close the dropdown. | `"click" \| "hover"`                                                                                        | `'click'` |
+| `open`       | `open`        | Open. Used to open/close the dropdown. | `boolean`                                                                                                   | `false`   |
+| `position`   | `position`    | Used to set tooltip position           | `"auto" \| "bottom-center" \| "bottom-left" \| "bottom-right" \| "top-center" \| "top-left" \| "top-right"` | `'auto'`  |
 
 
 ## Events