From 8240275edb829d1fef5a8cae4abf80c402221634 Mon Sep 17 00:00:00 2001 From: cchaos Date: Wed, 18 Dec 2019 16:56:59 -0500 Subject: [PATCH 1/8] Fix radio label to be inline MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix radio group doc example to use display toggles
 --- .../src/views/form_controls/radio_group.js | 31 +++++++------------ src/components/form/radio/_radio.scss | 2 +- 2 files changed, 12 insertions(+), 21 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..a8c060ae2ba 100644 --- a/src-docs/src/views/form_controls/radio_group.js +++ b/src-docs/src/views/form_controls/radio_group.js @@ -1,8 +1,9 @@ -import React, { Component, Fragment } from 'react'; +import React, { Component } from 'react'; -import { EuiRadioGroup, EuiSpacer, EuiTitle } from '../../../../src/components'; +import { EuiRadioGroup } from '../../../../src/components'; import makeId from '../../../../src/components/form/form_row/make_id'; +import { DisplayToggles } from './display_toggles'; export default class extends Component { constructor(props) { @@ -21,7 +22,7 @@ export default class extends Component { }, { id: `${idPrefix}2`, - label: 'Option three', + label: 'Option three is disabled', disabled: true, }, ]; @@ -39,29 +40,19 @@ export default class extends Component { render() { return ( - + /* DisplayToggles wrapper for Docs only */ + - - - - -

Disabled

- - - - - - + ); } } diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss index 622156c4687..e48c629db79 100644 --- a/src/components/form/radio/_radio.scss +++ b/src/components/form/radio/_radio.scss @@ -5,7 +5,7 @@ @include euiScreenReaderOnly; ~ .euiRadio__label { - display: block; + display: inline; padding-left: ($euiRadioSize * 1.5); line-height: $euiSizeL; font-size: $euiFontSizeS; From 886422cf4e751b7fefc7cf09bd6c8080ae6ae2ff Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 19 Dec 2019 11:16:57 -0500 Subject: [PATCH 2/8] Moved form label font styles to a mixin --- src-docs/src/views/form_controls/radio_group.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src-docs/src/views/form_controls/radio_group.js b/src-docs/src/views/form_controls/radio_group.js index a8c060ae2ba..a1945b5793c 100644 --- a/src-docs/src/views/form_controls/radio_group.js +++ b/src-docs/src/views/form_controls/radio_group.js @@ -51,6 +51,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', + }} /> ); From dc0ea3f653b47c73013366579f10ad4879e7f060 Mon Sep 17 00:00:00 2001 From: cchaos Date: Thu, 19 Dec 2019 11:18:28 -0500 Subject: [PATCH 3/8] Added ability to supply a legend (and fieldset) to EuiRadioGroup --- src/components/form/radio/_radio.scss | 2 +- src/components/form/radio/_radio_group.scss | 12 ++ src/components/form/radio/radio_group.tsx | 128 ++++++++++++++------ 3 files changed, 107 insertions(+), 35 deletions(-) diff --git a/src/components/form/radio/_radio.scss b/src/components/form/radio/_radio.scss index e48c629db79..9fb5685d59c 100644 --- a/src/components/form/radio/_radio.scss +++ b/src/components/form/radio/_radio.scss @@ -5,7 +5,7 @@ @include euiScreenReaderOnly; ~ .euiRadio__label { - display: inline; + display: inline-block; padding-left: ($euiRadioSize * 1.5); line-height: $euiSizeL; font-size: $euiFontSizeS; diff --git a/src/components/form/radio/_radio_group.scss b/src/components/form/radio/_radio_group.scss index 89a3809bbc8..a8e0973ba9d 100644 --- a/src/components/form/radio/_radio_group.scss +++ b/src/components/form/radio/_radio_group.scss @@ -5,3 +5,15 @@ margin-top: 0; } } + +.euiRadioGroup__legend { + @include euiFormLabel; +} + +.euiRadioGroup__legend:not(.euiRadioGroup__legend--hidden) + .euiRadioGroup__item { + margin-top: $euiSizeS; + + &.euiRadio--compressed { + margin-top: $euiSizeXS; + } +} diff --git a/src/components/form/radio/radio_group.tsx b/src/components/form/radio/radio_group.tsx index f6ef04aa202..2e7764b928c 100644 --- a/src/components/form/radio/radio_group.tsx +++ b/src/components/form/radio/radio_group.tsx @@ -1,28 +1,48 @@ -import React, { FunctionComponent, HTMLAttributes } from 'react'; -import { CommonProps } from '../../common'; +import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; +import classNames from 'classnames'; +import { CommonProps, ExclusiveUnion } from '../../common'; import { EuiRadio, RadioProps } from './radio'; +import { EuiScreenReaderOnly } from '../../accessibility'; export interface EuiRadioGroupOption extends Omit { id: string; } +export interface EuiRadioGroupLegend + extends CommonProps, + HTMLAttributes { + children: ReactNode; + /** + * For a hidden legend that is still visible to the screen reader, set to 'hidden' + */ + display?: 'hidden'; +} + export type EuiRadioGroupChangeCallback = (id: string, value?: string) => void; -export type EuiRadioGroupProps = CommonProps & - Omit, 'onChange'> & { - disabled?: boolean; - /** - * Tightens up the spacing between radio rows and sends down the - * compressed prop to the radio itself - */ - compressed?: boolean; - name?: string; - options: EuiRadioGroupOption[]; - idSelected?: string; - onChange: EuiRadioGroupChangeCallback; - }; +type AsDivProps = Omit, 'onChange'>; +type WithLegendProps = { + /** + * If the individual labels for each radio do not provide a sufficient description, add a legend. + * Wraps the group in a `fieldset` and adds a `legend` for titling the whole group. + */ + legend: EuiRadioGroupLegend; +} & Omit, 'onChange'>; + +export type EuiRadioGroupProps = CommonProps & { + disabled?: boolean; + /** + * Tightens up the spacing between radio rows and sends down the + * compressed prop to the radio itself + */ + compressed?: boolean; + name?: string; + options: EuiRadioGroupOption[]; + idSelected?: string; + onChange: EuiRadioGroupChangeCallback; +} & ExclusiveUnion; export const EuiRadioGroup: FunctionComponent = ({ options = [], @@ -32,23 +52,63 @@ export const EuiRadioGroup: FunctionComponent = ({ className, disabled, compressed, + legend, ...rest -}) => ( -
- {options.map((option, index) => { - const { disabled: isOptionDisabled, ...optionRest } = option; - return ( - - ); - })} -
-); +}) => { + const radios = options.map((option, index) => { + const { disabled: isOptionDisabled, ...optionRest } = option; + return ( + + ); + }); + + if (!!legend) { + const { + children, + display, + className: legendClassName, + ...legendRest + } = legend; + const isLegendHidden = display === 'hidden'; + const legendClasses = classNames( + 'euiRadioGroup__legend', + { + 'euiRadioGroup__legend--hidden': isLegendHidden, + }, + legendClassName + ); + const legendDisplay = isLegendHidden ? ( + + {children} + + ) : ( + children + ); + + return ( +
}> + + {legendDisplay} + + {radios} +
+ ); + } + + return ( +
}> + {radios} +
+ ); +}; From 9c9145e9abfca426d21ef3df20ee3ff0108c9c6a Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Jan 2020 15:55:22 -0500 Subject: [PATCH 4/8] Using the new EuiFieldset for EuiRadioGroup --- .../form_controls/form_controls_example.js | 18 +++++ .../src/views/form_controls/radio_group.js | 1 - .../__snapshots__/radio_group.test.tsx.snap | 46 ++++++++++++ src/components/form/radio/_radio_group.scss | 12 --- .../form/radio/radio_group.test.tsx | 17 +++++ src/components/form/radio/radio_group.tsx | 74 +++++++------------ 6 files changed, 108 insertions(+), 60 deletions(-) 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 685883913e9..c216f3e345b 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -308,6 +308,24 @@ export const FormControlsExample = { EuiRadioGroup, }, demo: , + snippet: ` {}} + name={groupName} + legend={{ + children: 'A legend', + }} +/>`, }, { title: 'Switch', diff --git a/src-docs/src/views/form_controls/radio_group.js b/src-docs/src/views/form_controls/radio_group.js index a1945b5793c..b22e8e88728 100644 --- a/src-docs/src/views/form_controls/radio_group.js +++ b/src-docs/src/views/form_controls/radio_group.js @@ -53,7 +53,6 @@ export default class extends Component { name="radio group" legend={{ children: This is a legend for a radio group, - // display: 'hidden', }} /> diff --git a/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap b/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap index 1cfb7a45ec3..d6f708c969a 100644 --- a/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap +++ b/src/components/form/radio/__snapshots__/radio_group.test.tsx.snap @@ -50,6 +50,52 @@ exports[`EuiRadioGroup props idSelected is rendered 1`] = ` `; +exports[`EuiRadioGroup props legend is rendered 1`] = ` +
+ + A legend + +
+ +
+ +
+
+ +
+ +
+
+`; + exports[`EuiRadioGroup props name is propagated to radios 1`] = `
{ expect(component).toMatchSnapshot(); }); + + test('legend is rendered', () => { + const component = render( + {}} + legend={{ + children: 'A legend', + }} + /> + ); + + expect(component).toMatchSnapshot(); + }); }); describe('callbacks', () => { diff --git a/src/components/form/radio/radio_group.tsx b/src/components/form/radio/radio_group.tsx index 2e7764b928c..4d6913cb20a 100644 --- a/src/components/form/radio/radio_group.tsx +++ b/src/components/form/radio/radio_group.tsx @@ -1,35 +1,32 @@ -import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react'; +import React, { FunctionComponent, HTMLAttributes } from 'react'; import classNames from 'classnames'; + import { CommonProps, ExclusiveUnion } from '../../common'; -import { EuiRadio, RadioProps } from './radio'; -import { EuiScreenReaderOnly } from '../../accessibility'; +import { + EuiFormFieldsetProps, + EuiFormLegendProps, + EuiFormFieldset, +} from '../form_fieldset'; +import { EuiRadio, EuiRadioProps } from './radio'; export interface EuiRadioGroupOption - extends Omit { + extends Omit { id: string; } -export interface EuiRadioGroupLegend - extends CommonProps, - HTMLAttributes { - children: ReactNode; - /** - * For a hidden legend that is still visible to the screen reader, set to 'hidden' - */ - display?: 'hidden'; -} - export type EuiRadioGroupChangeCallback = (id: string, value?: string) => void; +// Must omit inherit `onChange` properties or else TS complaines when applying to the EuiRadio type AsDivProps = Omit, 'onChange'>; -type WithLegendProps = { +type WithLegendProps = Omit & { /** * If the individual labels for each radio do not provide a sufficient description, add a legend. - * Wraps the group in a `fieldset` and adds a `legend` for titling the whole group. + * Wraps the group in a `EuiFieldset` which adds an `EuiLegend` for titling the whole group. + * Accepts an `EuiFormLegendProps` shape. */ - legend: EuiRadioGroupLegend; -} & Omit, 'onChange'>; + legend?: EuiFormLegendProps; +}; export type EuiRadioGroupProps = CommonProps & { disabled?: boolean; @@ -56,10 +53,14 @@ export const EuiRadioGroup: FunctionComponent = ({ ...rest }) => { const radios = options.map((option, index) => { - const { disabled: isOptionDisabled, ...optionRest } = option; + const { + disabled: isOptionDisabled, + className: optionClass, + ...optionRest + } = option; return ( = ({ }); if (!!legend) { - const { - children, - display, - className: legendClassName, - ...legendRest - } = legend; - const isLegendHidden = display === 'hidden'; - const legendClasses = classNames( - 'euiRadioGroup__legend', - { - 'euiRadioGroup__legend--hidden': isLegendHidden, - }, - legendClassName - ); - const legendDisplay = isLegendHidden ? ( - - {children} - - ) : ( - children - ); + // Be sure to pass down the compressed option to the legend + legend.compressed = compressed; return ( -
}> - - {legendDisplay} - + legend={legend} + {...rest as EuiFormFieldsetProps}> {radios} -
+ ); } From e51af0b89023adc3b66f1ee0d3d03152fca0416f Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Jan 2020 16:31:03 -0500 Subject: [PATCH 5/8] Checkbox label as inline-block --- src/components/form/checkbox/_checkbox.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index b116d199db3..70e7f759cf2 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/src/components/form/checkbox/_checkbox.scss @@ -5,7 +5,7 @@ @include euiScreenReaderOnly; ~ .euiCheckbox__label { - display: block; + display: inline-block; padding-left: ($euiCheckBoxSize * 1.5); line-height: $euiSizeL; font-size: $euiFontSizeS; From 008b633104d8d795ebd9b9149952c9ac290baa86 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 6 Jan 2020 16:31:49 -0500 Subject: [PATCH 6/8] Using EuiFieldset in Checkbox group --- .../src/views/form_controls/checkbox_group.js | 71 +++----------- .../form_controls/form_controls_example.js | 14 +++ .../checkbox_group.test.tsx.snap | 10 ++ .../form/checkbox/checkbox_group.test.tsx | 17 +++- .../form/checkbox/checkbox_group.tsx | 92 +++++++++++++------ 5 files changed, 117 insertions(+), 87 deletions(-) diff --git a/src-docs/src/views/form_controls/checkbox_group.js b/src-docs/src/views/form_controls/checkbox_group.js index b77915f6fd9..4aabaac80a7 100644 --- a/src-docs/src/views/form_controls/checkbox_group.js +++ b/src-docs/src/views/form_controls/checkbox_group.js @@ -1,10 +1,7 @@ -import React, { Component, Fragment } from 'react'; +import React, { Component } from 'react'; -import { - EuiCheckboxGroup, - EuiSpacer, - EuiTitle, -} from '../../../../src/components'; +import { EuiCheckboxGroup } from '../../../../src/components'; +import { DisplayToggles } from './display_toggles'; import makeId from '../../../../src/components/form/form_row/make_id'; @@ -18,39 +15,23 @@ export default class extends Component { { id: `${idPrefix}0`, label: 'Option one', + 'data-test-sub': 'dts_test', }, { id: `${idPrefix}1`, label: 'Option two is checked by default', + className: 'classNameTest', }, { id: `${idPrefix}2`, - label: 'Option three', + label: 'Option three is disabled', + disabled: true, }, ]; - this.checkboxesDisabled = this.checkboxes.map(checkbox => { - return { ...checkbox, id: `${checkbox.id}_disabled` }; - }); - - this.checkboxesIndividuallyDisabled = this.checkboxes.map(checkbox => { - const isIndividuallyDisabled = - checkbox.id.charAt(checkbox.id.length - 1) === '1'; - return { - ...checkbox, - id: `${checkbox.id}_individually_disabled`, - label: isIndividuallyDisabled - ? 'Option two is individually disabled' - : checkbox.label, - disabled: isIndividuallyDisabled, - }; - }); - this.state = { checkboxIdToSelectedMap: { [`${idPrefix}1`]: true, - [`${idPrefix}1_disabled`]: true, - [`${idPrefix}1_individually_disabled`]: true, }, }; } @@ -70,42 +51,18 @@ export default class extends Component { render() { return ( - + /* DisplayToggles wrapper for Docs only */ + - - - - -

Disabled

- - - - - - - - - -

Individually disabled checkbox

- - - - - - + ); } } 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 c216f3e345b..dae308e8886 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -274,6 +274,20 @@ export const FormControlsExample = { EuiCheckboxGroup, }, demo: , + snippet: ` {}} +/>`, }, { title: 'Radio', diff --git a/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap b/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap index 9e898755868..698c4688025 100644 --- a/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap +++ b/src/components/form/checkbox/__snapshots__/checkbox_group.test.tsx.snap @@ -59,6 +59,16 @@ exports[`EuiCheckboxGroup (mocked checkbox) is rendered 1`] = ` /> `; +exports[`EuiCheckboxGroup (mocked checkbox) legend is rendered 1`] = ` +
+ + A legend + +
+`; + exports[`EuiCheckboxGroup (mocked checkbox) options are rendered 1`] = `
{ {}} /> ); @@ -46,7 +45,6 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => { '1': true, '2': false, }} - onChange={() => {}} /> ); @@ -62,7 +60,6 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => { '1': true, '2': false, }} - onChange={() => {}} disabled /> ); @@ -82,7 +79,19 @@ describe('EuiCheckboxGroup (mocked checkbox)', () => { '1': true, '2': false, }} - onChange={() => {}} + /> + ); + + expect(component).toMatchSnapshot(); + }); + + test('legend is rendered', () => { + const component = render( + ); diff --git a/src/components/form/checkbox/checkbox_group.tsx b/src/components/form/checkbox/checkbox_group.tsx index 0b503c4d5be..de9884a9011 100644 --- a/src/components/form/checkbox/checkbox_group.tsx +++ b/src/components/form/checkbox/checkbox_group.tsx @@ -1,19 +1,36 @@ -import React, { ReactNode, FunctionComponent } from 'react'; +import React, { FunctionComponent, HTMLAttributes } from 'react'; +import classNames from 'classnames'; -import { EuiCheckbox } from './checkbox'; -import { CommonProps } from '../../common'; +import { CommonProps, ExclusiveUnion } from '../../common'; -export interface EuiCheckboxGroupOption { +import { + EuiFormFieldsetProps, + EuiFormLegendProps, + EuiFormFieldset, +} from '../form_fieldset'; +import { EuiCheckbox, EuiCheckboxProps } from './checkbox'; + +export interface EuiCheckboxGroupOption + extends Omit { id: string; - label?: ReactNode; - disabled?: boolean; } export interface EuiCheckboxGroupIdToSelectedMap { [id: string]: boolean; } -export interface EuiCheckboxGroupProps extends CommonProps { +// Must omit inherit `onChange` properties or else TS complaines when applying to the EuiRadio +type AsDivProps = Omit, 'onChange'>; +type WithLegendProps = Omit & { + /** + * If the individual labels for each radio do not provide a sufficient description, add a legend. + * Wraps the group in a `EuiFieldset` which adds an `EuiLegend` for titling the whole group. + * Accepts an `EuiFormLegendProps` shape. + */ + legend?: EuiFormLegendProps; +}; + +export type EuiCheckboxGroupProps = CommonProps & { options: EuiCheckboxGroupOption[]; idToSelectedMap: EuiCheckboxGroupIdToSelectedMap; onChange: (optionId: string) => void; @@ -23,7 +40,7 @@ export interface EuiCheckboxGroupProps extends CommonProps { */ compressed?: boolean; disabled?: boolean; -} +} & ExclusiveUnion; export const EuiCheckboxGroup: FunctionComponent = ({ options = [], @@ -32,22 +49,45 @@ export const EuiCheckboxGroup: FunctionComponent = ({ className, disabled, compressed, + legend, ...rest -}) => ( -
- {options.map((option, index) => { - return ( - - ); - })} -
-); +}) => { + const checkboxes = options.map((option, index) => { + const { + disabled: isOptionDisabled, + className: optionClass, + ...optionRest + } = option; + return ( + + ); + }); + + if (!!legend) { + // Be sure to pass down the compressed option to the legend + legend.compressed = compressed; + + return ( + + {checkboxes} + + ); + } + + return ( +
}> + {checkboxes} +
+ ); +}; From 307bb815c5102240290fceba9ebcc51a4286a0fe Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 7 Jan 2020 10:44:04 -0500 Subject: [PATCH 7/8] Change more examples to use `legend` prop --- src-docs/src/views/card/card_checkable.js | 20 +++++++++---------- .../views/form_compressed/form_compressed.js | 20 +++++++++++-------- .../form_controls/form_controls_example.js | 2 +- src-docs/src/views/form_layouts/form_rows.js | 20 ++++++++++--------- .../form/checkbox/checkbox_group.tsx | 2 +- src/components/form/radio/radio_group.tsx | 2 +- 6 files changed, 36 insertions(+), 30 deletions(-) diff --git a/src-docs/src/views/card/card_checkable.js b/src-docs/src/views/card/card_checkable.js index c2e06416f0f..6befa90aace 100644 --- a/src-docs/src/views/card/card_checkable.js +++ b/src-docs/src/views/card/card_checkable.js @@ -5,6 +5,7 @@ import { EuiSpacer, EuiRadioGroup, EuiTitle, + EuiFormFieldset, } from '../../../../src/components'; import makeId from '../../../../src/components/form/form_row/make_id'; @@ -37,15 +38,14 @@ export default class extends Component { return ( -
- - - Checkable card radio group with legend - - - - - + + Checkable card radio group with legend + + ), + }}> this.setState({ radio: 'radio3' })} disabled /> -
+ diff --git a/src-docs/src/views/form_compressed/form_compressed.js b/src-docs/src/views/form_compressed/form_compressed.js index 373fd2552f7..512075c8388 100644 --- a/src-docs/src/views/form_compressed/form_compressed.js +++ b/src-docs/src/views/form_compressed/form_compressed.js @@ -10,6 +10,7 @@ import { EuiSelect, EuiSwitch, EuiPanel, + EuiSpacer, } from '../../../../src/components'; import makeId from '../../../../src/components/form/form_row/make_id'; @@ -135,14 +136,17 @@ export default class extends Component { /> - - - + + + ); } 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 dae308e8886..65784300e86 100644 --- a/src-docs/src/views/form_controls/form_controls_example.js +++ b/src-docs/src/views/form_controls/form_controls_example.js @@ -392,7 +392,7 @@ export const FormControlsExample = { />

- EuiFieldset simply wraps its children in a{' '} + EuiFormFieldset simply wraps its children in a{' '} <fieldset> with the option to add a{' '} <legend> via the legend{' '} object prop. diff --git a/src-docs/src/views/form_layouts/form_rows.js b/src-docs/src/views/form_layouts/form_rows.js index be585ff3326..5cb3a437aae 100644 --- a/src-docs/src/views/form_layouts/form_rows.js +++ b/src-docs/src/views/form_layouts/form_rows.js @@ -128,15 +128,17 @@ export default class extends Component { /> - - - + + + diff --git a/src/components/form/checkbox/checkbox_group.tsx b/src/components/form/checkbox/checkbox_group.tsx index de9884a9011..7911935bccd 100644 --- a/src/components/form/checkbox/checkbox_group.tsx +++ b/src/components/form/checkbox/checkbox_group.tsx @@ -24,7 +24,7 @@ type AsDivProps = Omit, 'onChange'>; type WithLegendProps = Omit & { /** * If the individual labels for each radio do not provide a sufficient description, add a legend. - * Wraps the group in a `EuiFieldset` which adds an `EuiLegend` for titling the whole group. + * Wraps the group in a `EuiFormFieldset` which adds an `EuiLegend` for titling the whole group. * Accepts an `EuiFormLegendProps` shape. */ legend?: EuiFormLegendProps; diff --git a/src/components/form/radio/radio_group.tsx b/src/components/form/radio/radio_group.tsx index 4d6913cb20a..2db01015166 100644 --- a/src/components/form/radio/radio_group.tsx +++ b/src/components/form/radio/radio_group.tsx @@ -22,7 +22,7 @@ type AsDivProps = Omit, 'onChange'>; type WithLegendProps = Omit & { /** * If the individual labels for each radio do not provide a sufficient description, add a legend. - * Wraps the group in a `EuiFieldset` which adds an `EuiLegend` for titling the whole group. + * Wraps the group in a `EuiFormFieldset` which adds an `EuiLegend` for titling the whole group. * Accepts an `EuiFormLegendProps` shape. */ legend?: EuiFormLegendProps; From af0186934afcf84c64e39f9a053f2661af1d0f6a Mon Sep 17 00:00:00 2001 From: cchaos Date: Tue, 7 Jan 2020 11:48:18 -0500 Subject: [PATCH 8/8] cl --- CHANGELOG.md | 7 ++++++- src-docs/src/views/range/states.js | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e2b7e9bc47b..82931351d29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,11 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `18.0.0`. +- Added `legend` prop to `EuiCheckboxGroup` and `EuiRadioGroup` to add `EuiFieldset` wrappers for title the groups ([#2739](https://github.com/elastic/eui/pull/2739)) + +**Bug fixes** + +- Changed `EuiRadio` and `EuiCheckbox` labels to be `inline-block` ([#2739](https://github.com/elastic/eui/pull/2739)) +- Fixed `EuiCheckboxGroup`'s `options` type to fully extend the `EuiCheckbox` type ([#2739](https://github.com/elastic/eui/pull/2739)) ## [`18.0.0`](https://github.com/elastic/eui/tree/v18.0.0) diff --git a/src-docs/src/views/range/states.js b/src-docs/src/views/range/states.js index 39b20e48929..08833069d71 100644 --- a/src-docs/src/views/range/states.js +++ b/src-docs/src/views/range/states.js @@ -60,7 +60,7 @@ export default class extends Component { - +