Upgrade EUI to v17.0.0

package.json

@@ -112,7 +112,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",

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;

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;

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';

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';

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;

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';
 

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;

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;

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;

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",
+    ]
+  `);
 });

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;