mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
[Controls] Fix control styles and invalid selection icon for Borealis (#213851)
## Summary Closes https://github.com/elastic/kibana/issues/210614. Closes https://github.com/elastic/kibana/issues/210615. Closes https://github.com/elastic/kibana/issues/210616. This is a follow up to the Borealis updates to fix controls colors/styles. This also fixes the text color of the range slider number inputs to match the invalid state. #### Light mode  #### Dark mode  #### Options List control with selection that results in no data  #### Range Slider control with valid selection that results in no data  #### Range Slider control with invalid selection  ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...
This commit is contained in:
Catherine Liu
GitHub
parent
7627c79065
commit
96598fc019
9 changed files with 11 additions and 23 deletions
|
|
@ -8,7 +8,6 @@ $controlMinWidth: $euiSize * 14;
|
|||
max-inline-size: 100% !important;
|
||||
height: $euiButtonHeightSmall;
|
||||
box-shadow: none !important;
|
||||
background-color: $euiFormBackgroundColor !important;
|
||||
border-radius: 0 $euiBorderRadius $euiBorderRadius 0 !important;
|
||||
|
||||
&--roundedBorders {
|
||||
|
|
@ -89,7 +88,6 @@ $controlMinWidth: $euiSize * 14;
|
|||
.controlFrame__formControlLayout:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background-color: transparentize($euiColorPrimary, .5);
|
||||
border-radius: $euiBorderRadius;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -217,7 +215,6 @@ $controlMinWidth: $euiSize * 14;
|
|||
border-radius: $euiBorderRadius;
|
||||
font-weight: $euiFontWeightSemiBold;
|
||||
border: $euiBorderWidthThin solid $euiFormBorderColor;
|
||||
background-color: $euiFormInputGroupLabelBackground;
|
||||
min-width: $controlMinWidth;
|
||||
@include euiFontSizeXS;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,10 +69,6 @@
|
|||
padding-left: $euiSizeM;
|
||||
}
|
||||
|
||||
.optionsList__selectionInvalid {
|
||||
color: $euiColorWarningText;
|
||||
}
|
||||
|
||||
.optionslist--loadingMoreGroupLabel {
|
||||
text-align: center;
|
||||
padding: $euiSizeM;
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export const OptionsListControl = ({
|
|||
tabIndex={0}
|
||||
iconType="alert"
|
||||
size="s"
|
||||
color="euiColorVis5"
|
||||
color="euiColorVis9"
|
||||
shape="square"
|
||||
fill="dark"
|
||||
title={OptionsListStrings.control.getInvalidSelectionWarningLabel(
|
||||
|
|
|
|||
|
|
@ -18,6 +18,7 @@ import {
|
|||
EuiProgress,
|
||||
useEuiBackgroundColor,
|
||||
useEuiPaddingSize,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { css } from '@emotion/react';
|
||||
import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
|
||||
|
|
@ -39,6 +40,7 @@ const aggregationToggleButtons = [
|
|||
];
|
||||
|
||||
export const OptionsListPopoverFooter = () => {
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const { api, stateManager } = useOptionsListContext();
|
||||
|
||||
const [exclude, loading, allowExpensiveQueries] = useBatchedPublishingSubjects(
|
||||
|
|
@ -88,7 +90,7 @@ export const OptionsListPopoverFooter = () => {
|
|||
<EuiFlexItem data-test-subj="optionsList-allow-expensive-queries-warning" grow={false}>
|
||||
<EuiIconTip
|
||||
type="warning"
|
||||
color="warning"
|
||||
color={euiTheme.colors.textWarning}
|
||||
content={OptionsListStrings.popover.getAllowExpensiveQueriesWarning()}
|
||||
aria-label={OptionsListStrings.popover.getAllowExpensiveQueriesWarning()}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -71,7 +71,6 @@ export const OptionsListPopoverInvalidSelections = () => {
|
|||
<EuiFlexItem grow={false}>
|
||||
<EuiIcon
|
||||
type="warning"
|
||||
color="warning"
|
||||
title={OptionsListStrings.popover.getInvalidSelectionScreenReaderText()}
|
||||
size="s"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
|
|||
}
|
||||
|
||||
.euiFormControlLayout {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -45,11 +44,11 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
|
|||
|
||||
/* Stretch the underline across the entire __childrenWrapper and set it to a custom warning color */
|
||||
background-size: 100% 100%;
|
||||
--euiFormControlStateColor: ${euiTheme.colors.warning};
|
||||
--euiFormControlStateColor: ${euiTheme.colors.textWarning};
|
||||
|
||||
/* But restore the danger color for truly invalid inputs (e.g. min larger than max) */
|
||||
&:has(input:invalid) {
|
||||
--euiFormControlStateColor: ${euiTheme.colors.danger};
|
||||
--euiFormControlStateColor: ${euiTheme.colors.textDanger};
|
||||
}
|
||||
|
||||
/* Remove the append background so the caution icon looks more natural */
|
||||
|
|
@ -62,7 +61,6 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
|
|||
fieldNumbers: {
|
||||
rangeSliderFieldNumber: css`
|
||||
font-weight: ${euiTheme.font.weight.medium};
|
||||
background-color: transparent;
|
||||
|
||||
&:placeholder-shown,
|
||||
&::placeholder {
|
||||
|
|
@ -72,9 +70,11 @@ export const rangeSliderControlStyles = (euiThemeContext: UseEuiTheme) => {
|
|||
`,
|
||||
invalid: css`
|
||||
&:not(:invalid) {
|
||||
--euiFormControlStateColor: ${euiTheme.colors.textWarning};
|
||||
color: ${euiTheme.colors.textWarning};
|
||||
}
|
||||
&:invalid {
|
||||
--euiFormControlStateColor: ${euiTheme.colors.textDanger};
|
||||
color: ${euiTheme.colors.textDanger};
|
||||
}
|
||||
`,
|
||||
|
|
|
|||
|
|
@ -216,7 +216,7 @@ export const RangeSliderControl: FC<Props> = ({
|
|||
tabIndex={0}
|
||||
iconType="alert"
|
||||
size="s"
|
||||
color="euiColorVis5"
|
||||
color="euiColorVis9"
|
||||
shape="square"
|
||||
fill="dark"
|
||||
title={RangeSliderStrings.control.getInvalidSelectionWarningLabel()}
|
||||
|
|
|
|||
|
|
@ -218,7 +218,7 @@ export const getRangesliderControlFactory = (): DataControlFactory<
|
|||
return {
|
||||
api,
|
||||
Component: ({ className: controlPanelClassName }) => {
|
||||
const [dataLoading, fieldFormatter, max, min, selectionHasNotResults, step, value] =
|
||||
const [dataLoading, fieldFormatter, max, min, selectionHasNoResults, step, value] =
|
||||
useBatchedPublishingSubjects(
|
||||
dataLoading$,
|
||||
dataControl.api.fieldFormatter,
|
||||
|
|
@ -243,7 +243,7 @@ export const getRangesliderControlFactory = (): DataControlFactory<
|
|||
<RangeSliderControl
|
||||
controlPanelClassName={controlPanelClassName}
|
||||
fieldFormatter={fieldFormatter}
|
||||
isInvalid={selectionHasNotResults}
|
||||
isInvalid={Boolean(value) && selectionHasNoResults}
|
||||
isLoading={typeof dataLoading === 'boolean' ? dataLoading : false}
|
||||
max={max}
|
||||
min={min}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.timeSlider-prependButton {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.timeSlider__anchor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -16,8 +12,6 @@
|
|||
overflow: hidden;
|
||||
|
||||
.euiText {
|
||||
background-color: transparent !important;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue