Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Alter id on EuiFormRow wrapping element #2588

Merged
merged 6 commits into from
Dec 5, 2019
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
>
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
Expand Down
26 changes: 25 additions & 1 deletion src/components/form/form_row/__snapshots__/form_row.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ exports[`EuiFormRow behavior onBlur is called in child 1`] = `
>
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
Expand Down Expand Up @@ -65,6 +66,7 @@ exports[`EuiFormRow behavior onBlur works in parent even if not in child 1`] = `
>
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
Expand Down Expand Up @@ -114,6 +116,7 @@ exports[`EuiFormRow behavior onFocus is called in child 1`] = `
>
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
Expand Down Expand Up @@ -163,6 +166,7 @@ exports[`EuiFormRow behavior onFocus works in parent even if not in child 1`] =
>
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
Expand Down Expand Up @@ -201,6 +205,7 @@ exports[`EuiFormRow is rendered 1`] = `
aria-label="aria-label"
class="euiFormRow testClass1 testClass2"
data-test-subj="test subject string"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -215,6 +220,7 @@ exports[`EuiFormRow is rendered 1`] = `
exports[`EuiFormRow props compressed is rendered 1`] = `
<div
class="euiFormRow euiFormRow--compressed"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -229,6 +235,7 @@ exports[`EuiFormRow props compressed is rendered 1`] = `
exports[`EuiFormRow props describedByIds is rendered 1`] = `
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__fieldWrapper"
Expand All @@ -246,6 +253,7 @@ exports[`EuiFormRow props describedByIds is rendered 1`] = `
exports[`EuiFormRow props display type center is rendered 1`] = `
<div
class="euiFormRow"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper euiFormRow__fieldWrapperDisplayOnly"
Expand All @@ -260,6 +268,7 @@ exports[`EuiFormRow props display type center is rendered 1`] = `
exports[`EuiFormRow props display type centerCompressed is rendered 1`] = `
<div
class="euiFormRow euiFormRow--compressed"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper euiFormRow__fieldWrapperDisplayOnly"
Expand All @@ -274,6 +283,7 @@ exports[`EuiFormRow props display type centerCompressed is rendered 1`] = `
exports[`EuiFormRow props display type columnCompressed is rendered 1`] = `
<div
class="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -288,6 +298,7 @@ exports[`EuiFormRow props display type columnCompressed is rendered 1`] = `
exports[`EuiFormRow props display type columnCompressedSwitch is rendered 1`] = `
<div
class="euiFormRow euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -302,6 +313,7 @@ exports[`EuiFormRow props display type columnCompressedSwitch is rendered 1`] =
exports[`EuiFormRow props display type row is rendered 1`] = `
<div
class="euiFormRow"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -316,6 +328,7 @@ exports[`EuiFormRow props display type row is rendered 1`] = `
exports[`EuiFormRow props display type rowCompressed is rendered 1`] = `
<div
class="euiFormRow euiFormRow--compressed"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -330,6 +343,7 @@ exports[`EuiFormRow props display type rowCompressed is rendered 1`] = `
exports[`EuiFormRow props displayOnly is rendered 1`] = `
<div
class="euiFormRow"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper euiFormRow__fieldWrapperDisplayOnly"
Expand All @@ -346,6 +360,7 @@ exports[`EuiFormRow props displayOnly is rendered 1`] = `
exports[`EuiFormRow props error as array is rendered 1`] = `
<div
class="euiFormRow"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand Down Expand Up @@ -375,6 +390,7 @@ exports[`EuiFormRow props error as array is rendered 1`] = `
exports[`EuiFormRow props error as string is rendered 1`] = `
<div
class="euiFormRow"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -397,6 +413,7 @@ exports[`EuiFormRow props error as string is rendered 1`] = `
exports[`EuiFormRow props error is not rendered if isInvalid is false 1`] = `
<div
class="euiFormRow"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -411,6 +428,7 @@ exports[`EuiFormRow props error is not rendered if isInvalid is false 1`] = `
exports[`EuiFormRow props fullWidth is rendered 1`] = `
<div
class="euiFormRow euiFormRow--fullWidth"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -425,6 +443,7 @@ exports[`EuiFormRow props fullWidth is rendered 1`] = `
exports[`EuiFormRow props hasEmptyLabelSpace is rendered 1`] = `
<div
class="euiFormRow euiFormRow--hasEmptyLabelSpace"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -439,6 +458,7 @@ exports[`EuiFormRow props hasEmptyLabelSpace is rendered 1`] = `
exports[`EuiFormRow props helpText is rendered 1`] = `
<div
class="euiFormRow"
id="generated-id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -462,7 +482,7 @@ exports[`EuiFormRow props helpText is rendered 1`] = `
exports[`EuiFormRow props id is rendered 1`] = `
<div
class="euiFormRow"
id="id"
id="id-row"
>
<div
class="euiFormRow__fieldWrapper"
Expand All @@ -477,6 +497,7 @@ exports[`EuiFormRow props id is rendered 1`] = `
exports[`EuiFormRow props isInvalid is rendered 1`] = `
<div
class="euiFormRow"
id="generated-id-row"
>
<div
class="euiFormRow__labelWrapper"
Expand All @@ -502,6 +523,7 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = `
exports[`EuiFormRow props label append is rendered 1`] = `
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
Expand Down Expand Up @@ -532,6 +554,7 @@ exports[`EuiFormRow props label append is rendered 1`] = `
exports[`EuiFormRow props label is rendered 1`] = `
<div
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
Expand Down Expand Up @@ -560,6 +583,7 @@ exports[`EuiFormRow props label is rendered 1`] = `
exports[`EuiFormRow props label renders as a legend and subsquently a fieldset wrapper 1`] = `
<fieldset
className="euiFormRow"
id="generated-id-row"
>
<div
className="euiFormRow__labelWrapper"
Expand Down
3 changes: 2 additions & 1 deletion src/components/form/form_row/form_row.js
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ export class EuiFormRow extends Component {
display,
displayOnly,
hasChildLabel,
id: propsId,
...rest
} = this.props;

Expand Down Expand Up @@ -189,7 +190,7 @@ export class EuiFormRow extends Component {
const Element = labelType === 'legend' ? 'fieldset' : 'div';

return (
<Element className={classes} {...rest}>
<Element className={classes} id={`${id}-row`} {...rest}>
{optionalLabel}
<div className={fieldWrapperClasses}>
{field}
Expand Down