Auto-hide labels of box fields nested in FormLayoutCustomField via context

Creates `FormLayoutCustomFieldContext` and has `FormLayoutCustomField` provide
it to its children. `TextField`, `TextArea`, `SelectField`, and
`FileInputField` consume the context to automatically hide their labels when
rendered inside a `FormLayoutCustomField`, making the behavior a hard rule
rather than a recommendation.

Updates the `FormLayout` README to reflect the automatic behavior and removes
all now-redundant `isLabelVisible={false}` from code examples. Removes the
prop from `FormLayoutCustomField` test fixtures and the `FormLayout` story
accordingly.

Also adds per-component `formLayout` test coverage for `labelWidth` and the
new `formLayoutCustomField` visual tests to `TextField`, `TextArea`,
`SelectField`, `FileInputField`, `Button`, `CheckboxField`, `Radio`, and
`Toggle`.

Author: adamkudrna

src/components/Button/__tests__/Button.spec.tsx

@@ -8,10 +8,10 @@ import {
   propTests,
 } from '../../../../tests/playwright';
 import {
-  ButtonForTest,
   ButtonForRefTest,
-  ButtonInVerticalFormLayoutForTest,
+  ButtonForTest,
   ButtonInHorizontalFormLayoutForTest,
+  ButtonInVerticalFormLayoutForTest,
 } from './Button.story';
 
 test.describe('Button', () => {

src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-horizontal-1-chromium-linux.png

@@ -4,6 +4,7 @@ import React, {
 } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
 import { FormLayout } from '../../FormLayout';
+import { TextField } from '../../TextField';
 import { Button } from '..';
 
 // Types for story component will be improved when we have full TypeScript support
@@ -46,6 +47,7 @@ export const ButtonInVerticalFormLayoutForTest = ({
   ...props
 }: ButtonForTestProps) => (
   <FormLayout fieldLayout="vertical">
+    <TextField label="Text field" />
     <Button
       label="Button"
       {...props}
@@ -57,6 +59,7 @@ export const ButtonInHorizontalFormLayoutForTest = ({
   ...props
 }: ButtonForTestProps) => (
   <FormLayout fieldLayout="horizontal">
+    <TextField label="Text field" />
     <Button
       label="Button"
       {...props}

src/components/Button/__tests__/Button.spec.tsx-snapshots/Button-formLayout-visual-vertical-1-chromium-linux.png

@@ -7,12 +7,13 @@ import {
   mixPropTests,
   propTests,
 } from '../../../../tests/playwright';
+import type { CheckboxForFormLayoutTestsProps } from './CheckboxField.story';
 import {
-  CheckboxFieldForTest,
   CheckboxFieldForRefTest,
+  CheckboxFieldForTest,
+  CheckboxForFormLayoutLabelWidthTests,
   CheckboxForFormLayoutTests,
 } from './CheckboxField.story';
-import type { CheckboxForFormLayoutTestsProps } from './CheckboxField.story';
 
 test.describe('CheckboxField', () => {
   test.describe('base', () => {
@@ -139,6 +140,13 @@ test.describe('CheckboxField', () => {
 
   test.describe('formLayout', () => {
     test.describe('visual', () => {
+      test('labelWidth:string=100px', async ({ mount }) => {
+        const component = await mount(<CheckboxForFormLayoutLabelWidthTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+
       [
         ...propTests.layoutPropTest,
       ].forEach(({

src/components/Button/__tests__/Button.story.tsx

@@ -4,7 +4,10 @@ import React, {
   useRef,
 } from 'react';
 import type { LabelHTMLAttributes } from 'react';
-import { FormLayoutContext } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+} from '../../FormLayout';
 import { CheckboxField } from '..';
 
 // Types for story component will be improved when we have full TypeScript support
@@ -48,6 +51,13 @@ export const CheckboxFieldForRefTest = ({
   );
 };
 
+export const CheckboxForFormLayoutLabelWidthTests = () => (
+  <FormLayout fieldLayout="horizontal" labelWidth="100px">
+    <CheckboxField label={defaultLabel} />
+    <CheckboxField label="another-test-label" />
+  </FormLayout>
+);
+
 export const CheckboxForFormLayoutTests = ({
   layout,
   ...props

src/components/CheckboxField/__tests__/CheckboxField.spec.tsx

@@ -16,7 +16,10 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { InputGroupContext } from '../InputGroup';
 import { Text } from '../Text';
-import { FormLayoutContext } from '../FormLayout';
+import {
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../FormLayout';
 import styles from './FileInputField.module.scss';
 
 /* istanbul ignore file */
@@ -40,6 +43,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
   } = props;
 
   const formLayoutContext = useContext(FormLayoutContext);
+  const formLayoutCustomFieldContext = useContext(FormLayoutCustomFieldContext);
   const inputGroupContext = useContext(InputGroupContext);
   const translations = useContext(TranslationsContext);
 
@@ -172,7 +176,7 @@ export const FileInputField = React.forwardRef((props, ref) => {
       <label
         className={classNames(
           styles.label,
-          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext || formLayoutCustomFieldContext) && styles.isLabelHidden,
         )}
         htmlFor={id}
         id={`${id}__labelText`}
@@ -286,6 +290,9 @@ FileInputField.propTypes = {
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `FormLayoutCustomField`
+   * component.
    */
   isLabelVisible: PropTypes.bool,
   /**

src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-formLayout-visual-labelWidth-string-100px-1-chromium-linux.png

@@ -9,6 +9,8 @@ import {
 } from '../../../../tests/playwright';
 import type { FileInputFieldForFormLayoutTestsProps } from './FileInputField.story';
 import {
+  FileInputFieldForFormLayoutCustomFieldTests,
+  FileInputFieldForFormLayoutLabelWidthTests,
   FileInputFieldForFormLayoutTests,
   FileInputFieldForRefTest,
   FileInputFieldForTest,
@@ -314,6 +316,13 @@ test.describe('FileInputField', () => {
 
   test.describe('formLayout', () => {
     test.describe('visual', () => {
+      test('labelWidth:string=100px', async ({ mount }) => {
+        const component = await mount(<FileInputFieldForFormLayoutLabelWidthTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+
       [
         ...propTests.layoutPropTest,
       ].forEach(({
@@ -346,4 +355,15 @@ test.describe('FileInputField', () => {
       });
     });
   });
+
+  test.describe('formLayoutCustomField', () => {
+    test.describe('visual', () => {
+      test('label:hidden', async ({ mount }) => {
+        const component = await mount(<FileInputFieldForFormLayoutCustomFieldTests />);
+
+        const screenshot = await component.screenshot();
+        expect(screenshot).toMatchSnapshot();
+      });
+    });
+  });
 });