feat(FormTextArea): Add new FormTextArea component

packages/fluentui/CHANGELOG.md

@@ -34,6 +34,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## Features
 - Added `disabledFocusable` prop for `Button` component. @jurokapsiar ([#16419](https://github.com/microsoft/fluentui/pull/16419))
+- Added `FormTextArea` component @assuncaocharles ([#16660](https://github.com/microsoft/fluentui/pull/16660))
 
 ## Performance
 

packages/fluentui/docs/src/examples/components/Form/Usage/FormExampleErrorAndSuccessful.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Form, Button, Input, FormField, FormLabel, FormMessage } from '@fluentui/react-northstar';
+import { Form, Button, Input, FormField, FormLabel, FormMessage, FormTextArea } from '@fluentui/react-northstar';
 import { PresenceAvailableIcon } from '@fluentui/react-icons-northstar';
 
 const FormExampleErrorAndSatisfactory = () => (
@@ -24,6 +24,7 @@ const FormExampleErrorAndSatisfactory = () => (
       errorMessage="You can not fix this error"
       required
     />
+    <FormTextArea name="bio" id="bio" label="bio" errorMessage="You can not fix this error" />
     <FormField>
       <FormLabel id="email-label" htmlFor="email-field">
         E-mail*

packages/fluentui/docs/src/examples/components/Form/Variants/FormExampleComponents.tsx

@@ -8,6 +8,7 @@ import {
   FormCheckbox,
   FormDatepicker,
   FormButton,
+  FormTextArea,
 } from '@fluentui/react-northstar';
 
 const items = [
@@ -35,6 +36,7 @@ const items = [
 const FormExampleComponents = () => (
   <Form>
     <FormInput label="First name" name="firstName" required />
+    <FormTextArea label="Bio" name="bio" />
     <FormDropdown label="City" items={['prague', 'new york']} />
     <FormRadioGroup label="Pizza" vertical defaultCheckedValue="prosciutto" items={items} />
     <FormSlider label="Bid the price" />

packages/fluentui/react-northstar/src/components/Form/FormTextArea.tsx

@@ -0,0 +1,45 @@
+import { compose } from '@fluentui/react-bindings';
+import { TextArea, TextAreaProps } from '../TextArea/TextArea';
+import { _FormFieldBase, FormFieldBaseProps } from './utils/formFieldBase';
+import { commonPropTypes } from '../../utils';
+
+interface FormTextAreaOwnProps extends Omit<TextAreaProps, 'accessibility'> {}
+type SelectedFormFieldCustomProps = Omit<
+  FormFieldBaseProps,
+  'control' | 'styles' | 'accessibility' | 'design' | 'variables'
+>;
+export interface FormTextAreaProps extends SelectedFormFieldCustomProps, FormTextAreaOwnProps {}
+export type FormTextAreaStylesProps = never;
+
+export const formTextAreaClassName = 'ui-form__textarea';
+
+/**
+ * An FormTextArea renders a TextArea wrapped by FormField.
+ */
+export const FormTextArea = compose<
+  'textarea',
+  FormTextAreaProps,
+  FormTextAreaStylesProps,
+  SelectedFormFieldCustomProps,
+  {}
+>(_FormFieldBase, {
+  className: formTextAreaClassName,
+  displayName: 'FormTextArea',
+  overrideStyles: true,
+  slots: {
+    control: TextArea,
+  },
+  slotProps: ({ errorMessage }) => ({
+    control: {
+      error: !!errorMessage,
+    },
+    message: {
+      error: !!errorMessage,
+    },
+  }),
+});
+
+FormTextArea.propTypes = commonPropTypes.createCommon({
+  children: false,
+  content: false,
+});

packages/fluentui/react-northstar/src/components/TextArea/TextArea.tsx

@@ -44,9 +44,12 @@ export interface TextAreaProps extends UIComponentProps, ChildrenComponentProps
 
   /** A textarea can take the width of its container. */
   fluid?: boolean;
+
+  /** A text area can have error state. */
+  error?: boolean;
 }
 
-export type TextAreaStylesProps = Required<Pick<TextAreaProps, 'inverted' | 'resize' | 'fluid' | 'disabled'>>;
+export type TextAreaStylesProps = Required<Pick<TextAreaProps, 'inverted' | 'resize' | 'fluid' | 'disabled' | 'error'>>;
 
 export const textAreaClassName = 'ui-textarea';
 
@@ -67,7 +70,7 @@ export const TextArea: ComponentWithAs<'textarea', TextAreaProps> &
 
   setStart();
 
-  const { disabled, accessibility, inverted, resize, fluid, className, design, styles, variables } = props;
+  const { disabled, accessibility, inverted, resize, fluid, className, design, styles, variables, error } = props;
 
   const [value, setValue] = useAutoControlled({
     defaultValue: props.defaultValue,
@@ -92,6 +95,7 @@ export const TextArea: ComponentWithAs<'textarea', TextAreaProps> &
       resize,
       fluid,
       disabled,
+      error,
     }),
     mapPropsToInlineStyles: () => ({
       className,
@@ -138,6 +142,7 @@ TextArea.propTypes = {
   disabled: PropTypes.bool,
   inverted: PropTypes.bool,
   fluid: PropTypes.bool,
+  error: PropTypes.bool,
   resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
 };
 

packages/fluentui/react-northstar/src/index.ts

@@ -94,6 +94,7 @@ export * from './components/Flex/FlexItem';
 export * from './components/Form/Form';
 export * from './components/Form/FormField';
 export * from './components/Form/FormInput';
+export * from './components/Form/FormTextArea';
 export * from './components/Form/FormInput';
 export * from './components/Form/FormLabel';
 export * from './components/Form/FormMessage';

packages/fluentui/react-northstar/src/themes/teams/components/TextArea/textAreaStyles.ts

@@ -1,6 +1,7 @@
 import { TextAreaVariables } from './textAreaVariables';
 import { ComponentSlotStylesPrepared, ICSSInJSStyle } from '@fluentui/styles';
 import { TextAreaStylesProps } from '../../../../components/TextArea/TextArea';
+import { pxToRem } from '../../../../utils';
 
 export const textAreaStyles: ComponentSlotStylesPrepared<TextAreaStylesProps, TextAreaVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
@@ -34,6 +35,8 @@ export const textAreaStyles: ComponentSlotStylesPrepared<TextAreaStylesProps, Te
       color: v.disabledColor,
     }),
 
+    ...(p.error && { border: `${pxToRem(1)} solid ${v.borderColorError}` }),
+
     '::placeholder': {
       color: v.placeholderColor,
       opacity: 1, // undo Firefox default opacity

packages/fluentui/react-northstar/src/themes/teams/components/TextArea/textAreaVariables.ts

@@ -15,6 +15,7 @@ export interface TextAreaVariables {
   margin: string;
   padding: string;
   height: string;
+  borderColorError: string;
 }
 
 export const textAreaVariables = (siteVars): TextAreaVariables => ({
@@ -38,4 +39,5 @@ export const textAreaVariables = (siteVars): TextAreaVariables => ({
   borderColorFocus: `transparent transparent ${siteVars.colorScheme.brand.borderFocus1} transparent`,
 
   height: 'auto',
+  borderColorError: siteVars.colorScheme.red.background,
 });

packages/fluentui/react-northstar/test/specs/components/Form/FormTextArea-test.tsx

@@ -0,0 +1,13 @@
+import { isConformant } from 'test/specs/commonTests';
+import { FormTextArea } from 'src/components/Form/FormTextArea';
+
+import { TextArea } from 'src/components/TextArea/TextArea';
+
+describe('FormTextArea', () => {
+  isConformant(FormTextArea, {
+    testPath: __filename,
+    constructorName: 'FormTextArea',
+    forwardsRefTo: false,
+    targetComponent: TextArea,
+  });
+});