@elastic/eui 81.1.0 → 81.3.0

package/README.md

@@ -47,6 +47,8 @@ The EUI team, like everyone else, has a finite amount of time and resources, and
 
 The EUI library was previously built upon Sass and is in the process of migrating to CSS-in-JS (specifically [Emotion](https://emotion.sh)). While this work is in progress, we ask for your patience with our in-between state in areas such as documentation and setup.
 
+If you're a Kibana developer with questions around CSS-in-JS usage in Kibana, please check out our [FAQ discussion](https://github.com/elastic/eui/discussions/6828)!
+
 ## Wiki
 
 Our wiki docs contain instructions and guidelines on multiple areas of EUI usage and development that are too detailed for an initial README. For more information, see:

package/dist/eui_theme_dark.css

@@ -2894,47 +2894,51 @@ The following files still use the Sass version:
   min-width: 90px;
 }
 
-.euiSuperDatePicker__flexWrapper {
+.euiSuperDatePicker {
+  display: -webkit-flex;
+  display: flex;
+  gap: 8px;
   max-width: 100%;
   min-width: min(326px, 100%);
   width: 606px;
 }
 @media only screen and (max-width: 574px) {
-  .euiSuperDatePicker__flexWrapper {
+  .euiSuperDatePicker {
     width: 100%;
   }
 }
 @media only screen and (min-width: 575px) and (max-width: 767px) {
-  .euiSuperDatePicker__flexWrapper {
+  .euiSuperDatePicker {
     width: 100%;
   }
 }
-.euiSuperDatePicker__flexWrapper.euiSuperDatePicker__flexWrapper--fullWidth {
+.euiSuperDatePicker--isAutoRefreshOnly {
+  min-width: min(200px, 100%);
+  width: 400px;
+}
+.euiSuperDatePicker--noUpdateButton {
+  min-width: min(200px, 100%);
+  width: 480px;
+}
+.euiSuperDatePicker--fullWidth {
   width: 100%;
 }
-.euiSuperDatePicker__flexWrapper.euiSuperDatePicker__flexWrapper--isQuickSelectOnly {
+.euiSuperDatePicker--isQuickSelectOnly {
   min-width: 0;
 }
-.euiSuperDatePicker__flexWrapper.euiSuperDatePicker__flexWrapper--autoWidth {
+.euiSuperDatePicker--autoWidth {
   display: -webkit-inline-flex;
   display: inline-flex;
   width: auto;
 }
-
-.euiSuperDatePicker__flexWrapper--isAutoRefreshOnly {
-  min-width: min(200px, 100%);
-  width: 400px;
-}
-
-.euiSuperDatePicker__flexWrapper--noUpdateButton {
-  min-width: min(200px, 100%);
-  width: 480px;
+.euiSuperDatePicker .euiDatePickerRange {
+  -webkit-flex-grow: 1;
+          flex-grow: 1;
 }
-
-.euiSuperDatePicker {
-  max-width: 100% !important;
+.euiSuperDatePicker .euiFormControlLayout {
+  max-width: 100%;
 }
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper {
+.euiSuperDatePicker .euiFormControlLayout__childrenWrapper {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
@@ -2942,10 +2946,10 @@ The following files still use the Sass version:
   overflow: hidden;
   background-color: #16171c;
 }
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper:last-child {
+.euiSuperDatePicker .euiFormControlLayout__childrenWrapper:last-child {
   border-radius: 0 6px 6px 0;
 }
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper > .euiFormControlLayoutDelimited__input {
+.euiSuperDatePicker .euiFormControlLayout__childrenWrapper > .euiFormControlLayoutDelimited__input {
   -webkit-flex-grow: 1;
           flex-grow: 1;
 }
@@ -2997,14 +3001,13 @@ The following files still use the Sass version:
 /**
 * Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating`
 */
-.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper {
+.euiSuperDatePicker--needsUpdating .euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper {
   background-color: #264341;
 }
-.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited .euiFormControlLayoutDelimited__delimiter {
+.euiSuperDatePicker--needsUpdating .euiFormControlLayoutDelimited .euiFormControlLayoutDelimited__delimiter {
   color: #7DDED8;
 }
-
-.euiSuperDatePicker .euiFormControlLayout__childrenWrapper {
+.euiSuperDatePicker--needsUpdating .euiFormControlLayout__childrenWrapper {
   transition: background 150ms ease-in;
 }
 
@@ -9733,32 +9736,33 @@ button.euiSuggestItem:hover .euiSuggestItem__label, button.euiSuggestItem:focus
 }
 
 .euiTableRow-isExpandedRow .euiTableCellContent {
-  overflow: hidden;
-  -webkit-animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow;
-          animation: 250ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal forwards growExpandedRow;
+  -webkit-animation: 150ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal none growExpandedRow;
+          animation: 150ms cubic-bezier(0.694, 0.0482, 0.335, 1) 1 normal none growExpandedRow;
 }
 
 @-webkit-keyframes growExpandedRow {
   0% {
-    max-height: 0;
-  }
-  99% {
-    max-height: 100vh;
+    opacity: 0;
+    -webkit-transform: translateY(-12px);
+            transform: translateY(-12px);
   }
   100% {
-    max-height: unset;
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
   }
 }
 
 @keyframes growExpandedRow {
   0% {
-    max-height: 0;
-  }
-  99% {
-    max-height: 100vh;
+    opacity: 0;
+    -webkit-transform: translateY(-12px);
+            transform: translateY(-12px);
   }
   100% {
-    max-height: unset;
+    opacity: 1;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
   }
 }
 .euiTableRowCell__mobileHeader {