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

[Global search bar] Fix clear button glitch (#137251) (#137497)

Browse source 
* Fix global search bar clear button glitch

* Fix small layout shift caused by "append" disappearing on hover

* Apply @cchaos 's suggestions

* Update x-pack/plugins/global_search_bar/public/components/search_bar.scss

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
(cherry picked from commit f2a14e2899)

Co-authored-by: Gerard Soldevila <gerard.soldevila@elastic.co>
This commit is contained in:
Kibana Machine 2022-07-28 13:45:46 -04:00 • committed by GitHub
parent 4471e81098
commit a211197a33
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,35 +14,20 @@
border-right: $euiBorderThin; // Adds divider between the tag list and 'Go to' badge
}
//TODO add these overrides to EUI so that search behaves the same globally (eui/issues/4363)
.kbnSearchBar {
max-width: 100%;
will-change: width;
}
@include euiBreakpoint('xs', 's') {
.kbnSearchOption__tagsList {
display: none;
}
}
@include euiBreakpoint('m', 'l', 'xl') {
@include euiBreakpoint('m', 'l') {
.kbnSearchBar {
width: 400px;
}
}
@include euiBreakpoint('l', 'xl') {
.kbnSearchBar:focus {
animation: kbnAnimateSearchBar $euiAnimSpeedFast forwards;
}
}
@keyframes kbnAnimateSearchBar {
from {
width: 400px;
}
to {
@include euiBreakpoint('xl') {
.kbnSearchBar {
width: 600px;
}
}

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

@ -294,6 +294,7 @@ export const SearchBar: FC<SearchBarProps> = ({
isPreFiltered
onChange={onChange}
options={options}
className="kbnSearchBar"
popoverButtonBreakpoints={['xs', 's']}
singleSelection={true}
renderOption={(option) => euiSelectableTemplateSitewideRenderOptions(option, searchTerm)}
@ -303,7 +304,6 @@ export const SearchBar: FC<SearchBarProps> = ({
'data-test-subj': 'nav-search-input',
inputRef: setSearchRef,
compressed: true,
className: 'kbnSearchBar',
'aria-label': placeholderText,
placeholder: placeholderText,
onFocus: () => {
@ -312,7 +312,7 @@ export const SearchBar: FC<SearchBarProps> = ({
setShowAppend(false);
},
onBlur: () => {
setShowAppend(true);
setShowAppend(!searchValue.length);
},
fullWidth: true,
append: showAppend ? (