github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-25 02:09:32 -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-haspopup="listbox"
aria-label="Filter options" aria-label="Filter options"
autocomplete="off" 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" data-test-subj="nav-search-input"
placeholder="Search Elastic" placeholder="Search Elastic"
type="search" 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;
}
}

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

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