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

Small fixes to Kibana search bar (#85079)

Browse source 
* Small fixes to Kibana search bar

* Animate width

* tweak for ipad breakpoint

Co-authored-by: Ryan Keairns <contactryank@gmail.com>
This commit is contained in:
Dave Snider 2020-12-07 12:59:45 -08:00 • committed by GitHub
parent 28ea225bef
commit 1f75d0b79f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/global_search_bar/public/components/__snapshots__/search_bar.test.tsx.snap generated
View file

@ -35,7 +35,7 @@ exports[`SearchBar supports keyboard shortcuts 1`] = `
aria-haspopup="listbox"
aria-label="Filter options"
autocomplete="off"
class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch euiSelectableTemplateSitewide__search"
class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiSelectableSearch euiSelectableTemplateSitewide__search kbnSearchBar"
data-test-subj="nav-search-input"
placeholder="Search Elastic"
type="search"

21
x-pack/plugins/global_search_bar/public/components/search_bar.scss Normal file
View file

@ -0,0 +1,21 @@
//TODO add these overrides to EUI so that search behaves the same globally
.kbnSearchBar {
width: 400px;
max-width: 100%;
will-change: width;
}
@include euiBreakpoint('l', 'xl') {
.kbnSearchBar:focus {
animation: kbnAnimateSearchBar $euiAnimSpeedFast forwards;
}
}
@keyframes kbnAnimateSearchBar {
from {
width: 400px;
}
to {
width: 600px;
}
}

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

@ -32,6 +32,7 @@ import {
} from '../../../global_search/public';
import { SavedObjectTaggingPluginStart } from '../../../saved_objects_tagging/public';
import { parseSearchParams } from '../search_syntax';
import './search_bar.scss';
interface Props {
globalSearch: GlobalSearchPluginStart['find'];
@ -273,6 +274,7 @@ export function SearchBar({
'data-test-subj': 'nav-search-input',
inputRef: setSearchRef,
compressed: true,
className: 'kbnSearchBar',
placeholder: i18n.translate('xpack.globalSearchBar.searchBar.placeholder', {
defaultMessage: 'Search Elastic',
}),
@ -289,16 +291,16 @@ export function SearchBar({
emptyMessage={emptyMessage}
noMatchesMessage={emptyMessage}
popoverFooter={
<EuiText color="subdued" size="xs">
<EuiFlexGroup
alignItems="center"
justifyContent="spaceBetween"
gutterSize="s"
responsive={false}
wrap
>
<EuiFlexItem>
<p style={{ marginBottom: 0 }}>
<EuiFlexGroup
alignItems="center"
justifyContent="spaceBetween"
gutterSize="s"
responsive={false}
wrap
>
<EuiFlexItem>
<EuiText color="subdued" size="xs">
<p>
<FormattedMessage
id="xpack.globalSearchBar.searchBar.helpText.helpTextPrefix"
defaultMessage="Filter by"
@ -312,9 +314,11 @@ export function SearchBar({
&nbsp;
<EuiCode>tag:</EuiCode>
</p>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<p style={{ marginBottom: 0 }}>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText color="subdued" size="xs">
<p>
<FormattedMessage
id="xpack.globalSearchBar.searchBar.shortcutDescription.shortcutDetail"
defaultMessage="{shortcutDescription} {commandDescription}"
@ -343,9 +347,9 @@ export function SearchBar({
}}
/>
</p>
</EuiFlexItem>
</EuiFlexGroup>
</EuiText>
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
}
/>
);