feat(Textarea): remove size prop

BREAKING CHANGE: Textarea component no longer has the `size` prop.
kiwicom · Nov 6, 2023 · 370e768 · 370e768
1 parent ffa01e9
commit 370e768
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 47 deletions.
diff --git a/docs/src/__examples__/Textarea/DEFAULT.tsx b/docs/src/__examples__/Textarea/DEFAULT.tsx
@@ -65,12 +65,6 @@ export default {
           options: ["none", "vertical"],
           defaultValue: "none",
         },
-        {
-          name: "size",
-          type: "select",
-          options: ["small", "normal"],
-          defaultValue: "normal",
-        },
       ],
     },
   ],

diff --git a/packages/orbit-components/src/Textarea/README.md b/packages/orbit-components/src/Textarea/README.md
@@ -38,18 +38,17 @@ Table below contains all types of the props available in Textarea component.
 | rows         | `number`                   |              | Specifies the height of the text area (in lines).                                                                                                              |
 | readOnly     | `boolean`                  |              | Adds readOnly to html textarea element.                                                                                                                        |
 | required     | `boolean`                  |              | If true, the label is displayed as required.                                                                                                                   |
-| size         | [`enum`](#enum)            | `"normal"`   | The size of the Textarea.                                                                                                                                      |
 | 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`                   |              | Specifies the value of the Textarea. To be used with controlled usage.                                                                                         |
 | helpClosable | `boolean`                  | `true`       | Whether to display help as a closable tooltip, or have it open only while the field is focused, same as error.                                                 |
 
 ### enum
 
-| size       | resize       |
-| :--------- | :----------- |
-| `"small"`  | `"vertical"` |
-| `"normal"` | `"none"`     |
+| resize       |
+| :----------- |
+| `"vertical"` |
+| `"none"`     |
 
 ## Functional specs
 

diff --git a/packages/orbit-components/src/Textarea/Textarea.stories.tsx b/packages/orbit-components/src/Textarea/Textarea.stories.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { text, boolean, select, number } from "@storybook/addon-knobs";
 
-import { SIZE_OPTIONS, RESIZE_OPTIONS } from "./consts";
+import { RESIZE_OPTIONS } from "./consts";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 import SPACINGS_AFTER from "../common/getSpacingToken/consts";
 
@@ -28,23 +28,6 @@ Default.story = {
   },
 };
 
-export const SmallSize = () => {
-  const value = text("Value", "");
-  const placeholder = text("Placeholder", "Placeholder");
-
-  return (
-    <Textarea size="small" placeholder={placeholder} onChange={action("change")} value={value} />
-  );
-};
-
-SmallSize.story = {
-  name: "Small size",
-
-  parameters: {
-    info: "Some description about this type of textarea in general.",
-  },
-};
-
 export const WithLabel = () => {
   const label = text("Label", "Label");
   const value = text("Value", "");
@@ -100,7 +83,6 @@ WithError.story = {
 };
 
 export const Playground = () => {
-  const size = select("Size", Object.values(SIZE_OPTIONS), SIZE_OPTIONS.SMALL);
   const label = text("Label", "Label");
   const value = text("Value", "");
   const fullHeight = boolean("fullHeight", true);
@@ -118,7 +100,6 @@ export const Playground = () => {
 
   return (
     <Textarea
-      size={size}
       label={label}
       value={value}
       fullHeight={fullHeight}

diff --git a/packages/orbit-components/src/Textarea/__tests__/index.test.tsx b/packages/orbit-components/src/Textarea/__tests__/index.test.tsx
@@ -71,12 +71,12 @@ describe("Textarea", () => {
   });
 
   it("should have error", async () => {
-    render(<Textarea error="error" size="small" />);
+    render(<Textarea error="error" />);
     const textarea = screen.getByRole("textbox");
 
     await user.tab();
     expect(screen.getByText("error")).toBeInTheDocument();
-    expect(textarea).toHaveStyle({ padding: "8px 12px 8px 12px" });
+    expect(textarea).toHaveStyle({ padding: "12px" });
     expect(textarea).toBeInvalid();
     expect(textarea).toHaveAccessibleDescription("error");
     // Needs to flush async `floating-ui` hooks

diff --git a/packages/orbit-components/src/Textarea/consts.ts b/packages/orbit-components/src/Textarea/consts.ts
@@ -1,8 +1,3 @@
-export enum SIZE_OPTIONS {
-  SMALL = "small",
-  NORMAL = "normal",
-}
-
 export enum RESIZE_OPTIONS {
   VERTICAL = "vertical",
   NONE = "none",

diff --git a/packages/orbit-components/src/Textarea/index.js.flow b/packages/orbit-components/src/Textarea/index.js.flow
@@ -11,7 +11,6 @@ export type Props = {|
   ...Globals,
   ...spaceAfter,
   ...DataAttrs,
-  +size?: "small" | "normal",
   +name?: string,
   +rows?: number,
   +readOnly?: boolean,

diff --git a/packages/orbit-components/src/Textarea/index.tsx b/packages/orbit-components/src/Textarea/index.tsx
@@ -5,16 +5,15 @@ import cx from "clsx";
 
 import ErrorFormTooltip from "../ErrorFormTooltip";
 import FormLabel from "../FormLabel";
-import { SIZE_OPTIONS, RESIZE_OPTIONS } from "./consts";
+import { RESIZE_OPTIONS } from "./consts";
 import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
 import getFieldDataState from "../common/getFieldDataState";
-import type { Props } from "./types";
 import useRandomId from "../hooks/useRandomId";
 import { getSpaceAfterClasses } from "../common/tailwind";
+import type { Props } from "./types";
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
   const {
-    size = SIZE_OPTIONS.NORMAL,
     disabled,
     resize = RESIZE_OPTIONS.VERTICAL,
     dataTest,
@@ -84,15 +83,14 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
       <textarea
         className={cx(
           "w-full appearance-none",
-          "font-base",
+          "font-base text-normal p-sm leading-normal",
           "rounded-normal relative box-border block overflow-auto",
           "min-h-form-box-normal",
           "duration-fast transition-shadow ease-in-out",
           "border border-transparent",
           // TODO: remove when will be migrated from tmp-folder
-          size === SIZE_OPTIONS.SMALL && "text-normal px-sm py-xs leading-normal",
           resize === RESIZE_OPTIONS.VERTICAL ? "resize-y" : "resize-none",
-          size === SIZE_OPTIONS.NORMAL && "text-normal p-sm leading-normal",
+          "text-normal p-sm leading-normal",
           error ? "shadow-form-element-error" : "shadow-form-element",
           disabled ? "cursor-not-allowed" : "cursor-text",
           fullHeight && "h-full flex-1",
@@ -129,7 +127,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
         <ErrorFormTooltip
           id={`${inputId}-feedback`}
           help={help}
-          inputSize={size}
           helpClosable={helpClosable}
           error={error}
           onShown={setTooltipShown}

diff --git a/packages/orbit-components/src/Textarea/types.d.ts b/packages/orbit-components/src/Textarea/types.d.ts
@@ -9,7 +9,6 @@ type Resize = "vertical" | "none";
 
 export interface Props extends Common.Globals, Common.SpaceAfter, Common.DataAttrs {
   readonly ref?: React.ForwardedRef<HTMLTextAreaElement>;
-  readonly size?: Common.InputSize;
   readonly name?: string;
   readonly rows?: number;
   readonly readOnly?: boolean;