Skip to content
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

[BUG] Fix the EuiRange prepend prop CSS #7678

Merged
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 all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f26a11c
[BUG][EuiRange]: Fixed input background color
1Copenut Apr 11, 2024
d36573f
Removed important and used Emotmotion specificity override instead.
1Copenut Apr 11, 2024
70fb806
Switching to more specific background-color property.
1Copenut 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
5 changes: 5 additions & 0 deletions changelogs/upcoming/7678.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks to @mgadewoll for pointing out this visual bug and getting me on the right track of the underlying bug!

20 changes: 18 additions & 2 deletions 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 @@ -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 */
Comment on lines +19 to +20
Copy link
Contributor

Choose a reason for hiding this comment

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

This TODO is for myself once I start converting forms to Emotion

> .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`
Expand Down
Loading