Skip to content

[BUG] Fix the EuiRange prepend prop CSS #7678

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
1Copenut merged 6 commits into from
Apr 15, 2024
Merged

[BUG] Fix the EuiRange prepend prop CSS #7678

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f26a11c
[BUG][EuiRange]: Fixed input background color
Apr 11, 2024
d36573f
Removed important and used Emotmotion specificity override instead.
Apr 11, 2024
70fb806
Switching to more specific background-color property.
Apr 12, 2024
2c388d0
Revert changes
cee-chen Apr 12, 2024
75e35e3
Fix flex/width relationship of EuiRange inputs, ranges, and prepend/a…
cee-chen Apr 12, 2024
b620a63
changelog
cee-chen Apr 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/form/range/__snapshots__/range.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ exports[`EuiRange props custom ticks should render 1`] = `

exports[`EuiRange props disabled should render 1`] = `
<div
class="euiRangeWrapper euiRange emotion-euiRangeWrapper-regular-euiRange"
class="euiRangeWrapper euiRange emotion-euiRangeWrapper-regular-disabled-euiRange"
>
<div
aria-hidden="false"
Expand Down
2 changes: 2 additions & 0 deletions src/components/form/range/range.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,8 @@ export class EuiRangeClass extends Component<
css={cssStyles}
fullWidth={fullWidth}
compressed={compressed}
disabled={disabled}
readOnly={readOnly}
>
{showLabels && (
<EuiRangeLabel side="min" disabled={disabled}>
Expand Down
16 changes: 15 additions & 1 deletion src/components/form/range/range_wrapper.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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};
Comment thread
cee-chen marked this conversation as resolved.
Outdated
}
`,
regular: css`
Expand All @@ -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};
}
`,
Comment thread
cee-chen marked this conversation as resolved.
Outdated
};
};
9 changes: 8 additions & 1 deletion src/components/form/range/range_wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ import { euiRangeWrapperStyles } from './range_wrapper.styles';
export interface EuiRangeWrapperProps
extends CommonProps,
HTMLAttributes<HTMLDivElement>,
Pick<_SharedRangeInputProps, 'fullWidth' | 'compressed'> {}
Pick<
_SharedRangeInputProps,
'fullWidth' | 'compressed' | 'disabled' | 'readOnly'
> {}

export const EuiRangeWrapper = forwardRef<HTMLDivElement, EuiRangeWrapperProps>(
(props, ref) => {
Expand All @@ -29,6 +32,8 @@ export const EuiRangeWrapper = forwardRef<HTMLDivElement, EuiRangeWrapperProps>(
className,
fullWidth = defaultFullWidth,
compressed,
disabled,
readOnly,

@1Copenut 1Copenut Apr 11, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only added this change to the single EuiRange but tested it in all examples on the docs site. Wasn't able to get an EuiDualRange to show the prepend or append labels, but would be an easy add if I just missed something.

@cee-chen cee-chen Apr 12, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lol I'm honestly still so confused why our single ranges even support append/prepend 🙈 Ah well, probably too much of a hassle to breaking change/remove it now

...rest
} = props;

Expand All @@ -41,6 +46,8 @@ export const EuiRangeWrapper = forwardRef<HTMLDivElement, EuiRangeWrapperProps>(
!compressed && styles.regular,
compressed && styles.compressed,
fullWidth && styles.fullWidth,
disabled && styles.disabled,
readOnly && styles.readOnly,
];

return (
Expand Down