feat(Select): migrate to Tailwind

BREAKING CHANGE: Select component no longer has the `readOnly` prop. The `readOnly` prop was passed directly to the native HTML select element as an attribute, which is not supported. > The attribute is not supported or relevant to <select> or input types that ... https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
kiwicom · Nov 6, 2023 · 5b731ab · 5b731ab
1 parent 5930ffd
commit 5b731ab
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 882 deletions.
diff --git a/packages/orbit-components/src/Select/README.md b/packages/orbit-components/src/Select/README.md
@@ -35,7 +35,6 @@ Table below contains all types of the props available in the Select component.
 | prefix          | `React.Node`               |         | The prefix component for the Select. [See Functional specs](#functional-specs)                                                                                 |
 | ref             | `func`                     |         | Prop for forwarded ref of the Select. [See Functional specs](#functional-specs)                                                                                |
 | required        | `boolean`                  | `false` | If true, the label is displayed as required.                                                                                                                   |
-| readOnly        | `boolean`                  |         | If true, Select will be readonly.                                                                                                                              |
 | spaceAfter      | `enum`                     |         | Additional `margin-bottom` after component. [See this docs](https://github.com/kiwicom/orbit/tree/master/packages/orbit-components/src/common/getSpacingToken) |
 | tabIndex        | `string \| number`         |         | Specifies the tab order of an element                                                                                                                          |
 | value           | `string`                   | `""`    | The value of the Select.                                                                                                                                       |

diff --git a/packages/orbit-components/src/Select/__tests__/Select.test.tsx b/packages/orbit-components/src/Select/__tests__/Select.test.tsx
@@ -44,7 +44,6 @@ describe("Select", () => {
         dataTest={dataTest}
         onFocus={onFocus}
         onBlur={onBlur}
-        readOnly
         spaceAfter={spaceAfter}
         dataAttrs={dataAttrs}
       />,
@@ -54,7 +53,6 @@ describe("Select", () => {
 
     expect(screen.getByTestId(dataTest)).toBeInTheDocument();
     expect(select).toHaveAttribute("id", id);
-    expect(select).toHaveAttribute("readonly");
     expect(select).toHaveAttribute("tabindex", "-1");
     expect(select).toHaveAttribute("data-state", "ok");
     expect(select).toHaveAttribute("data-recording-ignore");
@@ -72,26 +70,19 @@ describe("Select", () => {
   });
 
   it("should have custom value text", () => {
-    render(<Select customValueText="blin" readOnly options={[{ value: "1", label: "One" }]} />);
+    render(<Select customValueText="blin" options={[{ value: "1", label: "One" }]} />);
     expect(screen.getByText("blin")).toBeInTheDocument();
   });
 
   it("should have passed width", () => {
     const width = "100px";
-    render(
-      <Select width={width} label="label" readOnly options={[{ value: "1", label: "One" }]} />,
-    );
+    render(<Select width={width} label="label" options={[{ value: "1", label: "One" }]} />);
     expect(document.querySelector("label")).toHaveStyle({ width });
   });
 
   it("should have error message", async () => {
     render(
-      <Select
-        dataTest="error-select"
-        error="error"
-        readOnly
-        options={[{ value: "1", label: "One" }]}
-      />,
+      <Select dataTest="error-select" error="error" options={[{ value: "1", label: "One" }]} />,
     );
     const select = screen.getByTestId("error-select");
 
@@ -103,14 +94,7 @@ describe("Select", () => {
   });
 
   it("should have help message", async () => {
-    render(
-      <Select
-        dataTest="help-select"
-        help="help"
-        readOnly
-        options={[{ value: "1", label: "One" }]}
-      />,
-    );
+    render(<Select dataTest="help-select" help="help" options={[{ value: "1", label: "One" }]} />);
     const select = screen.getByTestId("help-select");
 
     await user.tab();
@@ -120,7 +104,7 @@ describe("Select", () => {
   });
 
   it("should be disabled", () => {
-    render(<Select options={[{ value: "1", label: "One" }]} readOnly disabled />);
+    render(<Select options={[{ value: "1", label: "One" }]} disabled />);
     expect(screen.getByRole("combobox")).toBeDisabled();
   });
 });
diff --git a/packages/orbit-components/src/Select/index.js.flow b/packages/orbit-components/src/Select/index.js.flow
@@ -35,7 +35,6 @@ export type Props = {|
   +onChange?: (ev: SyntheticInputEvent<HTMLSelectElement>) => void | Promise<any>,
   +onFocus?: (ev: SyntheticInputEvent<HTMLSelectElement>) => void | Promise<any>,
   +onBlur?: (ev: SyntheticInputEvent<HTMLSelectElement>) => void | Promise<any>,
-  +readOnly?: boolean,
   +options: Option[],
   +prefix?: React.Node,
   +customValueText?: Translation,