Move shared component mixins to global_styles

CHANGELOG.md

@@ -7,6 +7,11 @@
 
 - Fixed `EuiSwitch` clicking on disabled label ([#2575](https://github.com/elastic/eui/pull/2575))
 
+**Breaking Changes**
+
+- Moved any shared component-level Sass variables and mixins into the `global_styling` directory ([#2551](https://github.com/elastic/eui/pull/2551))
+- Rework panel 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/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.
@@ -212,4 +209,3 @@
 .euiCard--hasChildren .euiCard__description {
   margin-bottom: $euiCardSpacing;
 }
-

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/panel/_index.scss

@@ -1,3 +1,2 @@
 @import 'variables';
-@import 'mixins';
 @import 'panel';

src/components/panel/_panel.scss

@@ -1,7 +1,5 @@
-@import '../badge/beta_badge/mixins';
-
 // Export basic class & modifiers
-@include euiPanel($selector: 'euiPanel');
+@include euiPanel($selector: '.euiPanel');
 
 .euiPanel {
   @include hasBetaBadge($selector: 'euiPanel');

src/components/panel/_variables.scss

@@ -9,5 +9,3 @@ $euiPanelPaddingModifiers: (
   'paddingMedium': $euiSize,
   'paddingLarge': $euiSizeL
 ) !default;
-
-$euiPanelBorderColor: tintOrShade($euiShadowColor, 40%, 0%) !default; // match shadow

src/components/popover/_index.scss

@@ -1,5 +1,4 @@
 @import 'variables';
-@import 'mixins';
 @import 'popover';
 @import 'popover_title';
 @import 'popover_footer';

src/components/search_bar/_search_bar.scss

@@ -1,5 +1,3 @@
-@import '../form/variables';
-
 .euiSearchBar__searchHolder {
   min-width: $euiFormMaxWidth / 2;
 }

src/components/table/_responsive.scss

@@ -1,5 +1,3 @@
-@import '../panel/mixins';
-
 .euiTableRowCell__mobileHeader {
   // Don't display by default unless table is responsive
   display: none;
@@ -33,7 +31,7 @@
     }
 
     // Make each row a Panel
-    @include euiPanel($selector: 'euiTableRow');
+    @include euiPanel($selector: '.euiTableRow');
 
     .euiTableRowCell__mobileHeader {
       // Always truncate

src/components/toggle/_toggle.scss

@@ -1,5 +1,3 @@
-@import '../form/switch/mixins';
-
 .euiToggle {
   position: relative;
 

src/components/tool_tip/_index.scss

@@ -1,4 +1 @@
-@import 'variables';
-@import 'mixins';
-
 @import 'tool_tip';

src/components/form/_mixins.scss → src/global_styling/mixins/_form.scss

@@ -1,6 +1,4 @@
-@import 'variables';
-@import 'form_control_layout/variables';
-@import 'form_control_layout/mixins';
+@import 'form_control_layout';
 
 @mixin euiPlaceholderPerBrowser {
   // sass-lint:disable-block no-vendor-prefixes

src/components/form/form_control_layout/_mixins.scss → src/global_styling/mixins/_form_control_layout.scss

@@ -1,5 +1,3 @@
-@import '../variables';
-
 @mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
   $firstIconSize: $euiFormControlPadding + $euiSize + $euiFormControlPadding;
   $secondIconSize: $euiFormControlPadding + $euiSize;
@@ -39,4 +37,4 @@
     stroke: $euiColorEmptyShade;
     stroke-width: 2px; // increase thickness of icon at such a small size
   }
-}
+}

src/global_styling/mixins/_index.scss

@@ -5,3 +5,14 @@
 @import 'helpers';
 @import 'states';
 @import 'icons';
+
+@import 'beta_badge';
+@import 'button';
+@import 'form';
+@import 'form_control_layout';
+@import 'loading';
+@import 'panel';
+@import 'popover';
+@import 'range';
+@import 'switch';
+@import 'tool_tip';

src/components/panel/_mixins.scss → src/global_styling/mixins/_panel.scss

@@ -7,19 +7,19 @@
   @if variable-exists(selector) == false {
     @error 'A $selector must be provided to @mixin euiPanel().';
   } @else {
-    .#{$selector} {
+    #{$selector} {
 
       @include euiBottomShadowSmall;
       background-color: $euiColorEmptyShade;
       border: $euiBorderThin;
       border-radius: $euiBorderRadius;
       flex-grow: 1;
 
-      &.#{$selector}--flexGrowZero {
+      &#{$selector}--flexGrowZero {
         flex-grow: 0;
       }
 
-      &.#{$selector}--isClickable {
+      &#{$selector}--isClickable {
         // in case of button wrapper which inherently is inline-block and no width
         display: block;
         width: 100%;
@@ -36,7 +36,7 @@
         }
       }
 
-      &.#{$selector}--shadow {
+      &#{$selector}--shadow {
         @include euiBottomShadowMedium;
 
         @if (lightness($euiTextColor) < 50) {
@@ -46,8 +46,8 @@
           border-bottom-color: $euiBorderColor;
         }
 
-        &.#{$selector}--isClickable:hover,
-        &.#{$selector}--isClickable:focus {
+        &#{$selector}--isClickable:hover,
+        &#{$selector}--isClickable:focus {
           @include euiBottomShadow($color: $euiShadowColor, $opacity: .2);
         }
       }

src/components/form/_variables.scss → src/global_styling/variables/_form.scss

@@ -36,3 +36,8 @@ $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0
 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 40%) !default;
 $euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 2%, 4%) !default;
 $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
+
+// Control Layout
+$euiFormControlLayoutGroupInputHeight: $euiFormControlHeight - 2px; /* 1 */
+$euiFormControlLayoutGroupInputCompressedHeight: $euiFormControlCompressedHeight - 2px; /* 1 */
+$euiFormControlLayoutGroupInputCompressedBorderRadius: $euiFormControlCompressedBorderRadius / 2;