github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] Remove Sass `@euiFormControlDefaultShadow` mixin usages (#194653) (#194730)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [Remove Sass `@euiFormControlDefaultShadow` mixin usages
(#194653)](https://github.com/elastic/kibana/pull/194653)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cee
Chen","email":"549407+cee-chen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-02T15:37:19Z","message":"Remove
Sass `@euiFormControlDefaultShadow` mixin usages (#194653)\n\n##
Summary\r\n\r\nThis PR removes the `euiFormControlDefaultShadow` mixin
from Kibana\r\nusage, which is shortly set to be deprecated/removed from
EUI.\r\n\r\nThe usages of this mixin primarily wanted the `border`
styling of the\r\nmixin and not its background effects, so I've opted to
simplify the CSS\r\ngreatly to simply use `border` CSS instead of
attempting to mess around\r\nwith `box-shadow` (which wasn't really
benefiting the final visual\r\nappearance of the affected use
cases).\r\n\r\nI also incidentally removed some extra CSS specificity
added in #156639\r\n(no longer necessary as of #161592) which was
causing exclusive borders\r\nto not be the correct color.\r\n\r\n|
Before | After |\r\n|--------|--------|\r\n| <img width=\"696\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/00478e77-08e8-490d-90fa-84abd2d3ba99\">\r\n|
<img width=\"704\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/46ef0a5f-5fb0-4d47-82ba-40ed7eb2ff89\">\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"7edb90e8bdc82a338ab8e1c4626bd9bfa69ee3f4","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","v8.16.0","backport:version"],"title":"Remove
Sass `@euiFormControlDefaultShadow` mixin
usages","number":194653,"url":"https://github.com/elastic/kibana/pull/194653","mergeCommit":{"message":"Remove
Sass `@euiFormControlDefaultShadow` mixin usages (#194653)\n\n##
Summary\r\n\r\nThis PR removes the `euiFormControlDefaultShadow` mixin
from Kibana\r\nusage, which is shortly set to be deprecated/removed from
EUI.\r\n\r\nThe usages of this mixin primarily wanted the `border`
styling of the\r\nmixin and not its background effects, so I've opted to
simplify the CSS\r\ngreatly to simply use `border` CSS instead of
attempting to mess around\r\nwith `box-shadow` (which wasn't really
benefiting the final visual\r\nappearance of the affected use
cases).\r\n\r\nI also incidentally removed some extra CSS specificity
added in #156639\r\n(no longer necessary as of #161592) which was
causing exclusive borders\r\nto not be the correct color.\r\n\r\n|
Before | After |\r\n|--------|--------|\r\n| <img width=\"696\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/00478e77-08e8-490d-90fa-84abd2d3ba99\">\r\n|
<img width=\"704\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/46ef0a5f-5fb0-4d47-82ba-40ed7eb2ff89\">\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"7edb90e8bdc82a338ab8e1c4626bd9bfa69ee3f4"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194653","number":194653,"mergeCommit":{"message":"Remove
Sass `@euiFormControlDefaultShadow` mixin usages (#194653)\n\n##
Summary\r\n\r\nThis PR removes the `euiFormControlDefaultShadow` mixin
from Kibana\r\nusage, which is shortly set to be deprecated/removed from
EUI.\r\n\r\nThe usages of this mixin primarily wanted the `border`
styling of the\r\nmixin and not its background effects, so I've opted to
simplify the CSS\r\ngreatly to simply use `border` CSS instead of
attempting to mess around\r\nwith `box-shadow` (which wasn't really
benefiting the final visual\r\nappearance of the affected use
cases).\r\n\r\nI also incidentally removed some extra CSS specificity
added in #156639\r\n(no longer necessary as of #161592) which was
causing exclusive borders\r\nto not be the correct color.\r\n\r\n|
Before | After |\r\n|--------|--------|\r\n| <img width=\"696\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/00478e77-08e8-490d-90fa-84abd2d3ba99\">\r\n|
<img width=\"704\"
alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/46ef0a5f-5fb0-4d47-82ba-40ed7eb2ff89\">\r\n|\r\n\r\n###
Checklist\r\n\r\n- [x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"7edb90e8bdc82a338ab8e1c4626bd9bfa69ee3f4"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2024-10-03 03:36:14 +10:00 • committed by GitHub
parent 4dd621c2ec
commit 0ac09a9b2a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/plugins/controls/public/control_group/components/control_panel.scss
View file

@ -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;
@ -243,4 +243,4 @@ $controlMinWidth: $euiSize * 14;
min-width: unset;
}
}
}
}

21
src/plugins/unified_search/public/filter_bar/filter_item/filter_item.scss
View file

@ -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;
}
@ -47,6 +43,7 @@
.globalFilterItem-isPinned {
position: relative;
overflow: hidden;
&::before {
content: '';
@ -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;