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

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

@@ -7,11 +7,13 @@ import {
   mixPropTests,
   propTests,
 } from '../../../../tests/playwright';
+import type { ButtonForFormLayoutTestsProps } from './Button.story';
 import {
-  ButtonForTest,
+  ButtonForFormLayoutTests,
   ButtonForRefTest,
-  ButtonInVerticalFormLayoutForTest,
+  ButtonForTest,
   ButtonInHorizontalFormLayoutForTest,
+  ButtonInVerticalFormLayoutForTest,
 } from './Button.story';
 
 test.describe('Button', () => {
@@ -167,6 +169,37 @@ test.describe('Button', () => {
         const component = await mount(<ButtonInHorizontalFormLayoutForTest />);
         expect(await component.screenshot()).toMatchSnapshot();
       });
+
+      [
+        ...propTests.layoutPropTest,
+      ].forEach(({
+        name,
+        onBeforeTest,
+        onBeforeSnapshot,
+        props,
+      }) => {
+        test(name, async ({
+          mount,
+          page,
+        }) => {
+          if (onBeforeTest) {
+            await onBeforeTest(page);
+          }
+
+          const component = await mount(
+            <ButtonForFormLayoutTests
+              {...props as unknown as ButtonForFormLayoutTestsProps}
+            />,
+          );
+
+          if (onBeforeSnapshot) {
+            await onBeforeSnapshot(page, component);
+          }
+
+          const screenshot = await component.screenshot();
+          expect(screenshot).toMatchSnapshot();
+        });
+      });
     });
   });
 });

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

@@ -1,17 +1,25 @@
 import React, {
   useEffect,
+  useMemo,
   useRef,
 } from 'react';
 import type { ButtonHTMLAttributes } from 'react';
-import { FormLayout } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+} from '../../FormLayout';
 import { Button } from '..';
+import { TextField } from '../../TextField';
 
 // Types for story component will be improved when we have full TypeScript support
 type ButtonForTestProps = ButtonHTMLAttributes<HTMLButtonElement>;
 type ButtonForRefTestProps = ButtonForTestProps & {
   testRefAttrName: string;
   testRefAttrValue: string;
 };
+export type ButtonForFormLayoutTestsProps = ButtonForTestProps & {
+  layout: 'vertical' | 'horizontal'
+};
 
 export const ButtonForTest = ({
   ...props
@@ -42,10 +50,29 @@ export const ButtonForRefTest = ({
   );
 };
 
+export const ButtonForFormLayoutTests = ({
+  layout,
+  ...props
+}: ButtonForFormLayoutTestsProps) => {
+  const values = useMemo(() => ({ layout }), [layout]);
+
+  return (
+    <FormLayoutContext.Provider
+      value={values}
+    >
+      <Button
+        label="Button"
+        {...props}
+      />
+    </FormLayoutContext.Provider>
+  );
+};
+
 export const ButtonInVerticalFormLayoutForTest = ({
   ...props
 }: ButtonForTestProps) => (
   <FormLayout fieldLayout="vertical">
+    <TextField label="Text field" />
     <Button
       label="Button"
       {...props}
@@ -57,6 +84,7 @@ export const ButtonInHorizontalFormLayoutForTest = ({
   ...props
 }: ButtonForTestProps) => (
   <FormLayout fieldLayout="horizontal">
+    <TextField label="Text field" />
     <Button
       label="Button"
       {...props}

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

@@ -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/CheckboxField/__tests__/CheckboxField.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/FileInputField/FileInputField.jsx

@@ -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/FileInputField/__tests__/FileInputField.spec.tsx

@@ -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();
+      });
+    });
+  });
 });

src/components/FileInputField/__tests__/FileInputField.story.tsx

@@ -5,7 +5,11 @@ import React, {
 } from 'react';
 import type { HTMLAttributes } from 'react';
 import { FileInputField } from '..';
-import { FormLayoutContext } from '../../FormLayout';
+import {
+  FormLayout,
+  FormLayoutContext,
+  FormLayoutCustomFieldContext,
+} from '../../FormLayout';
 
 // Types for story component will be improved when we have full TypeScript support
 type FileInputFieldForTestProps = HTMLAttributes<HTMLDivElement>;
@@ -99,6 +103,13 @@ export const FileInputFieldForRefTest = ({
   );
 };
 
+export const FileInputFieldForFormLayoutLabelWidthTests = () => (
+  <FormLayout fieldLayout="horizontal" labelWidth="100px">
+    <FileInputField id="testId" label="FirstLabel" onFilesChanged={() => {}} />
+    <FileInputField id="anotherTestId" label="SecondLabel" onFilesChanged={() => {}} />
+  </FormLayout>
+);
+
 export const FileInputFieldForFormLayoutTests = ({
   layout,
   ...props
@@ -126,3 +137,18 @@ export const FileInputFieldForFormLayoutTests = ({
     </FormLayoutContext.Provider>
   );
 };
+
+export const FileInputFieldForFormLayoutCustomFieldTests = ({
+  ...props
+}: FileInputFieldForTestProps) => (
+  <InputWrapper {...props}>
+    <FormLayoutCustomFieldContext.Provider value>
+      <FileInputField
+        id="testId"
+        label="Attachment"
+        onFilesChanged={() => {}}
+        {...props}
+      />
+    </FormLayoutCustomFieldContext.Provider>
+  </InputWrapper>
+);

src/components/FormLayout/FormLayoutCustomField.jsx

@@ -7,6 +7,7 @@ import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
+import { FormLayoutCustomFieldContext } from './FormLayoutCustomFieldContext';
 import styles from './FormLayoutCustomField.module.scss';
 
 const renderLabel = (id, label, labelForId) => {
@@ -73,7 +74,9 @@ export const FormLayoutCustomField = ({
         className={styles.field}
         id={id && `${id}__field`}
       >
-        {children}
+        <FormLayoutCustomFieldContext.Provider value>
+          {children}
+        </FormLayoutCustomFieldContext.Provider>
       </div>
     </div>
   );

src/components/FormLayout/FormLayoutCustomFieldContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const FormLayoutCustomFieldContext = React.createContext(null);

src/components/FormLayout/README.md

@@ -330,6 +330,29 @@ and its styles may affect contained form fields through CSS cascade, don't
 forget to mirror the aforementioned properties to the contained form fields too
 as API options as such are **not** inherited.
 
+### Nested Fields Labels
+
+When placing box form fields — TextField, TextArea, SelectField, or
+FileInputField — inside a FormLayoutCustomField, their labels are hidden
+automatically.
+
+```docoff-react-preview
+<FormLayout fieldLayout="horizontal" labelWidth="auto">
+  <FormLayoutCustomField
+    innerFieldSize="medium"
+    label="Custom field with invisible label"
+  >
+    <TextField
+      label="This field's label is hidden"
+    />
+  </FormLayoutCustomField>
+</FormLayout>
+```
+
+ℹ️ Labels are hidden regardless of `fieldLayout`. In a horizontal FormLayout,
+the nested field's own label would conflict with the FormLayout grid and
+produce incorrect alignment, so it is always hidden for consistency.
+
 ### Label Alignment
 
 If you are in a situation with one or more box form fields inside your
@@ -346,7 +369,6 @@ this task.
     label="Custom field label aligned to inner text input"
   >
     <TextField
-      isLabelVisible={false}
       label="A form element"
       placeholder="Text field with invisible label"
     />
@@ -391,7 +413,6 @@ React.createElement(() => {
       >
         <TextField
           id="my-text-field-custom-accessibility"
-          isLabelVisible={false}
           label="A form element"
           placeholder="Text field with invisible label"
         />

src/components/FormLayout/__tests__/FormLayout.story.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import type { HTMLAttributes } from 'react';
-import {
-  FormLayout,
-  FormLayoutCustomField,
-} from '..';
-import { TextField } from '../../TextField';
+import { Button } from '../../Button';
 import { CheckboxField } from '../../CheckboxField';
 import { FileInputField } from '../../FileInputField';
 import { Radio } from '../../Radio';
 import { SelectField } from '../../SelectField';
 import { TextArea } from '../../TextArea';
+import { TextField } from '../../TextField';
 import { Toggle } from '../../Toggle';
+import {
+  FormLayout,
+  FormLayoutCustomField,
+} from '..';
 
 // Types for story component will be improved when we have full TypeScript support
 type FormLayoutForTestProps = HTMLAttributes<HTMLDivElement>;
@@ -69,6 +70,7 @@ export const FormLayoutForTest = ({
       <TextField label="Label7" />
     </FormLayoutCustomField>
     <FileInputField label="Attachment label 8" />
+    <Button label="Submit" />
   </FormLayout>
 );