@elastic/eui 12.2.0 → 12.4.0

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "12.2.0",
+  "version": "12.4.0",
   "license": "Apache-2.0",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "postcss": {},
   "docker_image": "node:8",
   "sideEffects": false,
   "scripts": {
@@ -25,6 +24,7 @@
     "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
     "test": "yarn lint && yarn test-unit",
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
+    "test-staged": "yarn lint && node scripts/test-staged.js",
     "start-test-server": "webpack-dev-server --config src-docs/webpack.config.js --port 9999",
     "test-visual": "wdio test/wdio.conf.js",
     "yo-component": "yo ./generator-eui/app/component.js",
@@ -40,6 +40,9 @@
     "type": "git",
     "url": "https://github.com/elastic/eui.git"
   },
+  "pre-commit": [
+    "test-staged"
+  ],
   "dependencies": {
     "@types/lodash": "^4.14.116",
     "@types/numeral": "^0.0.25",
@@ -109,8 +112,8 @@
     "css-loader": "^0.28.7",
     "cssnano": "^4.0.5",
     "dts-generator": "^2.1.0",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.9.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.0",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.2.0",

package/packages/react-datepicker.js

@@ -509,6 +509,13 @@ function delay(fn) {
 
 var focusTrap_1 = focusTrap;
 
+var focusTrap$1 = /*#__PURE__*/Object.freeze({
+  default: focusTrap_1,
+  __moduleExports: focusTrap_1
+});
+
+var createFocusTrap = ( focusTrap$1 && focusTrap_1 ) || focusTrap$1;
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -619,7 +626,7 @@ FocusTrap.defaultProps = {
   tag: 'div',
   paused: false,
   focusTrapOptions: {},
-  _createFocusTrap: focusTrap_1
+  _createFocusTrap: createFocusTrap
 };
 
 var focusTrapReact = FocusTrap;
@@ -4879,18 +4886,11 @@ var _wksExt = {
 
 var iterator = _wksExt.f('iterator');
 
-var iterator$1 = /*#__PURE__*/Object.freeze({
-  default: iterator,
-  __moduleExports: iterator
-});
-
-var require$$0$1 = ( iterator$1 && iterator ) || iterator$1;
-
-var iterator$2 = createCommonjsModule(function (module) {
-module.exports = { "default": require$$0$1, __esModule: true };
+var iterator$1 = createCommonjsModule(function (module) {
+module.exports = { "default": iterator, __esModule: true };
 });
 
-unwrapExports(iterator$2);
+unwrapExports(iterator$1);
 
 var _meta = createCommonjsModule(function (module) {
 var META = _uid('meta');
@@ -5277,10 +5277,10 @@ var symbol$1 = /*#__PURE__*/Object.freeze({
   __moduleExports: symbol
 });
 
-var require$$0$2 = ( symbol$1 && symbol ) || symbol$1;
+var require$$0$1 = ( symbol$1 && symbol ) || symbol$1;
 
 var symbol$2 = createCommonjsModule(function (module) {
-module.exports = { "default": require$$0$2, __esModule: true };
+module.exports = { "default": require$$0$1, __esModule: true };
 });
 
 unwrapExports(symbol$2);
@@ -5291,7 +5291,7 @@ exports.__esModule = true;
 
 
 
-var _iterator2 = _interopRequireDefault(iterator$2);
+var _iterator2 = _interopRequireDefault(iterator$1);
 
 
 
@@ -8028,13 +8028,6 @@ if (process.env.NODE_ENV !== 'production') {
 
 var warning_1 = warning;
 
-var warning$1 = /*#__PURE__*/Object.freeze({
-  default: warning_1,
-  __moduleExports: warning_1
-});
-
-var _warning = ( warning$1 && warning_1 ) || warning$1;
-
 var implementation = createCommonjsModule(function (module, exports) {
 
 exports.__esModule = true;
@@ -8053,7 +8046,7 @@ var _gud2 = _interopRequireDefault(gud);
 
 
 
-var _warning2 = _interopRequireDefault(_warning);
+var _warning2 = _interopRequireDefault(warning_1);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -8233,14 +8226,7 @@ exports.default = createReactContext;
 module.exports = exports['default'];
 });
 
-var implementation$1 = unwrapExports(implementation);
-
-var implementation$2 = /*#__PURE__*/Object.freeze({
-  default: implementation$1,
-  __moduleExports: implementation
-});
-
-var _implementation = ( implementation$2 && implementation$1 ) || implementation$2;
+unwrapExports(implementation);
 
 var lib = createCommonjsModule(function (module, exports) {
 
@@ -8252,7 +8238,7 @@ var _react2 = _interopRequireDefault(React__default);
 
 
 
-var _implementation2 = _interopRequireDefault(_implementation);
+var _implementation2 = _interopRequireDefault(implementation);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -8489,10 +8475,10 @@ function Popper$1(props) {
 
 var __DEV__ = process.env.NODE_ENV !== 'production';
 
-var warning$2 = function() {};
+var warning$1 = function() {};
 
 if (__DEV__) {
-  warning$2 = function(condition, format, args) {
+  warning$1 = function(condition, format, args) {
     var len = arguments.length;
     args = new Array(len > 2 ? len - 2 : 0);
     for (var key = 2; key < len; key++) {
@@ -8530,7 +8516,7 @@ if (__DEV__) {
   };
 }
 
-var warning_1$1 = warning$2;
+var warning_1$1 = warning$1;
 
 var InnerReference = function (_React$Component) {
   _inherits$1(InnerReference, _React$Component);

package/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')({ browsers: ['last 2 versions'] }),
+    require('postcss-inline-svg')({ relative: true, path: __dirname }),
+  ],
+};

package/src/components/color_picker/_color_picker.scss

@@ -17,18 +17,6 @@
   padding-bottom: 0 !important;
 }
 
-.euiColorPicker__popoverContainer:not(.euiColorPicker__popoverContainer--customButton) {
-  // Override of EuiPopover display
-  // sass-lint:disable no-important
-  display: block !important;
-}
-
-.euiColorPicker__popoverAnchor:not(.euiColorPicker__popoverAnchor--customButton) {
-  // Override of EuiPopover display
-  // sass-lint:disable no-important
-  display: block !important;
-}
-
 .euiColorPicker__popoverPanel[class*='bottom']:not(.euiColorPicker__popoverPanel--customButton) {
   border-top-color: transparentize($euiBorderColor, .2);
   border-top-right-radius: 0;

package/src/components/date_picker/_date_picker.scss

@@ -217,7 +217,7 @@
   &--next {
     @include datePicker__arrow;
     // Pixel value because of some padding on the icon
-    right: 10px;
+    right: 20px;
     height: $euiSize;
     width: $euiSize;
     transform: rotate(-90deg);
@@ -635,7 +635,7 @@
 .react-datepicker__month--accessible:focus {
   background: $euiFocusBackgroundColor;
 
-  .react-datepicker__day--in-range {
+  .react-datepicker__day--in-range:not(.react-datepicker__day--selected) {
     border-top-color: $euiFocusBackgroundColor;
     border-bottom-color: $euiFocusBackgroundColor;
   }
@@ -661,6 +661,14 @@
 
 // We drop the time picker on mobile. They can still type in the time directly.
 @include euiBreakpoint('xs','s') {
+
+  // This resizes EUI's normal form control to be the width of the calendar
+  .euiDatePicker--inline {
+    max-width: $euiDatePickerCalendarWidth;
+    display: block;
+  }
+
+  // This hides the time entirely
   .react-datepicker__time-container {
     display: none;
   }

package/src/components/date_picker/_index.scss

@@ -1,4 +1,5 @@
 // Uses some form mixins
+@import 'variables';
 @import 'date_picker';
 @import 'date_picker_range';
 @import 'super_date_picker/index';

package/src/components/date_picker/_variables.scss

@@ -0,0 +1 @@
+$euiDatePickerCalendarWidth: 284px;

package/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss

@@ -1,7 +1,3 @@
-.euiDatePopoverButton__popover .euiDatePopoverButton__popoverAnchor {
-  display: block;
-}
-
 .euiDatePopoverButton {
   @include euiSuperDatePickerText;
   background-size: 100%; // For the bottom "border" via background-image

package/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss

@@ -10,3 +10,10 @@
 .euiDatePopoverContent__padded--large {
   padding: $euiSize;
 }
+
+@include euiBreakpoint('xs', 's') {
+  .euiDatePopoverContent {
+    // Small screens drop the time selector
+    width: $euiDatePickerCalendarWidth;
+  }
+}

package/src/components/flex/_flex_grid.scss

@@ -14,6 +14,19 @@
   }
 }
 
+/**
+  * 1. For vertical layouts we use columns instead of flex
+  */
+.euiFlexGrid--directionColumn {
+  display: block; /* 1 */
+  column-gap: 0; // The "gap" comes from the margin around the item
+
+  > .euiFlexItem {
+    display: inline-block; /* 1 */
+    line-height: initial; // Ensures the item itself doesn't impose any height
+  }
+}
+
 $gutterTypes: (
   // We're using calc which requires the px unit
   gutterNone: 0px, // sass-lint:disable-line zero-unit
@@ -24,10 +37,22 @@ $gutterTypes: (
 );
 
 $fractions: (
-  fourths: 25%,
-  thirds: 33.3%,
-  halves: 50%,
-  single: 100%,
+  fourths: (
+    percentage: 25%,
+    count: 4,
+  ),
+  thirds: (
+    percentage: 33.3%,
+    count: 3,
+  ),
+  halves: (
+    percentage: 50%,
+    count: 2,
+  ),
+  single: (
+    percentage: 100%,
+    count: 1,
+  ),
 );
 
 @each $gutterName, $gutterSize in $gutterTypes {
@@ -46,19 +71,29 @@ $fractions: (
     }
   }
 
-  @each $fraction, $percentage in $fractions {
+  @each $fraction, $map in $fractions {
     .euiFlexGrid--#{$gutterName}.euiFlexGrid--#{$fraction} {
       > .euiFlexItem {
-        flex-basis: calc(#{$percentage} - #{$gutterSize});
+        flex-basis: calc(#{map-get($map, 'percentage')} - #{$gutterSize});
+      }
+
+      &.euiFlexGrid--directionColumn { /* 1 */
+        column-count: map-get($map, 'count');
+
+        > .euiFlexItem {
+          width: calc(100% - #{$gutterSize});
+        }
       }
     }
   }
 }
 
+
 @include euiBreakpoint('xs', 's') {
-  .euiFlexGrid {
+  .euiFlexGrid.euiFlexGrid--responsive {
     // sass-lint:disable-block no-important
     margin-left: 0 !important;
     margin-right: 0 !important;
+    column-count: 1 !important;
   }
 }

package/src/components/flyout/_flyout_body.scss

@@ -1,13 +1,10 @@
 .euiFlyoutBody {
-  @include euiOverflowShadow;
   flex-grow: 1;
   overflow-y: hidden;
   height: 100%;
 
   .euiFlyoutBody__overflow {
-    @include euiScrollBar;
-    height: 100%;
-    overflow-y: auto;
+    @include euiYScrollWithShadows;
     padding: $euiSizeL;
   }
 }

package/src/components/form/_mixins.scss

@@ -1,3 +1,12 @@
+@mixin euiPlaceholderPerBrowser {
+  // sass-lint:disable-block no-vendor-prefixes
+  // Each prefix must be it's own content block
+  &::-webkit-input-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::placeholder { @content; }
+}
 
 @function euiFormControlGradient($color: $euiColorPrimary) {
   @return linear-gradient(to top,
@@ -19,7 +28,8 @@
   line-height: 1em; // fixes text alignment in IE
   color: $euiTextColor;
 
-  &::placeholder {
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiPlaceholderPerBrowser {
     color: $euiColorDarkShade;
   }
 }
@@ -132,7 +142,8 @@
   background: $euiFormBackgroundDisabledColor;
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 
-  &::placeholder {
+  // sass-lint:disable-block mixins-before-declarations
+  @include euiPlaceholderPerBrowser {
     color: $euiFormControlDisabledColor;
   }
 }

package/src/components/form/super_select/_super_select.scss

@@ -5,16 +5,10 @@
  */
 
 .euiSuperSelect {
-  width: 100%;
-
   &:not(.euiSuperSelect--fullWidth) { /* 1 */
     // sass-lint:disable-block no-important
     max-width: $euiFormMaxWidth !important; // override default popover styles
   }
-
-  .euiSuperSelect__popoverAnchor {
-    display: block;
-  }
 }
 
 .euiSuperSelect__popoverPanel[class*='bottom'] { /* 3 */

package/src/components/modal/_modal.scss

@@ -38,7 +38,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: $euiSizeL $euiSizeXXL $euiSizeM $euiSizeL;
+  padding: $euiSizeL $euiSizeXXL $euiSize $euiSizeL;
   flex-grow: 0;
   flex-shrink: 0;
 }
@@ -48,7 +48,6 @@
 }
 
 .euiModalBody {
-  @include euiOverflowShadow;
   flex-grow: 1;
   overflow: hidden;
   // The below fixes scroll on Chrome and Safari
@@ -56,17 +55,15 @@
   flex-direction: column;
 
   .euiModalBody__overflow {
-    @include euiScrollBar;
-    height: 100%;
-    overflow-y: auto;
-    padding: $euiSizeL;
+    @include euiYScrollWithShadows;
+    padding: $euiSizeS $euiSizeL;
   }
 }
 
 .euiModalFooter {
   display: flex;
   justify-content: flex-end;
-  padding: $euiSizeL;
+  padding: $euiSize $euiSizeL $euiSizeL;
   flex-grow: 0;
   flex-shrink: 0; // ensure the height of the footer is based off it's contents and doesn't squish
 
@@ -75,12 +72,17 @@
   }
 }
 
-// When both a header and body exist, drop the top padding so the overflow on
-// the body is spaced correctly.
-.euiModalHeader + .euiModalBody .euiModalBody__overflow {
-  padding-top: $euiSizeM;
+// If a body doesn't exist, remove some extra padding from footer
+.euiModalHeader + .euiModalFooter {
+  padding-top: $euiSizeS;
 }
 
+// If a footer doesn't exist (body is the last element) add padding to the bottom
+.euiModalBody:last-of-type .euiModalBody__overflow {
+  padding-bottom: $euiSizeL;
+}
+
+
 // The actual size of the X button in pixels is a bit fuzzy because of all the
 // button padding so there is some pixel pushing here.
 .euiModal__closeIcon {
@@ -134,7 +136,7 @@
 
   .euiModalFooter {
     background: $euiColorLightestShade;
-    padding: $euiSizeM $euiSizeL;
+    padding: $euiSizeM $euiSizeL !important; // sass-lint:disable-line no-important
     width: 100vw;
     justify-content: stretch;
 
@@ -149,5 +151,9 @@
 
   .euiModalBody {
     width: 100vw;
+
+    .euiModalBody__overflow {
+      padding-bottom: $euiSizeL;
+    }
   }
 }

package/src/components/popover/_popover.scss

@@ -15,6 +15,14 @@
   display: inline-block;
 }
 
+.euiPopover--displayBlock {
+  display: block;
+
+  .euiPopover__anchor {
+    display: block;
+  }
+}
+
 /**
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
  * 2. Animation happens on the panel.

package/src/components/selectable/selectable_list/_selectable_list.scss

@@ -1,9 +1,3 @@
-.euiSelectableList {
-  .ReactVirtualized__List {
-    @include euiScrollBar;
-  }
-}
-
 // Expand height of list via flex box
 .euiSelectableList-fullHeight {
   flex-grow: 1;
@@ -15,8 +9,9 @@
   border-radius: $euiBorderRadius;
 }
 
-.euiSelectableList-overflowing {
+.euiSelectableList__list {
   @include euiOverflowShadow;
+  @include euiScrollBar;
 }
 
 .euiSelectableList__groupLabel {

package/src/global_styling/mixins/_helpers.scss

@@ -54,6 +54,14 @@
   }
 }
 
+// The full overflow shadow plus scrollbars
+@mixin euiYScrollWithShadows {
+  @include euiOverflowShadow;
+  @include euiScrollBar;
+  height: 100%;
+  overflow-y: auto;
+}
+
 // Hiding elements offscreen to only be read by screen reader
 @mixin euiScreenReaderOnly {
   position: absolute;

package/src/global_styling/mixins/_shadow.scss

@@ -1,7 +1,7 @@
 // This file uses RGBA literal values responsibly
 // This file uses off-pattern indedentation to be more readible
 
-// sass-lint:disable no-color-literals, indentation
+// sass-lint:disable no-color-literals, no-color-keywords, indentation
 
 @mixin euiSlightShadow($color: $euiShadowColor, $opacity: .3) {
   box-shadow: 0 2px 2px -1px rgba($color, $opacity);
@@ -86,29 +86,14 @@
   @include euiSlightShadowHover($color, $opacity);
 }
 
-@mixin euiOverflowShadow($color: $euiColorEmptyShade) {
-  // Only allow the shadow if we can properly remove pointer events
-  // from it since it will overlay the contents
-  @supports (pointer-events: none) {
-    position: relative;
-
-    &::after {
-      content: '';
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      // Stops match scrollbar corner so it doesn't overlap
-      background: linear-gradient(to bottom,
-                    transparentize($color, .1) 0%,
-                    transparentize($color, 1) $euiScrollBarCorner,
-                    transparentize($color, 1) calc(100% - #{$euiScrollBarCorner}),
-                    transparentize($color, .1) 100%
-                  );
-      pointer-events: none;
-    }
-  }
+@mixin euiOverflowShadow {
+  $hideHeight: $euiScrollBarCorner * 1.25;
+    mask-image: linear-gradient(to bottom,
+                  transparentize(red, .9) 0%,
+                  transparentize(red, 0) $hideHeight,
+                  transparentize(red, 0) calc(100% - #{$hideHeight}),
+                  transparentize(red, .9) 100%
+                );
 }
 
 //** DEPRECATED **//

package/src/global_styling/utility/_utility.scss

@@ -75,3 +75,10 @@
   flex-shrink: 1;
   flex-basis: 0%;
 }
+
+/**
+  * Overflow scrolling
+  */
+.euiYScrollWithShadows {
+  @include euiYScrollWithShadows;
+}

package/.github/pull_request_template.md

@@ -1,16 +0,0 @@
-### Summary
-
-Summarize your PR. If it includes design elements include a screenshot or gif.
-
-### Checklist
-
-- [ ] This was checked in mobile
-- [ ] This was checked in IE11
-- [ ] This was checked in dark mode
-- [ ] Any props added have proper autodocs
-- [ ] Documentation examples were added
-- [ ] A [changelog](https://github.com/elastic/eui/blob/master/CHANGELOG.md) entry exists and is marked appropriately
-- [ ] This was checked for breaking changes and labeled appropriately
-- [ ] Jest tests were updated or added to match the most common scenarios
-- [ ] This was checked against keyboard-only and screenreader scenarios
-- [ ] This required updates to Framer X components

package/CONTRIBUTING.md

@@ -1,27 +0,0 @@
-# Contributing to EUI
-
-🙌 Thanks for your interest in contributing to EUI! 🙌
-
-## New Components, Features, and Bug Fixes
-
-When creating new components, adding new features, or fixing bugs, please refer to the [Component Development guidelines][docs-components]. If there isn't an associated issue on the bug tracker yet, consider creating one so that you get a chance to discuss the changes you have in mind with the rest of the team.
-
-## Documentation
-
-Always remember to update [documentation site][docs] and the [`CHANGELOG.md`](CHANGELOG.md) in the same PR that contains functional changes. We do this in tandem to prevent our examples from going out of sync with the actual components. In this sense, treat documentation no different than how you would treat tests.
-
-Here are our guidelines for updating the `CHANGELOG.md` file:
-
-* Append your changes to the `master` sub-heading of [`CHANGELOG.md`](CHANGELOG.md).
-* Add a list item for each significant change in the PR: bugs that were fixed, new features, new components, or changes to the public API
-* In the list item, always link to any relevant Pull Requests, commit ranges, or individual commits
-* Add a short summary of what has changed, making sure it's informative to consumers who might be unaware of implementation details
-* Avoid documenting internal implementation changes that don't have an effect on the public interface
-
-## Software Releases
-
-When we are ready to create a new release, we follow the [Release Process][docs-releases] documentation.
-
-[docs]: https://elastic.github.io/eui/
-[docs-components]: wiki/component-development.md
-[docs-releases]: wiki/releasing-versions.md

package/FAQ.md

@@ -1,19 +0,0 @@
-# Frequently Asked Questions
-
-Here are our responses to questions we expect to get frequently.
-
-## What is the Elastic UI Framework?
-
-The Elastic UI Framework (EUI) is a design library in use at Elastic to build **internal products** that need to share our branding and look and feel. It distributes UI React components and static assets for use in building web layouts. Alongside the React components is a SASS/CSS layer that can be used independently on its own.
-
-## Can I use EUI?
-
-The Elastic UI Framework is intended to only be used on Elastic products and is not supported as a discrete, independent design library. We do not recommend using it unless you are working on Elastic products or plugins to those products.
-
-## Why is EUI open source?
-
-Many of our products themselves 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.
-
-## What about reporting bugs and feature requests?
-
-Bug reports are most welcome, but we're not considering external feature requests at this time.