From ece87b08d9154c89b3451a0a57e552c51105dc00 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 19 Dec 2019 11:16:57 -0500 Subject: [PATCH 1/6] Moved form label font styles to a mixin --- src-docs/src/views/form_controls/radio_group.js | 4 ++++ src/components/form/form_label/_form_label.scss | 4 +--- src/global_styling/mixins/_form.scss | 7 +++++++ 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/form_controls/radio_group.js b/src-docs/src/views/form_controls/radio_group.js index b070fbd65ea..b73a5c49794 100644 --- a/src-docs/src/views/form_controls/radio_group.js +++ b/src-docs/src/views/form_controls/radio_group.js @@ -45,6 +45,10 @@ export default class extends Component { idSelected={this.state.radioIdSelected} onChange={this.onChange} name="radio group" + legend={{ + children: This is a legend for a radio group, + // display: 'hidden', + }} /> diff --git a/src/components/form/form_label/_form_label.scss b/src/components/form/form_label/_form_label.scss index 887d7de476c..14055e077af 100644 --- a/src/components/form/form_label/_form_label.scss +++ b/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 */ diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss index 1aa4e831e1e..56b0e87bab1 100644 --- a/src/global_styling/mixins/_form.scss +++ b/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; From 4180a1c9e2abc895adf76e6ae06703e341d7b549 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 19 Dec 2019 17:28:08 -0500 Subject: [PATCH 2/6] Added `EuiFormFieldset` and `EuiFormLegend` components --- src-docs/src/views/form_controls/fieldset.tsx | 13 +++++ .../form_controls/form_controls_example.js | 54 +++++++++++++++++++ src/components/form/_index.scss | 1 + .../__snapshots__/form_fieldset.test.tsx.snap | 19 +++++++ .../__snapshots__/form_legend.test.tsx.snap | 31 +++++++++++ .../form/form_fieldset/_form_legend.scss | 11 ++++ src/components/form/form_fieldset/_index.scss | 1 + .../form/form_fieldset/form_fieldset.test.tsx | 23 ++++++++ .../form/form_fieldset/form_fieldset.tsx | 28 ++++++++++ .../form/form_fieldset/form_legend.test.tsx | 33 ++++++++++++ .../form/form_fieldset/form_legend.tsx | 44 +++++++++++++++ src/components/form/form_fieldset/index.ts | 2 + src/components/form/index.js | 1 + src/components/index.js | 2 + 14 files changed, 263 insertions(+) create mode 100644 src-docs/src/views/form_controls/fieldset.tsx create mode 100644 src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap create mode 100644 src/components/form/form_fieldset/__snapshots__/form_legend.test.tsx.snap create mode 100644 src/components/form/form_fieldset/_form_legend.scss create mode 100644 src/components/form/form_fieldset/_index.scss create mode 100644 src/components/form/form_fieldset/form_fieldset.test.tsx create mode 100644 src/components/form/form_fieldset/form_fieldset.tsx create mode 100644 src/components/form/form_fieldset/form_legend.test.tsx create mode 100644 src/components/form/form_fieldset/form_legend.tsx create mode 100644 src/components/form/form_fieldset/index.ts diff --git a/src-docs/src/views/form_controls/fieldset.tsx b/src-docs/src/views/form_controls/fieldset.tsx new file mode 100644 index 00000000000..9a7ddb18fb5 --- /dev/null +++ b/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 () => ( + + {}} checked={false} /> + + {}} checked={true} /> + +); diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js index 4c61e9ea9f4..83be4f197f7 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/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,53 @@ export const FormControlsExample = { }, demo: , }, + { + title: 'Fieldset and legend', + source: [ + { + type: GuideSectionTypes.JS, + code: fieldsetSource, + }, + { + type: GuideSectionTypes.HTML, + code: fieldsetHtml, + }, + ], + text: ( + + + "[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."{' '} + + WCAG Spec + + + } + /> + +

+ EuiFieldset simply wraps its children in a{' '} + <fieldset> with the option to add a{' '} + <legend> via the legend{' '} + object prop. +

+ + ), + props: { + EuiFormFieldset, + EuiFormLegend, + }, + demo:
, + }, { title: 'Prepend and Append', text: ( diff --git a/src/components/form/_index.scss b/src/components/form/_index.scss index ae9fcb9d333..0cd3dd54e79 100644 --- a/src/components/form/_index.scss +++ b/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'; diff --git a/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap b/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap new file mode 100644 index 00000000000..a119c02b605 --- /dev/null +++ b/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiFormFieldset is rendered 1`] = ` +
+`; + +exports[`EuiFormFieldset props legend is rendered 1`] = ` +
+ + Legend + +
+`; diff --git a/src/components/form/form_fieldset/__snapshots__/form_legend.test.tsx.snap b/src/components/form/form_fieldset/__snapshots__/form_legend.test.tsx.snap new file mode 100644 index 00000000000..2f0257d2b10 --- /dev/null +++ b/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 + +`; + +exports[`EuiFormLegend props compressed is rendered 1`] = ` + + Legend + +`; + +exports[`EuiFormLegend props hidden is rendered 1`] = ` + + + Legend + + +`; diff --git a/src/components/form/form_fieldset/_form_legend.scss b/src/components/form/form_fieldset/_form_legend.scss new file mode 100644 index 00000000000..0b79ffc6f06 --- /dev/null +++ b/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; + } + } +} diff --git a/src/components/form/form_fieldset/_index.scss b/src/components/form/form_fieldset/_index.scss new file mode 100644 index 00000000000..2751e94c43c --- /dev/null +++ b/src/components/form/form_fieldset/_index.scss @@ -0,0 +1 @@ +@import 'form_legend'; diff --git a/src/components/form/form_fieldset/form_fieldset.test.tsx b/src/components/form/form_fieldset/form_fieldset.test.tsx new file mode 100644 index 00000000000..29a25b68191 --- /dev/null +++ b/src/components/form/form_fieldset/form_fieldset.test.tsx @@ -0,0 +1,23 @@ +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(); + + expect(component).toMatchSnapshot(); + }); + + describe('props', () => { + test('legend is rendered', () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); +}); diff --git a/src/components/form/form_fieldset/form_fieldset.tsx b/src/components/form/form_fieldset/form_fieldset.tsx new file mode 100644 index 00000000000..4b15fe1f9fc --- /dev/null +++ b/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, + Omit, 'onChange'> { + /** + * Adds an EuiFormLegend element as the first child + */ + legend?: EuiFormLegendProps; +} + +export const EuiFormFieldset: FunctionComponent = ({ + children, + className, + legend, + ...rest +}) => { + const legendDisplay = !!legend && ; + + return ( +
+ {legendDisplay} + {children} +
+ ); +}; diff --git a/src/components/form/form_fieldset/form_legend.test.tsx b/src/components/form/form_fieldset/form_legend.test.tsx new file mode 100644 index 00000000000..2a3676563bb --- /dev/null +++ b/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( + Legend + ); + + expect(component).toMatchSnapshot(); + }); + + describe('props', () => { + test('hidden is rendered', () => { + const component = render( + Legend + ); + + expect(component).toMatchSnapshot(); + }); + + test('compressed is rendered', () => { + const component = render( + Legend + ); + + expect(component).toMatchSnapshot(); + }); + }); +}); diff --git a/src/components/form/form_fieldset/form_legend.tsx b/src/components/form/form_fieldset/form_legend.tsx new file mode 100644 index 00000000000..d5d6344aee3 --- /dev/null +++ b/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 & + 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 = ({ + children, + className, + display = 'visible', + compressed, + ...rest +}) => { + const isLegendHidden = display === 'hidden'; + const classes = classNames( + 'euiFormLegend', + { + 'euiFormLegend-isHidden': isLegendHidden, + 'euiFormLegend--compressed': compressed, + }, + className + ); + + return ( + + {isLegendHidden ? ( + + {children} + + ) : ( + children + )} + + ); +}; diff --git a/src/components/form/form_fieldset/index.ts b/src/components/form/form_fieldset/index.ts new file mode 100644 index 00000000000..e1eb28b81d0 --- /dev/null +++ b/src/components/form/form_fieldset/index.ts @@ -0,0 +1,2 @@ +export { EuiFormFieldset, EuiFormFieldsetProps } from './form_fieldset'; +export { EuiFormLegend, EuiFormLegendProps } from './form_legend'; diff --git a/src/components/form/index.js b/src/components/form/index.js index 0c0d51a554b..b07c9f0c34f 100644 --- a/src/components/form/index.js +++ b/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'; diff --git a/src/components/index.js b/src/components/index.js index febbba31948..f4cb7cf6652 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -118,8 +118,10 @@ export { EuiFormControlLayout, EuiFormControlLayoutDelimited, EuiFormErrorText, + EuiFormFieldset, EuiFormHelpText, EuiFormLabel, + EuiFormLegend, EuiFormRow, EuiRadio, EuiRadioGroup, From a672d3c3c05903503de6e9bc39803b54c345d541 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 19 Dec 2019 17:31:10 -0500 Subject: [PATCH 3/6] Add snippet --- src-docs/src/views/form_controls/form_controls_example.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src-docs/src/views/form_controls/form_controls_example.js b/src-docs/src/views/form_controls/form_controls_example.js index 83be4f197f7..685883913e9 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -372,6 +372,14 @@ export const FormControlsExample = { EuiFormLegend, }, demo:
, + snippet: [ + ` + /* Controls */ +`, + ` + /* Controls */ +`, + ], }, { title: 'Prepend and Append', From 230676e861cf106fccc424e8509df5e6cec39384 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 19 Dec 2019 17:32:56 -0500 Subject: [PATCH 4/6] Revert accidental commit of radio group doc example This reverts part of commit ece87b08d9154c89b3451a0a57e552c51105dc00. --- src-docs/src/views/form_controls/radio_group.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src-docs/src/views/form_controls/radio_group.js b/src-docs/src/views/form_controls/radio_group.js index b73a5c49794..b070fbd65ea 100644 --- a/src-docs/src/views/form_controls/radio_group.js +++ b/src-docs/src/views/form_controls/radio_group.js @@ -45,10 +45,6 @@ export default class extends Component { idSelected={this.state.radioIdSelected} onChange={this.onChange} name="radio group" - legend={{ - children: This is a legend for a radio group, - // display: 'hidden', - }} /> From 8e728bbe1075ce26a3b54731a80ef37ab1d8a361 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 19 Dec 2019 17:39:23 -0500 Subject: [PATCH 5/6] cl --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e931e710fab..ddcc55210b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `17.3.1`. +- Added `EuiFormFieldset` and `EuiFormLegend` components ([#2706](https://github.com/elastic/eui/pull/2706)) ## [`17.3.1`](https://github.com/elastic/eui/tree/v17.3.1) From c838123a796647982d40fa760a30ef5a15e414b4 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 2 Jan 2020 11:03:55 -0500 Subject: [PATCH 6/6] Remove unecessary omit and update tests to include children --- .../__snapshots__/form_fieldset.test.tsx.snap | 5 ++++- .../form/form_fieldset/form_fieldset.test.tsx | 10 ++++++++-- src/components/form/form_fieldset/form_fieldset.tsx | 2 +- 3 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap b/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap index a119c02b605..5317bcbf64e 100644 --- a/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap +++ b/src/components/form/form_fieldset/__snapshots__/form_fieldset.test.tsx.snap @@ -5,7 +5,9 @@ exports[`EuiFormFieldset is rendered 1`] = ` aria-label="aria-label" class="testClass1 testClass2" data-test-subj="test subject string" -/> +> + +
`; exports[`EuiFormFieldset props legend is rendered 1`] = ` @@ -15,5 +17,6 @@ exports[`EuiFormFieldset props legend is rendered 1`] = ` > Legend +
`; diff --git a/src/components/form/form_fieldset/form_fieldset.test.tsx b/src/components/form/form_fieldset/form_fieldset.test.tsx index 29a25b68191..b236b048dcc 100644 --- a/src/components/form/form_fieldset/form_fieldset.test.tsx +++ b/src/components/form/form_fieldset/form_fieldset.test.tsx @@ -6,7 +6,11 @@ import { EuiFormFieldset } from './form_fieldset'; describe('EuiFormFieldset', () => { test('is rendered', () => { - const component = render(); + const component = render( + + + + ); expect(component).toMatchSnapshot(); }); @@ -14,7 +18,9 @@ describe('EuiFormFieldset', () => { describe('props', () => { test('legend is rendered', () => { const component = render( - + + + ); expect(component).toMatchSnapshot(); diff --git a/src/components/form/form_fieldset/form_fieldset.tsx b/src/components/form/form_fieldset/form_fieldset.tsx index 4b15fe1f9fc..72be13d2758 100644 --- a/src/components/form/form_fieldset/form_fieldset.tsx +++ b/src/components/form/form_fieldset/form_fieldset.tsx @@ -4,7 +4,7 @@ import { EuiFormLegendProps, EuiFormLegend } from './form_legend'; export interface EuiFormFieldsetProps extends CommonProps, - Omit, 'onChange'> { + HTMLAttributes { /** * Adds an EuiFormLegend element as the first child */