Add ability to control TextArea resize via resize prop

Author: ggdouglas

packages/core/src/common/classes.ts

@@ -192,6 +192,10 @@ export const RESIZABLE_INPUT_SPAN = `${NS}-resizable-input-span`;
 
 export const TEXT_AREA = `${NS}-text-area`;
 export const TEXT_AREA_AUTO_RESIZE = `${TEXT_AREA}-auto-resize`;
+export const TEXT_AREA_RESIZE_NONE = `${TEXT_AREA}-resize-none`;
+export const TEXT_AREA_RESIZE_VERTICAL = `${TEXT_AREA}-resize-vertical`;
+export const TEXT_AREA_RESIZE_HORIZONTAL = `${TEXT_AREA}-resize-horizontal`;
+export const TEXT_AREA_RESIZE_BOTH = `${TEXT_AREA}-resize-both`;
 
 export const CONTROL = `${NS}-control`;
 export const CONTROL_INDICATOR = `${CONTROL}-indicator`;

packages/core/src/components/forms/_input.scss

@@ -78,4 +78,20 @@ textarea.#{$ns}-input {
     // we are controlling vertical resizing automatically, so restrict user resizing to horizontal dimension only
     resize: horizontal;
   }
+
+  &.#{$ns}-text-area-resize-none {
+    resize: none;
+  }
+
+  &.#{$ns}-text-area-resize-vertical {
+    resize: vertical;
+  }
+
+  &.#{$ns}-text-area-resize-horizontal {
+    resize: horizontal;
+  }
+
+  &.#{$ns}-text-area-resize-both {
+    resize: both;
+  }
 }

packages/core/src/components/forms/textArea.tsx

@@ -61,6 +61,12 @@ export interface TextAreaProps extends IntentProps, Props, React.TextareaHTMLAtt
      */
     large?: boolean;
 
+    /**
+     * Controls the CSS `resize` property of the textarea. Set to control whether the text area can be manually resized
+     * and in which direction(s). If not set, the default browser behavior applies.
+     */
+    resize?: "none" | "vertical" | "horizontal" | "both";
+
     /**
      * Whether the text area should appear with small styling.
      *
@@ -162,6 +168,7 @@ export class TextArea extends AbstractPureComponent<TextAreaProps, TextAreaState
             intent,
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             large,
+            resize,
             size = "medium",
             // eslint-disable-next-line @typescript-eslint/no-deprecated
             small,
@@ -176,6 +183,10 @@ export class TextArea extends AbstractPureComponent<TextAreaProps, TextAreaState
             {
                 [Classes.FILL]: fill,
                 [Classes.TEXT_AREA_AUTO_RESIZE]: autoResize,
+                [Classes.TEXT_AREA_RESIZE_NONE]: resize === "none",
+                [Classes.TEXT_AREA_RESIZE_VERTICAL]: resize === "vertical",
+                [Classes.TEXT_AREA_RESIZE_HORIZONTAL]: resize === "horizontal",
+                [Classes.TEXT_AREA_RESIZE_BOTH]: resize === "both",
             },
             className,
         );