@elastic/eui 77.1.1 → 77.2.0

package/README.md

@@ -1,50 +1,51 @@
-<img src="https://repository-images.githubusercontent.com/107422373/b6180480-a1d7-11eb-8a3c-902086232aa7" />
+<img src="https://repository-images.githubusercontent.com/107422373/b6180480-a1d7-11eb-8a3c-902086232aa7" alt="" />
 
 # Elastic UI Framework
 
 **The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic.**
 
-Check out our [full documentation site][docs] which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. We also have a [FAQ][faq] that covers common usage questions. For other general questions regarding EUI, check out the [Discussions tab](https://github.com/elastic/eui/discussions).
+Check out our [full documentation site][docs] which contains many examples of components in the EUI framework aesthetic, and how to use them in your products. Our FAQ below covers common usage questions — for other general questions regarding EUI, check out the [Discussions tab](https://github.com/elastic/eui/discussions).
 
-The rest of this doc will detail how to run and contribute to the **EUI documentation** site locally.
+## Frequently Asked Questions
 
-## Running Locally
+### What is the Elastic UI Framework?
 
-### Node
+The Elastic UI Framework (EUI) is a design library in use at Elastic to build React applications that need to share our branding and aesthetics. It distributes typed UI React components and static assets for use in building web layouts. Alongside the React components, we ship theme & style utilities that can be used independently on their own.
 
-We depend upon the version of node defined in [.nvmrc](.nvmrc).
+The primary goal of this library is to provide reusable UI components that can be used throughout Elastic's web products. As React components, they remove CSS from the process of building UIs. As a single source of truth, the framework allows our designers to make changes to our aesthetic directly in the code. And unit test coverage for the UI components allows us to deliver a stable "API for user interfaces".
 
-You will probably want to install a node version manager. [nvm](https://github.com/creationix/nvm) is recommended.
+### Can I use EUI?
 
-To install and use the correct node version with `nvm`:
+Please see Elastic's licensing FAQ: [I’m using EUI or Elastic Charts in my application outside of Kibana, how does this affect me?][licensing-faq]
 
-```bash
-nvm install
-```
+### Why is EUI open source?
 
-### Documentation
+Many of Elastic's products are open source and rely upon this library to function. The Elastic UI Framework began as a folder of code in Kibana and we decided it could be used beyond that codebase. It exists as an independent library so that patterns can be shared across teams and design standards can be scaled across our organization. Since most of our products are open source, we treat this one similarly as far as public publishing and conversation even if its usage tends to focus more inward towards Elastic itself.
 
-You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following.
+### What is the versioning, release, and upgrade strategy?
 
-```bash
-yarn
-yarn start
-```
+We use [semver](https://semver.org/) for versioning and use that to denote breaking changes in EUI upgrades. Traditionally we consider API changes in our prop names or existing component functionality to be a reason for a breaking change, but do not track the renaming of CSS selectors, mixins or other style changes under this same rigor.
 
-If another process is already listening on port 8030, the next free port will be used. Alternatively, you can specify a port:
+Traditionally releases are made weekly against whatever is in the `main` branch and you can upgrade from NPM as you see fit.
 
-```bash
-yarn start --port 9000
-```
+### Can I contribute to EUI?
 
-## Goals
+Yes! We welcome community-contributed PRs, especially around feature requests that the EUI team may not have bandwidth to carry out alone. You can find documentation around creating and submitting new components in [CONTRIBUTING.md](CONTRIBUTING.md).
 
-The primary goal of this library is to provide reusable UI components that can be used throughout
-Elastic's web products. As React components, they remove CSS from the process of building UIs.
-As a single source of truth, the framework allows our designers to make changes to our aesthetic
-directly in the code. And unit test coverage for the UI components allows us to deliver a stable
-"API for user interfaces".
+### What about reporting bugs and feature requests?
 
+Bug reports and feature requests are most welcome, but our roadmap and prioritization are driven primarily by [internal Elastic usage](./CONTRIBUTING.md#how-we-assign-work-and-define-our-roadmap).
+
+Please note that in order to keep our backlog manageable and focused on tasks we intend to complete, feature requests & tech debt issues that are inactive for a year will be auto-closed (bugs will remain open if determined to be reproducible and valid).
+
+This activity counter can be soft reset by commenting on the issue directly, but please do so mindfully. We would ask that you proactively let the EUI team know why this request matters to you or how it impacts you or your users, in order to help us prioritize accordingly.
+
+The EUI team, like everyone else, has a finite amount of time and resources, and it is not humanly possible for us to implement every task or feature requested of us. However, that's where the beauty of open source comes in - if your request is important to you, we strongly encourage you to [contribute code directly to EUI](CONTRIBUTING.md) that addresses your issue or request!
+
+<!-- TODO: Delete this question once the Emotion migration is complete -->
+### What is the status of EUI's theming?
+
+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.
 
 ## Wiki
 
@@ -69,9 +70,9 @@ directly in the code. And unit test coverage for the UI components allows us to
 
 ## License
 
-[Dual-licensed under Elastic v2 and Server Side Public License, v 1][license] Read the [FAQ][faq] for details.
+[Dual-licensed under Elastic v2 and Server Side Public License, v1][license]. See Elastic's [licensing FAQ][licensing-faq] for details.
 
 [license]: LICENSE.txt
-[faq]: FAQ.md
+[licensing-faq]: https://www.elastic.co/pricing/faq/licensing#im-using-eui-or-elastic-charts-in-my-application-outside-of-kibana-how-does-this-affect-me
 [consuming]: wiki/consuming.md
 [docs]: https://elastic.github.io/eui/

package/dist/eui_theme_dark.css

@@ -2743,86 +2743,8 @@ The following files still use the Sass version:
     opacity: 1;
   }
 }
-/**
- * 1. Account for inner box-shadow style border
- */
-.euiDatePickerRange {
-  max-width: 400px;
-  width: 100%;
-  height: auto;
-  background-color: #16171c;
-  background-repeat: no-repeat;
-  background-size: 0% 100%;
-  box-shadow: 0 0 transparent, inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-  transition: box-shadow 150ms ease-in, background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-          align-items: center;
-  padding: 1px; /* 1 */
-}
-.euiDatePickerRange--fullWidth {
-  max-width: 100%;
-}
-.euiDatePickerRange--compressed {
-  height: 32px;
-}
-.euiDatePickerRange--inGroup {
-  height: 100%;
-}
-@supports (-moz-appearance: none) {
-  .euiDatePickerRange {
-    transition-property: box-shadow, background-image, background-size;
-  }
-}
-.euiDatePickerRange > * {
-  -webkit-flex-grow: 1;
-          flex-grow: 1;
-}
 .euiDatePickerRange .euiFieldText.euiDatePicker {
   height: 38px;
-  box-shadow: none !important;
-  text-align: center;
-}
-.euiDatePickerRange .euiDatePickerRange__start {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.euiDatePickerRange .euiDatePickerRange__end {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.euiDatePickerRange .react-datepicker-popper .euiFieldText.euiDatePicker {
-  text-align: left;
-}
-.euiDatePickerRange--inGroup {
-  box-shadow: none;
-  padding: 0;
-}
-
-.euiDatePickerRange--isDisabled {
-  background: #202128;
-}
-
-.euiDatePickerRange--readOnly {
-  background: #1D1E24;
-}
-
-.euiDatePickerRange__delimeter {
-  -webkit-align-self: stretch;
-          align-self: stretch;
-  height: auto;
-  -webkit-flex-grow: 0;
-          flex-grow: 0;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-          align-items: center;
-}
-
-.euiDatePickerRange--isInvalid:not(.euiDatePickerRange--isDisabled):not(.euiDatePickerRange--readOnly) .euiDatePickerRange__delimeter {
-  background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%);
-  background-size: 100%;
 }
 
 .euiSuperDatePicker__absoluteDateFormRow {
@@ -2885,16 +2807,17 @@ The following files still use the Sass version:
 }
 .euiDatePopoverButton:disabled {
   background-color: #202128;
+  background-image: none;
   color: #98A2B3;
   cursor: default;
 }
 
 .euiDatePopoverButton--start {
-  text-align: right;
+  text-align: center;
 }
 
 .euiDatePopoverButton--end {
-  text-align: left;
+  text-align: center;
 }
 
 .euiDatePopoverContent {
@@ -3017,20 +2940,19 @@ The following files still use the Sass version:
   max-width: 100% !important;
 }
 .euiSuperDatePicker > .euiFormControlLayout__childrenWrapper {
-  -webkit-flex: 1 1 100%;
-          flex: 1 1 100%;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+          align-items: center;
   overflow: hidden;
+  background-color: #16171c;
 }
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper > .euiDatePickerRange {
-  max-width: none;
-  width: auto;
+.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper:last-child {
   border-radius: 0 6px 6px 0;
 }
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper:not(:last-child) > .euiDatePickerRange,
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper:not(:last-child) > .euiDatePickerRange .euiDatePopoverButton--end,
-.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper:not(:last-child) > .euiDatePickerRange .euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.euiSuperDatePicker > .euiFormControlLayout__childrenWrapper > .euiFormControlLayoutDelimited__input {
+  -webkit-flex-grow: 1;
+          flex-grow: 1;
 }
 
 .euiSuperDatePicker__prettyFormat {
@@ -3077,6 +2999,20 @@ The following files still use the Sass version:
   cursor: not-allowed;
 }
 
+/**
+* Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating`
+*/
+.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited .euiFormControlLayout__childrenWrapper {
+  background-color: #264341;
+}
+.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited .euiFormControlLayoutDelimited__delimiter {
+  color: #7DDED8;
+}
+
+.euiSuperDatePicker .euiFormControlLayout__childrenWrapper {
+  transition: background 150ms ease-in;
+}
+
 .euiDataGrid {
   display: -webkit-flex;
   display: flex;
@@ -6040,14 +5976,14 @@ The following files still use the Sass version:
   max-width: 50%;
 }
 .euiFormControlLayout--group .euiFormLabel,
-.euiFormControlLayout--group .euiText {
+.euiFormControlLayout--group .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
   background-color: #2c2f37;
   padding: 12px;
   line-height: 16px !important;
   cursor: default !important;
 }
 .euiFormControlLayout--group .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper):not(input),
-.euiFormControlLayout--group .euiText + *:not(.euiFormControlLayout__childrenWrapper):not(input) {
+.euiFormControlLayout--group .euiText:not(.euiFormControlLayoutDelimited__delimiter) + *:not(.euiFormControlLayout__childrenWrapper):not(input) {
   margin-left: -12px;
 }
 .euiFormControlLayout--group > *:not(.euiFormControlLayout__childrenWrapper) + .euiFormLabel,
@@ -6077,11 +6013,11 @@ The following files still use the Sass version:
   }
 }
 .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel,
-.euiFormControlLayout--group.euiFormControlLayout--compressed .euiText {
+.euiFormControlLayout--group.euiFormControlLayout--compressed .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
   padding: 8px;
 }
 .euiFormControlLayout--group.euiFormControlLayout--compressed .euiFormLabel + *:not(.euiFormControlLayout__childrenWrapper),
-.euiFormControlLayout--group.euiFormControlLayout--compressed .euiText + *:not(.euiFormControlLayout__childrenWrapper) {
+.euiFormControlLayout--group.euiFormControlLayout--compressed .euiText:not(.euiFormControlLayoutDelimited__delimiter) + *:not(.euiFormControlLayout__childrenWrapper) {
   margin-left: -8px;
 }
 .euiFormControlLayout--group.euiFormControlLayout--compressed > *:not(.euiFormControlLayout__childrenWrapper) + .euiFormLabel,
@@ -6115,15 +6051,13 @@ The following files still use the Sass version:
     transition-property: box-shadow, background-image, background-size;
   }
 }
-.euiFormControlLayoutDelimited .euiFormControlLayoutDelimited__delimeter {
-  background-color: #16171c;
-}
 .euiFormControlLayoutDelimited > .euiFormControlLayout__childrenWrapper {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
           align-items: center;
   width: 100%;
+  background-color: #16171c;
 }
 .euiFormControlLayoutDelimited[class*="--compressed"] {
   background-color: #16171c;
@@ -6138,17 +6072,7 @@ The following files still use the Sass version:
     transition-property: box-shadow, background-image, background-size;
   }
 }
-.euiFormControlLayoutDelimited[class*="--compressed"] .euiFormControlLayoutDelimited__input {
-  height: 100%;
-  max-width: none;
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.euiFormControlLayoutDelimited[class*="--compressed"] .euiFormControlLayoutIcons {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.euiFormControlLayoutDelimited[class*="--fullWidth"] .euiFormControlLayout__childrenWrapper, .euiFormControlLayoutDelimited[class*="--fullWidth"] input {
+.euiFormControlLayoutDelimited[class*="--fullWidth"] .euiFormControlLayout__childrenWrapper, .euiFormControlLayoutDelimited[class*="--fullWidth"] .euiFormControlLayout__childrenWrapper > *:not(.euiFormControlLayoutDelimited__delimiter):not(.euiFormControlLayoutIcons) {
   width: 100%;
   max-width: none;
 }
@@ -6171,7 +6095,7 @@ The following files still use the Sass version:
   color: #535966;
   opacity: 1;
 }
-.euiFormControlLayoutDelimited[class*=-isDisabled] .euiFormControlLayoutDelimited__delimeter {
+.euiFormControlLayoutDelimited[class*=-isDisabled] .euiFormControlLayout__childrenWrapper {
   background-color: #202128;
 }
 .euiFormControlLayoutDelimited[class*="--readOnly"] {
@@ -6182,18 +6106,12 @@ The following files still use the Sass version:
   border-color: transparent;
   box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
 }
-.euiFormControlLayoutDelimited[class*="--readOnly"] input,
-.euiFormControlLayoutDelimited[class*="--readOnly"] .euiFormControlLayoutDelimited__delimeter {
+.euiFormControlLayoutDelimited[class*="--readOnly"] .euiFormControlLayout__childrenWrapper {
   background-color: #1D1E24;
 }
-.euiFormControlLayoutDelimited .euiFormControlLayoutIcons {
-  position: static;
-  padding-left: 12px;
-  padding-right: 12px;
-}
-.euiFormControlLayoutDelimited .euiFormControlLayoutIcons:not(.euiFormControlLayoutIcons--right) {
-  -webkit-order: -1;
-          order: -1;
+.euiFormControlLayoutDelimited--isInvalid .euiFormControlLayout__childrenWrapper {
+  background-image: linear-gradient(to top, #F86B63, #F86B63 2px, transparent 2px, transparent 100%);
+  background-size: 100%;
 }
 
 .euiFormControlLayoutDelimited__input {
@@ -6204,20 +6122,20 @@ The following files still use the Sass version:
   min-width: 0;
 }
 
-.euiFormControlLayoutDelimited__delimeter {
-  line-height: 1 !important;
-  -webkit-flex: 0 0 auto;
-          flex: 0 0 auto;
-  padding-left: 6px;
-  padding-right: 6px;
+.euiFormControlLayoutDelimited__delimiter {
+  -webkit-align-self: stretch;
+          align-self: stretch;
+  -webkit-flex-grow: 0;
+          flex-grow: 0;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+          align-items: center;
+  line-height: 1;
 }
 
 .euiFormControlLayoutIcons {
   pointer-events: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 12px;
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
@@ -6226,9 +6144,31 @@ The following files still use the Sass version:
 .euiFormControlLayoutIcons > * + * {
   margin-left: 6px;
 }
-.euiFormControlLayout--compressed .euiFormControlLayoutIcons {
+.euiFormControlLayoutIcons--absolute {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 12px;
+}
+.euiFormControlLayout--compressed .euiFormControlLayoutIcons--absolute {
   left: 8px;
 }
+.euiFormControlLayoutIcons--static {
+  position: static;
+  height: 100%;
+  -webkit-align-self: stretch;
+          align-self: stretch;
+  -webkit-flex-grow: 0;
+          flex-grow: 0;
+  padding-inline: 12px;
+}
+.euiFormControlLayout--compressed .euiFormControlLayoutIcons--static {
+  padding-inline: 8px;
+}
+
+.euiFormControlLayoutIcons--left {
+  z-index: 1;
+}
 
 .euiFormControlLayoutIcons--right {
   left: auto;
@@ -10316,38 +10256,10 @@ button.euiSuggestItem:hover .euiSuggestItem__label, button.euiSuggestItem:focus
   border-radius: 6px;
 }
 
-.euiDatePickerRange {
-  border-radius: 6px;
-}
-
 .euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker {
   border: none;
 }
 
-.euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-.euiFormControlLayout--compressed.euiSuperDatePicker .euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.euiDatePopoverButton--start {
-  text-align: center;
-}
-
-.euiDatePopoverButton--end {
-  text-align: center;
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-.euiDatePopoverButton--end.euiDatePopoverButton--compressed {
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
 .euiDescriptionList.euiDescriptionList--inline.euiDescriptionList--compressed .euiDescriptionList__title {
   line-height: 1.5;
 }