Merge branch 'main' into add-window-provider

packages/eui/changelogs/upcoming/8031.md

@@ -0,0 +1,68 @@
+**CSS-in-JS conversions**
+
+- Removed the following component-specific Sass variables:
+  - `$euiButtonColorDisabled`
+  - `$euiButtonColorDisabledText`
+  - `$euiButtonColorGhostDisabled`
+  - `$euiButtonFontWeight`
+  - `$euiFormControlIconSizes`
+  - `$euiFormControlLayoutGroupInputHeight`
+  - `$euiFormControlLayoutGroupInputCompressedHeight`
+  - `$euiFormControlLayoutGroupInputCompressedBorderRadius`
+  - `$euiPageSidebarMinWidth`
+  - `$euiPageDefaultMaxWidth`
+  - `$euiPanelPaddingModifiers`
+  - `$euiPanelBorderRadiusModifiers`
+  - `$euiPanelBackgroundColorModifiers`
+  - `$euiRangeTrackColor`
+  - `$euiRangeHighlightColor`
+  - `$euiRangeThumbHeight`
+  - `$euiRangeThumbWidth`
+  - `$euiRangeThumbBorderColor`
+  - `$euiRangeThumbBackgroundColor`
+  - `$euiRangeTrackWidth`
+  - `$euiRangeTrackHeight`
+  - `$euiRangeTrackCompressedHeight`
+  - `$euiRangeTrackBorderWidth`
+  - `$euiRangeTrackBorderColor`
+  - `$euiRangeTrackRadius`
+  - `$euiRangeDisabledOpacity`
+  - `$euiRangeHighlightHeight`
+  - `$euiRangeHighlightCompressedHeight`
+  - `$euiRangeHeight`
+  - `$euiRangeCompressedHeight`
+  - `$euiTooltipAnimations`
+  - `$euiTooltipBackgroundColor`
+  - `$euiTooltipBorderColor`
+- Removed the following Sass mixins due to low external usage:
+  - `euiHoverState`
+  - `euiFocusState`
+  - `euiDisabledState`
+  - `euiInteractiveStates`
+  - `euiFormControlStyle`
+  - `euiFormControlStyleCompressed`
+  - `euiFormControlFocusStyle`
+  - `euiFormControlInvalidStyle`
+  - `euiFormControlDisabledTextStyle`
+  - `euiFormControlDisabledStyle`
+  - `euiFormControlReadOnlyStyle`
+  - `euiFormControlText`
+  - `euiFormControlSize`
+  - `euiFormControlGradient`
+  - `euiFormControlLayoutPadding`
+  - `euiFormControlWithIcon`
+  - `euiFormControlIsLoading`
+  - `euiFormControlSideBorderRadius`
+  - `euiPlaceholderPerBrowser`
+  - `euiHiddenSelectableInput`
+  - `euiLink`
+  - `euiLoadingSpinnerBorderColors`
+  - `euiRangeTrackSize`
+  - `euiRangeTrackPerBrowser`
+  - `euiRangeThumbBorder`
+  - `euiRangeThumbBoxShadow`
+  - `euiRangeThumbFocusBoxShadow`
+  - `euiRangeThumbStyle`
+  - `euiRangeThumbPerBrowser`
+  - `euiRangeThumbFocus`
+  - `euiToolTipAnimation`

packages/eui/src-docs/src/services/playground/_playground_compiler.scss

@@ -12,7 +12,7 @@
 }
 
 .playground__tableWrapper {
-  background-color: map-get($euiPanelBackgroundColorModifiers, 'subdued');
+  background-color: $euiPageBackgroundColor;
 }
 
 .playground__title {

packages/eui/src/global_styling/mixins/_form.scss

@@ -1,108 +1,3 @@
-@mixin euiFormControlLayoutPadding($numOfIcons, $side: 'right', $compressed: false) {
-  $iconSize: $euiSize;
-  $iconPadding: $euiFormControlPadding;
-  $marginBetweenIcons: $euiFormControlPadding / 2;
-
-  @if ($compressed) {
-    $iconPadding: $euiFormControlCompressedPadding;
-  }
-
-  @if variable-exists(numOfIcons) == false {
-    @error '$numOfIcons:integer (1-3) must be provided to @mixin euiFormControlLayoutPadding().';
-  } @else if $numOfIcons == 1 {
-    padding-#{$side}: $iconPadding + $iconSize + $iconPadding;
-  } @else if $numOfIcons == 2 {
-    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
-  } @else if $numOfIcons == 3 {
-    padding-#{$side}: $iconPadding + $iconSize + $marginBetweenIcons + $iconSize + $marginBetweenIcons + $iconSize + $iconPadding;
-  }
-}
-
-@mixin euiPlaceholderPerBrowser {
-  // stylelint-disable selector-no-vendor-prefix
-  // Each prefix must be its own content block
-  &::-webkit-input-placeholder { @content; opacity: 1; }
-  &::-moz-placeholder { @content; opacity: 1; }
-  &:-ms-input-placeholder { @content; opacity: 1; }
-  &:-moz-placeholder { @content; opacity: 1; }
-  &::placeholder { @content; opacity: 1; }
-}
-
-@function euiFormControlGradient($color: $euiColorPrimary) {
-  @return linear-gradient(to top,
-    $color,
-    $color 2px,
-    transparent 2px,
-    transparent 100%
-  );
-}
-
-@mixin euiFormControlText {
-  @include euiFont;
-  font-size: $euiFontSizeS;
-  color: $euiTextColor;
-
-  @include euiPlaceholderPerBrowser {
-    color: $euiFormControlPlaceholderText;
-  }
-}
-
-@mixin euiFormControlSize(
-  $height: $euiFormControlHeight,
-  $includeAlternates: false
-) {
-  // Default
-  max-width: $euiFormMaxWidth;
-  width: 100%;
-  height: $height;
-
-  @if ($includeAlternates) {
-    &--fullWidth {
-      max-width: 100%;
-    }
-
-    &--compressed {
-      height: $euiFormControlCompressedHeight;
-    }
-
-    &--inGroup {
-      height: 100%;
-    }
-  }
-}
-
-@mixin euiFormControlWithIcon($isIconOptional: false, $side: 'left', $compressed: false) {
-  @if ($isIconOptional) {
-    @at-root {
-      #{&}--withIcon {
-        @include euiFormControlLayoutPadding(1, $side, $compressed);
-      }
-    }
-  } @else {
-    @include euiFormControlLayoutPadding(1, $side, $compressed);
-  }
-}
-
-@mixin euiFormControlIsLoading($isNextToIcon: false) {
-  @at-root {
-    #{&}-isLoading {
-      @if ($isNextToIcon) {
-        @include euiFormControlLayoutPadding(2);
-      } @else {
-        @include euiFormControlLayoutPadding(1);
-      }
-    }
-
-    #{&}-isLoading#{&}--compressed {
-      @if ($isNextToIcon) {
-        @include euiFormControlLayoutPadding(2, $compressed: true);
-      } @else {
-        @include euiFormControlLayoutPadding(1, $compressed: true);
-      }
-    }
-  }
-}
-
 // 1. Must supply both values to background-size or some browsers apply the single value to both directions
 
 @mixin euiFormControlDefaultShadow($borderOnly: false) {
@@ -131,143 +26,3 @@
     transition-property: box-shadow, background-image, background-size;
   }
 }
-
-@mixin euiFormControlFocusStyle($borderOnly: false) {
-  background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
-  background-image: euiFormControlGradient();
-  background-size: 100% 100%; // 1
-  outline: none; // Blanket remove all outlines relying on our own bottom border
-
-  @if ($borderOnly) {
-    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
-  } @else {
-    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
-  }
-}
-
-@mixin euiFormControlInvalidStyle {
-  background-image: euiFormControlGradient($euiColorDanger);
-  background-size: 100%;
-}
-
-@mixin euiFormControlDisabledTextStyle {
-  color: $euiFormControlDisabledColor;
-  -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari
-}
-
-@mixin euiFormControlDisabledStyle {
-  @include euiFormControlDisabledTextStyle;
-  cursor: not-allowed;
-  background: $euiFormBackgroundDisabledColor;
-  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
-
-  @include euiPlaceholderPerBrowser {
-    color: $euiFormControlDisabledColor;
-  }
-}
-
-@mixin euiFormControlReadOnlyStyle {
-  cursor: default;
-  color: $euiTextColor;
-  -webkit-text-fill-color: $euiTextColor; // Required for Safari
-  // Use transparency since there is no border and in case form is on a non-white background
-  background: $euiFormBackgroundReadOnlyColor;
-  border-color: transparent;
-  box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
-}
-
-// 2. Override invalid state with focus state.
-
-@mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
-  @include euiFormControlSize($includeAlternates: $includeSizes);
-  @include euiFormControlDefaultShadow;
-  @include euiFormControlText;
-
-  border: none;
-  border-radius: $euiFormControlBorderRadius;
-  padding: $euiFormControlPadding;
-
-  @if ($includeStates) {
-    &:invalid { // 2
-      @include euiFormControlInvalidStyle;
-    }
-
-    &:focus { // 2
-      @include euiFormControlFocusStyle;
-    }
-
-    &:disabled {
-      @include euiFormControlDisabledStyle;
-    }
-
-    &[readOnly] {
-      @include euiFormControlReadOnlyStyle;
-    }
-
-    // Needs to be set for autofill
-    &:-webkit-autofill {
-      -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
-
-      ~ .euiFormControlLayoutIcons {
-        color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
-      }
-    }
-  }
-
-  @if ($includeSizes) {
-    &--compressed {
-      @include euiFormControlStyleCompressed($borderOnly, $includeStates);
-    }
-
-    &--inGroup {
-      // stylelint-disable-next-line declaration-no-important
-      box-shadow: none !important;
-      border-radius: 0;
-    }
-  }
-}
-
-@mixin euiFormControlStyleCompressed($borderOnly: false, $includeStates: true) {
-  @include euiFormControlDefaultShadow($borderOnly: true);
-  padding: $euiFormControlCompressedPadding;
-  border-radius: $euiFormControlCompressedBorderRadius;
-
-  @if ($includeStates) {
-    &:invalid { // 2
-      @include euiFormControlInvalidStyle;
-    }
-
-    &:focus { // 2
-      @include euiFormControlFocusStyle($borderOnly: true);
-    }
-
-    &:disabled {
-      @include euiFormControlDisabledStyle;
-    }
-
-    &[readOnly] {
-      @include euiFormControlReadOnlyStyle;
-    }
-  }
-}
-
-@mixin euiHiddenSelectableInput {
-  position: absolute;
-  // stylelint-disable-next-line declaration-no-important
-  opacity: 0 !important; // Make sure it's still hidden when :disabled
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-}
-
-// Adjusts form controls border radius
-@mixin euiFormControlSideBorderRadius($borderRadius, $side, $internal: false) {
-  @if $internal == true {
-    $borderRadius: $borderRadius - 1;
-  }
-  @if $side == 'left' {
-    border-radius: $borderRadius 0 0 $borderRadius;
-  } @else if $side == 'right' {
-    border-radius: 0 $borderRadius $borderRadius 0;
-  }
-}

packages/eui/src/global_styling/mixins/_index.scss

@@ -7,8 +7,5 @@
 
 @import 'button';
 @import 'form';
-@import 'loading';
-@import 'link';
 @import 'panel';
-@import 'range';
 @import 'tool_tip';