feat(split-button): add placement and flipPlacements property (#9548)

**Related Issue:** #9542 ## Summary - add placement and flipPlacements property - add tests - add story
Esri · Jun 10, 2024 · bc2c2c6 · bc2c2c6
1 parent e0ef6f5
commit bc2c2c6
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 3 deletions.
diff --git a/packages/calcite-components/src/components/split-button/split-button.e2e.ts b/packages/calcite-components/src/components/split-button/split-button.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
-import { accessible, defaults, disabled, focusable, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, disabled, focusable, hidden, reflects, renders } from "../../tests/commonTests";
 
 describe("calcite-split-button", () => {
   describe("defaults", () => {
@@ -9,6 +9,23 @@ describe("calcite-split-button", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "flipPlacements",
+        defaultValue: undefined,
+      },
+      {
+        propertyName: "placement",
+        defaultValue: "bottom-end",
+      },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-split-button", [
+      {
+        propertyName: "placement",
+        value: "bottom-end",
+      },
     ]);
   });
 

diff --git a/packages/calcite-components/src/components/split-button/split-button.stories.ts b/packages/calcite-components/src/components/split-button/split-button.stories.ts
@@ -2,6 +2,7 @@ import { iconNames } from "../../../.storybook/helpers";
 import { boolean, modesDarkDefault } from "../../../.storybook/utils";
 import { html } from "../../../support/formatting";
 import { ATTRIBUTES } from "../../../.storybook/resources";
+import { menuPlacements } from "../../utils/floating-ui";
 import { SplitButton } from "./split-button";
 const { appearance, kind, scale, width, iconType } = ATTRIBUTES;
 
@@ -13,6 +14,7 @@ type SplitButtonStoryArgs = Pick<
   | "width"
   | "loading"
   | "disabled"
+  | "placement"
   | "primaryIconStart"
   | "primaryText"
   | "primaryLabel"
@@ -29,6 +31,7 @@ export default {
     width: width.defaultValue,
     loading: false,
     disabled: false,
+    placement: "bottom-end",
     primaryIconStart: iconNames[0],
     primaryText: "Primary Option",
     primaryLabel: "Primary Option",
@@ -52,6 +55,10 @@ export default {
       options: width.values,
       control: { type: "select" },
     },
+    placement: {
+      options: menuPlacements,
+      control: { type: "select" },
+    },
     primaryIconStart: {
       options: iconNames,
       control: { type: "select" },
@@ -73,6 +80,7 @@ export const simple = (args: SplitButtonStoryArgs): string => html`
       width="${args.width}"
       ${boolean("loading", args.loading)}
       ${boolean("disabled", args.disabled)}
+      placement="${args.placement}"
       primary-icon-start="${args.primaryIconStart}"
       primary-text="${args.primaryText}"
       primary-label="${args.primaryLabel}"
@@ -168,6 +176,31 @@ export const iconStartAndIconEnd = (): string => html`
   </div>
 `;
 
+export const placementTopStart = (): string => html`
+  <div style="width:70vw;">
+    <calcite-split-button
+      active
+      appearance="solid"
+      kind="brand"
+      scale="m"
+      width="auto"
+      placement="top-start"
+      primary-icon-start="${iconNames[0]}"
+      primary-icon-end="${iconNames[0]}"
+      primary-text="Primary Option"
+      primary-label="Primary Option"
+      dropdown-label="Additional Options"
+      dropdown-icon-type="chevron"
+    >
+      <calcite-dropdown-group selection-mode="none">
+        <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+        <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-split-button>
+  </div>
+`;
+
 export const darkModeRTL_TestOnly = (): string => html`
   <div style="width:70vw;">
     <calcite-split-button

diff --git a/packages/calcite-components/src/components/split-button/split-button.tsx b/packages/calcite-components/src/components/split-button/split-button.tsx
@@ -9,7 +9,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { OverlayPositioning } from "../../utils/floating-ui";
+import { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui";
 import {
   connectInteractive,
   disconnectInteractive,
@@ -84,6 +84,11 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
   /** Accessible name for the dropdown menu. */
   @Prop({ reflect: true }) dropdownLabel: string;
 
+  /**
+   * Defines the available placements that can be used when a flip occurs.
+   */
+  @Prop() flipPlacements: FlipPlacement[];
+
   /**
     When `true`, a busy indicator is displayed on the primary button.
    */
@@ -99,6 +104,13 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
    */
   @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
 
+  /**
+   * Determines where the component will be positioned relative to the container element.
+   *
+   * @default "bottom-end"
+   */
+  @Prop({ reflect: true }) placement: MenuPlacement = "bottom-end";
+
   /** Specifies an icon to display at the end of the primary button. */
   @Prop({ reflect: true }) primaryIconEnd: string;
 
@@ -207,10 +219,11 @@ export class SplitButton implements InteractiveComponent, LoadableComponent {
           </div>
           <calcite-dropdown
             disabled={this.disabled}
+            flipPlacements={this.flipPlacements}
             onClick={this.calciteSplitButtonSecondaryClickHandler}
             open={this.active}
             overlayPositioning={this.overlayPositioning}
-            placement="bottom-end"
+            placement={this.placement}
             scale={this.scale}
             width-scale={this.scale}
           >