fix(core/dropdownbutton): dropdown alignment (#694)

siemens · Aug 16, 2023 · 5d95a1e · 5d95a1e
1 parent 357e3b5
commit 5d95a1e
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 61 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -592,14 +592,14 @@ export declare interface IxDropdown extends Components.IxDropdown {
 
 
 @ProxyCmp({
-  inputs: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'variant']
+  inputs: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'variant']
 })
 @Component({
   selector: 'ix-dropdown-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'variant'],
+  inputs: ['active', 'disabled', 'ghost', 'icon', 'label', 'outline', 'placement', 'variant'],
 })
 export class IxDropdownButton {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -3250,6 +3250,56 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "placement",
+          "type": "\"bottom-end\" | \"bottom-start\" | \"left-end\" | \"left-start\" | \"right-end\" | \"right-start\" | \"top-end\" | \"top-start\"",
+          "mutable": false,
+          "attr": "placement",
+          "reflectToAttr": false,
+          "docs": "Placement of the dropdown",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.0.0"
+            }
+          ],
+          "values": [
+            {
+              "value": "bottom-end",
+              "type": "string"
+            },
+            {
+              "value": "bottom-start",
+              "type": "string"
+            },
+            {
+              "value": "left-end",
+              "type": "string"
+            },
+            {
+              "value": "left-start",
+              "type": "string"
+            },
+            {
+              "value": "right-end",
+              "type": "string"
+            },
+            {
+              "value": "right-start",
+              "type": "string"
+            },
+            {
+              "value": "top-end",
+              "type": "string"
+            },
+            {
+              "value": "top-start",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "variant",
           "type": "\"primary\" | \"secondary\"",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -43,22 +43,22 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.1.0",
+    "@floating-ui/dom": "^1.5.1",
     "@stencil/core": "^3.2.1",
+    "@types/luxon": "^3.3.0",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",
-    "luxon": "^3.3.0",
-    "@types/luxon": "^3.3.0"
+    "luxon": "^3.3.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.32.1",
     "@siemens/ix-icons": "^1.1.0",
-    "@stencil/vue-output-target": "^0.7.0",
     "@stencil-community/eslint-plugin": "^0.5.0",
     "@stencil-community/postcss": "^2.1.0",
     "@stencil/angular-output-target": "^0.5.0",
     "@stencil/react-output-target": "^0.4.0",
     "@stencil/sass": "~3.0.0",
+    "@stencil/vue-output-target": "^0.7.0",
     "@testing-library/dom": "^8.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@types/animejs": "^3.1.4",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -655,6 +655,11 @@ export namespace Components {
           * Outline button
          */
         "outline": boolean;
+        /**
+          * Placement of the dropdown
+          * @since 2.0.0
+         */
+        "placement": AlignedPlacement;
         /**
           * Button variant
          */
@@ -3549,6 +3554,11 @@ declare namespace LocalJSX {
           * Outline button
          */
         "outline"?: boolean;
+        /**
+          * Placement of the dropdown
+          * @since 2.0.0
+         */
+        "placement"?: AlignedPlacement;
         /**
           * Button variant
          */

diff --git a/packages/core/src/components/dropdown-button/dropdown-button.scss b/packages/core/src/components/dropdown-button/dropdown-button.scss
@@ -100,12 +100,6 @@
     }
   }
 
-  .dropdown {
-    width: auto !important;
-    inset: auto !important;
-    transform: unset !important;
-  }
-
   .content {
     display: flex;
     align-items: center;

diff --git a/packages/core/src/components/dropdown-button/dropdown-button.tsx b/packages/core/src/components/dropdown-button/dropdown-button.tsx
@@ -9,6 +9,7 @@
 
 import { Component, Element, h, Host, Prop, State } from '@stencil/core';
 import { ButtonVariant } from '../button/button';
+import { AlignedPlacement } from '../dropdown/placement';
 
 export type DropdownButtonVariant = ButtonVariant;
 
@@ -59,6 +60,13 @@ export class DropdownButton {
    */
   @Prop() icon: string;
 
+  /**
+   * Placement of the dropdown
+   *
+   * @since 2.0.0
+   */
+  @Prop() placement: AlignedPlacement;
+
   @State() dropdownAnchor!: HTMLElement;
 
   private getTriangle() {
@@ -127,7 +135,7 @@ export class DropdownButton {
         <ix-dropdown
           class="dropdown"
           trigger={this.dropdownAnchor}
-          positioningStrategy={'fixed'}
+          placement={this.placement}
         >
           <slot></slot>
         </ix-dropdown>

diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx
@@ -414,6 +414,7 @@ export class Dropdown {
           this.dropdownRef,
           positionConfig
         );
+
         Object.assign(this.dropdownRef.style, {
           top: '0',
           left: '0',

diff --git a/packages/documentation/src/components/SwitchTheme.tsx b/packages/documentation/src/components/SwitchTheme.tsx
@@ -6,12 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import {
-  IxButton,
-  IxDropdown,
-  IxDropdownItem,
-  IxIcon,
-} from '@siemens/ix-react';
+import { IxDropdownButton, IxDropdownItem } from '@siemens/ix-react';
 
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import React, { useEffect, useState } from 'react';
@@ -54,16 +49,6 @@ export function SwitchTheme(props: { icon: string; label: string }) {
       label: 'Classic Light',
       color: '#6a7f98',
     },
-    {
-      id: 'theme-legacy-classic-dark',
-      label: 'Legacy Classic Dark',
-      color: '#000',
-    },
-    {
-      id: 'theme-legacy-classic-light',
-      label: 'Legacy Classic Light',
-      color: '#6a7f98',
-    },
   ]);
 
   useEffect(() => {
@@ -112,27 +97,20 @@ export function SwitchTheme(props: { icon: string; label: string }) {
   }
 
   return (
-    <>
-      <IxButton id="switch-theme-button" outline>
-        <IxIcon name={props.icon} className="me-2" />
-        {getLabel(theme)}
-        <IxIcon name="chevron-down-small" />
-      </IxButton>
-      <IxDropdown trigger={'switch-theme-button'}>
-        {registeredThemes.map(({ id, label, color }) => {
-          return (
-            <IxDropdownItem key={id} checked={id === theme}>
-              <ThemeEntry
-                key={id}
-                id={id}
-                label={label}
-                color={color}
-                onClick={(_, id) => onThemeChange(id)}
-              />
-            </IxDropdownItem>
-          );
-        })}
-      </IxDropdown>
-    </>
+    <IxDropdownButton outline icon={props.icon} label={getLabel(theme)}>
+      {registeredThemes.map(({ id, label, color }) => {
+        return (
+          <IxDropdownItem key={id} checked={id === theme}>
+            <ThemeEntry
+              key={id}
+              id={id}
+              label={label}
+              color={color}
+              onClick={(_, id) => onThemeChange(id)}
+            />
+          </IxDropdownItem>
+        );
+      })}
+    </IxDropdownButton>
   );
 }
diff --git a/packages/vue/src/components.ts b/packages/vue/src/components.ts
@@ -228,7 +228,8 @@ export const IxDropdownButton = /*@__PURE__*/ defineContainer<JSX.IxDropdownButt
   'active',
   'disabled',
   'label',
-  'icon'
+  'icon',
+  'placement'
 ]);
 
 

diff --git a/yarn.lock b/yarn.lock
@@ -2588,17 +2588,25 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
-"@floating-ui/core@^1.0.5":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.1.0.tgz#0a1dee4bbce87ff71602625d33f711cafd8afc08"
-  integrity sha512-zbsLwtnHo84w1Kc8rScAo5GMk1GdecSlrflIbfnEBJwvTSj1SL6kkOYV+nHraMCPEy+RNZZUaZyL8JosDGCtGQ==
+"@floating-ui/core@^1.4.1":
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.4.1.tgz#0d633f4b76052668afb932492ac452f7ebe97f17"
+  integrity sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==
+  dependencies:
+    "@floating-ui/utils" "^0.1.1"
 
-"@floating-ui/dom@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.1.0.tgz#29fea1344fdef15b6ba270a733d20b7134fee5c2"
-  integrity sha512-TSogMPVxbRe77QCj1dt8NmRiJasPvuc+eT5jnJ6YpLqgOD2zXc5UA3S1qwybN+GVCDNdKfpKy1oj8RpzLJvh6A==
+"@floating-ui/dom@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.1.tgz#88b70defd002fe851f17b4a25efb2d3c04d7a8d7"
+  integrity sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==
   dependencies:
-    "@floating-ui/core" "^1.0.5"
+    "@floating-ui/core" "^1.4.1"
+    "@floating-ui/utils" "^0.1.1"
+
+"@floating-ui/utils@^0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.1.tgz#1a5b1959a528e374e8037c4396c3e825d6cf4a83"
+  integrity sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==
 
 "@gar/promisify@^1.1.3":
   version "1.1.3"