Move shared component mixins to global_styles (#2551)

* Move euiPanel mixin to global_styling for easier overriding

* Move button mixin to global_styling

* Move loading mixin to global_styling

* Move popover mixin to global_styling

* Move form, switch, and range mixins and variables to global_styling

* Add changelog entry

* Move changelog item to "breaking changes" heading

* Move buttons variables to global_styling

* Move buttons variables to global_styling

* Consolidate form variables files

* Remove form variable imports in form mixin file

* Move beta_badge mixins to global_styling

* Move tooltip variables and mixins to global_styling

* Refactor panel mixin to require entire selector

* Add note to changelog about panel mixin selector

* Remove $euiPanelBorderColor as it was not used

* Renaming mixin `fasBetaBadge` to `euiHasBetaBadge`

and removing the `.` portion of the selector

* Combined `form_control_layout` mixins into `form` file

* Adding `!default`s to global variables

* Move panel variables to global

* Cleanup

- Moved range variables into form
- Moved keyframes into utility/_animations
- Moved button_toggle mixin out of buttons and back into component specific folder
- Moved euiHiddenSelectableInput from switch specific to form
- Moved hexToRGB function from helper mixin to color function file

* Update tense in the CL

Co-Authored-By: Caroline Horn <[email protected]>

CHANGELOG.md

@@ -23,6 +23,11 @@ No public interface changes since `16.2.1`.
 - Fixed `EuiSwitch` clicking on disabled label ([#2575](https://github.com/elastic/eui/pull/2575))
 - Fixed `EuiComboBox` options list closing when clicking outside the component after scrolling ([#2589](https://github.com/elastic/eui/pull/2589))
 
+**Breaking Changes**
+
+- Moved any shared component-level Sass variables and mixins into the `global_styling` directory ([#2551](https://github.com/elastic/eui/pull/2551))
+- Reworked `euiPanel()` mixin to require the entirety of a selector (i.e. require the '.' in addition to the string) ([#2551](https://github.com/elastic/eui/pull/2551))
+
 ## [`16.1.0`](https://github.com/elastic/eui/tree/v16.1.0)
 
 - Updated compressed styles for `EuiButtonGroup` to include a background color ([#2568](https://github.com/elastic/eui/pull/2568))

src/components/badge/_badge.scss

@@ -1,5 +1,3 @@
-@import '../button/variables';
-
 /**
  * 1. Accounts for the border
  */

src/components/badge/beta_badge/_index.scss

@@ -1,2 +1 @@
-@import 'mixins';
 @import 'beta_badge';

src/components/button/_button.scss

@@ -1,5 +1,3 @@
-@import '../loading/mixins';
-
 // This file has lots of modifiers and is somewhat nesty by nature
 //sass-lint:disable nesting-depth
 
@@ -79,7 +77,6 @@
 // Create button modifiers based upon the map.
 @each $name, $color in $euiButtonTypes {
   .euiButton--#{$name} {
-
     @if ($name == 'ghost') {
       // Ghost is unique and ALWAYS sits against a dark background.
       color: $color;

src/components/button/_index.scss

@@ -1,6 +1,3 @@
-@import 'variables';
-@import 'mixins';
-
 @import 'button';
 @import 'button_empty/index';
 @import 'button_icon/index';

src/components/button/button_group/_button_group.scss

@@ -1,5 +1,3 @@
-@import '../../form/variables';
-
 .euiButtonGroup {
   max-width: 100%;
   display: flex;

src/components/button/button_toggle/_index.scss

@@ -1 +1,2 @@
+@import 'mixins';
 @import 'button_toggle';

src/components/button/button_toggle/_mixins.scss

@@ -0,0 +1,12 @@
+// BUTTON TOGGLES
+// Pointer events and interactions are handled by the input (checkbox/radio)
+// and not the button, this mixin helps to target that element for states
+@mixin euiButtonToggleStates {
+  @at-root {
+    .euiButtonToggle__input:enabled:hover + #{&},
+    .euiButtonToggle__input:enabled:focus + #{&},
+    .euiButtonToggle__input:enabled:active + #{&} {
+      @content;
+    }
+  }
+}

src/components/card/_card.scss

@@ -1,8 +1,5 @@
-@import '../panel/mixins';
-@import '../badge/beta_badge/mixins';
-
 // Start with a base of EuiPanel styles
-@include euiPanel($selector: 'euiCard');
+@include euiPanel($selector: '.euiCard');
 
 /**
  * 1. Footer is always at the bottom.
@@ -16,10 +13,7 @@
   display: flex;
   flex-direction: column;
   padding: $euiCardSpacing;
-  min-height: 1px; /* 2 */
-
-  // This creates a bunch of sub selectors for the beta badge
-  @include hasBetaBadge($selector: 'euiCard', $spacing: $euiCardSpacing); // sass-lint:disable-line mixins-before-declarations
+  min-height: 1px; /* 2 */// sass-lint:disable-line mixins-before-declarations
 
   &.euiCard-isDisabled {
     cursor: not-allowed; // duplicate property due to Chrome bug
@@ -99,14 +93,17 @@
 
   &.euiCard--isSelectable {
     position: relative;
-    padding-bottom: $euiCardSpacing + $euiCardGraphicHeight;
+    padding-bottom: $euiCardSpacing + $euiCardBottomNodeHeight;
   }
 
   &.euiCard-isSelected {
     transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
   }
 }
 
+// This creates a bunch of sub selectors for the beta badge
+@include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing);
+
 // Selectable cards don't work well without a border
 .euiCard--plain:not(.euiCard--isSelectable) {
   border: none;
@@ -212,4 +209,3 @@
 .euiCard--hasChildren .euiCard__description {
   margin-bottom: $euiCardSpacing;
 }
-

src/components/card/_mixins.scss

@@ -2,7 +2,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  height: $euiCardGraphicHeight !important;  // sass-lint:disable-line no-important -- To override .euiButtonEmpty--xSmall
+  height: $euiCardBottomNodeHeight !important;  // sass-lint:disable-line no-important -- To override .euiButtonEmpty--xSmall
   width: 100%;
   overflow: hidden;
   // Subtract 1px from border radius since it sits inside a border-radius

src/components/card/_variables.scss

@@ -1,8 +1,5 @@
-@import '../panel/variables';
-
 $euiCardSpacing: map-get($euiPanelPaddingModifiers, 'paddingMedium');
-$euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
-$euiCardGraphicHeight: 40px; // Actual height of the svg used in EuiCardGraphic
+$euiCardBottomNodeHeight: $euiSizeXXL;
 
 $euiCardSelectButtonBorders: (
   text: $euiColorSuccess, // Default for selected

src/components/card/checkable_card/_checkable_card.scss

@@ -1,6 +1,4 @@
-@import '../../panel/mixins';
-
-@include euiPanel('euiCheckableCard');
+@include euiPanel($selector: '.euiCheckableCard');
 
 .euiCheckableCard {
   transition: border-color $euiAnimSpeedNormal ease-in;

src/components/color_picker/_color_picker.scss

@@ -1,5 +1,3 @@
-@import '../form/mixins';
-
 .euiColorPicker {
   position: relative;
   width: $euiColorPickerWidth;

src/components/color_picker/_hue.scss

@@ -1,7 +1,3 @@
-@import '../form/_mixins';
-@import '../form/range/_variables';
-@import '../form/range/_mixins';
-
 // This wraps the range. It is needed because there is no way to do a linear gradeint in ie11 for the track
 .euiHue {
   // sass-lint:disable-block no-color-literals

src/components/color_picker/color_stops/_color_stops.scss

@@ -1,5 +1,3 @@
-@import '../../form/range/_variables';
-
 .euiColorStops:not(.euiColorStops-isDisabled) {
   &:focus {
     outline: 2px solid $euiFocusRingColor;

src/components/combo_box/_combo_box.scss

@@ -1,5 +1,3 @@
-@import '../form/form_control_layout/mixins';
-
 .euiComboBox {
   @include euiFormControlSize(auto, $includeAlternates: true);
   position: relative;

src/components/combo_box/_index.scss

@@ -1,7 +1,3 @@
-@import '../form/variables';
-@import '../form/mixins';
-@import '../form/form_control_layout/mixins';
-
 @import 'combo_box';
 @import 'combo_box_input/index';
 @import 'combo_box_options_list/index';

src/components/context_menu/_context_menu_panel.scss

@@ -1,5 +1,3 @@
-@import '../popover/mixins';
-
 .euiContextMenuPanel {
   width: 100%;
   visibility: visible;

src/components/control_bar/_index.scss

@@ -1,5 +1,4 @@
 @import '../header/variables';
-@import '../button/variables';
 @import '../nav_drawer/variables';
 @import 'variables';
 @import 'control_bar';

src/components/date_picker/_date_picker_range.scss

@@ -1,7 +1,3 @@
-@import '../form/variables';
-@import '../form/mixins';
-@import '../form/form_control_layout/variables';
-
 /**
  * 1. Account for inner box-shadow style border
  */

src/components/date_picker/super_date_picker/_mixins.scss

@@ -1,5 +1,3 @@
-@import '../../form/form_control_layout/variables';
-
 @mixin euiSuperDatePickerText {
   @include euiFormControlText;
   display: block;

src/components/drag_and_drop/_droppable.scss

@@ -1,5 +1,3 @@
-@import '../panel/mixins';
-
 .euiDroppable {
   $euiDroppableColor: $euiColorSecondary;
   transition: background-color $euiAnimSpeedExtraSlow ease;
@@ -20,7 +18,7 @@
   }
 }
 
-@include euiPanel('euiDroppable--withPanel');
+@include euiPanel($selector: '.euiDroppable--withPanel');
 
 .euiDroppable--noGrow {
   flex-grow: 0;

src/components/facet/_index.scss

@@ -1,5 +1,2 @@
-@import '../button/variables';
-@import '../button/mixins';
-
 @import 'facet_button';
 @import 'facet_group';

src/components/filter_group/_filter_button.scss

@@ -1,5 +1,3 @@
-@import '../form/variables';
-
 .euiFilterButton {
   background-color: $euiFormBackgroundColor;
   height: $euiFormControlHeight;

src/components/filter_group/_filter_group.scss

@@ -1,5 +1,3 @@
-@import '../form/variables';
-
 .euiFilterGroup {
   display: inline-flex;
   max-width: 100%;

src/components/filter_group/_index.scss

@@ -1,6 +1,3 @@
-@import '../form/variables';
-@import '../form/mixins';
-
 @import 'filter_group';
 @import 'filter_button';
 @import 'filter_select_item';

src/components/flyout/_flyout.scss

@@ -1,5 +1,3 @@
-@import '../form/variables';
-
 .euiFlyout {
   border-left: $euiBorderThin;
   // The mixin augments the above

src/components/form/_index.scss

@@ -1,6 +1,3 @@
-@import 'variables';
-@import 'mixins';
-
 @import 'checkbox/index';
 @import 'described_form_group/index';
 @import 'field_number/index';

src/components/form/checkbox/_index.scss

@@ -1,3 +1,2 @@
-@import '../variables';
 @import 'checkbox';
 @import 'checkbox_group';

src/components/form/file_picker/_file_picker.scss

@@ -1,5 +1,3 @@
-@import '../form_control_layout/mixins';
-
 /**
   * REMEMBER: --large modifiers must come last to override --compressed
   */

src/components/form/form_control_layout/_form_control_layout.scss

@@ -1,6 +1,3 @@
-@import '../variables';
-@import '../mixins';
-
 .euiFormControlLayout {
   // Let the height expand as needed
   @include euiFormControlSize($includeAlternates: true);

src/components/form/form_control_layout/_form_control_layout_delimited.scss

@@ -1,6 +1,3 @@
-@import '../variables';
-@import '../mixins';
-
 .euiFormControlLayoutDelimited {
   // Match just the regular drop shadow of inputs
   @include euiFormControlDefaultShadow;

src/components/form/form_control_layout/_index.scss

@@ -1,5 +1,3 @@
-@import 'variables';
-@import 'mixins';
 @import 'form_control_layout';
 @import 'form_control_layout_delimited';
 @import 'form_control_layout_icons';

src/components/form/radio/_index.scss

@@ -1,3 +1,2 @@
-@import '../variables';
 @import 'radio';
 @import 'radio_group';

src/components/form/range/_index.scss

@@ -1,6 +1,3 @@
-@import 'variables';
-@import 'mixins';
-
 @import 'range';
 @import 'range_highlight';
 @import 'range_input';

src/components/form/range/_range_tooltip.scss

@@ -1,5 +1,3 @@
-@import '../../tool_tip/variables';
-
 .euiRangeTooltip {
   // Keeps tooltip (value) aligned to percentage of actual slider
   display: block;

src/components/form/switch/_index.scss

@@ -1,2 +1 @@
-@import '../variables';
 @import 'switch';

src/components/loading/_index.scss

@@ -1,5 +1,4 @@
 @import 'variables';
-@import 'mixins';
 @import 'loading_kibana';
 @import 'loading_chart';
 @import 'loading_content';

src/components/modal/_index.scss

@@ -1,3 +1 @@
-@import '../form/variables';
-
 @import 'modal';

src/components/page/page_content/_page_content_header.scss

@@ -1,5 +1,3 @@
-@import '../../panel/variables';
-
 .euiPageContentHeader {
   display: flex;
   flex-direction: row;