github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Design] A couple fixes for 7.10 (#78801)

Browse source 
* A few header and KQL bar fixes

* More fixes (alerts, modals)

* Fixing bottom padding for advanced settings bottom bar

* One more alerts responsive fix

* Snaps
This commit is contained in:
Caroline Horn 2020-09-30 15:32:59 -04:00 • committed by GitHub
parent 28e1382813
commit 7c217a72f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 226 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

280
src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap generated
View file

@ -1907,62 +1907,133 @@ exports[`Header renders 1`] = `
Object {
"borders": "none",
"items": Array [
<HeaderNavControls
navControls$={
BehaviorSubject {
"_isScalar": false,
"_value": Array [],
"closed": false,
"hasError": false,
"isStopped": false,
"observers": Array [
Subscriber {
"_parentOrParents": null,
"_subscriptions": Array [
SubjectSubscription {
"_parentOrParents": [Circular],
<EuiShowFor
sizes={
Array [
"m",
"l",
"xl",
]
}
>
<HeaderNavControls
navControls$={
BehaviorSubject {
"_isScalar": false,
"_value": Array [],
"closed": false,
"hasError": false,
"isStopped": false,
"observers": Array [
Subscriber {
"_parentOrParents": null,
"_subscriptions": Array [
SubjectSubscription {
"_parentOrParents": [Circular],
"_subscriptions": null,
"closed": false,
"subject": [Circular],
"subscriber": [Circular],
},
],
"closed": false,
"destination": SafeSubscriber {
"_complete": undefined,
"_context": [Circular],
"_error": undefined,
"_next": [Function],
"_parentOrParents": null,
"_parentSubscriber": [Circular],
"_subscriptions": null,
"closed": false,
"subject": [Circular],
"subscriber": [Circular],
},
],
"closed": false,
"destination": SafeSubscriber {
"_complete": undefined,
"_context": [Circular],
"_error": undefined,
"_next": [Function],
"_parentOrParents": null,
"_parentSubscriber": [Circular],
"_subscriptions": null,
"closed": false,
"destination": Object {
"closed": true,
"complete": [Function],
"error": [Function],
"next": [Function],
"destination": Object {
"closed": true,
"complete": [Function],
"error": [Function],
"next": [Function],
},
"isStopped": false,
"syncErrorThrowable": false,
"syncErrorThrown": false,
"syncErrorValue": null,
},
"isStopped": false,
"syncErrorThrowable": false,
"syncErrorThrowable": true,
"syncErrorThrown": false,
"syncErrorValue": null,
},
"isStopped": false,
"syncErrorThrowable": true,
"syncErrorThrown": false,
"syncErrorValue": null,
},
],
"thrownError": null,
],
"thrownError": null,
}
}
}
/>,
/>
</EuiShowFor>,
],
},
Object {
"borders": "none",
"items": Array [
<EuiHideFor
sizes={
Array [
"m",
"l",
"xl",
]
}
>
<HeaderNavControls
navControls$={
BehaviorSubject {
"_isScalar": false,
"_value": Array [],
"closed": false,
"hasError": false,
"isStopped": false,
"observers": Array [
Subscriber {
"_parentOrParents": null,
"_subscriptions": Array [
SubjectSubscription {
"_parentOrParents": [Circular],
"_subscriptions": null,
"closed": false,
"subject": [Circular],
"subscriber": [Circular],
},
],
"closed": false,
"destination": SafeSubscriber {
"_complete": undefined,
"_context": [Circular],
"_error": undefined,
"_next": [Function],
"_parentOrParents": null,
"_parentSubscriber": [Circular],
"_subscriptions": null,
"closed": false,
"destination": Object {
"closed": true,
"complete": [Function],
"error": [Function],
"next": [Function],
},
"isStopped": false,
"syncErrorThrowable": false,
"syncErrorThrown": false,
"syncErrorValue": null,
},
"isStopped": false,
"syncErrorThrowable": true,
"syncErrorThrown": false,
"syncErrorValue": null,
},
],
"thrownError": null,
}
}
/>
</EuiHideFor>,
<InjectIntl(HeaderHelpMenuUI)
helpExtension$={
BehaviorSubject {
@ -3053,57 +3124,67 @@ exports[`Header renders 1`] = `
<div
className="euiHeaderSectionItem"
>
<HeaderNavControls
navControls$={
BehaviorSubject {
"_isScalar": false,
"_value": Array [],
"closed": false,
"hasError": false,
"isStopped": false,
"observers": Array [
Subscriber {
"_parentOrParents": null,
"_subscriptions": Array [
SubjectSubscription {
"_parentOrParents": [Circular],
<EuiShowFor
sizes={
Array [
"m",
"l",
"xl",
]
}
>
<HeaderNavControls
navControls$={
BehaviorSubject {
"_isScalar": false,
"_value": Array [],
"closed": false,
"hasError": false,
"isStopped": false,
"observers": Array [
Subscriber {
"_parentOrParents": null,
"_subscriptions": Array [
SubjectSubscription {
"_parentOrParents": [Circular],
"_subscriptions": null,
"closed": false,
"subject": [Circular],
"subscriber": [Circular],
},
],
"closed": false,
"destination": SafeSubscriber {
"_complete": undefined,
"_context": [Circular],
"_error": undefined,
"_next": [Function],
"_parentOrParents": null,
"_parentSubscriber": [Circular],
"_subscriptions": null,
"closed": false,
"subject": [Circular],
"subscriber": [Circular],
},
],
"closed": false,
"destination": SafeSubscriber {
"_complete": undefined,
"_context": [Circular],
"_error": undefined,
"_next": [Function],
"_parentOrParents": null,
"_parentSubscriber": [Circular],
"_subscriptions": null,
"closed": false,
"destination": Object {
"closed": true,
"complete": [Function],
"error": [Function],
"next": [Function],
"destination": Object {
"closed": true,
"complete": [Function],
"error": [Function],
"next": [Function],
},
"isStopped": false,
"syncErrorThrowable": false,
"syncErrorThrown": false,
"syncErrorValue": null,
},
"isStopped": false,
"syncErrorThrowable": false,
"syncErrorThrowable": true,
"syncErrorThrown": false,
"syncErrorValue": null,
},
"isStopped": false,
"syncErrorThrowable": true,
"syncErrorThrown": false,
"syncErrorValue": null,
},
],
"thrownError": null,
],
"thrownError": null,
}
}
}
/>
/>
</EuiShowFor>
</div>
</EuiHeaderSectionItem>
</div>
@ -3117,6 +3198,24 @@ exports[`Header renders 1`] = `
<EuiHeaderSectionItem
border="none"
key="0"
>
<div
className="euiHeaderSectionItem"
>
<EuiHideFor
sizes={
Array [
"m",
"l",
"xl",
]
}
/>
</div>
</EuiHeaderSectionItem>
<EuiHeaderSectionItem
border="none"
key="1"
>
<div
className="euiHeaderSectionItem"
@ -4786,7 +4885,7 @@ exports[`Header renders 1`] = `
</EuiHeaderSectionItem>
<EuiHeaderSectionItem
border="none"
key="1"
key="2"
>
<div
className="euiHeaderSectionItem"
@ -4898,13 +4997,6 @@ exports[`Header renders 1`] = `
</EuiHeaderSectionItemButton>
</div>
</EuiHeaderSectionItem>
<EuiHeaderSectionItem
border="right"
>
<div
className="euiHeaderSectionItem euiHeaderSectionItem--borderRight"
/>
</EuiHeaderSectionItem>
<HeaderNavControls
navControls$={
BehaviorSubject {

13
src/core/public/chrome/ui/header/header.tsx
View file

@ -22,7 +22,9 @@ import {
EuiHeaderSection,
EuiHeaderSectionItem,
EuiHeaderSectionItemButton,
EuiHideFor,
EuiIcon,
EuiShowFor,
htmlIdGenerator,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -117,12 +119,19 @@ export function Header({
},
{
...(observables.navControlsCenter$ && {
items: [<HeaderNavControls navControls$={observables.navControlsCenter$} />],
items: [
<EuiShowFor sizes={['m', 'l', 'xl']}>
<HeaderNavControls navControls$={observables.navControlsCenter$} />
</EuiShowFor>,
],
}),
borders: 'none',
},
{
items: [
<EuiHideFor sizes={['m', 'l', 'xl']}>
<HeaderNavControls navControls$={observables.navControlsCenter$} />
</EuiHideFor>,
<HeaderHelpMenu
helpExtension$={observables.helpExtension$}
helpSupportUrl$={observables.helpSupportUrl$}
@ -154,8 +163,6 @@ export function Header({
</EuiHeaderSectionItemButton>
</EuiHeaderSectionItem>
<EuiHeaderSectionItem border="right" />
<HeaderNavControls side="left" navControls$={observables.navControlsLeft$} />
</EuiHeaderSection>

4
src/plugins/advanced_settings/public/management_app/_advanced_settings.scss
View file

@ -64,3 +64,7 @@
.mgtAdvancedSettingsForm__button {
width: 100%;
}
.kbnBody--mgtAdvancedSettingsHasBottomBar .mgtPage__body {
padding-bottom: $euiSizeXL * 2;
}

9
src/plugins/advanced_settings/public/management_app/components/form/form.tsx
View file

@ -388,6 +388,13 @@ export class Form extends PureComponent<FormProps> {
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<FormProps> {
})
: this.maybeRenderNoSettings(clearQuery)}
</div>
{!isEmpty(unsavedChanges) && this.renderBottomBar()}
{hasUnsavedChanges && this.renderBottomBar()}
</Fragment>
);
}

1
src/plugins/data/public/ui/query_string_input/no_data_popover.tsx
View file

@ -63,6 +63,7 @@ export function NoDataPopover({
}
minWidth={300}
anchorPosition="downCenter"
anchorClassName="eui-displayBlock"
step={1}
stepsTotal={1}
isStepOpen={noDataPopoverVisible}

2
src/plugins/data/public/ui/typeahead/suggestions_component.tsx
View file

@ -154,7 +154,7 @@ export class SuggestionsComponent extends Component<Props> {
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}`}

1
src/plugins/saved_objects/public/save_modal/__snapshots__/saved_object_save_modal.test.tsx.snap generated
View file

@ -25,6 +25,7 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
</EuiModalHeader>
<EuiModalBody>
<EuiForm>
<EuiSpacer />
<EuiFormRow
describedByIds={Array []}
display="row"

9
src/plugins/saved_objects/public/save_modal/saved_object_save_modal.tsx
View file

@ -110,10 +110,13 @@ export class SavedObjectSaveModal extends React.Component<Props, SaveModalState>
<EuiForm>
{!this.props.showDescription && this.props.description && (
<EuiFormRow>
<EuiText color="subdued">{this.props.description}</EuiText>
</EuiFormRow>
<EuiText size="s" color="subdued">
{this.props.description}
</EuiText>
)}
<EuiSpacer />
{this.renderCopyOnSave()}
<EuiFormRow

3
x-pack/plugins/global_search_bar/public/components/search_bar.tsx
View file

@ -141,6 +141,9 @@ export function SearchBar({ globalSearch, navigateToUrl }: Props) {
onChange={onChange}
options={options}
popoverButtonBreakpoints={['xs', 's']}
popoverProps={{
repositionOnScroll: true,
}}
popoverButton={
<EuiHeaderSectionItemButton
aria-label={i18n.translate(

4
x-pack/plugins/ui_actions_enhanced/public/components/action_wizard/action_wizard.tsx
View file

@ -250,7 +250,7 @@ const SelectedActionFactory: React.FC<SelectedActionFactoryProps> = ({
data-test-subj={`${TEST_SUBJ_SELECTED_ACTION_FACTORY}-${actionFactory.id}`}
>
<header>
<EuiFlexGroup alignItems="center" gutterSize="s">
<EuiFlexGroup alignItems="center" responsive={false} gutterSize="s">
{actionFactory.getIconType(context) && (
<EuiFlexItem grow={false}>
<EuiIcon type={actionFactory.getIconType(context)!} size="m" />
@ -342,7 +342,7 @@ const ActionFactorySelector: React.FC<ActionFactorySelectorProps> = ({
};
return (
<EuiFlexGroup gutterSize="m" wrap={true} style={firefoxBugFix}>
<EuiFlexGroup gutterSize="m" responsive={false} wrap={true} style={firefoxBugFix}>
{ensureOrder(actionFactories).map((actionFactory) => (
<EuiFlexItem grow={false} key={actionFactory.id}>
<EuiToolTip

6
x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/drilldown_hello_bar/drilldown_hello_bar.tsx
View file

@ -31,11 +31,9 @@ export const DrilldownHelloBar: React.FC<DrilldownHelloBarProps> = ({
}) => {
return (
<EuiCallOut data-test-subj={WELCOME_MESSAGE_TEST_SUBJ}>
<EuiFlexGroup>
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false}>
<div style={{ marginLeft: '8px' }}>
<EuiIcon type="help" />
</div>
<EuiIcon type="help" />
</EuiFlexItem>
<EuiFlexItem grow={1}>
<EuiText size={'s'}>

2
x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/flyout_frame/flyout_frame.tsx
View file

@ -64,7 +64,7 @@ export const FlyoutFrame: React.FC<FlyoutFrameProps> = ({
const footerFragment = (onClose || footer) && (
<EuiFlyoutFooter>
<EuiFlexGroup justifyContent="spaceBetween">
<EuiFlexGroup responsive={false} justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
{onClose && (
<EuiButtonEmpty

2
x-pack/plugins/watcher/public/application/sections/watch_edit/components/threshold_watch_edit/threshold_watch_action_dropdown.tsx
View file

@ -103,7 +103,7 @@ export const WatchActionsDropdown: React.FunctionComponent<Props> = ({ settings,
setIsPopOverOpen(false);
}}
>
<EuiFlexGroup>
<EuiFlexGroup responsive={false}>
<EuiFlexItem grow={false} className="watcherThresholdWatchActionContextMenuItem">
<EuiIcon type={action.iconClass} />
</EuiFlexItem>