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

Dark mode for kql bar (#29684)

Browse source 
KQL bar now works in dark mode.
This commit is contained in:
dave.snider@gmail.com 2019-02-01 09:22:44 -08:00 • committed by GitHub
parent 52fed8a52d
commit 508a776efa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 92 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/ui/public/query_bar/components/__snapshots__/query_bar.test.tsx.snap
View file

@ -19,10 +19,10 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
onOutsideClick={[Function]}
>
<div
aria-controls="typeahead-items"
aria-controls="kbnTypeahead__items"
aria-expanded={false}
aria-haspopup="true"
aria-owns="typeahead-items"
aria-owns="kbnTypeahead__items"
role="combobox"
style={
Object {
@ -43,7 +43,7 @@ exports[`QueryBar Should disable autoFocus on EuiFieldText when disableAutoFocus
<EuiFieldText
aria-activedescendant=""
aria-autocomplete="list"
aria-controls="typeahead-items"
aria-controls="kbnTypeahead__items"
aria-label="Search input"
autoComplete="off"
autoFocus={false}
@ -120,10 +120,10 @@ exports[`QueryBar Should pass the query language to the language switcher 1`] =
onOutsideClick={[Function]}
>
<div
aria-controls="typeahead-items"
aria-controls="kbnTypeahead__items"
aria-expanded={false}
aria-haspopup="true"
aria-owns="typeahead-items"
aria-owns="kbnTypeahead__items"
role="combobox"
style={
Object {
@ -144,7 +144,7 @@ exports[`QueryBar Should pass the query language to the language switcher 1`] =
<EuiFieldText
aria-activedescendant=""
aria-autocomplete="list"
aria-controls="typeahead-items"
aria-controls="kbnTypeahead__items"
aria-label="Search input"
autoComplete="off"
autoFocus={true}
@ -221,10 +221,10 @@ exports[`QueryBar Should render the given query 1`] = `
onOutsideClick={[Function]}
>
<div
aria-controls="typeahead-items"
aria-controls="kbnTypeahead__items"
aria-expanded={false}
aria-haspopup="true"
aria-owns="typeahead-items"
aria-owns="kbnTypeahead__items"
role="combobox"
style={
Object {
@ -245,7 +245,7 @@ exports[`QueryBar Should render the given query 1`] = `
<EuiFieldText
aria-activedescendant=""
aria-autocomplete="list"
aria-controls="typeahead-items"
aria-controls="kbnTypeahead__items"
aria-label="Search input"
autoComplete="off"
autoFocus={true}

6
src/ui/public/query_bar/components/query_bar.tsx
View file

@ -554,8 +554,8 @@ export class QueryBarUI extends Component<Props, State> {
role="combobox"
aria-haspopup="true"
aria-expanded={this.state.isSuggestionsVisible}
aria-owns="typeahead-items"
aria-controls="typeahead-items"
aria-owns="kbnTypeahead__items"
aria-controls="kbnTypeahead__items"
>
<form role="form" name="queryBarForm">
<div role="search">
@ -588,7 +588,7 @@ export class QueryBarUI extends Component<Props, State> {
type="text"
data-test-subj="queryInput"
aria-autocomplete="list"
aria-controls="typeahead-items"
aria-controls="kbnTypeahead__items"
aria-activedescendant={
this.state.isSuggestionsVisible ? 'suggestion-' + this.state.index : ''
}

20
src/ui/public/query_bar/components/typeahead/__snapshots__/suggestion_component.test.tsx.snap
View file

@ -3,17 +3,17 @@
exports[`SuggestionComponent Should display the suggestion and use the provided ariaId 1`] = `
<div
aria-selected={false}
className="typeahead-item"
className="kbnTypeahead__item"
id="suggestion-1"
onClick={[Function]}
onMouseEnter={[Function]}
role="option"
>
<div
className="suggestionItem suggestionItem--value"
className="kbnSuggestionItem kbnSuggestionItem--value"
>
<div
className="suggestionItem__type"
className="kbnSuggestionItem__type"
>
<EuiIcon
size="m"
@ -21,12 +21,12 @@ exports[`SuggestionComponent Should display the suggestion and use the provided
/>
</div>
<div
className="suggestionItem__text"
className="kbnSuggestionItem__text"
>
as promised, not helpful
</div>
<div
className="suggestionItem__description"
className="kbnSuggestionItem__description"
dangerouslySetInnerHTML={
Object {
"__html": "This is not a helpful suggestion",
@ -40,17 +40,17 @@ exports[`SuggestionComponent Should display the suggestion and use the provided
exports[`SuggestionComponent Should make the element active if the selected prop is true 1`] = `
<div
aria-selected={true}
className="typeahead-item active"
className="kbnTypeahead__item active"
id="suggestion-1"
onClick={[Function]}
onMouseEnter={[Function]}
role="option"
>
<div
className="suggestionItem suggestionItem--value"
className="kbnSuggestionItem kbnSuggestionItem--value"
>
<div
className="suggestionItem__type"
className="kbnSuggestionItem__type"
>
<EuiIcon
size="m"
@ -58,12 +58,12 @@ exports[`SuggestionComponent Should make the element active if the selected prop
/>
</div>
<div
className="suggestionItem__text"
className="kbnSuggestionItem__text"
>
as promised, not helpful
</div>
<div
className="suggestionItem__description"
className="kbnSuggestionItem__description"
dangerouslySetInnerHTML={
Object {
"__html": "This is not a helpful suggestion",

16
src/ui/public/query_bar/components/typeahead/__snapshots__/suggestions_component.test.tsx.snap
View file

@ -5,14 +5,14 @@ exports[`SuggestionsComponent Passing the index should control which suggestion
className="reactSuggestionTypeahead"
>
<div
className="typeahead"
className="kbnTypeahead"
>
<div
className="typeahead-popover"
className="kbnTypeahead__popover"
>
<div
className="typeahead-items"
id="typeahead-items"
className="kbnTypeahead__items"
id="kbnTypeahead__items"
onScroll={[Function]}
role="listbox"
>
@ -61,14 +61,14 @@ exports[`SuggestionsComponent Should display given suggestions if the show prop
className="reactSuggestionTypeahead"
>
<div
className="typeahead"
className="kbnTypeahead"
>
<div
className="typeahead-popover"
className="kbnTypeahead__popover"
>
<div
className="typeahead-items"
id="typeahead-items"
className="kbnTypeahead__items"
id="kbnTypeahead__items"
onScroll={[Function]}
role="listbox"
>

126
src/ui/public/query_bar/components/typeahead/_suggestion.scss
View file

@ -1,7 +1,15 @@
.typeahead {
// These are the various types in the dropdown, they each get a color
$kbnTypeaheadTypes: (
field: $euiColorWarning,
value: $euiColorSecondary,
operator: $euiColorPrimary,
conjunction: $typeaheadConjunctionColor,
);
.kbnTypeahead {
position: relative;
.typeahead-popover {
.kbnTypeahead__popover {
@include euiBottomShadow($adjustBorders: true);
border: 1px solid;
border-color: $euiBorderColor;
@ -14,12 +22,14 @@
border-bottom-left-radius: $euiBorderRadius;
border-bottom-right-radius: $euiBorderRadius;
.typeahead-items {
.kbnTypeahead__items {
@include euiScrollBar;
max-height: 60vh;
overflow-y: auto;
}
.typeahead-item {
.kbnTypeahead__item {
height: $euiSizeXL;
white-space: nowrap;
font-size: $euiFontSizeXS;
@ -29,134 +39,84 @@
line-height: normal;
}
.typeahead-item:hover {
.kbnTypeahead__item:hover {
cursor: pointer;
}
.typeahead-item:last-child {
.kbnTypeahead__item:last-child {
border-bottom: 0px;
border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
}
.typeahead-item:first-child {
.kbnTypeahead__item:first-child {
border-bottom: 0px;
border-radius: $euiBorderRadius $euiBorderRadius 0 0;
}
.typeahead-item.active {
.kbnTypeahead__item.active {
background-color: $euiColorLightestShade;
.suggestionItem__callout {
.kbnSuggestionItem__callout {
background: $euiColorEmptyShade;
}
.suggestionItem__text {
.kbnSuggestionItem__text {
color: $euiColorFullShade;
}
.suggestionItem__type {
.kbnSuggestionItem__type {
color: $euiColorFullShade;
}
.suggestionItem--field {
.suggestionItem__type {
background-color: tint($euiColorWarning, 80%);
@each $name, $color in $kbnTypeaheadTypes {
.kbnSuggestionItem--#{$name} {
.kbnSuggestionItem__type {
background-color: tintOrShade($color, 80%, 60%);
}
}
}
.suggestionItem--value {
.suggestionItem__type {
background-color: tint($euiColorSecondary, 80%);
}
}
.suggestionItem--operator {
.suggestionItem__type {
background-color: tint($euiColorPrimary, 80%);
}
}
.suggestionItem--conjunction {
.suggestionItem__type {
background-color: tint($typeaheadConjunctionColor, 80%);
}
}
}
}
}
.inline-form .typeahead.visible .input-group {
> :first-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
> :last-child {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.suggestionItem {
.kbnSuggestionItem {
display: flex;
align-items: stretch;
flex-grow: 1;
align-items: center;
font-size: $euiFontSizeXS;
white-space: nowrap;
&.suggestionItem--field {
.suggestionItem__type {
background-color: tint($euiColorWarning, 90%);
color: makeHighContrastColor($euiColorWarning, tint($euiColorWarning, 90%));
@each $name, $color in $kbnTypeaheadTypes {
&.kbnSuggestionItem--#{$name} {
.kbnSuggestionItem__type {
background-color: tintOrShade($color, 90%, 50%);
color: makeHighContrastColor($color, tintOrShade($color, 90%, 50%));
}
}
}
&.suggestionItem--value {
.suggestionItem__type {
background-color: tint($euiColorSecondary, 90%);
color: makeHighContrastColor($euiColorSecondary, tint($euiColorSecondary, 90%));
}
.suggestionItem__text {
width: auto;
}
}
&.suggestionItem--operator {
.suggestionItem__type {
background-color: tint($euiColorPrimary, 90%);
color: makeHighContrastColor($euiColorPrimary, tint($euiColorSecondary, 90%));
}
}
&.suggestionItem--conjunction {
.suggestionItem__type {
background-color: tint($typeaheadConjunctionColor, 90%);
color: makeHighContrastColor($typeaheadConjunctionColor, tint($typeaheadConjunctionColor, 90%));
}
}
&.suggestionItem--recentSearch {
.suggestionItem__type {
&.kbnSuggestionItem--recentSearch {
.kbnSuggestionItem__type {
background-color: $euiColorLightShade;
color: $euiColorMediumShade;
}
.suggestionItem__text {
.kbnSuggestionItem__text {
width: auto;
}
}
}
.suggestionItem__text, .suggestionItem__type, .suggestionItem__description {
.kbnSuggestionItem__text, .kbnSuggestionItem__type, .kbnSuggestionItem__description {
flex-grow: 1;
flex-basis: 0%;
display: flex;
flex-direction: column;
}
.suggestionItem__type {
.kbnSuggestionItem__type {
flex-grow: 0;
flex-basis: auto;
width: $euiSizeXL;
@ -169,7 +129,7 @@
}
.suggestionItem__text {
.kbnSuggestionItem__text {
flex-grow: 0; /* 2 */
flex-basis: auto; /* 2 */
font-family: $euiCodeFontFamily;
@ -178,16 +138,16 @@
overflow: hidden;
text-overflow: ellipsis;
padding: $euiSizeXS $euiSizeS;
color: #111;
color: $euiTextColor;
}
.suggestionItem__description {
.kbnSuggestionItem__description {
color: $euiColorDarkShade;
overflow: hidden;
text-overflow: ellipsis;
}
.suggestionItem__callout {
.kbnSuggestionItem__callout {
font-family: $euiCodeFontFamily;
background: $euiColorLightestShade;
color: $euiColorFullShade;

2
src/ui/public/query_bar/components/typeahead/suggestion_component.test.tsx
View file

@ -67,7 +67,7 @@ describe('SuggestionComponent', () => {
it('Should call innerRef with a reference to the root div element', () => {
const innerRefCallback = (ref: HTMLDivElement) => {
expect(ref.className).toBe('typeahead-item');
expect(ref.className).toBe('kbnTypeahead__item');
expect(ref.id).toBe('suggestion-1');
};

10
src/ui/public/query_bar/components/typeahead/suggestion_component.tsx
View file

@ -52,7 +52,7 @@ export const SuggestionComponent: SFC<Props> = props => {
return (
<div
className={classNames({
'typeahead-item': true,
kbnTypeahead__item: true,
active: props.selected,
})}
role="option"
@ -62,13 +62,13 @@ export const SuggestionComponent: SFC<Props> = props => {
id={props.ariaId}
aria-selected={props.selected}
>
<div className={'suggestionItem suggestionItem--' + props.suggestion.type}>
<div className="suggestionItem__type">
<div className={'kbnSuggestionItem kbnSuggestionItem--' + props.suggestion.type}>
<div className="kbnSuggestionItem__type">
<EuiIcon type={getEuiIconType(props.suggestion.type)} />
</div>
<div className="suggestionItem__text">{props.suggestion.text}</div>
<div className="kbnSuggestionItem__text">{props.suggestion.text}</div>
<div
className="suggestionItem__description"
className="kbnSuggestionItem__description"
// Description currently always comes from us and we escape any potential user input
// at the time we're generating the description text
// eslint-disable-next-line react/no-danger

8
src/ui/public/query_bar/components/typeahead/suggestions_component.tsx
View file

@ -56,11 +56,11 @@ export class SuggestionsComponent extends Component<Props> {
return (
<div className="reactSuggestionTypeahead">
<div className="typeahead">
<div className="typeahead-popover">
<div className="kbnTypeahead">
<div className="kbnTypeahead__popover">
<div
id="typeahead-items"
className="typeahead-items"
id="kbnTypeahead__items"
className="kbnTypeahead__items"
role="listbox"
ref={node => (this.parentNode = node)}
onScroll={this.handleScroll}

4
x-pack/plugins/kuery_autocomplete/public/autocomplete_providers/conjunction.js
View file

@ -21,7 +21,7 @@ const conjunctions = {
and: '<p>' +
i18n.translate('xpack.kueryAutocomplete.andOperatorDescription', {
defaultMessage: 'Requires {bothArguments} to be true',
values: { bothArguments: `<span class="suggestionItem__callout">${bothArgumentsText}</span>` },
values: { bothArguments: `<span class="kbnSuggestionItem__callout">${bothArgumentsText}</span>` },
description: 'Full text: "Requires both arguments to be true". See ' +
'xpack.kueryAutocomplete.andOperatorDescription.bothArgumentsText for "both arguments" part.'
}) +
@ -29,7 +29,7 @@ const conjunctions = {
or: '<p>' +
i18n.translate('xpack.kueryAutocomplete.orOperatorDescription', {
defaultMessage: 'Requires {oneOrMoreArguments} to be true',
values: { oneOrMoreArguments: `<span class="suggestionItem__callout">${oneOrMoreArgumentsText}</span>` },
values: { oneOrMoreArguments: `<span class="kbnSuggestionItem__callout">${oneOrMoreArgumentsText}</span>` },
description: 'Full text: "Requires one or more arguments to be true". See ' +
'xpack.kueryAutocomplete.orOperatorDescription.oneOrMoreArgumentsText for "one or more arguments" part.'
}) +

2
x-pack/plugins/kuery_autocomplete/public/autocomplete_providers/field.js
View file

@ -17,7 +17,7 @@ function getDescription(fieldName) {
return '<p>' +
i18n.translate('xpack.kueryAutocomplete.filterResultsDescription', {
defaultMessage: 'Filter results that contain {fieldName}',
values: { fieldName: `<span class="suggestionItem__callout">${escape(fieldName)}</span>` }
values: { fieldName: `<span class="kbnSuggestionItem__callout">${escape(fieldName)}</span>` }
}) +
'</p>';
}

12
x-pack/plugins/kuery_autocomplete/public/autocomplete_providers/operator.js
View file

@ -38,7 +38,7 @@ const operators = {
':': {
description: i18n.translate('xpack.kueryAutocomplete.equalOperatorDescription', {
defaultMessage: '{equals} some value',
values: { equals: `<span class="suggestionItem__callout">${equalsText}</span>` },
values: { equals: `<span class="kbnSuggestionItem__callout">${equalsText}</span>` },
description: 'Full text: "equals some value". See ' +
'xpack.kueryAutocomplete.equalOperatorDescription.equalsText for "equals" part.'
}),
@ -47,7 +47,7 @@ const operators = {
'<=': {
description: i18n.translate('xpack.kueryAutocomplete.lessThanOrEqualOperatorDescription', {
defaultMessage: 'is {lessThanOrEqualTo} some value',
values: { lessThanOrEqualTo: `<span class="suggestionItem__callout">${lessThanOrEqualToText}</span>` },
values: { lessThanOrEqualTo: `<span class="kbnSuggestionItem__callout">${lessThanOrEqualToText}</span>` },
description: 'Full text: "is less than or equal to some value". See ' +
'xpack.kueryAutocomplete.lessThanOrEqualOperatorDescription.lessThanOrEqualToText for "less than or equal to" part.'
}),
@ -56,7 +56,7 @@ const operators = {
'>=': {
description: i18n.translate('xpack.kueryAutocomplete.greaterThanOrEqualOperatorDescription', {
defaultMessage: 'is {greaterThanOrEqualTo} some value',
values: { greaterThanOrEqualTo: `<span class="suggestionItem__callout">${greaterThanOrEqualToText}</span>` },
values: { greaterThanOrEqualTo: `<span class="kbnSuggestionItem__callout">${greaterThanOrEqualToText}</span>` },
description: 'Full text: "is greater than or equal to some value". See ' +
'xpack.kueryAutocomplete.greaterThanOrEqualOperatorDescription.greaterThanOrEqualToText for "greater than or equal to" part.'
}),
@ -65,7 +65,7 @@ const operators = {
'<': {
description: i18n.translate('xpack.kueryAutocomplete.lessThanOperatorDescription', {
defaultMessage: 'is {lessThan} some value',
values: { lessThan: `<span class="suggestionItem__callout">${lessThanText}</span>` },
values: { lessThan: `<span class="kbnSuggestionItem__callout">${lessThanText}</span>` },
description: 'Full text: "is less than some value". See ' +
'xpack.kueryAutocomplete.lessThanOperatorDescription.lessThanText for "less than" part.'
}),
@ -74,7 +74,7 @@ const operators = {
'>': {
description: i18n.translate('xpack.kueryAutocomplete.greaterThanOperatorDescription', {
defaultMessage: 'is {greaterThan} some value',
values: { greaterThan: `<span class="suggestionItem__callout">${greaterThanText}</span>` },
values: { greaterThan: `<span class="kbnSuggestionItem__callout">${greaterThanText}</span>` },
description: 'Full text: "is greater than some value". See ' +
'xpack.kueryAutocomplete.greaterThanOperatorDescription.greaterThanText for "greater than" part.'
}),
@ -83,7 +83,7 @@ const operators = {
':*': {
description: i18n.translate('xpack.kueryAutocomplete.existOperatorDescription', {
defaultMessage: '{exists} in any form',
values: { exists: `<span class="suggestionItem__callout">${existsText}</span>` },
values: { exists: `<span class="kbnSuggestionItem__callout">${existsText}</span>` },
description: 'Full text: "exists in any form". See ' +
'xpack.kueryAutocomplete.existOperatorDescription.existsText for "exists" part.'
})