[EuiForm] specify default fullWidth with root component

scripts/jest/setup/throw_on_console_error.js

@@ -1,6 +1,8 @@
+import { format } from 'util'
+
 // Fail if a test ends up `console.error`-ing, e.g. if React logs because of a
 // failed prop types check.
-console.error = (message) => {
+console.error = (message, ...rest) => {
   // @see https://github.com/emotion-js/emotion/issues/1105
   // This error that Emotion throws doesn't apply to Jest, so
   // we're just going to straight up ignore the first/nth-child warning
@@ -14,5 +16,5 @@ console.error = (message) => {
     return;
   }
 
-  throw new Error(message);
+  throw new Error(format(message, ...rest));
 };

src-docs/src/views/form_layouts/form_layouts_example.js

@@ -105,13 +105,21 @@ export const FormLayoutsExample = {
     {
       title: 'Full-width',
       text: (
-        <p>
-          Form elements will automatically flex to a max-width of{' '}
-          <EuiCode>400px</EuiCode>. You can optionally pass the{' '}
-          <EuiCode>fullWidth</EuiCode> prop to the row and form control to
-          expand to their container. This should be done rarely and usually you
-          will only need it for isolated controls like search bars and sliders.
-        </p>
+        <>
+          <p>
+            Form elements will automatically flex to a max-width of{' '}
+            <EuiCode>400px</EuiCode>. You can optionally pass the{' '}
+            <EuiCode>fullWidth</EuiCode> prop to the row and form control to
+            expand to their container. This should be done rarely and usually
+            you will only need it for isolated controls like search bars and
+            sliders.
+          </p>
+          <p>
+            To set all the row and controls in a form to{' '}
+            <EuiCode>fullWidth</EuiCode>, specify the prop on the root{' '}
+            <EuiCode>EuiForm</EuiCode> component.
+          </p>
+        </>
       ),
       props: {
         EuiFormRow,

src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap

@@ -40,7 +40,6 @@ exports[`EuiDescribedFormGroup is rendered 1`] = `
       <EuiFormRow
         describedByIds={Array []}
         display="row"
-        fullWidth={false}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
@@ -81,7 +80,6 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
       <EuiFormRow
         describedByIds={Array []}
         display="row"
-        fullWidth={false}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
@@ -181,7 +179,6 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
       <EuiFormRow
         describedByIds={Array []}
         display="row"
-        fullWidth={false}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
@@ -232,7 +229,6 @@ exports[`EuiDescribedFormGroup props props for the flex item containers are pass
       <EuiFormRow
         describedByIds={Array []}
         display="row"
-        fullWidth={false}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
@@ -332,7 +328,6 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
       <EuiFormRow
         describedByIds={Array []}
         display="row"
-        fullWidth={false}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
         labelType="label"
@@ -388,7 +383,6 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
             "Error two",
           ]
         }
-        fullWidth={false}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
         helpText="Help text"

src/components/form/described_form_group/described_form_group.test.tsx

@@ -7,9 +7,10 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, render } from 'enzyme';
 import { requiredProps } from '../../../test';
 
+import { EuiForm } from '../form';
 import { EuiFormRow } from '../form_row';
 import { EuiDescribedFormGroup } from './described_form_group';
 
@@ -127,4 +128,24 @@ describe('EuiDescribedFormGroup', () => {
       expect(component).toMatchSnapshot();
     });
   });
+
+  describe('inherits', () => {
+    test('fullWidth from <EuiForm />', () => {
+      const component = render(
+        <EuiForm fullWidth>
+          <EuiDescribedFormGroup {...props} />
+        </EuiForm>
+      );
+
+      if (
+        !component
+          .find('.euiDescribedFormGroup')
+          .hasClass('euiDescribedFormGroup--fullWidth')
+      ) {
+        throw new Error(
+          'expected EuiDescribedFormGroup to inherit fullWidth from EuiForm'
+        );
+      }
+    });
+  });
 });

src/components/form/described_form_group/described_form_group.tsx

@@ -20,6 +20,7 @@ import {
   EuiFlexGroupGutterSize,
   EuiFlexItemProps,
 } from '../../flex';
+import { useFormContext } from '../eui_form_context';
 
 export type EuiDescribedFormGroupProps = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
@@ -29,17 +30,21 @@ export type EuiDescribedFormGroupProps = CommonProps &
     children?: ReactNode;
     /**
      * Passed to `EuiFlexGroup`.
+     * @default l
      */
     gutterSize?: EuiFlexGroupGutterSize;
     /**
      * Expand to fill 100% of the parent.
+     * Defaults to `fullWidth` prop of `<EuiForm>`.
      * Default max-width is 800px.
+     * @default false
      */
     fullWidth?: boolean;
     /**
      * Width ratio of description column compared to field column.
      * Can be used in conjunction with `fullWidth` and
      * may require `fullWidth` to be applied to child elements.
+     * @default half
      */
     ratio?: 'half' | 'third' | 'quarter';
     /**
@@ -48,6 +53,7 @@ export type EuiDescribedFormGroupProps = CommonProps &
     title: EuiTitleProps['children'];
     /**
      * Adjust the visual `size` of the EuiTitle that wraps `title`.
+     * @default xs
      */
     titleSize?: EuiTitleSize;
     /**
@@ -64,19 +70,24 @@ export type EuiDescribedFormGroupProps = CommonProps &
     fieldFlexItemProps?: PropsOf<typeof EuiFlexItem>;
   };
 
-export const EuiDescribedFormGroup: FunctionComponent<EuiDescribedFormGroupProps> = ({
-  children,
-  className,
-  gutterSize = 'l',
-  fullWidth = false,
-  ratio = 'half',
-  titleSize = 'xs',
-  title,
-  description,
-  descriptionFlexItemProps,
-  fieldFlexItemProps,
-  ...rest
-}) => {
+export const EuiDescribedFormGroup: FunctionComponent<EuiDescribedFormGroupProps> = (
+  props
+) => {
+  const { defaultFullWidth } = useFormContext();
+
+  const {
+    children,
+    className,
+    gutterSize = 'l',
+    fullWidth = defaultFullWidth,
+    ratio = 'half',
+    titleSize = 'xs',
+    title,
+    description,
+    descriptionFlexItemProps,
+    fieldFlexItemProps,
+    ...rest
+  } = props;
   const classes = classNames(
     'euiDescribedFormGroup',
     {
@@ -93,18 +104,16 @@ export const EuiDescribedFormGroup: FunctionComponent<EuiDescribedFormGroupProps
   let renderedDescription: ReactNode;
 
   if (description) {
-    // If the description is just a string, wrap it in a paragraph element
-    if (typeof description === 'string') {
-      description = <p>{description}</p>;
-    }
-
     renderedDescription = (
       <EuiText
         size="s"
         color="subdued"
         className="euiDescribedFormGroup__description"
       >
-        {description}
+        {
+          // If the description is just a string, wrap it in a paragraph element
+          typeof description === 'string' ? <p>{description}</p> : description
+        }
       </EuiText>
     );
   }

src/components/form/eui_form_context.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+export interface FormContextValue {
+  defaultFullWidth: boolean;
+}
+
+export const FormContext = React.createContext<FormContextValue>({
+  defaultFullWidth: false,
+});
+
+export function useFormContext() {
+  return React.useContext(FormContext);
+}

src/components/form/field_number/field_number.test.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
 
+import { EuiForm } from '../form';
 import { EuiFieldNumber } from './field_number';
 
 jest.mock('../form_control_layout', () => {
@@ -89,4 +90,22 @@ describe('EuiFieldNumber', () => {
       });
     });
   });
+
+  describe('inherits', () => {
+    test('fullWidth from <EuiForm />', () => {
+      const component = render(
+        <EuiForm fullWidth>
+          <EuiFieldNumber />
+        </EuiForm>
+      );
+
+      if (
+        !component.find('.euiFieldNumber').hasClass('euiFieldNumber--fullWidth')
+      ) {
+        throw new Error(
+          'expected EuiFieldNumber to inherit fullWidth from EuiForm'
+        );
+      }
+    });
+  });
 });

src/components/form/field_number/field_number.tsx

@@ -18,6 +18,7 @@ import {
 import { EuiValidatableControl } from '../validatable_control';
 
 import { IconType } from '../../icon';
+import { useFormContext } from '../eui_form_context';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
 
 export type EuiFieldNumberProps = Omit<
@@ -27,7 +28,15 @@ export type EuiFieldNumberProps = Omit<
   CommonProps & {
     icon?: IconType;
     isInvalid?: boolean;
+    /**
+     * Expand to fill 100% of the parent.
+     * Defaults to `fullWidth` prop of `<EuiForm>`.
+     * @default false
+     */
     fullWidth?: boolean;
+    /**
+     * @default false
+     */
     isLoading?: boolean;
     readOnly?: boolean;
     min?: number;
@@ -60,30 +69,36 @@ export type EuiFieldNumberProps = Omit<
 
     /**
      * when `true` creates a shorter height input
+     * @default false
      */
     compressed?: boolean;
   };
 
-export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = ({
-  className,
-  icon,
-  id,
-  placeholder,
-  name,
-  min,
-  max,
-  value,
-  isInvalid,
-  fullWidth = false,
-  isLoading = false,
-  compressed = false,
-  prepend,
-  append,
-  inputRef,
-  readOnly,
-  controlOnly,
-  ...rest
-}) => {
+export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = (
+  props
+) => {
+  const { defaultFullWidth } = useFormContext();
+  const {
+    className,
+    icon,
+    id,
+    placeholder,
+    name,
+    min,
+    max,
+    value,
+    isInvalid,
+    fullWidth = defaultFullWidth,
+    isLoading = false,
+    compressed = false,
+    prepend,
+    append,
+    inputRef,
+    readOnly,
+    controlOnly,
+    ...rest
+  } = props;
+
   const numIconsClass = getFormControlClassNameForIconCount({
     isInvalid,
     isLoading,

src/components/form/field_password/field_password.test.tsx

@@ -10,6 +10,7 @@ import React from 'react';
 import { render, mount } from 'enzyme';
 import { requiredProps } from '../../../test/required_props';
 
+import { EuiForm } from '../form';
 import { EuiFieldPassword, EuiFieldPasswordProps } from './field_password';
 
 jest.mock('../validatable_control', () => ({
@@ -135,4 +136,24 @@ describe('EuiFieldPassword', () => {
       });
     });
   });
+
+  describe('inherits', () => {
+    test('fullWidth from <EuiForm />', () => {
+      const component = render(
+        <EuiForm fullWidth>
+          <EuiFieldPassword />
+        </EuiForm>
+      );
+
+      if (
+        !component
+          .find('.euiFieldPassword')
+          .hasClass('euiFieldPassword--fullWidth')
+      ) {
+        throw new Error(
+          'expected EuiFieldPassword to inherit fullWidth from EuiForm'
+        );
+      }
+    });
+  });
 });