Fix broken layout of EuiModal by form tag (#34978)
* Fix broken layout of EuiModal by form tag Adding a form tag to the saved object modal broke the layout of the EuiModal because EuiModal's children need to be direct descendents of EuiModal in order for the overflow to behave properly. Fixed by moving the form tag 1 level higher in the component tree * Use EuiButtonEmpty for Cancel Button * Migrate EuiFormRow's label of storeTimeWithDashboard to EuiSwitch * Update snapshot tests
This commit is contained in:
parent
7a910632c0
commit
9785a53492
|
@ -40,6 +40,11 @@ exports[`renders DashboardSaveModal 1`] = `
|
|||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
labelType="label"
|
||||
>
|
||||
<EuiSwitch
|
||||
checked={true}
|
||||
data-test-subj="storeTimeWithDashboard"
|
||||
label={
|
||||
<FormattedMessage
|
||||
defaultMessage="Store time with dashboard"
|
||||
|
@ -47,11 +52,6 @@ exports[`renders DashboardSaveModal 1`] = `
|
|||
values={Object {}}
|
||||
/>
|
||||
}
|
||||
labelType="label"
|
||||
>
|
||||
<EuiSwitch
|
||||
checked={true}
|
||||
data-test-subj="storeTimeWithDashboard"
|
||||
onChange={[Function]}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
|
|
|
@ -59,7 +59,7 @@ class DashboardSaveModalUi extends React.Component {
|
|||
this.setState({
|
||||
timeRestore: event.target.checked,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
renderDashboardSaveOptions() {
|
||||
return (
|
||||
|
@ -79,10 +79,6 @@ class DashboardSaveModalUi extends React.Component {
|
|||
</EuiFormRow>
|
||||
|
||||
<EuiFormRow
|
||||
label={<FormattedMessage
|
||||
id="kbn.dashboard.topNav.saveModal.storeTimeWithDashboardFormRowLabel"
|
||||
defaultMessage="Store time with dashboard"
|
||||
/>}
|
||||
helpText={<FormattedMessage
|
||||
id="kbn.dashboard.topNav.saveModal.storeTimeWithDashboardFormRowHelpText"
|
||||
defaultMessage="This changes the time filter to the currently selected time each time this dashboard is loaded."
|
||||
|
@ -92,6 +88,10 @@ class DashboardSaveModalUi extends React.Component {
|
|||
data-test-subj="storeTimeWithDashboard"
|
||||
checked={this.state.timeRestore}
|
||||
onChange={this.onTimeRestoreChange}
|
||||
label={<FormattedMessage
|
||||
id="kbn.dashboard.topNav.saveModal.storeTimeWithDashboardFormRowLabel"
|
||||
defaultMessage="Store time with dashboard"
|
||||
/>}
|
||||
/>
|
||||
</EuiFormRow>
|
||||
</Fragment>
|
||||
|
|
|
@ -2,14 +2,14 @@
|
|||
|
||||
exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
|
||||
<EuiOverlayMask>
|
||||
<form
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<EuiModal
|
||||
className="dshSaveModal"
|
||||
data-test-subj="savedObjectSaveModal"
|
||||
maxWidth={true}
|
||||
onClose={[Function]}
|
||||
>
|
||||
<form
|
||||
onSubmit={[Function]}
|
||||
>
|
||||
<EuiModalHeader>
|
||||
<EuiModalHeaderTitle>
|
||||
|
@ -53,13 +53,11 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
|
|||
</EuiForm>
|
||||
</EuiModalBody>
|
||||
<EuiModalFooter>
|
||||
<EuiButton
|
||||
<EuiButtonEmpty
|
||||
color="primary"
|
||||
data-test-subj="saveCancelButton"
|
||||
fill={false}
|
||||
iconSide="left"
|
||||
onClick={[Function]}
|
||||
size="m"
|
||||
type="button"
|
||||
>
|
||||
<FormattedMessage
|
||||
|
@ -67,7 +65,7 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
|
|||
id="common.ui.savedObjects.saveModal.cancelButtonLabel"
|
||||
values={Object {}}
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiButtonEmpty>
|
||||
<EuiButton
|
||||
color="primary"
|
||||
data-test-subj="confirmSaveSavedObjectButton"
|
||||
|
@ -85,7 +83,7 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
|
|||
/>
|
||||
</EuiButton>
|
||||
</EuiModalFooter>
|
||||
</form>
|
||||
</EuiModal>
|
||||
</form>
|
||||
</EuiOverlayMask>
|
||||
`;
|
||||
|
|
|
@ -18,6 +18,7 @@
|
|||
*/
|
||||
import {
|
||||
EuiButton,
|
||||
EuiButtonEmpty,
|
||||
EuiCallOut,
|
||||
EuiFieldText,
|
||||
EuiForm,
|
||||
|
@ -73,12 +74,12 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
|
|||
|
||||
return (
|
||||
<EuiOverlayMask>
|
||||
<form onSubmit={this.onFormSubmit}>
|
||||
<EuiModal
|
||||
data-test-subj="savedObjectSaveModal"
|
||||
className="dshSaveModal"
|
||||
onClose={this.props.onClose}
|
||||
>
|
||||
<form onSubmit={this.onFormSubmit}>
|
||||
<EuiModalHeader>
|
||||
<EuiModalHeaderTitle>
|
||||
<FormattedMessage
|
||||
|
@ -119,12 +120,12 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
|
|||
</EuiModalBody>
|
||||
|
||||
<EuiModalFooter>
|
||||
<EuiButton data-test-subj="saveCancelButton" onClick={this.props.onClose}>
|
||||
<EuiButtonEmpty data-test-subj="saveCancelButton" onClick={this.props.onClose}>
|
||||
<FormattedMessage
|
||||
id="common.ui.savedObjects.saveModal.cancelButtonLabel"
|
||||
defaultMessage="Cancel"
|
||||
/>
|
||||
</EuiButton>
|
||||
</EuiButtonEmpty>
|
||||
|
||||
<EuiButton
|
||||
fill
|
||||
|
@ -143,8 +144,8 @@ export class SavedObjectSaveModal extends React.Component<Props, State> {
|
|||
)}
|
||||
</EuiButton>
|
||||
</EuiModalFooter>
|
||||
</form>
|
||||
</EuiModal>
|
||||
</form>
|
||||
</EuiOverlayMask>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue