feat(textarea): add resize support

documentation-site/examples/textarea/resizable.js

@@ -7,25 +7,9 @@ export default function Example() {
   return (
     <Textarea
       value={value}
-      onChange={e => setValue(e.currentTarget.value)}
+      onChange={(e) => setValue(e.currentTarget.value)}
       placeholder="Try resizing me..."
-      overrides={{
-        Input: {
-          style: {
-            maxHeight: '300px',
-            minHeight: '100px',
-            minWidth: '300px',
-            width: '100vw', // fill all available space up to parent max-width
-            resize: 'both',
-          },
-        },
-        InputContainer: {
-          style: {
-            maxWidth: '100%',
-            width: 'min-content',
-          },
-        },
-      }}
+      resize="both"
     />
   );
 }

documentation-site/examples/textarea/resizable.tsx

@@ -6,25 +6,9 @@ export default function Example() {
   return (
     <Textarea
       value={value}
-      onChange={e => setValue(e.currentTarget.value)}
+      onChange={(e) => setValue(e.currentTarget.value)}
       placeholder="Try resizing me..."
-      overrides={{
-        Input: {
-          style: {
-            maxHeight: '300px',
-            minHeight: '100px',
-            minWidth: '300px',
-            width: '100vw', // fill all available space up to parent max-width
-            resize: 'both',
-          },
-        },
-        InputContainer: {
-          style: {
-            maxWidth: '100%',
-            width: 'min-content',
-          },
-        },
-      }}
+      resize="both"
     />
   );
 }

src/input/__tests__/__snapshots__/utils.test.ts.snap

@@ -9,6 +9,7 @@ Object {
   "$isReadOnly": false,
   "$positive": false,
   "$required": false,
+  "$resize": undefined,
   "$size": "default",
 }
 `;

src/input/base-input.tsx

@@ -315,6 +315,7 @@ class BaseInput<T extends HTMLInputElement | HTMLTextAreaElement> extends React.
     const [Input, inputProps] = getOverrides(InputOverride, StyledInput);
     const [Before, beforeProps] = getOverrides(BeforeOverride, NullComponent);
     const [After, afterProps] = getOverrides(AfterOverride, NullComponent);
+
     return (
       <InputContainer
         data-baseweb={this.props['data-baseweb'] || 'base-input'}

src/input/types.js.flow

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
+import type { Property$Resize } from 'csstype';
 import type { OverrideT } from '../helpers/overrides.js';
 import { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants.js';
 
@@ -52,6 +53,7 @@ export type SharedPropsT = {|
   $size: SizeT,
   /** Renders UI in 'required' state */
   $required: boolean,
+  $resize?: Property$Resize,
   $position: $Keys<typeof ENHANCER_POSITION>,
   /** Defines if has a clearable or MaskToggleButton at the end */
   $hasIconTrailing: boolean,
@@ -128,6 +130,7 @@ export type BaseInputPropsT<T> = {|
   placeholder?: string,
   /** Renders component in 'required' state. */
   required: boolean,
+  resize?: Property$Resize,
   /** Input role attribute. */
   role?: string,
   /** Renders component in provided size. */

src/input/types.ts

@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
+import type { Properties } from 'csstype';
 import type { Override } from '../helpers/overrides';
 import { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants';
 
@@ -48,6 +49,7 @@ export type SharedProps = {
   $size: Size;
   /** Renders UI in 'required' state */
   $required?: boolean;
+  $resize?: Properties['resize'];
   $position?: keyof typeof ENHANCER_POSITION;
   /** Defines if has a clearable or MaskToggleButton at the end */
   $hasIconTrailing?: boolean;
@@ -123,6 +125,7 @@ export type BaseInputProps<T> = {
   placeholder?: string;
   /** Renders component in 'required' state. */
   required?: boolean;
+  resize?: Properties['resize'];
   /** Input role attribute. */
   role?: string;
   /** Renders component in provided size. */

src/input/utils.ts

@@ -10,7 +10,7 @@ export function getSharedProps<T>(
   props: BaseInputProps<T> | InputProps,
   state: InternalState
 ): SharedProps {
-  const { disabled, error, positive, adjoined, size, required, readOnly } = props;
+  const { disabled, error, positive, adjoined, size, required, resize, readOnly } = props;
   const { isFocused } = state;
   return {
     $isFocused: isFocused,
@@ -20,6 +20,7 @@ export function getSharedProps<T>(
     $adjoined: adjoined,
     $size: size,
     $required: required,
+    $resize: resize,
     $isReadOnly: readOnly,
   };
 }

src/textarea/__tests__/textarea-resize.scenario.tsx

@@ -0,0 +1,19 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+
+import { StatefulTextarea } from '..';
+
+export function Scenario() {
+  return (
+    <StatefulTextarea
+      placeholder="Uncontrolled textarea"
+      initialState={{ value: 'initial value' }}
+      resize="both"
+    />
+  );
+}

src/textarea/__tests__/textarea.stories.tsx

@@ -6,5 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import React from 'react';
 import { Scenario as TextareaDefault } from './textarea.scenario';
+import { Scenario as Resize } from './textarea-resize.scenario';
 
 export const Textarea = () => <TextareaDefault />;
+export const TextareaResize = () => <Resize />;

src/textarea/styled-components.ts

@@ -15,7 +15,10 @@ export const StyledTextAreaRoot = styled<'div', SharedStyleProps>(
       $theme: Theme;
     }
   ) => {
-    return getRootStyles({ $positive: false, ...props, $hasIconTrailing: false });
+    return {
+      ...getRootStyles({ $positive: false, ...props, $hasIconTrailing: false }),
+      width: props.$resize ? 'fit-content' : '100%',
+    };
   }
 );
 
@@ -27,9 +30,9 @@ export const StyledTextareaContainer = styled<'div', SharedStyleProps>(
     props: SharedStyleProps & {
       $theme: Theme;
     }
-  ) => ({
-    ...getInputContainerStyles({ $positive: false, ...props }),
-  })
+  ) => {
+    return getInputContainerStyles({ $positive: false, ...props });
+  }
 );
 
 StyledTextareaContainer.displayName = 'StyledTextareaContainer';
@@ -40,9 +43,11 @@ export const StyledTextarea = styled<'textarea', SharedStyleProps>(
     props: SharedStyleProps & {
       $theme: Theme;
     }
-  ) => ({
-    ...getInputStyles(props),
-    resize: 'none',
-  })
+  ) => {
+    return {
+      ...getInputStyles(props),
+      resize: props.$resize || 'none',
+    };
+  }
 );
 StyledTextarea.displayName = 'StyledTextarea';

src/textarea/textarea.tsx

@@ -75,6 +75,7 @@ class Textarea extends React.Component<
         $error={this.props.error}
         $positive={this.props.positive}
         $required={this.props.required}
+        $resize={this.props.resize}
         {...rootProps}
       >
         {/* $FlowFixMe */}
@@ -84,6 +85,7 @@ class Textarea extends React.Component<
           overrides={inputOverrides}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
+          resize={this.props.resize}
         />
       </Root>
     );

src/textarea/types.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-
+import type { Property$Resize } from 'csstype';
 import type { OverrideT } from '../helpers/overrides.js';
 import type { BaseInputPropsT, StateReducerT, StateT } from '../input/types.js';
 import { ADJOINED, SIZE } from '../input/constants.js';
@@ -23,6 +23,7 @@ export type SharedStylePropsT = {
   $isReadOnly: boolean,
   $positive?: boolean,
   $required: boolean,
+  $resize?: Property$Resize,
   $size: SizeT,
 };
 
@@ -36,6 +37,7 @@ export type TextareaOverridesT = {
 export type TextareaPropsT = {
   ...BaseTextAreaPropsT,
   overrides?: TextareaOverridesT,
+  resize?: Property$Resize,
   /** Sets the size and number of visible text lines
    of the textarea element. */
   rows?: number,

src/textarea/types.ts

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-
+import type { Properties } from 'csstype';
 import type { Override } from '../helpers/overrides';
 import type { BaseInputProps, StateReducer, State } from '../input';
 import { ADJOINED, SIZE } from '../input';
@@ -24,6 +24,7 @@ export type SharedStyleProps = {
   $isReadOnly?: boolean;
   $positive?: boolean;
   $required?: boolean;
+  $resize?: Properties['resize'];
   $size: Size;
 };
 
@@ -35,6 +36,7 @@ export type TextareaOverrides = {
 
 export type TextareaProps = {
   overrides?: TextareaOverrides;
+  resize?: Properties['resize'];
   /** Sets the size and number of visible text lines
    of the textarea element. */
   rows?: number;