From 28670f6a6ba738f0fc5ff3c3d0c13fbef6533b7a Mon Sep 17 00:00:00 2001 From: edleeks87 Date: Mon, 23 Sep 2024 11:23:49 +0100 Subject: [PATCH] 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 --- .../select-list/select-list.component.tsx | 2 +- .../filterable-select.component.tsx | 3 +-- .../filterable-select/filterable-select.pw.tsx | 10 ---------- .../filterable-select.spec.tsx | 2 +- .../multi-select/multi-select.component.tsx | 2 +- .../select/multi-select/multi-select.pw.tsx | 10 ---------- .../select/multi-select/multi-select.spec.tsx | 2 +- .../simple-select-test.stories.tsx | 18 +----------------- .../simple-select/simple-select.component.tsx | 2 +- .../select/simple-select/simple-select.pw.tsx | 14 -------------- .../simple-select/simple-select.spec.tsx | 2 +- 11 files changed, 8 insertions(+), 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 index ef4b71f512..6b819c40e6 100644 --- 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 index 1bff2994ba..20a97a9ba0 100644 --- 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 index 4c32dbbad6..3203ac64f9 100644 --- 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 index 0f8f65bc36..b3c1f1ca56 100644 --- 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 index 335c32ec0f..157fa42eca 100644 --- 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 index 059ec4f0dd..535bb49feb 100644 --- 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 index 2294a0ca9d..577ab863da 100644 --- 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 index ea52e73bc4..37c2dc206e 100644 --- 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 index 63e839bb8c..f26a9f1f2b 100644 --- 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 index 3f3788b1eb..0e30ffc5bd 100644 --- 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 index 51e9edf36c..9ad6feab58 100644 --- 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 });