From f26a11ce5189e84b3032b8f821f0517f732600ff Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Thu, 11 Apr 2024 16:08:21 -0500 Subject: [PATCH 1/6] [BUG][EuiRange]: Fixed input background color * Added CSS for disabled, readOnly states when input is prepended. * Updated one snapshot for disabled prop. --- .../form/range/__snapshots__/range.test.tsx.snap | 2 +- src/components/form/range/range.tsx | 2 ++ .../form/range/range_wrapper.styles.ts | 16 +++++++++++++++- src/components/form/range/range_wrapper.tsx | 9 ++++++++- 4 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap index b096d5f964f..6484a895ffb 100644 --- a/src/components/form/range/__snapshots__/range.test.tsx.snap +++ b/src/components/form/range/__snapshots__/range.test.tsx.snap @@ -180,7 +180,7 @@ exports[`EuiRange props custom ticks should render 1`] = ` exports[`EuiRange props disabled should render 1`] = `
{showLabels && ( diff --git a/src/components/form/range/range_wrapper.styles.ts b/src/components/form/range/range_wrapper.styles.ts index 983c0fa0b72..21e762884b8 100644 --- a/src/components/form/range/range_wrapper.styles.ts +++ b/src/components/form/range/range_wrapper.styles.ts @@ -7,10 +7,13 @@ */ import { css } from '@emotion/react'; -import { euiFormControlSize } from '../form.styles'; +import { euiFormControlSize, euiFormVariables } from '../form.styles'; import { UseEuiTheme } from '../../../services'; export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { + const { backgroundColor, backgroundDisabledColor, backgroundReadOnlyColor } = + euiFormVariables(euiThemeContext); + return { euiRangeWrapper: css` display: flex; @@ -20,6 +23,7 @@ export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { /* There's no way to target the layout of the extra input, so we must * use the descendant selector to allow the width to shrink. */ inline-size: auto; + background: ${backgroundColor}; } `, regular: css` @@ -31,5 +35,15 @@ export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { fullWidth: css` max-inline-size: 100%; `, + disabled: css` + > .euiFormControlLayout { + background: ${backgroundDisabledColor}; + } + `, + readOnly: css` + > .euiFormControlLayout { + background: ${backgroundReadOnlyColor} !important; + } + `, }; }; diff --git a/src/components/form/range/range_wrapper.tsx b/src/components/form/range/range_wrapper.tsx index 24469bb374d..f9bdb238510 100644 --- a/src/components/form/range/range_wrapper.tsx +++ b/src/components/form/range/range_wrapper.tsx @@ -19,7 +19,10 @@ import { euiRangeWrapperStyles } from './range_wrapper.styles'; export interface EuiRangeWrapperProps extends CommonProps, HTMLAttributes, - Pick<_SharedRangeInputProps, 'fullWidth' | 'compressed'> {} + Pick< + _SharedRangeInputProps, + 'fullWidth' | 'compressed' | 'disabled' | 'readOnly' + > {} export const EuiRangeWrapper = forwardRef( (props, ref) => { @@ -29,6 +32,8 @@ export const EuiRangeWrapper = forwardRef( className, fullWidth = defaultFullWidth, compressed, + disabled, + readOnly, ...rest } = props; @@ -41,6 +46,8 @@ export const EuiRangeWrapper = forwardRef( !compressed && styles.regular, compressed && styles.compressed, fullWidth && styles.fullWidth, + disabled && styles.disabled, + readOnly && styles.readOnly, ]; return ( From d36573fa0cf3f2a3e5ebf95da1b48bef0cf5c5ee Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Thu, 11 Apr 2024 16:49:05 -0500 Subject: [PATCH 2/6] Removed important and used Emotmotion specificity override instead. --- src/components/form/range/range_wrapper.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form/range/range_wrapper.styles.ts b/src/components/form/range/range_wrapper.styles.ts index 21e762884b8..993d963d7cd 100644 --- a/src/components/form/range/range_wrapper.styles.ts +++ b/src/components/form/range/range_wrapper.styles.ts @@ -41,8 +41,8 @@ export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { } `, readOnly: css` - > .euiFormControlLayout { - background: ${backgroundReadOnlyColor} !important; + && > .euiFormControlLayout { + background: ${backgroundReadOnlyColor}; } `, }; From 70fb8065857c97d31e3de7c66812866b4ce25477 Mon Sep 17 00:00:00 2001 From: 1Copenut Date: Fri, 12 Apr 2024 10:24:45 -0500 Subject: [PATCH 3/6] Switching to more specific background-color property. --- src/components/form/range/range_wrapper.styles.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/form/range/range_wrapper.styles.ts b/src/components/form/range/range_wrapper.styles.ts index 993d963d7cd..e807b65c549 100644 --- a/src/components/form/range/range_wrapper.styles.ts +++ b/src/components/form/range/range_wrapper.styles.ts @@ -23,7 +23,7 @@ export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { /* There's no way to target the layout of the extra input, so we must * use the descendant selector to allow the width to shrink. */ inline-size: auto; - background: ${backgroundColor}; + background-color: ${backgroundColor}; } `, regular: css` @@ -37,12 +37,12 @@ export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { `, disabled: css` > .euiFormControlLayout { - background: ${backgroundDisabledColor}; + background-color: ${backgroundDisabledColor}; } `, readOnly: css` && > .euiFormControlLayout { - background: ${backgroundReadOnlyColor}; + background-color: ${backgroundReadOnlyColor}; } `, }; From 2c388d0b22768a8f35ee037cb3caedc85efd028f Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 12 Apr 2024 10:53:51 -0700 Subject: [PATCH 4/6] Revert changes --- .../form/range/__snapshots__/range.test.tsx.snap | 2 +- src/components/form/range/range.tsx | 2 -- .../form/range/range_wrapper.styles.ts | 16 +--------------- src/components/form/range/range_wrapper.tsx | 9 +-------- 4 files changed, 3 insertions(+), 26 deletions(-) diff --git a/src/components/form/range/__snapshots__/range.test.tsx.snap b/src/components/form/range/__snapshots__/range.test.tsx.snap index 6484a895ffb..b096d5f964f 100644 --- a/src/components/form/range/__snapshots__/range.test.tsx.snap +++ b/src/components/form/range/__snapshots__/range.test.tsx.snap @@ -180,7 +180,7 @@ exports[`EuiRange props custom ticks should render 1`] = ` exports[`EuiRange props disabled should render 1`] = `
{showLabels && ( diff --git a/src/components/form/range/range_wrapper.styles.ts b/src/components/form/range/range_wrapper.styles.ts index e807b65c549..983c0fa0b72 100644 --- a/src/components/form/range/range_wrapper.styles.ts +++ b/src/components/form/range/range_wrapper.styles.ts @@ -7,13 +7,10 @@ */ import { css } from '@emotion/react'; -import { euiFormControlSize, euiFormVariables } from '../form.styles'; +import { euiFormControlSize } from '../form.styles'; import { UseEuiTheme } from '../../../services'; export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { - const { backgroundColor, backgroundDisabledColor, backgroundReadOnlyColor } = - euiFormVariables(euiThemeContext); - return { euiRangeWrapper: css` display: flex; @@ -23,7 +20,6 @@ export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { /* There's no way to target the layout of the extra input, so we must * use the descendant selector to allow the width to shrink. */ inline-size: auto; - background-color: ${backgroundColor}; } `, regular: css` @@ -35,15 +31,5 @@ export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { fullWidth: css` max-inline-size: 100%; `, - disabled: css` - > .euiFormControlLayout { - background-color: ${backgroundDisabledColor}; - } - `, - readOnly: css` - && > .euiFormControlLayout { - background-color: ${backgroundReadOnlyColor}; - } - `, }; }; diff --git a/src/components/form/range/range_wrapper.tsx b/src/components/form/range/range_wrapper.tsx index f9bdb238510..24469bb374d 100644 --- a/src/components/form/range/range_wrapper.tsx +++ b/src/components/form/range/range_wrapper.tsx @@ -19,10 +19,7 @@ import { euiRangeWrapperStyles } from './range_wrapper.styles'; export interface EuiRangeWrapperProps extends CommonProps, HTMLAttributes, - Pick< - _SharedRangeInputProps, - 'fullWidth' | 'compressed' | 'disabled' | 'readOnly' - > {} + Pick<_SharedRangeInputProps, 'fullWidth' | 'compressed'> {} export const EuiRangeWrapper = forwardRef( (props, ref) => { @@ -32,8 +29,6 @@ export const EuiRangeWrapper = forwardRef( className, fullWidth = defaultFullWidth, compressed, - disabled, - readOnly, ...rest } = props; @@ -46,8 +41,6 @@ export const EuiRangeWrapper = forwardRef( !compressed && styles.regular, compressed && styles.compressed, fullWidth && styles.fullWidth, - disabled && styles.disabled, - readOnly && styles.readOnly, ]; return ( From 75e35e3d1f500057da8dd195e3e69163c5f42eac Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 12 Apr 2024 11:43:59 -0700 Subject: [PATCH 5/6] Fix flex/width relationship of EuiRange inputs, ranges, and prepend/append labels --- .../form/range/range_wrapper.styles.ts | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/form/range/range_wrapper.styles.ts b/src/components/form/range/range_wrapper.styles.ts index 983c0fa0b72..20d9da4b9da 100644 --- a/src/components/form/range/range_wrapper.styles.ts +++ b/src/components/form/range/range_wrapper.styles.ts @@ -16,10 +16,26 @@ export const euiRangeWrapperStyles = (euiThemeContext: UseEuiTheme) => { display: flex; align-items: center; + /* TODO: When converting forms to Emotion, allow passing wrapperProps + to EuiFieldNumber and then move this CSS to range_input.styles.ts */ > .euiFormControlLayout { - /* There's no way to target the layout of the extra input, so we must - * use the descendant selector to allow the width to shrink. */ + /* Allow the width to shrink */ inline-size: auto; + /* Don't allow inputs to overwhelm the actual range in width */ + max-inline-size: 50%; + + /* The input should take priority over prepend/append labels */ + .euiFormControlLayout__childrenWrapper { + flex-shrink: 0; + } + + .euiFormControlLayout__prepend, + .euiFormControlLayout__append { + flex-shrink: 1; + /* Remove the default 50% max-width on prepend/appends, as a max-width is + already set on the wrapper, and a static width already set on the input */ + max-inline-size: none; + } } `, regular: css` From b620a63dd9ed6f135b03a69a04c6c88d45fd7cc2 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Fri, 12 Apr 2024 11:50:14 -0700 Subject: [PATCH 6/6] changelog --- changelogs/upcoming/7678.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 changelogs/upcoming/7678.md diff --git a/changelogs/upcoming/7678.md b/changelogs/upcoming/7678.md new file mode 100644 index 00000000000..e8d28d7fb38 --- /dev/null +++ b/changelogs/upcoming/7678.md @@ -0,0 +1,5 @@ +**Bug fixes** + +- Visual fixes for `EuiRange`s with `showInput`: + - Longer `append`/`prepend` labels no longer cause a background bug + - Inputs can no longer overwhelm the actual range in width