From 6f953c0d256a7f7a19597ff141d239c6fa5bc1b1 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Wed, 30 Sep 2020 17:29:06 -0400 Subject: [PATCH] [7.x] [Design] A couple fixes for 7.10 (#78801) (#79016) * [Design] A couple fixes for 7.10 (#78801) * A few header and KQL bar fixes * More fixes (alerts, modals) * Fixing bottom padding for advanced settings bottom bar * One more alerts responsive fix --- .../header/__snapshots__/header.test.tsx.snap | 280 ++++++++++++------ src/core/public/chrome/ui/header/header.tsx | 13 +- .../management_app/_advanced_settings.scss | 4 + .../management_app/components/form/form.tsx | 9 +- .../ui/query_string_input/no_data_popover.tsx | 1 + .../ui/typeahead/suggestions_component.tsx | 2 +- .../saved_object_save_modal.test.tsx.snap | 1 + .../save_modal/saved_object_save_modal.tsx | 9 +- .../action_wizard/action_wizard.tsx | 4 +- .../drilldown_hello_bar.tsx | 6 +- .../components/flyout_frame/flyout_frame.tsx | 2 +- .../threshold_watch_action_dropdown.tsx | 2 +- 12 files changed, 223 insertions(+), 110 deletions(-) diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap index 8937ecb4d9b4e..2db3eede16e25 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap @@ -1907,62 +1907,133 @@ exports[`Header renders 1`] = ` Object { "borders": "none", "items": Array [ - + , + /> + , ], }, Object { "borders": "none", "items": Array [ + + + , - + + /> + @@ -3117,6 +3198,24 @@ exports[`Header renders 1`] = ` +
+ +
+ +
- -
- ], + items: [ + + + , + ], }), borders: 'none', }, { items: [ + + + , - - diff --git a/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss b/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss index 66ae9cca3f83b..fd26677e93894 100644 --- a/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss +++ b/src/plugins/advanced_settings/public/management_app/_advanced_settings.scss @@ -64,3 +64,7 @@ .mgtAdvancedSettingsForm__button { width: 100%; } + +.kbnBody--mgtAdvancedSettingsHasBottomBar .mgtPage__body { + padding-bottom: $euiSizeXL * 2; +} diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx index 497252b75fa58..d243d85e12a66 100644 --- a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx +++ b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx @@ -388,6 +388,13 @@ export class Form extends PureComponent { const { unsavedChanges } = this.state; const { visibleSettings, categories, categoryCounts, clearQuery } = this.props; const currentCategories: Category[] = []; + const hasUnsavedChanges = !isEmpty(unsavedChanges); + + if (hasUnsavedChanges) { + document.body.classList.add('kbnBody--mgtAdvancedSettingsHasBottomBar'); + } else { + document.body.classList.remove('kbnBody--mgtAdvancedSettingsHasBottomBar'); + } categories.forEach((category) => { if (visibleSettings[category] && visibleSettings[category].length) { @@ -408,7 +415,7 @@ export class Form extends PureComponent { }) : this.maybeRenderNoSettings(clearQuery)}
- {!isEmpty(unsavedChanges) && this.renderBottomBar()} + {hasUnsavedChanges && this.renderBottomBar()} ); } diff --git a/src/plugins/data/public/ui/query_string_input/no_data_popover.tsx b/src/plugins/data/public/ui/query_string_input/no_data_popover.tsx index 561c33519f96f..7d5282a0545bc 100644 --- a/src/plugins/data/public/ui/query_string_input/no_data_popover.tsx +++ b/src/plugins/data/public/ui/query_string_input/no_data_popover.tsx @@ -63,6 +63,7 @@ export function NoDataPopover({ } minWidth={300} anchorPosition="downCenter" + anchorClassName="eui-displayBlock" step={1} stepsTotal={1} isStepOpen={noDataPopoverVisible} diff --git a/src/plugins/data/public/ui/typeahead/suggestions_component.tsx b/src/plugins/data/public/ui/typeahead/suggestions_component.tsx index 50ed9e9542d36..054c6318b9772 100644 --- a/src/plugins/data/public/ui/typeahead/suggestions_component.tsx +++ b/src/plugins/data/public/ui/typeahead/suggestions_component.tsx @@ -154,7 +154,7 @@ export class SuggestionsComponent extends Component { const StyledSuggestionsListDiv = styled.div` ${(props: { queryBarRect: DOMRect; verticalListPosition: string }) => ` position: absolute; - z-index: 4001; + z-index: 999; left: ${props.queryBarRect.left}px; width: ${props.queryBarRect.width}px; ${props.verticalListPosition}`} diff --git a/src/plugins/saved_objects/public/save_modal/__snapshots__/saved_object_save_modal.test.tsx.snap b/src/plugins/saved_objects/public/save_modal/__snapshots__/saved_object_save_modal.test.tsx.snap index eff5ab4f1e2c7..c923c5c2aed90 100644 --- a/src/plugins/saved_objects/public/save_modal/__snapshots__/saved_object_save_modal.test.tsx.snap +++ b/src/plugins/saved_objects/public/save_modal/__snapshots__/saved_object_save_modal.test.tsx.snap @@ -25,6 +25,7 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = ` + {!this.props.showDescription && this.props.description && ( - - {this.props.description} - + + {this.props.description} + )} + + + {this.renderCopyOnSave()} = ({ data-test-subj={`${TEST_SUBJ_SELECTED_ACTION_FACTORY}-${actionFactory.id}`} >
- + {actionFactory.getIconType(context) && ( @@ -342,7 +342,7 @@ const ActionFactorySelector: React.FC = ({ }; return ( - + {ensureOrder(actionFactories).map((actionFactory) => ( = ({ }) => { return ( - + -
- -
+ diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.tsx index b55cbd88d0dc0..e518209746b60 100644 --- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.tsx +++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.tsx @@ -64,7 +64,7 @@ export const FlyoutFrame: React.FC = ({ const footerFragment = (onClose || footer) && ( - + {onClose && ( = ({ settings, setIsPopOverOpen(false); }} > - +