[Lens] Fix all deprecated mixed-decls warnings (#193864)

2025-04-24 09:48:58 -04:00 · 2024-09-30 20:43:47 +02:00 · 2024-09-30 20:43:47 +02:00 · 7fd3317423
commit 7fd3317423
parent 866adf37f1
26 changed files with 50 additions and 63 deletions
--- a/src/plugins/chart_expressions/expression_gauge/public/components/index.scss
+++ b/src/plugins/chart_expressions/expression_gauge/public/components/index.scss
@ -1,9 +1,9 @@
 .gauge-container {
-  @include euiScrollBar;
  height: 100%;
  width: 100%;
  // the FocusTrap is adding extra divs which are making the visualization redraw twice
  // with a visible glitch. This make the chart library resilient to this extra reflow
  overflow: hidden;
  user-select: text;
+  @include euiScrollBar;
 }
--- a/src/plugins/chart_expressions/expression_heatmap/public/components/index.scss
+++ b/src/plugins/chart_expressions/expression_heatmap/public/components/index.scss
@ -1,5 +1,4 @@
 .heatmap-container {
-  @include euiScrollBar;
  height: 100%;
  width: 100%;
  // the FocusTrap is adding extra divs which are making the visualization redraw twice
@ -7,4 +6,5 @@
  overflow: auto hidden;
  user-select: text;
  padding: $euiSizeS;
+  @include euiScrollBar;
 }
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric.scss
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric.scss
@ -6,7 +6,6 @@
 //   mtrChart__legend-isLoading

 .legacyMtrVis {
-  @include euiScrollBar;
  height: 100%;
  width: 100%;
  display: flex;
@ -15,6 +14,7 @@
  align-items: center;
  flex-wrap: wrap;
  overflow: auto;
+  @include euiScrollBar;
 }

 .legacyMtrVis__value {
--- a/src/plugins/chart_expressions/expression_xy/public/components/tooltip/tooltip.scss
+++ b/src/plugins/chart_expressions/expression_xy/public/components/tooltip/tooltip.scss
@ -1,10 +1,11 @@
 .detailedTooltip {
-  @include euiToolTipStyle('s');
  pointer-events: none;
-  max-width: $euiSizeXL * 10;
-  overflow: hidden;
-  padding: $euiSizeS;
-
+  @include euiToolTipStyle('s');
+  & { // stylelint-disable-line no-duplicate-selectors
+    max-width: $euiSizeXL * 10;
+    overflow: hidden;
+    padding: $euiSizeS;
+  }
  table {
    table-layout: fixed;
    width: 100%;
--- a/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.scss
+++ b/src/plugins/unified_search/public/filter_bar/filter_item/filter_item.scss
@ -14,7 +14,9 @@

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

--- a/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.scss
+++ b/src/plugins/unified_search/public/saved_query_management/saved_query_management_list.scss
@ -5,9 +5,9 @@
 }

 .kbnSavedQueryManagement__list {
-  @include euiYScrollWithShadows;
  max-height: inherit; // Fixes overflow for applied max-height
  // Left/Right padding is calculated to match the left alignment of the
  // popover text and buttons
  padding: calc($euiSizeM / 2) $euiSizeXS !important; // Override flush
+  @include euiYScrollWithShadows;
 }
--- a/src/plugins/vis_default_editor/public/_sidebar.scss
+++ b/src/plugins/vis_default_editor/public/_sidebar.scss
@ -24,9 +24,9 @@
  }

  @include euiBreakpoint('l', 'xl') {
+    overflow: auto;
    @include flexParent(1, 1, 1px);
    @include euiScrollBar;
-    overflow: auto;
  }
 }

--- a/src/plugins/vis_types/timeseries/public/application/components/vis_types/markdown/_markdown.scss
+++ b/src/plugins/vis_types/timeseries/public/application/components/vis_types/markdown/_markdown.scss
@ -6,7 +6,6 @@
 }

 .tvbMarkdown__content {
-  @include euiScrollBar;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
@ -16,7 +15,7 @@
  right: 0;
  bottom: 0;
  overflow: hidden;
-
+  @include euiScrollBar;
  &--middle {
    justify-content: center;
  }
--- a/src/plugins/vis_types/vega/public/components/vega_vis.scss
+++ b/src/plugins/vis_types/vega/public/components/vega_vis.scss
@ -1,10 +1,9 @@
 // stylelint-disable selector-no-qualifying-type
 .vgaVis__wrapper {
-  @include euiScrollBar;
-
  display: flex;
  flex: 1 1 0;
  overflow: auto;
+  @include euiScrollBar;
 }

 .vgaVis {
@ -21,12 +20,11 @@
 }

 .vgaVis__view {
-  @include euiScrollBar;
  overflow: auto;
  z-index: 0;
  flex: 1 1 100%;
-
  display: block;
+  @include euiScrollBar;

  canvas {
    display: block;
--- a/src/plugins/vis_types/vislib/public/vislib/components/legend/_legend.scss
+++ b/src/plugins/vis_types/vislib/public/vislib/components/legend/_legend.scss
@ -45,7 +45,6 @@ $visLegendWidth: 150px;
 }

 .visLegend__list {
-  @include euiScrollBar;
  display: flex;
  width: $visLegendWidth; // Must be a hard-coded width for the chart to get its correct dimensions
  flex: 1 1 auto;
@ -53,6 +52,7 @@ $visLegendWidth: 150px;
  overflow-x: hidden;
  overflow-y: auto;

+  @include euiScrollBar;
  .visLegend__button {
    font-size: $euiFontSizeXS;
    text-align: left;
--- a/src/plugins/vis_types/vislib/public/vislib/lib/layout/_layout.scss
+++ b/src/plugins/vis_types/vislib/public/vislib/lib/layout/_layout.scss
@ -134,12 +134,11 @@
  }

  .chart {
-    @include euiScrollBar;
    flex: 1 1 100%;
    min-height: 0;
    min-width: 0;
    overflow: visible;
-
+    @include euiScrollBar;
    > svg {
      display: block;
    }
--- a/src/plugins/visualizations/public/visualize_app/components/visualize_editor.scss
+++ b/src/plugins/visualizations/public/visualize_app/components/visualize_editor.scss
@ -1,8 +1,6 @@
 .visEditor {
-  @include flexParent();
-
  height: 100%;
-
+  @include flexParent();
  @include euiBreakpoint('xs', 's', 'm') {
    .visualization {
      // While we are on a small screen the visualization is below the
@ -23,7 +21,7 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
 }

 .visEditor__content {
-  @include flexParent();
  width: 100%;
  z-index: 0;
+  @include flexParent();
 }
--- a/src/plugins/visualizations/public/wizard/dialog.scss
+++ b/src/plugins/visualizations/public/wizard/dialog.scss
--- a/src/plugins/visualizations/public/wizard/group_selection/group_selection.scss
+++ b/src/plugins/visualizations/public/wizard/group_selection/group_selection.scss
@ -10,12 +10,11 @@
 }

 .visNewVisDialogGroupSelection__footer {
+  padding: 0 $euiSizeXL $euiSizeL;
+  background: $euiColorLightestShade;
  @include euiBreakpoint('xs', 's') {
    background: $euiColorEmptyShade;
  }
-
-  padding: 0 $euiSizeXL $euiSizeL;
-  background: $euiColorLightestShade;
 }

 .visNewVisDialogGroupSelection__footerDescriptionList {
--- a/x-pack/plugins/lens/public/datasources/form_based/help_popover.scss
+++ b/x-pack/plugins/lens/public/datasources/form_based/help_popover.scss
@ -3,9 +3,9 @@
 }

 .lnsHelpPopover__content {
-  @include euiYScrollWithShadows;
  max-height: 40vh;
  padding: $euiSizeM;
+  @include euiYScrollWithShadows;
 }

 .lnsHelpPopover__buttonIcon {
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.scss
@ -87,8 +87,8 @@
 // Added .lnsLayerPanel__dimension specificity required for animation style override
 .lnsLayerPanel__dimension .lnsLayerPanel__dimensionLink {
  &:focus {
-    @include passDownFocusRing('.dimensionTrigger__textLabel');
    background-color: transparent;
    text-decoration-thickness: $euiBorderWidthThin !important;
+    @include passDownFocusRing('.dimensionTrigger__textLabel');
  }
 }
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/frame_layout.scss
@ -35,10 +35,8 @@
 }

 .visEditor {
-  @include flexParent();
-
  height: 100%;
-
+  @include flexParent();
  @include euiBreakpoint('xs', 's', 'm') {
    .visualization {
      // While we are on a small screen the visualization is below the
@ -59,7 +57,6 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
 }

 .lnsFrameLayout__pageBody {
-  @include euiScrollBar;
  min-width: $lnsPanelMinWidth + $euiSizeXL;
  overflow: hidden auto;
  display: flex;
@ -73,7 +70,7 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
  z-index: $lnsZLevel1;
  border-left: $euiBorderThin;
  border-right: $euiBorderThin;
-
+  @include euiScrollBar;
  &:first-child {
    padding-left: $euiSize;
  }
@ -111,10 +108,9 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
  }

  .lnsConfigPanel {
-    @include euiYScroll;
    padding: $euiSize $euiSize $euiSizeXL ($euiFormMaxWidth + $euiSize);
    margin-left: -$euiFormMaxWidth;
-
+    @include euiYScroll;
    @include euiBreakpoint('xs', 's', 'm') {
      padding-left: $euiSize;
      margin-left: 0;
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.scss
@ -6,7 +6,6 @@
 }

 .lnsSuggestionPanel__suggestions {
-  @include euiScrollBar;
  @include lnsOverflowShadowHorizontal;
  padding-top: $euiSizeXS;
  overflow-x: scroll;
@ -18,6 +17,7 @@
  margin-left: -$euiSizeXS;
  padding-right: $euiSizeXS;
  margin-right: -$euiSizeXS;
+  @include euiScrollBar;
 }

 .lnsSuggestionPanel__button {
@ -31,8 +31,8 @@
  box-shadow: none !important; // sass-lint:disable-line no-important

  &:focus {
-    @include euiFocusRing;
    transform: none !important; // sass-lint:disable-line no-important
+    @include euiFocusRing;
  }

  .lnsSuggestionPanel__expressionRenderer {
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/message_list.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/message_list.scss
@ -5,9 +5,9 @@
 }

 .lnsWorkspaceWarningList {
-  @include euiYScroll;
  max-height: $euiSize * 20;
  width: $euiSize * 16;
+  @include euiYScroll;
 }

 .lnsWorkspaceWarningList__item {
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
@ -17,7 +17,6 @@

  .lnsWorkspacePanelWrapper__pageContentBody {
    @include euiBottomShadowMedium;
-    @include euiScrollBar;
    flex-grow: 1;
    display: flex;
    align-items: stretch;
@ -25,7 +24,7 @@
    border-radius: $euiBorderRadius;
    background: $euiColorEmptyShade;
    height: 100%;
-
+    @include euiScrollBar;
    &>* {
      flex: 1 1 100%;
      display: flex;
--- a/x-pack/plugins/lens/public/embeddable/embeddable_info_badges.scss
+++ b/x-pack/plugins/lens/public/embeddable/embeddable_info_badges.scss
@ -1,5 +1,4 @@
-
 .lnsEmbeddablePanelFeatureList {
-  @include euiYScroll;
  max-height: $euiSize * 20;
+  @include euiYScroll;
 }
--- a/x-pack/plugins/lens/public/shared_components/dataview_picker/toolbar_button.scss
+++ b/x-pack/plugins/lens/public/shared_components/dataview_picker/toolbar_button.scss
@ -1,11 +1,6 @@
 .kbnToolbarButton {
  line-height: $euiButtonHeight; // Keeps alignment of text and chart icon

-  // Override background color for non-disabled buttons
-  &:not(:disabled) {
-    background-color: $euiColorEmptyShade;
-  }
-
  // todo: once issue https://github.com/elastic/eui/issues/4730 is merged, this code might be safe to remove
  // Some toolbar buttons are just icons, but EuiButton comes with margin and min-width that need to be removed
  min-width: 0;
@ -13,6 +8,11 @@
  border-style: solid;
  border-color: $euiBorderColor; // Lighten the border color for all states

+  // Override background color for non-disabled buttons
+  &:not(:disabled) {
+    background-color: $euiColorEmptyShade;
+  }
+
  .kbnToolbarButton__text > svg {
    margin-top: -1px; // Just some weird alignment issue when icon is the child not the `iconType`
  }
--- a/x-pack/plugins/lens/public/shared_components/flyout_container.scss
+++ b/x-pack/plugins/lens/public/shared_components/flyout_container.scss
@ -30,8 +30,8 @@
 }

 .lnsDimensionContainer__content {
-  @include euiYScroll;
  flex: 1;
+  @include euiYScroll;
 }

 .lnsDimensionContainer__footer {
--- a/x-pack/plugins/lens/public/shared_components/setting_with_sibling_flyout.scss
+++ b/x-pack/plugins/lens/public/shared_components/setting_with_sibling_flyout.scss
@ -19,8 +19,8 @@
 }

 .lnsSettingWithSiblingFlyout__content {
-  @include euiYScroll;
  flex: 1;
+  @include euiYScroll;
 }

 .lnsSettingWithSiblingFlyout__footer {
--- a/x-pack/plugins/lens/public/trigger_actions/open_lens_config/helpers.scss
+++ b/x-pack/plugins/lens/public/trigger_actions/open_lens_config/helpers.scss
@ -1,12 +1,12 @@
 // styles needed to display extra drop targets that are outside of the config panel main area while also allowing to scroll vertically
 .lnsConfigPanel__overlay {
  clip-path: polygon(-100% 0, 100% 0, 100% 100%, -100% 100%);
-  @include euiBreakpoint('xs', 's', 'm') {
-    clip-path: none;
-  }
  max-inline-size: $euiSizeXXL * 20;
  min-inline-size: $euiSizeXXL * 8;
  background: $euiColorLightestShade;
+  @include euiBreakpoint('xs', 's', 'm') {
+    clip-path: none;
+  }
  .kbnOverlayMountWrapper {
    padding-left: $euiFormMaxWidth;
    margin-left: -$euiFormMaxWidth;
--- a/x-pack/plugins/lens/public/visualization_container.scss
+++ b/x-pack/plugins/lens/public/visualization_container.scss
@ -1,11 +1,10 @@
 .lnsVisualizationContainer {
-  @include euiScrollBar;
  overflow: auto hidden;
  user-select: text;
+  @include euiScrollBar;
 }

 .lnsExpressionRenderer {
-  @include euiScrollBar;
  position: relative;
  width: 100%;
  height: 100%;
@ -13,7 +12,7 @@
  overflow: auto;
  // important for visualizations with no padding
  border-radius: $euiBorderRadius;
-
+  @include euiScrollBar;
  .lnsExpressionRenderer__component {
    position: static; // Let the progress indicator position itself against the outer parent
  }