Upgrade EUI to v17.0.0 (#52342) (#52523)

* eui to 17.0.0 * Fix sass imports and mixin usages * Fix kbn ui-framework * snapshot updates * switch text * switch functional update * test subject
2025-04-24 01:38:56 -04:00 · 2019-12-09 12:51:51 -06:00 · 2019-12-09 12:51:51 -06:00 · aa16e700c4
commit aa16e700c4
parent 696ceb1c3a
47 changed files with 313 additions and 223 deletions
--- a/package.json
+++ b/package.json
@ -111,7 +111,7 @@
    "@elastic/charts": "^14.0.0",
    "@elastic/datemath": "5.0.2",
    "@elastic/ems-client": "1.0.5",
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/good": "8.1.1-kibana2",
    "@elastic/numeral": "2.3.3",
--- a/packages/kbn-ui-framework/dist/kui_dark.css
+++ b/packages/kbn-ui-framework/dist/kui_dark.css
@ -1,10 +1,24 @@
+/* 1 */
+/* 1 */
+/**
+ * 1. Extend beta badges to at least 40% of the container's width
+ * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+ */
+/**
+ * 1. Apply margin to all but last item in the flex.
+ * 2. Margin gets flipped because of the row-reverse.
+ */
 /**
- * 2. Account for inner box-shadow style border when in group
 * 3. Must supply both values to background-size or some browsers apply the single value to both directions
 */
 /**
 * 4. Override invalid state with focus state.
 */
+/**
+ *  Mixin for use in:
+ *  - EuiCard
+ *  - EuiPageContent
+*/
 /**
 * 1. Enforce pointer when there's no href.
 * 2. Allow these styles to be applied to a button element.
@ -1595,7 +1609,6 @@ main {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
-  height: 100%;
  padding: 12px 8px;
  font-size: 16px;
  font-weight: bold;
--- a/packages/kbn-ui-framework/dist/kui_light.css
+++ b/packages/kbn-ui-framework/dist/kui_light.css
@ -1,10 +1,24 @@
+/* 1 */
+/* 1 */
+/**
+ * 1. Extend beta badges to at least 40% of the container's width
+ * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+ */
+/**
+ * 1. Apply margin to all but last item in the flex.
+ * 2. Margin gets flipped because of the row-reverse.
+ */
 /**
- * 2. Account for inner box-shadow style border when in group
 * 3. Must supply both values to background-size or some browsers apply the single value to both directions
 */
 /**
 * 4. Override invalid state with focus state.
 */
+/**
+ *  Mixin for use in:
+ *  - EuiCard
+ *  - EuiPageContent
+*/
 /**
 * 1. Enforce pointer when there's no href.
 * 2. Allow these styles to be applied to a button element.
@ -522,7 +536,7 @@ main {
  -webkit-appearance: none;
  /* 1 */
  background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
  border-radius: 4px;
  width: 16px;
  height: 16px;
@ -623,7 +637,7 @@ main {
  line-height: 1.5;
  color: #343741;
  background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
  border-radius: 4px;
  -webkit-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
@ -662,7 +676,7 @@ main {
  line-height: 1.5;
  color: #343741;
  background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
  border-radius: 4px;
  -webkit-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
@ -734,7 +748,7 @@ main {
  line-height: 1.5;
  color: #343741;
  background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
  border-radius: 4px;
  -webkit-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
@ -777,7 +791,7 @@ main {
  line-height: 1.5;
  color: #343741;
  background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
  border-radius: 4px;
  -webkit-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
@ -1252,7 +1266,7 @@ main {
  font-size: 14px;
  color: #343741;
  background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
  border-radius: 4px; }
  .kuiLocalDropdownInput:focus {
    border-color: #006BB4; }
@ -1410,7 +1424,7 @@ main {
  line-height: 1.5;
  color: #343741;
  background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
  border-radius: 4px;
  -webkit-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
@ -1491,7 +1505,7 @@ main {
  line-height: 1.5;
  color: #343741;
  background-color: #fbfcfd;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(15, 39, 118, 0.1);
  border-radius: 4px;
  -webkit-transition: border-color 0.1s linear;
  transition: border-color 0.1s linear;
@ -1595,7 +1609,6 @@ main {
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
-  height: 100%;
  padding: 12px 8px;
  font-size: 16px;
  font-weight: bold;
--- a/packages/kbn-ui-framework/src/kui_dark.scss
+++ b/packages/kbn-ui-framework/src/kui_dark.scss
@ -3,8 +3,6 @@
@import '../../../node_modules/@elastic/eui/src/global_styling/functions/index';
@import '../../../node_modules/@elastic/eui/src/global_styling/variables/index';
@import '../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
-@import '../../../node_modules/@elastic/eui/src/components/form/variables';
-@import '../../../node_modules/@elastic/eui/src/components/form/mixins';

 // Configuration
@import 'global_styling/variables/index';
--- a/packages/kbn-ui-framework/src/kui_light.scss
+++ b/packages/kbn-ui-framework/src/kui_light.scss
@ -3,8 +3,6 @@
@import '../../../node_modules/@elastic/eui/src/global_styling/functions/index';
@import '../../../node_modules/@elastic/eui/src/global_styling/variables/index';
@import '../../../node_modules/@elastic/eui/src/global_styling/mixins/index';
-@import '../../../node_modules/@elastic/eui/src/components/form/variables';
-@import '../../../node_modules/@elastic/eui/src/components/form/mixins';

 // Configuration
@import 'global_styling/variables/index';
--- a/src/legacy/core_plugins/kibana/public/discover/_discover.scss
+++ b/src/legacy/core_plugins/kibana/public/discover/_discover.scss
@ -1,5 +1,3 @@
-@import 'node_modules/@elastic/eui/src/components/panel/mixins';
-
 discover-app {
  flex-grow: 1;

@ -37,7 +35,7 @@ discover-app {
  z-index: 1;
 }

-@include euiPanel('dscWrapper__content');
+@include euiPanel('.dscWrapper__content');

 .dscWrapper__content {
  padding-top: $euiSizeXS;
@ -213,7 +211,6 @@ discover-app {
 }

 .dscResults {
-
  h3 {
    margin: -20px 0 10px 0;
    text-align: center;
--- a/src/legacy/core_plugins/kibana/public/index.scss
+++ b/src/legacy/core_plugins/kibana/public/index.scss
@ -1,8 +1,6 @@
@import 'src/legacy/ui/public/styles/styling_constants';

 // Elastic charts
-@import '@elastic/eui/src/components/tool_tip/variables';
-@import '@elastic/eui/src/components/tool_tip/mixins';
@import '@elastic/charts/dist/theme';
@import '@elastic/eui/src/themes/charts/theme';

--- a/src/legacy/core_plugins/vis_type_timeseries/public/_mixins.scss
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/_mixins.scss
@ -1,6 +1,3 @@
-@import 'node_modules/@elastic/eui/src/components/form/variables';
-@import 'node_modules/@elastic/eui/src/components/form/mixins';
-
@mixin tvbEditorRepeatingRow {
  background-color: $euiColorLightestShade;
  padding: $euiSizeS;
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/_annotations_editor.scss
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/_annotations_editor.scss
@ -1,11 +1,9 @@
-@import 'node_modules/@elastic/eui/src/components/panel/mixins';
-
 .tvbAnnotationsEditor__container {
  padding: $euiSize;
  background-color: $euiColorLightestShade;
 }

-@include euiPanel('tvbAnnotationsEditor');
+@include euiPanel('.tvbAnnotationsEditor');

 .tvbAnnotationsEditor {
  margin-bottom: $euiSize;
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/_series_editor.scss
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/_series_editor.scss
@ -1,10 +1,8 @@
-@import 'node_modules/@elastic/eui/src/components/panel/mixins';
-
 .tvbSeriesEditor__container {
  padding: $euiSize;
 }

-@include euiPanel('tvbSeriesEditor');
+@include euiPanel('.tvbSeriesEditor');

 .tvbSeriesEditor {
  margin-bottom: $euiSize;
--- a/src/legacy/server/sass/build.test.js
+++ b/src/legacy/server/sass/build.test.js
@ -47,14 +47,35 @@ it('builds light themed SASS', async () => {

  expect(readFileSync(targetPath, 'utf8').replace(/(\/\*# sourceMappingURL=).*( \*\/)/, '$1...$2'))
    .toMatchInlineSnapshot(`
-"foo bar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #e6f0f8 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
-/*# sourceMappingURL=... */"
-`);
+    "/* 1 */
+    /* 1 */
+    /**
+     * 1. Extend beta badges to at least 40% of the container's width
+     * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+     */
+    /**
+     * 1. Apply margin to all but last item in the flex.
+     * 2. Margin gets flipped because of the row-reverse.
+     */
+    /**
+     * 3. Must supply both values to background-size or some browsers apply the single value to both directions
+     */
+    /**
+     * 4. Override invalid state with focus state.
+     */
+    /**
+     *  Mixin for use in:
+     *  - EuiCard
+     *  - EuiPageContent
+    */
+    foo bar {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      background: #e6f0f8 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
+    /*# sourceMappingURL=... */"
+  `);
 });

 it('builds dark themed SASS', async () => {
@ -72,14 +93,35 @@ it('builds dark themed SASS', async () => {

  expect(readFileSync(targetPath, 'utf8').replace(/(\/\*# sourceMappingURL=).*( \*\/)/, '$1...$2'))
    .toMatchInlineSnapshot(`
-"foo bar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #232635 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
-/*# sourceMappingURL=... */"
-`);
+    "/* 1 */
+    /* 1 */
+    /**
+     * 1. Extend beta badges to at least 40% of the container's width
+     * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+     */
+    /**
+     * 1. Apply margin to all but last item in the flex.
+     * 2. Margin gets flipped because of the row-reverse.
+     */
+    /**
+     * 3. Must supply both values to background-size or some browsers apply the single value to both directions
+     */
+    /**
+     * 4. Override invalid state with focus state.
+     */
+    /**
+     *  Mixin for use in:
+     *  - EuiCard
+     *  - EuiPageContent
+    */
+    foo bar {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      background: #232635 url(./images/img.png) url(ui/assets/favicons/favicon.ico); }
+    /*# sourceMappingURL=... */"
+  `);
 });

 it('rewrites url imports', async () => {
@ -99,16 +141,38 @@ it('rewrites url imports', async () => {
    },
  }).build();

+  /* eslint-disable max-len */
  expect(readFileSync(targetPath, 'utf8').replace(/(\/\*# sourceMappingURL=).*( \*\/)/, '$1...$2'))
    .toMatchInlineSnapshot(`
-"foo bar {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  background: #232635 url(__REPLACE_WITH_PUBLIC_PATH__foo/bar/images/img.png) url(__REPLACE_WITH_PUBLIC_PATH__ui/favicons/favicon.ico); }
-/*# sourceMappingURL=... */"
-`);
+    "/* 1 */
+    /* 1 */
+    /**
+     * 1. Extend beta badges to at least 40% of the container's width
+     * 2. Fix for IE to ensure badges are visible outside of a <button> tag
+     */
+    /**
+     * 1. Apply margin to all but last item in the flex.
+     * 2. Margin gets flipped because of the row-reverse.
+     */
+    /**
+     * 3. Must supply both values to background-size or some browsers apply the single value to both directions
+     */
+    /**
+     * 4. Override invalid state with focus state.
+     */
+    /**
+     *  Mixin for use in:
+     *  - EuiCard
+     *  - EuiPageContent
+    */
+    foo bar {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -ms-flexbox;
+      display: flex;
+      background: #232635 url(__REPLACE_WITH_PUBLIC_PATH__foo/bar/images/img.png) url(__REPLACE_WITH_PUBLIC_PATH__ui/favicons/favicon.ico); }
+    /*# sourceMappingURL=... */"
+  `);

  expect(
    Buffer.compare(
@ -118,9 +182,9 @@ it('rewrites url imports', async () => {
  ).toBe(0);

  expect(await globby('**/*', { cwd: TMP })).toMatchInlineSnapshot(`
-Array [
-  "style.css",
-  "images/img.png",
-]
-`);
+    Array [
+      "style.css",
+      "images/img.png",
+    ]
+  `);
 });
--- a/src/legacy/ui/public/styles/_legacy/_mixins.scss
+++ b/src/legacy/ui/public/styles/_legacy/_mixins.scss
@ -3,8 +3,6 @@

 // DO NOT CONTINUE TO USE THESE MIXINS

-@import '@elastic/eui/src/components/form/variables';
-
@mixin __legacyInputStyles__bad {
  &:not([type='range']) {
    appearance: none;
--- a/src/legacy/ui/public/styles/_legacy/components/_ui_select.scss
+++ b/src/legacy/ui/public/styles/_legacy/components/_ui_select.scss
@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/button/variables';
-@import '@elastic/eui/src/components/form/variables';
-
 /*!
 * ui-select
 * http://github.com/angular-ui/ui-select
@ -8,7 +5,6 @@
 * License: MIT
 */

-
 /* Style when highlighting a search. */
 .ui-select-highlight {
  font-weight: bold;
@ -43,12 +39,12 @@
  padding-left: 0;
 }

-.select2-locked > .select2-search-choice-close{
-  display:none;
+.select2-locked > .select2-search-choice-close {
+  display: none;
 }

-.select-locked > .ui-select-match-close{
-  display:none;
+.select-locked > .ui-select-match-close {
+  display: none;
 }

 body > .select2-container.open {
@ -56,42 +52,42 @@ body > .select2-container.open {
 }

 /* Handle up direction Select2 */
-.ui-select-container[theme="select2"].direction-up .ui-select-match,
+.ui-select-container[theme='select2'].direction-up .ui-select-match,
 .ui-select-container.select2.direction-up .ui-select-match {
-    border-radius: 4px; /* FIXME hardcoded value :-/ */
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+  border-radius: 4px; /* FIXME hardcoded value :-/ */
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
-.ui-select-container[theme="select2"].direction-up .ui-select-dropdown,
+.ui-select-container[theme='select2'].direction-up .ui-select-dropdown,
 .ui-select-container.select2.direction-up .ui-select-dropdown {
-    border-radius: 4px; /* FIXME hardcoded value :-/ */
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  border-radius: 4px; /* FIXME hardcoded value :-/ */
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;

-    border-top-width: 1px;  /* FIXME hardcoded value :-/ */
-    border-top-style: solid;
+  border-top-width: 1px; /* FIXME hardcoded value :-/ */
+  border-top-style: solid;

-    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);

-    margin-top: -4px; /* FIXME hardcoded value :-/ */
+  margin-top: -4px; /* FIXME hardcoded value :-/ */
 }
-.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search,
+.ui-select-container[theme='select2'].direction-up .ui-select-dropdown .select2-search,
 .ui-select-container.select2.direction-up .ui-select-dropdown .select2-search {
-    margin-top: 4px; /* FIXME hardcoded value :-/ */
+  margin-top: 4px; /* FIXME hardcoded value :-/ */
 }
-.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match,
+.ui-select-container[theme='select2'].direction-up.select2-dropdown-open .ui-select-match,
 .ui-select-container.select2.direction-up.select2-dropdown-open .ui-select-match {
-    border-bottom-color: $euiColorPrimary;
+  border-bottom-color: $euiColorPrimary;
 }

-.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden,
-.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input{
-    opacity: 0;
-    height: 0;
-    min-height: 0;
-    padding: 0;
-    margin: 0;
-    border:0;
+.ui-select-container[theme='select2'] .ui-select-dropdown .ui-select-search-hidden,
+.ui-select-container[theme='select2'] .ui-select-dropdown .ui-select-search-hidden input {
+  opacity: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }

 /* Bootstrap theme */
@ -133,12 +129,12 @@ body > .select2-container.open {
 }

 .ui-select-bootstrap .ui-select-search-hidden {
-    opacity: 0;
-    height: 0;
-    min-height: 0;
-    padding: 0;
-    margin: 0;
-    border:0;
+  opacity: 0;
+  height: 0;
+  min-height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
 }

 .ui-select-bootstrap > .ui-select-match > .btn {
@ -213,7 +209,7 @@ body > .ui-select-bootstrap.open {
 }

 .ui-select-multiple:hover .ui-select-match-item.dropping-before:before {
-  content: "";
+  content: '';
  position: absolute;
  top: 0;
  right: 100%;
@ -223,7 +219,7 @@ body > .ui-select-bootstrap.open {
 }

 .ui-select-multiple:hover .ui-select-match-item.dropping-after:after {
-  content: "";
+  content: '';
  position: absolute;
  top: 0;
  left: 100%;
@ -232,7 +228,7 @@ body > .ui-select-bootstrap.open {
  border-right: 1px solid $euiColorPrimary;
 }

-.ui-select-bootstrap .ui-select-choices-row>span {
+.ui-select-bootstrap .ui-select-choices-row > span {
  @include euiFontSizeS;
  @include euiTextTruncate;
  font-weight: inherit;
@ -251,45 +247,44 @@ body > .ui-select-bootstrap.open {
  }
 }

-
-.ui-select-bootstrap .ui-select-choices-row.active>span {
-    color: $euiTextColor;
-    text-decoration: none;
-    outline: 0;
-    background-color: $euiFocusBackgroundColor;
+.ui-select-bootstrap .ui-select-choices-row.active > span {
+  color: $euiTextColor;
+  text-decoration: none;
+  outline: 0;
+  background-color: $euiFocusBackgroundColor;
 }

-.ui-select-bootstrap .ui-select-choices-row.disabled>span,
-.ui-select-bootstrap .ui-select-choices-row.active.disabled>span {
-    color: $euiButtonColorDisabled;
-    cursor: not-allowed;
-    background-color: transparent;
+.ui-select-bootstrap .ui-select-choices-row.disabled > span,
+.ui-select-bootstrap .ui-select-choices-row.active.disabled > span {
+  color: $euiButtonColorDisabled;
+  cursor: not-allowed;
+  background-color: transparent;
 }

 /* fix hide/show angular animation */
 .ui-select-match.ng-hide-add,
 .ui-select-search.ng-hide-add {
-    display: none !important;
+  display: none !important;
 }

 /* Mark invalid Bootstrap */
 .ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
-    border-color: $euiColorDanger;
+  border-color: $euiColorDanger;
 }

 /* Handle up direction Bootstrap */
-.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
+.ui-select-container[theme='bootstrap'].direction-up .ui-select-dropdown {
  @include euiBottomShadowMedium;
 }

 .ui-select-bootstrap .ui-select-match-text {
-    width: 100%;
-    padding-right: 1em;
+  width: 100%;
+  padding-right: 1em;
 }
 .ui-select-bootstrap .ui-select-match-text span {
-    display: inline-block;
-    width: 100%;
-    overflow: hidden;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
 }
 .ui-select-bootstrap .ui-select-toggle > a.btn {
  position: absolute;
@ -300,17 +295,17 @@ body > .ui-select-bootstrap.open {

 /* Spinner */
 .ui-select-refreshing {
-    position: absolute;
-    right: 0;
-    padding: 8px 27px;
-    top: 1px;
-    display: inline-block;
-    font-family: 'Glyphicons Halflings';
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    -webkit-font-smoothing:antialiased;
- }
+  position: absolute;
+  right: 0;
+  padding: 8px 27px;
+  top: 1px;
+  display: inline-block;
+  font-family: 'Glyphicons Halflings';
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+}

@-webkit-keyframes ui-select-spin {
  0% {
@ -342,7 +337,6 @@ body > .ui-select-bootstrap.open {
  -webkit-animation: none 0s;
 }

-
 // Other Custom

 /**
--- a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss
+++ b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss
@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/tool_tip/variables';
-@import '@elastic/eui/src/components/tool_tip/mixins';
-
 .visTooltip,
 .visTooltip__sizingClone {
  @include euiToolTipStyle('s');
--- a/src/legacy/ui/public/vis/editors/default/_sidebar.scss
+++ b/src/legacy/ui/public/vis/editors/default/_sidebar.scss
@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-
 //
 // LAYOUT
 //
@ -44,7 +42,6 @@
  }
 }

-
 /**
 * 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
 */
@ -97,7 +94,7 @@
    margin-top: $euiSizeS;
  }

-  label:not([class^="eui"]) {
+  label:not([class^='eui']) {
    @include __legacyLabelStyles__bad;
    display: block;
  }
@ -169,7 +166,7 @@
 .visEditorSidebar__aggGroupAccordionButtonContent {
  font-size: $euiFontSizeS;

-   span {
+  span {
    color: $euiColorDarkShade;
  }
 }
--- a/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
+++ b/src/plugins/data/public/ui/filter_bar/_global_filter_item.scss
@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-@import '@elastic/eui/src/components/form/mixins';
-
 /**
 * 1.  Allow wrapping of long filter items
 */
--- a/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss
+++ b/src/plugins/data/public/ui/saved_query_management/_saved_query_management_component.scss
@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-
 .kbnSavedQueryManagement__popover {
  max-width: $euiFormMaxWidth;
 }
--- a/src/plugins/inspector/public/views/requests/_requests.scss
+++ b/src/plugins/inspector/public/views/requests/_requests.scss
@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/button/variables';
-
 .insRequestDetailsStats__icon {
  margin-right: $euiSizeS;
 }
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@ -7,7 +7,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@ -7,7 +7,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
    "react": "^16.12.0"
  }
 }
--- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@ -8,7 +8,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
    "react": "^16.12.0"
  },
  "scripts": {
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
@ -8,7 +8,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
    "react": "^16.12.0"
  },
  "scripts": {
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/examples/snapshots/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/examples/snapshots/extended_template.examples.storyshot
@ -12,6 +12,7 @@ exports[`Storyshots arguments/AxisConfig extended 1`] = `
 >
  <div
    className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
+    id="generated-id-row"
  >
    <div
      className="euiFormRow__labelWrapper"
@ -92,6 +93,7 @@ exports[`Storyshots arguments/AxisConfig/components extended 1`] = `
 >
  <div
    className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
+    id="generated-id-row"
  >
    <div
      className="euiFormRow__labelWrapper"
--- a/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/examples/snapshots/custom_element_modal.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/examples/snapshots/custom_element_modal.examples.storyshot
@ -93,6 +93,7 @@ Array [
              >
                <div
                  className="euiFormRow euiFormRow--compressed"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -136,6 +137,7 @@ Array [
                </div>
                <div
                  className="euiFormRow"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -170,6 +172,7 @@ Array [
                </div>
                <div
                  className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -447,6 +450,7 @@ Array [
              >
                <div
                  className="euiFormRow euiFormRow--compressed"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -490,6 +494,7 @@ Array [
                </div>
                <div
                  className="euiFormRow"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -524,6 +529,7 @@ Array [
                </div>
                <div
                  className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -798,6 +804,7 @@ Array [
              >
                <div
                  className="euiFormRow euiFormRow--compressed"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -841,6 +848,7 @@ Array [
                </div>
                <div
                  className="euiFormRow"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -875,6 +883,7 @@ Array [
                </div>
                <div
                  className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -1151,6 +1160,7 @@ Array [
              >
                <div
                  className="euiFormRow euiFormRow--compressed"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -1194,6 +1204,7 @@ Array [
                </div>
                <div
                  className="euiFormRow"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
@ -1228,6 +1239,7 @@ Array [
                </div>
                <div
                  className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                  id="generated-id-row"
                >
                  <div
                    className="euiFormRow__labelWrapper"
--- a/x-pack/legacy/plugins/canvas/public/components/expression_input/examples/snapshots/expression_input.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/expression_input/examples/snapshots/expression_input.examples.storyshot
@ -6,6 +6,7 @@ exports[`Storyshots components/ExpressionInput default 1`] = `
 >
  <div
    className="euiFormRow euiFormRow--fullWidth canvasExpressionInput__inner"
+    id="generated-id-row"
  >
    <div
      className="euiFormRow__fieldWrapper"
--- a/x-pack/legacy/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss
+++ b/x-pack/legacy/plugins/canvas/public/components/tooltip_annotation/tooltip_annotation.scss
@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/tool_tip/variables';
-@import '@elastic/eui/src/components/tool_tip/mixins';
-
 .tooltipAnnotation {
  @include euiToolTipStyle($size: 's');
  position: absolute;
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/examples/snapshots/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/examples/snapshots/extended_template.examples.storyshot
@ -31,6 +31,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -70,6 +71,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -158,6 +160,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -244,6 +247,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -283,6 +287,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -385,6 +390,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -424,6 +430,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
          style={
            Object {
              "fontSize": 0,
@ -511,6 +518,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
    >
      <div
        className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
      >
        <div
          className="euiFormRow__labelWrapper"
@ -550,6 +558,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
    >
      <div
        className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
      >
        <div
          className="euiFormRow__labelWrapper"
@ -638,6 +647,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
    >
      <div
        className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
      >
        <div
          className="euiFormRow__labelWrapper"
@ -723,6 +733,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
    >
      <div
        className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
      >
        <div
          className="euiFormRow__labelWrapper"
@ -762,6 +773,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
    >
      <div
        className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
      >
        <div
          className="euiFormRow__labelWrapper"
@ -864,6 +876,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
    >
      <div
        className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
      >
        <div
          className="euiFormRow__labelWrapper"
@ -903,6 +916,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
    >
      <div
        className="euiFormRow euiFormRow--compressed"
+        id="generated-id-row"
        style={
          Object {
            "fontSize": 0,
@ -1001,6 +1015,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -1040,6 +1055,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -1128,6 +1144,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -1214,6 +1231,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -1253,6 +1271,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -1355,6 +1374,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -1394,6 +1414,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
          style={
            Object {
              "fontSize": 0,
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/examples/snapshots/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/examples/snapshots/extended_template.examples.storyshot
@ -13,6 +13,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
  <div>
    <div
      className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
+      id="generated-id-row"
    >
      <div
        className="euiFormRow__labelWrapper"
@ -94,6 +95,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -182,6 +184,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
@ -270,6 +273,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
      >
        <div
          className="euiFormRow euiFormRow--compressed"
+          id="generated-id-row"
        >
          <div
            className="euiFormRow__labelWrapper"
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/examples/snapshots/autoplay_settings.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/examples/snapshots/autoplay_settings.examples.storyshot
@ -65,13 +65,13 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
          </span>
        </span>
      </button>
-      <p
+      <span
        className="euiSwitch__label"
        id="generated-id"
        onClick={[Function]}
      >
        Cycle Slides
-      </p>
+      </span>
    </div>
    <hr
      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@ -87,6 +87,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
        >
          <div
            className="euiFormRow euiFormRow--compressed"
+            id="generated-id-row"
          >
            <div
              className="euiFormRow__labelWrapper"
@ -133,6 +134,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
        >
          <div
            className="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+            id="generated-id-row"
          >
            <div
              className="euiFormRow__fieldWrapper"
@ -234,13 +236,13 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
          </span>
        </span>
      </button>
-      <p
+      <span
        className="euiSwitch__label"
        id="generated-id"
        onClick={[Function]}
      >
        Cycle Slides
-      </p>
+      </span>
    </div>
    <hr
      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@ -256,6 +258,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
        >
          <div
            className="euiFormRow euiFormRow--compressed"
+            id="generated-id-row"
          >
            <div
              className="euiFormRow__labelWrapper"
@ -302,6 +305,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
        >
          <div
            className="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+            id="generated-id-row"
          >
            <div
              className="euiFormRow__fieldWrapper"
@ -403,13 +407,13 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
          </span>
        </span>
      </button>
-      <p
+      <span
        className="euiSwitch__label"
        id="generated-id"
        onClick={[Function]}
      >
        Cycle Slides
-      </p>
+      </span>
    </div>
    <hr
      className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
@ -425,6 +429,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
        >
          <div
            className="euiFormRow euiFormRow--compressed"
+            id="generated-id-row"
          >
            <div
              className="euiFormRow__labelWrapper"
@ -471,6 +476,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
        >
          <div
            className="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+            id="generated-id-row"
          >
            <div
              className="euiFormRow__fieldWrapper"
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/examples/snapshots/toolbar_settings.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/examples/snapshots/toolbar_settings.examples.storyshot
@ -24,6 +24,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: off 1`
  >
    <div
      className="euiFormRow"
+      id="generated-id-row"
    >
      <div
        className="euiFormRow__fieldWrapper"
@ -75,13 +76,13 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: off 1`
              </span>
            </span>
          </button>
-          <p
+          <span
            className="euiSwitch__label"
            id="generated-id"
            onClick={[Function]}
          >
            Hide Toolbar
-          </p>
+          </span>
        </div>
        <div
          className="euiFormHelpText euiFormRow__text"
@ -119,6 +120,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: on 1`]
  >
    <div
      className="euiFormRow"
+      id="generated-id-row"
    >
      <div
        className="euiFormRow__fieldWrapper"
@ -170,13 +172,13 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings component: on 1`]
              </span>
            </span>
          </button>
-          <p
+          <span
            className="euiSwitch__label"
            id="generated-id"
            onClick={[Function]}
          >
            Hide Toolbar
-          </p>
+          </span>
        </div>
        <div
          className="euiFormHelpText euiFormRow__text"
@ -214,6 +216,7 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings contextual 1`] =
  >
    <div
      className="euiFormRow"
+      id="generated-id-row"
    >
      <div
        className="euiFormRow__fieldWrapper"
@ -265,13 +268,13 @@ exports[`Storyshots shareables/Footer/Settings/ToolbarSettings contextual 1`] =
              </span>
            </span>
          </button>
-          <p
+          <span
            className="euiSwitch__label"
            id="generated-id"
            onClick={[Function]}
          >
            Hide Toolbar
-          </p>
+          </span>
        </div>
        <div
          className="euiFormHelpText euiFormRow__text"
--- a/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/snapshots/settings.test.tsx.snap
+++ b/x-pack/legacy/plugins/canvas/shareable_runtime/components/footer/settings/tests/snapshots/settings.test.tsx.snap
--- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
+++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/_datapanel.scss
@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/form_control_layout/mixins';
-
 .lnsInnerIndexPatternDataPanel {
  width: 100%;
  height: 100%;
@ -54,4 +52,3 @@
  @include euiFormControlLayoutPadding(1, 'right');
  @include euiFormControlLayoutPadding(1, 'left');
 }
-
--- a/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
+++ b/x-pack/legacy/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss
@ -1,6 +1,3 @@
-@import '@elastic/eui/src/components/tool_tip/variables';
-@import '@elastic/eui/src/components/tool_tip/mixins';
-
 .mlChartTooltip {
  @include euiToolTipStyle('s');
  @include euiFontSizeXS;
@ -50,5 +47,4 @@
  &--hidden {
    opacity: 0;
  }
-
 }
--- a/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/create_analytics_form/create_analytics_form.test.tsx
@ -56,6 +56,6 @@ describe('Data Frame Analytics: <CreateAnalyticsForm />', () => {
    expect(options.at(2).props().value).toBe('regression');

    const row2 = euiFormRows.at(1);
-    expect(row2.find('p').text()).toBe('Enable advanced editor');
+    expect(row2.find('EuiSwitch').text()).toBe('Enable advanced editor');
  });
 });
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/components/fields_stats/_field_stats_card.scss
@ -41,12 +41,13 @@
    background-color: #920000;
  }

-  .type-other, .unknown {
+  .type-other,
+  .unknown {
    background-color: #bfa180;
  }

  // Use euiPanel styling
-  @include euiPanel($selector: 'card-contents');
+  @include euiPanel($selector: '.card-contents');

  .card-contents {
    height: 378px;
@ -68,12 +69,16 @@
    padding-bottom: 0px;
  }

-  .stat.min, .stat.max, .stat.median {
+  .stat.min,
+  .stat.max,
+  .stat.median {
    width: 30%;
    display: inline-block;
  }

-  .stat.min.value, .stat.max.value, .stat.median.value {
+  .stat.min.value,
+  .stat.max.value,
+  .stat.median.value {
    font-size: $euiFontSizeS;
    @include euiTextTruncate;
  }
--- a/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss
+++ b/x-pack/legacy/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/_field_data_card.scss
@ -2,7 +2,6 @@
  height: 420px;
  width: 360px;

-
  // Note the names of these styles need to match the type of the field they are displaying.
  .boolean {
    background-color: $euiColorVis5;
@ -36,13 +35,13 @@
    background-color: $euiColorVis9;
  }

-  .type-other, .unknown {
+  .type-other,
+  .unknown {
    background-color: $euiColorVis6;
  }

-
  // Use euiPanel styling
-  @include euiPanel($selector: 'mlFieldDataCard__content');
+  @include euiPanel($selector: '.mlFieldDataCard__content');

  .mlFieldDataCard__content {
    @include euiFontSizeS;
--- a/x-pack/legacy/plugins/ml/public/index.scss
+++ b/x-pack/legacy/plugins/ml/public/index.scss
@ -1,10 +1,6 @@
 // Should import both the EUI constants and any Kibana ones that are considered global
@import 'src/legacy/ui/public/styles/styling_constants';

-// ML needs EUI card styling till it fully adopts React components
-@import '@elastic/eui/src/components/panel/variables';
-@import '@elastic/eui/src/components/panel/mixins';
-
 // ML has it's own variables for coloring
@import 'application/variables';

@ -16,7 +12,6 @@
 // Protect the rest of Kibana from ML generic namespacing
 // SASSTODO: Prefix ml selectors instead
 #ml-app {
-
  // App level
  @import 'application/app';

--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/snapshots/remote_cluster_form.test.js.snap
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/snapshots/remote_cluster_form.test.js.snap
@ -40,6 +40,7 @@ Array [
          <div
            class="euiFormRow euiFormRow--fullWidth"
            data-test-subj="remoteClusterFormNameFormRow"
+            id="mockId-row"
          >
            <div
              class="euiFormRow__labelWrapper"
@ -117,6 +118,7 @@ Array [
          <div
            class="euiFormRow euiFormRow--fullWidth"
            data-test-subj="remoteClusterFormSeedNodesFormRow"
+            id="mockId-row"
          >
            <div
              class="euiFormRow__labelWrapper"
@ -240,6 +242,7 @@ Array [
          <div
            class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--fullWidth remoteClusterSkipIfUnavailableSwitch"
            data-test-subj="remoteClusterFormSkipUnavailableFormRow"
+            id="mockId-row"
          >
            <div
              class="euiFormRow__fieldWrapper"
@ -284,12 +287,12 @@ Array [
                    </span>
                  </span>
                </button>
-                <p
+                <span
                  class="euiSwitch__label"
                  id="mockId"
                >
                  Skip if unavailable
-                </p>
+                </span>
              </div>
            </div>
          </div>
@ -367,6 +370,7 @@ Array [
  <div
    class="euiFormRow euiFormRow--fullWidth"
    data-test-subj="remoteClusterFormNameFormRow"
+    id="mockId-row"
  >
    <div
      class="euiFormRow__labelWrapper"
@ -416,6 +420,7 @@ Array [
  <div
    class="euiFormRow euiFormRow--fullWidth"
    data-test-subj="remoteClusterFormSeedNodesFormRow"
+    id="mockId-row"
  >
    <div
      class="euiFormRow__labelWrapper"
@ -499,6 +504,7 @@ Array [
  <div
    class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--fullWidth remoteClusterSkipIfUnavailableSwitch"
    data-test-subj="remoteClusterFormSkipUnavailableFormRow"
+    id="mockId-row"
  >
    <div
      class="euiFormRow__fieldWrapper"
@ -543,12 +549,12 @@ Array [
            </span>
          </span>
        </button>
-        <p
+        <span
          class="euiSwitch__label"
          id="mockId"
        >
          Skip if unavailable
-        </p>
+        </span>
      </div>
    </div>
  </div>,
--- a/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/_index.scss
+++ b/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/_index.scss
@ -1,5 +1,4 @@
@import '@elastic/eui/src/components/header/variables';
-@import '@elastic/eui/src/components/panel/mixins';

@import 'mixins';

@ -16,7 +15,6 @@
  }
 }

-
 .prfDevTool__page {
  height: 100%;
  display: flex;
--- a/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/containers/_main.scss
+++ b/x-pack/legacy/plugins/searchprofiler/public/np_ready/application/styles/containers/_main.scss
@ -1,4 +1,3 @@
-
@include euiBreakpoint('xs', 's') {
  .prfDevTool__shardDetailsWrapper {
    flex-direction: column;
@ -34,7 +33,8 @@
      font-size: $euiSize;
      color: $euiColorMediumShade;
    }
-    h1, p {
+    h1,
+    p {
      cursor: default;
      user-select: none;
    }
@ -44,7 +44,7 @@
  }
 }

-@include euiPanel('prfDevTool__main');
+@include euiPanel('.prfDevTool__main');

@include euiBreakpoint('xs', 's') {
  .prfDevTool__container {
@ -59,4 +59,3 @@
    margin: $euiSize 0;
  }
 }
-
--- a/x-pack/legacy/plugins/siem/public/components/notes/note_card/snapshots/note_card_body.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/notes/note_card/snapshots/note_card_body.test.tsx.snap
@ -100,7 +100,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
          "success": "#7de2d1",
          "warning": "#ffce7a",
        },
-        "euiCardGraphicHeight": "40px",
+        "euiCardBottomNodeHeight": "40px",
        "euiCardSelectButtonBackgrounds": Object {
          "danger": "#4d1f1f",
          "ghost": "#98a2b3",
@ -116,7 +116,6 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
          "text": "#7de2d1",
        },
        "euiCardSpacing": "16px",
-        "euiCardTitleSize": "18px",
        "euiCheckBoxSize": "16px",
        "euiCodeBlockAdditionBackgroundColor": "#144212",
        "euiCodeBlockAdditionColor": "#e6e1dc",
@ -290,7 +289,6 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
        "euiNavDrawerWidthCollapsed": "48px",
        "euiNavDrawerWidthExpanded": "240px",
        "euiPageBackgroundColor": "#1a1b20",
-        "euiPanelBorderColor": "#000000",
        "euiPanelPaddingModifiers": Object {
          "paddingLarge": "24px",
          "paddingMedium": "16px",
@ -334,6 +332,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
        "euiScrollBar": "16px",
        "euiScrollBarCorner": "6px",
        "euiSelectableListItemBorder": "1px solid #202128",
+        "euiSelectableListItemPadding": "4px 12px",
        "euiShadowColor": "#000000",
        "euiShadowColorLarge": "#000000",
        "euiSize": "16px",
--- a/x-pack/legacy/plugins/siem/public/components/paginated_table/snapshots/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/paginated_table/snapshots/index.test.tsx.snap
@ -100,7 +100,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
          "success": "#7de2d1",
          "warning": "#ffce7a",
        },
-        "euiCardGraphicHeight": "40px",
+        "euiCardBottomNodeHeight": "40px",
        "euiCardSelectButtonBackgrounds": Object {
          "danger": "#4d1f1f",
          "ghost": "#98a2b3",
@ -116,7 +116,6 @@ exports[`Paginated Table Component rendering it renders the default load more ta
          "text": "#7de2d1",
        },
        "euiCardSpacing": "16px",
-        "euiCardTitleSize": "18px",
        "euiCheckBoxSize": "16px",
        "euiCodeBlockAdditionBackgroundColor": "#144212",
        "euiCodeBlockAdditionColor": "#e6e1dc",
@ -290,7 +289,6 @@ exports[`Paginated Table Component rendering it renders the default load more ta
        "euiNavDrawerWidthCollapsed": "48px",
        "euiNavDrawerWidthExpanded": "240px",
        "euiPageBackgroundColor": "#1a1b20",
-        "euiPanelBorderColor": "#000000",
        "euiPanelPaddingModifiers": Object {
          "paddingLarge": "24px",
          "paddingMedium": "16px",
@ -334,6 +332,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
        "euiScrollBar": "16px",
        "euiScrollBarCorner": "6px",
        "euiSelectableListItemBorder": "1px solid #202128",
+        "euiSelectableListItemPadding": "4px 12px",
        "euiShadowColor": "#000000",
        "euiShadowColorLarge": "#000000",
        "euiSize": "16px",
--- a/x-pack/legacy/plugins/spaces/public/views/management/components/_confirm_delete_modal.scss
+++ b/x-pack/legacy/plugins/spaces/public/views/management/components/_confirm_delete_modal.scss
@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-
 .spcConfirmDeleteModal {
-  max-width: $euiFormMaxWidth + ($euiSizeL*2);
+  max-width: $euiFormMaxWidth + ($euiSizeL * 2);
 }
--- a/x-pack/legacy/plugins/spaces/public/views/space_selector/_space_selector.scss
+++ b/x-pack/legacy/plugins/spaces/public/views/space_selector/_space_selector.scss
@ -1,5 +1,3 @@
-@import '@elastic/eui/src/components/form/variables';
-
 .spcSpaceSelector {
  @include kibanaFullScreenGraphics;
 }
@ -27,7 +25,6 @@
  @include euiBottomShadowMedium;
 }

-
 .spcSpaceSelector__searchHolder {
  width: $euiFormMaxWidth; // make sure it's as wide as our default form element width
  max-width: 100%;
--- a/x-pack/package.json
+++ b/x-pack/package.json
@ -175,7 +175,7 @@
    "@babel/runtime": "^7.5.5",
    "@elastic/datemath": "5.0.2",
    "@elastic/ems-client": "1.0.5",
-    "@elastic/eui": "16.1.0",
+    "@elastic/eui": "17.0.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/maki": "6.1.0",
    "@elastic/node-crypto": "^1.0.0",
--- a/x-pack/test/functional/page_objects/upgrade_assistant.js
+++ b/x-pack/test/functional/page_objects/upgrade_assistant.js
@ -45,7 +45,7 @@ export function UpgradeAssistantProvider({ getService, getPageObjects }) {
    async expectDeprecationLoggingLabel(labelText) {
      return await retry.try(async () => {
        log.debug('expectDeprecationLoggingLabel()');
-        const label = await find.byCssSelector('[data-test-subj="upgradeAssistantDeprecationToggle"] ~ p');
+        const label = await find.byCssSelector('[data-test-subj="upgradeAssistantDeprecationToggle"] ~ span');
        const value = await label.getVisibleText();
        expect(value).to.equal(labelText);
      });
--- a/yarn.lock
+++ b/yarn.lock
@ -1226,10 +1226,10 @@
    tabbable "^1.1.0"
    uuid "^3.1.0"

-"@elastic/eui@16.1.0":
-  version "16.1.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-16.1.0.tgz#b8311a4dd3146da2fcd8cec6ae1ed46e26f90746"
-  integrity sha512-WbfIc2RGojrUeYyEIjiQ0Cy4xbk6YJ6eQ+ymFHSDGqwkKy5IidSBZIDNLM13LzAhxBFTAMmfVsk4lB2qiFlolQ==
+"@elastic/eui@17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-17.0.0.tgz#2b53500b9f4849fdf58f88ea89e10a0b58836acc"
+  integrity sha512-bWTVKbChPGh7AHLxW1o9yp7O3hL9lTVj69DVaaLBOz9K0JnDrWZ5VDvWL9AAguFWq9OEMY9oWjyBhQZr1ZeZbA==
  dependencies:
    "@types/lodash" "^4.14.116"
    "@types/numeral" "^0.0.25"