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.

Sign up for GitHub

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

Jump to bottom

Alter id on EuiFormRow wrapping element #2588

Merged
merged 6 commits into from
Dec 5, 2019
Merged

Alter id on EuiFormRow wrapping element #2588

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
bd657e2
remove id from row element
thompsongl Dec 3, 2019
03f2f3b
adding generated id to EuiFormRow wrapping element
Dec 3, 2019
1c88e95
Merge branch 'master' into form-row-id
thompsongl Dec 3, 2019
26e4a59
CL
thompsongl Dec 4, 2019
22798c4
Merge branch 'master' into form-row-id
thompsongl Dec 5, 2019
dd5f50a
Merge branch 'master' into form-row-id
thompsongl Dec 5, 2019
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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
- Moved any shared component-level Sass variables and mixins into the `global_styling` directory ([#2551](https://github.com/elastic/eui/pull/2551))
- Reworked `euiPanel()` mixin to require the entirety of a selector (i.e. require the '.' in addition to the string) ([#2551](https://github.com/elastic/eui/pull/2551))
- Updated React peerDependencies to version 16.12 ([#2571](https://github.com/elastic/eui/pull/2571))
- Changed to generated `id` value for `EuiFormRow` to ensure uniqueness ([#2588](https://github.com/elastic/eui/pull/2588))

## [`16.2.1`](https://github.com/elastic/eui/tree/v16.2.1)

Expand Down
1 change: 1 addition & 0 deletions src/components/form/described_form_group/__snapshots__/described_form_group.test.js.snap
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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