feat(select): remove support for rendering list to left and right of …

…input Removes `left` and `right` options from `listPlacement` type, only `top` and `bottom` remain supported BREAKING CHANGE: `listPlacement` prop only supports `top` and `bottom` now
Sage · Sep 26, 2024 · 28670f6 · 28670f6
1 parent cbed470
commit 28670f6
Show file tree

Hide file tree

Showing 11 changed files with 8 additions and 59 deletions.
diff --git a/src/components/select/__internal__/select-list/select-list.component.tsx b/src/components/select/__internal__/select-list/select-list.component.tsx
@@ -78,7 +78,7 @@ export interface SelectListProps {
   /** When true component will work in multi column mode, children should consist of OptionRow components in this mode */
   multiColumn?: boolean;
   /** Placement of the select list relative to the input element */
-  listPlacement?: Side;
+  listPlacement?: "top" | "bottom";
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled?: boolean;
   /** @private @ignore

diff --git a/src/components/select/filterable-select/filterable-select.component.tsx b/src/components/select/filterable-select/filterable-select.component.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import invariant from "invariant";
-import { Side } from "@floating-ui/dom";
 
 import { ButtonProps } from "../../button";
 import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
@@ -73,7 +72,7 @@ export interface FilterableSelectProps
   /** Maximum list height - defaults to 180 */
   listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
-  listPlacement?: Side;
+  listPlacement?: "top" | "bottom";
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled?: boolean;
   /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the

diff --git a/src/components/select/filterable-select/filterable-select.pw.tsx b/src/components/select/filterable-select/filterable-select.pw.tsx
@@ -833,8 +833,6 @@ test.describe("FilterableSelect component", () => {
   ([
     ["top", "0px", "0px", "0px", "20px"],
     ["bottom", "600px", "0px", "0px", "20px"],
-    ["left", "200px", "0px", "0px", "900px"],
-    ["right", "200px", "0px", "500px", "20px"],
   ] as [
     FilterableSelectProps["listPlacement"],
     string,
@@ -864,12 +862,6 @@ test.describe("FilterableSelect component", () => {
       if (position === "bottom") {
         flipPosition = "top";
       }
-      if (position === "left") {
-        flipPosition = "right";
-      }
-      if (position === "right") {
-        flipPosition = "left";
-      }
       await dropdownButton(page).click();
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
@@ -2005,8 +1997,6 @@ test.describe("Accessibility tests for FilterableSelect component", () => {
   ([
     ["top", "0px", "0px", "0px", "20px"],
     ["bottom", "600px", "0px", "0px", "20px"],
-    ["left", "200px", "0px", "0px", "900px"],
-    ["right", "200px", "0px", "500px", "20px"],
   ] as [
     FilterableSelectProps["listPlacement"],
     string,

diff --git a/src/components/select/filterable-select/filterable-select.spec.tsx b/src/components/select/filterable-select/filterable-select.spec.tsx
@@ -487,7 +487,7 @@ describe("FilterableSelect", () => {
         ).toBeVisible();
       });
 
-      it.each(["top", "bottom", "right", "left"])(
+      it.each(["top", "bottom"])(
         "the listPlacement prop should be passed",
         (listPlacement) => {
           const wrapper = renderSelect({ listPlacement });

diff --git a/src/components/select/multi-select/multi-select.component.tsx b/src/components/select/multi-select/multi-select.component.tsx
@@ -77,7 +77,7 @@ export interface MultiSelectProps
   /** Maximum list height - defaults to 180 */
   listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
-  listPlacement?: Side;
+  listPlacement?: "top" | "bottom";
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled?: boolean;
   /** Wraps the pill text when it would overflow the input width */

diff --git a/src/components/select/multi-select/multi-select.pw.tsx b/src/components/select/multi-select/multi-select.pw.tsx
@@ -735,8 +735,6 @@ test.describe("MultiSelect component", () => {
   ([
     ["top", "0px", "0px", "0px", "20px"],
     ["bottom", "600px", "0px", "0px", "20px"],
-    ["left", "200px", "0px", "0px", "900px"],
-    ["right", "200px", "0px", "500px", "20px"],
   ] as [
     MultiSelectProps["listPlacement"],
     string,
@@ -766,12 +764,6 @@ test.describe("MultiSelect component", () => {
       if (position === "bottom") {
         flipPosition = "top";
       }
-      if (position === "left") {
-        flipPosition = "right";
-      }
-      if (position === "right") {
-        flipPosition = "left";
-      }
       await dropdownButton(page).click();
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
@@ -1838,8 +1830,6 @@ test.describe("Accessibility tests for MultiSelect component", () => {
   ([
     ["top", "0px", "0px", "0px", "20px"],
     ["bottom", "600px", "0px", "0px", "20px"],
-    ["left", "200px", "0px", "0px", "900px"],
-    ["right", "200px", "0px", "500px", "20px"],
   ] as [
     MultiSelectProps["listPlacement"],
     string,

diff --git a/src/components/select/multi-select/multi-select.spec.tsx b/src/components/select/multi-select/multi-select.spec.tsx
@@ -299,7 +299,7 @@ describe("MultiSelect", () => {
     });
   });
 
-  it.each(["top", "bottom", "right", "left"])(
+  it.each(["top", "bottom"])(
     "the listPlacement prop should be passed",
     (listPlacement) => {
       const wrapper = renderSelect({ listPlacement });

diff --git a/src/components/select/simple-select/simple-select-test.stories.tsx b/src/components/select/simple-select/simple-select-test.stories.tsx
@@ -34,23 +34,7 @@ export default {
     "data-element": { table: { disable: true }, control: false },
     "data-role": { table: { disable: true }, control: false },
     listPlacement: {
-      options: [
-        "auto",
-        "auto-start",
-        "auto-end",
-        "top",
-        "top-start",
-        "top-end",
-        "bottom",
-        "bottom-start",
-        "bottom-end",
-        "right",
-        "right-start",
-        "right-end",
-        "left",
-        "left-start",
-        "left-end",
-      ],
+      options: ["bottom", "top"],
       control: {
         type: "select",
       },

diff --git a/src/components/select/simple-select/simple-select.component.tsx b/src/components/select/simple-select/simple-select.component.tsx
@@ -80,7 +80,7 @@ export interface SimpleSelectProps
   /** Maximum list height - defaults to 180 */
   listMaxHeight?: number;
   /** Placement of the select list in relation to the input element */
-  listPlacement?: Side;
+  listPlacement?: "top" | "bottom";
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled?: boolean;
   /** Set this prop to enable a virtualised list of options. If it is not used then all options will be in the

diff --git a/src/components/select/simple-select/simple-select.pw.tsx b/src/components/select/simple-select/simple-select.pw.tsx
@@ -929,8 +929,6 @@ test.describe("SimpleSelect component", () => {
   ([
     ["top", "300px", "0px", "200px", "20px"],
     ["bottom", "0px", "0px", "0px", "20px"],
-    ["left", "200px", "0px", "500px", "20px"],
-    ["right", "200px", "0px", "0px", "500px"],
   ] as const).forEach(([position, top, bottom, left, right]) => {
     test(`should render list in ${position} position when margins are top ${top}, bottom ${bottom}, left ${left} and right ${right}`, async ({
       mount,
@@ -959,8 +957,6 @@ test.describe("SimpleSelect component", () => {
   ([
     ["top", "0px", "0px", "0px", "20px"],
     ["bottom", "600px", "0px", "0px", "20px"],
-    ["left", "200px", "0px", "0px", "900px"],
-    ["right", "200px", "0px", "500px", "20px"],
   ] as [
     SimpleSelectProps["listPlacement"],
     string,
@@ -990,12 +986,6 @@ test.describe("SimpleSelect component", () => {
       if (position === "bottom") {
         flipPosition = "top";
       }
-      if (position === "left") {
-        flipPosition = "right";
-      }
-      if (position === "right") {
-        flipPosition = "left";
-      }
       await selectText(page).click();
       const listElement = selectListPosition(page);
       await expect(listElement).toHaveAttribute(
@@ -1784,8 +1774,6 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
   ([
     ["top", "300px", "0px", "200px", "20px"],
     ["bottom", "0px", "0px", "0px", "20px"],
-    ["left", "200px", "0px", "500px", "20px"],
-    ["right", "200px", "0px", "0px", "500px"],
   ] as [
     SimpleSelectProps["listPlacement"],
     string,
@@ -1815,8 +1803,6 @@ test.describe("Accessibility tests for SimpleSelect component", () => {
   ([
     ["top", "0px", "0px", "0px", "20px"],
     ["bottom", "600px", "0px", "0px", "20px"],
-    ["left", "200px", "0px", "0px", "900px"],
-    ["right", "200px", "0px", "500px", "20px"],
   ] as [
     SimpleSelectProps["listPlacement"],
     string,

diff --git a/src/components/select/simple-select/simple-select.spec.tsx b/src/components/select/simple-select/simple-select.spec.tsx
@@ -522,7 +522,7 @@ describe("SimpleSelect", () => {
       });
     });
 
-    it.each(["top", "bottom", "right", "left"])(
+    it.each(["top", "bottom"])(
       "the listPlacement prop should be passed",
       (listPlacement) => {
         const wrapper = renderSelect({ listPlacement });