Skip to content

Commit

Permalink
Remove Sass @euiFormControlDefaultShadow mixin usages (#194653)
Browse files Browse the repository at this point in the history
## Summary

This PR removes the `euiFormControlDefaultShadow` mixin from Kibana
usage, which is shortly set to be deprecated/removed from EUI.

The usages of this mixin primarily wanted the `border` styling of the
mixin and not its background effects, so I've opted to simplify the CSS
greatly to simply use `border` CSS instead of attempting to mess around
with `box-shadow` (which wasn't really benefiting the final visual
appearance of the affected use cases).

I also incidentally removed some extra CSS specificity added in #156639
(no longer necessary as of #161592) which was causing exclusive borders
to not be the correct color.

| Before | After |
|--------|--------|
| <img width="696" alt=""
src="https://github.com/user-attachments/assets/00478e77-08e8-490d-90fa-84abd2d3ba99">
| <img width="704" alt=""
src="https://github.com/user-attachments/assets/46ef0a5f-5fb0-4d47-82ba-40ed7eb2ff89">
|

### Checklist

- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
  • Loading branch information
cee-chen authored Oct 2, 2024
1 parent cf72f3e commit 7edb90e
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 15 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ $controlMinWidth: $euiSize * 14;
align-items: center;
border-radius: $euiBorderRadius;
font-weight: $euiFontWeightSemiBold;
@include euiFormControlDefaultShadow;
border: $euiBorderWidthThin solid $euiFormBorderColor;
background-color: $euiFormInputGroupLabelBackground;
min-width: $controlMinWidth;
@include euiFontSizeXS;
Expand All @@ -243,4 +243,4 @@ $controlMinWidth: $euiSize * 14;
min-width: unset;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,26 @@
* 1. Allow wrapping of long filter items
*/

.euiBadge.globalFilterItem {
.globalFilterItem {
line-height: $euiSize;
border: none;
color: $euiTextColor;
padding-top: calc($euiSizeM / 2) + 1px;
padding-bottom: calc($euiSizeM / 2) + 1px;
padding-block: $euiSizeM / 2;
white-space: normal; /* 1 */

&:not(.globalFilterItem-isDisabled) {
@include euiFormControlDefaultShadow;
& { // stylelint-disable-line no-duplicate-selectors
box-shadow: #{$euiFormControlBoxShadow}, inset 0 0 0 1px $kbnGlobalFilterItemBorderColor; // Make the actual border more visible
}
border-color: $kbnGlobalFilterItemBorderColor; // Make the actual border more visible
}
}

.euiBadge.globalFilterItem-isDisabled {
.globalFilterItem-isDisabled {
color: $euiColorDarkShade;
background-color: transparentize($euiColorLightShade, .5);
border-color: transparent;
text-decoration: line-through;
font-weight: $euiFontWeightRegular;
}

.euiBadge.globalFilterItem-isError, .globalFilterItem-isWarning {
.globalFilterItem-isError, .globalFilterItem-isWarning {
.globalFilterLabel__value {
font-weight: $euiFontWeightBold;
}
Expand All @@ -47,6 +43,7 @@

.globalFilterItem-isPinned {
position: relative;
overflow: hidden;

&::before {
content: '';
Expand All @@ -56,14 +53,12 @@
left: 0;
width: $euiSizeXS;
background-color: $kbnGlobalFilterItemBorderColor;
border-top-left-radius: calc($euiBorderRadius / 2);
border-bottom-left-radius: calc($euiBorderRadius / 2);
}
}

.globalFilterItem-isExcluded {
&:not(.globalFilterItem-isDisabled) {
box-shadow: #{$euiFormControlBoxShadow}, inset 0 0 0 1px $kbnGlobalFilterItemBorderColorExcluded;
border-color: $kbnGlobalFilterItemBorderColorExcluded;

&::before {
background-color: $kbnGlobalFilterItemPinnedColorExcluded;
Expand Down

0 comments on commit 7edb90e

Please sign in to comment.