Added EuiFormFieldset and EuiFormLegend components (#2706)

* Moved form label font styles to a mixin
* Added `EuiFormFieldset` and `EuiFormLegend` components
* Remove unecessary omit and update tests to include children

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Converted `EuiSuggest` to Typescript ([#2692](https://github.com/elastic/eui/pull/2692))
 - Converted `EuiErrorBoundary` to Typescript ([#2690](https://github.com/elastic/eui/pull/2690))
 - Updated `EuiNavDrawer` to accept React fragments ([#2710](https://github.com/elastic/eui/pull/2710))
+- Added `EuiFormFieldset` and `EuiFormLegend` components ([#2706](https://github.com/elastic/eui/pull/2706))
 
 **Bug fixes**
 

src-docs/src/views/form_controls/fieldset.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { EuiFormFieldset } from '../../../../src/components/form/form_fieldset';
+import { EuiSwitch } from '../../../../src/components/form/switch';
+import { EuiSpacer } from '../../../../src/components/spacer';
+
+export default () => (
+ <EuiFormFieldset legend={{ children: 'Enable these objects' }}>
+ <EuiSwitch label="Object 1" onChange={() => {}} checked={false} />
+ <EuiSpacer size="s" />
+ <EuiSwitch label="Object 2" onChange={() => {}} checked={true} />
+ </EuiFormFieldset>
+);

src-docs/src/views/form_controls/form_controls_example.js

@@ -17,6 +17,8 @@ import {
  EuiFieldSearch,
  EuiFieldText,
  EuiFilePicker,
+ EuiFormFieldset,
+ EuiFormLegend,
  EuiFormControlLayout,
  EuiFormControlLayoutDelimited,
  EuiLink,
@@ -25,6 +27,7 @@ import {
  EuiSelect,
  EuiSwitch,
  EuiTextArea,
+ EuiSpacer,
 } from '../../../../src/components';
 
 import FieldSearch from './field_search';
@@ -79,6 +82,10 @@ import PrependAppend from './prepend_append';
 const PrependAppendSource = require('!!raw-loader!./prepend_append');
 const PrependAppendHtml = renderToHtml(PrependAppend);
 
+import Fieldset from './fieldset';
+const fieldsetSource = require('!!raw-loader!./fieldset');
+const fieldsetHtml = renderToHtml(Fieldset);
+
 import FormControlLayout from './form_control_layout';
 const formControlLayoutSource = require('!!raw-loader!./form_control_layout');
 const formControlLayoutHtml = renderToHtml(FormControlLayout);
@@ -319,6 +326,61 @@ export const FormControlsExample = {
  },
  demo: <Switch />,
  },
+ {
+ title: 'Fieldset and legend',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: fieldsetSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: fieldsetHtml,
+ },
+ ],
+ text: (
+ <Fragment>
+ <EuiCallOut
+ color="warning"
+ iconType="accessibility"
+ size="s"
+ title={
+ <span>
+ &quot;[Use a fieldset and legend] for groups of related controls
+ where the individual labels for each control do not provide a
+ sufficient description, and an additional group level
+ description is needed.&quot;{' '}
+ <EuiLink
+ external
+ href="https://www.w3.org/WAI/WCAG21/Techniques/html/H71">
+ WCAG Spec
+ </EuiLink>
+ </span>
+ }
+ />
+ <EuiSpacer />
+ <p>
+ <EuiCode>EuiFieldset</EuiCode> simply wraps its children in a{' '}
+ <EuiCode>&lt;fieldset&gt;</EuiCode> with the option to add a{' '}
+ <EuiCode>&lt;legend&gt;</EuiCode> via the <EuiCode>legend</EuiCode>{' '}
+ object prop.
+ </p>
+ </Fragment>
+ ),
+ props: {
+ EuiFormFieldset,
+ EuiFormLegend,
+ },
+ demo: <Fieldset />,
+ snippet: [
+ `<EuiFormFieldset legend={{ children: 'Legend' }}>
+ /* Controls */
+</EuiFormFieldset>`,
+ `<EuiFormFieldset legend={{ children: 'Hidden legend', display: 'hidden' }}>
+ /* Controls */
+</EuiFormFieldset>`,
+ ],
+ },
  {
  title: 'Prepend and Append',
  text: (

src/components/form/_index.scss

@@ -8,6 +8,7 @@
 @import 'form';
 @import 'form_control_layout/index';
 @import 'form_error_text/index';
+@import 'form_fieldset/index';
 @import 'form_help_text/index';
 @import 'form_label/index';
 @import 'form_row/index';

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiFormFieldset is rendered 1`] = `
+<fieldset
+ aria-label="aria-label"
+ class="testClass1 testClass2"
+ data-test-subj="test subject string"
+>
+ <input />
+</fieldset>
+`;
+
+exports[`EuiFormFieldset props legend is rendered 1`] = `
+<fieldset>
+ <legend
+ class="euiFormLegend"
+ >
+ Legend
+ </legend>
+ <input />
+</fieldset>
+`;

src/components/form/form_fieldset/__snapshots__/form_legend.test.tsx.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiFormLegend is rendered 1`] = `
+<legend
+ aria-label="aria-label"
+ class="euiFormLegend testClass1 testClass2"
+ data-test-subj="test subject string"
+>
+ Legend
+</legend>
+`;
+
+exports[`EuiFormLegend props compressed is rendered 1`] = `
+<legend
+ class="euiFormLegend euiFormLegend--compressed"
+>
+ Legend
+</legend>
+`;
+
+exports[`EuiFormLegend props hidden is rendered 1`] = `
+<legend
+ class="euiFormLegend euiFormLegend-isHidden"
+>
+ <span
+ class="euiScreenReaderOnly"
+ >
+ Legend
+ </span>
+</legend>
+`;

src/components/form/form_fieldset/_form_legend.scss

@@ -0,0 +1,11 @@
+.euiFormLegend {
+ @include euiFormLabel;
+
+ &:not(.euiFormLegend-isHidden) {
+ margin-bottom: $euiSizeS;
+
+ &.euiFormLegend--compressed {
+ margin-bottom: $euiSizeXS;
+ }
+ }
+}

src/components/form/form_fieldset/_index.scss

@@ -0,0 +1 @@
+@import 'form_legend';

src/components/form/form_fieldset/form_fieldset.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { EuiFormFieldset } from './form_fieldset';
+
+describe('EuiFormFieldset', () => {
+ test('is rendered', () => {
+ const component = render(
+ <EuiFormFieldset {...requiredProps}>
+ <input />
+ </EuiFormFieldset>
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+
+ describe('props', () => {
+ test('legend is rendered', () => {
+ const component = render(
+ <EuiFormFieldset legend={{ children: 'Legend' }}>
+ <input />
+ </EuiFormFieldset>
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+ });
+});

src/components/form/form_fieldset/form_fieldset.tsx

@@ -0,0 +1,28 @@
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import { CommonProps } from '../../common';
+import { EuiFormLegendProps, EuiFormLegend } from './form_legend';
+
+export interface EuiFormFieldsetProps
+ extends CommonProps,
+ HTMLAttributes<HTMLFieldSetElement> {
+ /**
+ * Adds an EuiFormLegend element as the first child
+ */
+ legend?: EuiFormLegendProps;
+}
+
+export const EuiFormFieldset: FunctionComponent<EuiFormFieldsetProps> = ({
+ children,
+ className,
+ legend,
+ ...rest
+}) => {
+ const legendDisplay = !!legend && <EuiFormLegend {...legend} />;
+
+ return (
+ <fieldset className={className} {...rest}>
+ {legendDisplay}
+ {children}
+ </fieldset>
+ );
+};

src/components/form/form_fieldset/form_legend.test.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+
+import { EuiFormLegend } from './form_legend';
+
+describe('EuiFormLegend', () => {
+ test('is rendered', () => {
+ const component = render(
+ <EuiFormLegend {...requiredProps}>Legend</EuiFormLegend>
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+
+ describe('props', () => {
+ test('hidden is rendered', () => {
+ const component = render(
+ <EuiFormLegend display="hidden">Legend</EuiFormLegend>
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+
+ test('compressed is rendered', () => {
+ const component = render(
+ <EuiFormLegend compressed>Legend</EuiFormLegend>
+ );
+
+ expect(component).toMatchSnapshot();
+ });
+ });
+});

src/components/form/form_fieldset/form_legend.tsx

@@ -0,0 +1,44 @@
+import React, { HTMLAttributes, FunctionComponent, ReactNode } from 'react';
+import { CommonProps } from '../../common';
+import classNames from 'classnames';
+import { EuiScreenReaderOnly } from '../../accessibility';
+
+export type EuiFormLegendProps = HTMLAttributes<HTMLLegendElement> &
+ CommonProps & {
+ children: ReactNode;
+ /**
+ * For a hidden legend that is still visible to the screen reader, set to 'hidden'
+ */
+ display?: 'hidden' | 'visible';
+ compressed?: boolean;
+ };
+
+export const EuiFormLegend: FunctionComponent<EuiFormLegendProps> = ({
+ children,
+ className,
+ display = 'visible',
+ compressed,
+ ...rest
+}) => {
+ const isLegendHidden = display === 'hidden';
+ const classes = classNames(
+ 'euiFormLegend',
+ {
+ 'euiFormLegend-isHidden': isLegendHidden,
+ 'euiFormLegend--compressed': compressed,
+ },
+ className
+ );
+
+ return (
+ <legend className={classes} {...rest}>
+ {isLegendHidden ? (
+ <EuiScreenReaderOnly>
+ <span>{children}</span>
+ </EuiScreenReaderOnly>
+ ) : (
+ children
+ )}
+ </legend>
+ );
+};

src/components/form/form_fieldset/index.ts

@@ -0,0 +1,2 @@
+export { EuiFormFieldset, EuiFormFieldsetProps } from './form_fieldset';
+export { EuiFormLegend, EuiFormLegendProps } from './form_legend';

src/components/form/form_label/_form_label.scss

@@ -2,11 +2,9 @@
  * 1. Focused state overrides invalid state.
  */
 .euiFormLabel {
- @include euiFontSizeXS;
+ @include euiFormLabel;
  display: inline-block;
  transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
- color: $euiTitleColor;
- font-weight: $euiFontWeightSemiBold;
 
  &.euiFormLabel-isInvalid {
  color: $euiColorDanger; /* 1 */

src/components/form/index.js

@@ -11,6 +11,7 @@ export {
  EuiFormControlLayoutDelimited,
 } from './form_control_layout';
 export { EuiFormErrorText } from './form_error_text';
+export { EuiFormFieldset, EuiFormLegend } from './form_fieldset';
 export { EuiFormHelpText } from './form_help_text';
 export { EuiFormLabel } from './form_label';
 export { EuiFormRow } from './form_row';

src/components/index.js

@@ -118,8 +118,10 @@ export {
  EuiFormControlLayout,
  EuiFormControlLayoutDelimited,
  EuiFormErrorText,
+ EuiFormFieldset,
  EuiFormHelpText,
  EuiFormLabel,
+ EuiFormLegend,
  EuiFormRow,
  EuiRadio,
  EuiRadioGroup,

src/global_styling/mixins/_form.scss

@@ -1,3 +1,10 @@
+// Labels
+@mixin euiFormLabel {
+ @include euiFontSizeXS;
+ color: $euiTitleColor;
+ font-weight: $euiFontWeightSemiBold;
+}
+
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
  $firstIconSize: $euiFormControlPadding + $euiSize + $euiFormControlPadding;
  $secondIconSize: $euiFormControlPadding + $euiSize;