feat(textarea): remove redundant props

BREAKING CHANGE: removed cols, size and tooltipMessage props from the TextArea component as they were no longer doing anything fix #6107
Sage · May 22, 2024 · 21a701c · 21a701c
1 parent 86630c3
commit 21a701c
Show file tree

Hide file tree

Showing 4 changed files with 1 addition and 56 deletions.
diff --git a/src/components/textarea/textarea-test.stories.tsx b/src/components/textarea/textarea-test.stories.tsx
@@ -25,14 +25,6 @@ export default {
         type: "select",
       },
     },
-    cols: {
-      control: {
-        min: 0,
-        max: 100,
-        step: 1,
-        type: "range",
-      },
-    },
     rows: {
       control: {
         min: 0,
@@ -116,7 +108,6 @@ export default {
   },
   args: {
     expandable: false,
-    cols: 0,
     rows: 0,
     disabled: false,
     autoFocus: false,

diff --git a/src/components/textarea/textarea.component.tsx b/src/components/textarea/textarea.component.tsx
@@ -44,8 +44,6 @@ export interface TextareaProps
   characterLimit?: number;
   /** Type of the icon that will be rendered next to the input */
   children?: React.ReactNode;
-  /** The visible width of the text control, in average character widths */
-  cols?: number;
   /** If true, the component will be disabled */
   disabled?: boolean;
   /** Indicate that error has occurred
@@ -104,10 +102,6 @@ export interface TextareaProps
   isOptional?: boolean;
   /** The number of visible text lines for the control */
   rows?: number;
-  /** One of type of size to apply to the textarea */
-  size?: "small" | "medium" | "large";
-  /** Message to be displayed in a Tooltip when the user hovers over the help icon */
-  tooltipMessage?: string;
   /** Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
   /** When true, validation icon will be placed on label instead of being placed on the input */
@@ -135,7 +129,6 @@ export const Textarea = React.forwardRef(
       inputHint,
       fieldHelp,
       label,
-      size,
       children,
       characterLimit,
       onChange,
@@ -154,7 +147,6 @@ export const Textarea = React.forwardRef(
       placeholder,
       expandable = false,
       rows,
-      cols,
       validationOnLabel = false,
       adaptiveLabelBreakpoint,
       inputWidth,
@@ -312,7 +304,6 @@ export const Textarea = React.forwardRef(
 
     const input = (
       <InputPresentation
-        size={size}
         disabled={disabled}
         readOnly={readOnly}
         inputWidth={
@@ -338,7 +329,6 @@ export const Textarea = React.forwardRef(
           readOnly={readOnly}
           placeholder={disabled ? "" : placeholder}
           rows={rows}
-          cols={cols}
           id={id}
           as="textarea"
           validationIconId={validationRedesignOptIn ? undefined : validationId}
@@ -351,7 +341,6 @@ export const Textarea = React.forwardRef(
           disabled={disabled}
           readOnly={readOnly}
           inputIcon={inputIcon}
-          size={size}
           error={error}
           warning={warning}
           info={info}

diff --git a/src/components/textarea/textarea.pw.tsx b/src/components/textarea/textarea.pw.tsx
@@ -19,11 +19,7 @@ import {
   visuallyHiddenCharacterCount,
   visuallyHiddenHint,
 } from "../../../playwright/components/textarea";
-import {
-  CHARACTERS,
-  SIZE,
-  VALIDATION,
-} from "../../../playwright/support/constants";
+import { CHARACTERS, VALIDATION } from "../../../playwright/support/constants";
 import {
   assertCssValueIsApproximately,
   checkAccessibility,
@@ -526,21 +522,6 @@ test.describe("Props tests for Textarea component", () => {
     });
   });
 
-  ([
-    [SIZE.SMALL, "32px"],
-    [SIZE.MEDIUM, "40px"],
-    [SIZE.LARGE, "48px"],
-  ] as [TextareaProps["size"], string][]).forEach(([size, height]) => {
-    test(`should use ${size} as size and render component with ${height} as height`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<TextareaComponent size={size} />);
-
-      await expect(textarea(page)).toHaveCSS("min-height", height);
-    });
-  });
-
   ([
     ["flex", 399],
     ["flex", 400],
@@ -666,20 +647,6 @@ test.describe("Props tests for Textarea component", () => {
     });
   });
 
-  [5, 25, 100].forEach((cols) => {
-    test(`should render with cols prop set to ${cols}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(<TextareaComponent cols={cols} />);
-
-      await expect(textareaChildren(page)).toHaveAttribute(
-        "cols",
-        String(cols)
-      );
-    });
-  });
-
   [5, 25, 100].forEach((rows) => {
     test(`should render with rows prop set to ${rows}`, async ({
       mount,

diff --git a/src/components/textarea/textarea.spec.tsx b/src/components/textarea/textarea.spec.tsx
@@ -523,7 +523,6 @@ describe("componentWillUnmount", () => {
         onChange={jest.fn()}
         label="Label"
         expandable
-        cols={10}
         rows={10}
         characterLimit={100}
       />
@@ -583,7 +582,6 @@ describe("componentWillUnmount", () => {
         value="foo"
         onChange={jest.fn()}
         label="Label"
-        cols={10}
         rows={10}
       />
     );