Merge branch 'master' into flyout-max-width

CHANGELOG.md

@@ -1,15 +1,28 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiSuggestItem` component ([#2090](https://github.com/elastic/eui/pull/2090))
+- Added support for negated or clauses to `EuiSearchBar` ([#2140](https://github.com/elastic/eui/pull/2140))
+- Added `transition` utility services to help create timeouts that account for CSS transition durations and delays ([#2136](https://github.com/elastic/eui/pull/2136))
+
 **Bug fixes**
 
+- Fixed `EuiComboBox`'s padding on the right ([#2135](https://github.com/elastic/eui/pull/2135))
+- Fixed `EuiAccordion` to correctly account for changing computed height of child elements ([#2136](https://github.com/elastic/eui/pull/2136))
 - Fixed some `EuiFlyout` sizing ([#2125](https://github.com/elastic/eui/pull/2125))
 
+**Breaking changes**
+
+- Removed `EuiSeriesChart` and related components. Please look to [Elastic Charts](https://github.com/elastic/elastic-charts) for a replacement. ([#2135](https://github.com/elastic/eui/pull/2108))
+- Removed `eui_k6_theme` related Sass and JSON files ([#2135](https://github.com/elastic/eui/pull/2108))
+- Removed no longer used Sass mixins and variables in `EuiForm`, `EuiCallOut`, and `EuiRange` components ([#2135](https://github.com/elastic/eui/pull/2108))
+
 ## [`12.4.0`](https://github.com/elastic/eui/tree/v12.4.0)
 
 - Centered the square of the `popout` glyph in the artboard ([#2120](https://github.com/elastic/eui/pull/2120))
 - Added `useInnerText` and `EuiInnerText` component utilities for retrieving text content of elements ([#2100](https://github.com/elastic/eui/pull/2100))
 - Converted `EuiRangeHightlight`, `EuiRangeLabel`, `EuiRangeLevels`, `EuiRangeSlider`, `EuiRangeThumb`, `EuiRangeTicks`, `EuiRangeTrack`, and `EuiRangeWrapper` to TypeScript ([#2124](https://github.com/elastic/eui/pull/2124))
 - Converted `EuiAccordion` to TypeScript ([#2128](https://github.com/elastic/eui/pull/2128))
+- Exported `prettyDuration` and `commonDurationRanges` for pretty printing date ranges outside `EuiSuperDatePicker` ([#2132](https://github.com/elastic/eui/pull/2132))
 
 **Bug fixes**
 
@@ -51,6 +64,14 @@
 
 - Removed `logoXpack`from `EuiIcon` types ([#2111](https://github.com/elastic/eui/pull/2111))
 
+## [`12.2.1`](https://github.com/elastic/eui/tree/v12.2.1)
+
+**Note: this release is a backport containing changes originally made in `12.4.0`**
+
+**Bug fixes**
+
+- Fixed a nearly infinite `requestAnimationFrame` loop caused by `focus` state changes in nested `EuiPopover` components ([#2110](https://github.com/elastic/eui/pull/2110))
+
 ## [`12.2.0`](https://github.com/elastic/eui/tree/v12.2.0)
 
 - Made `aria-label` attribute equal to `title` of the the selection checkbox in table items (for each row) in `EuiBasicTable` ([#2043](https://github.com/elastic/eui/pull/2043))

package.json

@@ -60,7 +60,6 @@
     "react-input-autosize": "^2.2.1",
     "react-is": "~16.3.0",
     "react-virtualized": "^9.18.5",
-    "react-vis": "1.10.2",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^1.1.0",
     "uuid": "^3.1.0"

src-docs/src/components/guide_section/guide_section.js

@@ -372,10 +372,6 @@ export class GuideSection extends Component {
         /(from )'(..\/)+src\/services(\/?';)/,
         "from '@elastic/eui/lib/services';"
       )
-      .replace(
-        /(from )'(..\/)+src\/experimental(\/?';)/,
-        "from '@elastic/eui/lib/experimental';"
-      )
       .replace(/(from )'(..\/)+src\/components\/.*?';/, "from '@elastic/eui';");
 
     return (

src-docs/src/components/guide_theme_selector/guide_theme_selector.js

@@ -16,14 +16,6 @@ export class GuideThemeSelector extends Component {
         text: 'Dark',
         value: 'dark',
       },
-      {
-        text: 'K6',
-        value: 'k6',
-      },
-      {
-        text: 'K6 dark',
-        value: 'k6_dark',
-      },
     ];
 
     this.state = {

src-docs/src/index.js

@@ -15,17 +15,11 @@ import { registerTheme } from './services';
 import Routes from './routes';
 import themeLight from './theme_light.scss';
 import themeDark from './theme_dark.scss';
-import themeK6Light from './theme_k6_light.scss';
-import themeK6Dark from './theme_k6_dark.scss';
 
 registerTheme('light', [themeLight]);
 
 registerTheme('dark', [themeDark]);
 
-registerTheme('k6', [themeK6Light]);
-
-registerTheme('k6_dark', [themeK6Dark]);
-
 // Set up app
 
 const store = configureStore();

src-docs/src/routes.js

@@ -29,6 +29,8 @@ import { ColorPaletteExample } from './views/color_palette/color_palette_example
 
 import { IsColorDarkExample } from './views/is_color_dark/is_color_dark_example';
 
+import { PrettyDurationExample } from './views/pretty_duration/pretty_duration_example';
+
 import { UtilityClassesExample } from './views/utility_classes/utility_classes_example';
 
 // Component examples
@@ -158,6 +160,8 @@ import { StatExample } from './views/stat/stat_example';
 
 import { StepsExample } from './views/steps/steps_example';
 
+// import { SuggestExample } from './views/suggest/suggest_example';
+
 import { TableExample } from './views/tables/tables_example';
 
 import { TabsExample } from './views/tabs/tabs_example';
@@ -174,18 +178,6 @@ import { ToggleExample } from './views/toggle/toggle_example';
 
 import { WindowEventExample } from './views/window_event/window_event_example';
 
-import { XYChartExample } from './views/series_chart/series_chart_example';
-
-import { XYChartAxisExample } from './views/series_chart_axis/series_axis_example';
-
-import { XYChartBarExample } from './views/series_chart_bar/bar_example';
-
-import { XYChartHistogramExample } from './views/series_chart_histogram/histogram_example';
-
-import { XYChartAreaExample } from './views/series_chart_area/area_example';
-
-import { XYChartLineExample } from './views/series_chart_line/line_example';
-
 import { Changelog } from './views/package/changelog';
 
 import { I18nTokens } from './views/package/i18n_tokens';
@@ -347,17 +339,7 @@ const navigation = [
       RangeControlExample,
       SearchBarExample,
       SelectableExample,
-    ].map(example => createExample(example)),
-  },
-  {
-    name: 'Charts (deprecated)',
-    items: [
-      XYChartExample,
-      XYChartAxisExample,
-      XYChartLineExample,
-      XYChartAreaExample,
-      XYChartBarExample,
-      XYChartHistogramExample,
+      // SuggestExample,
     ].map(example => createExample(example)),
   },
   {
@@ -376,6 +358,7 @@ const navigation = [
       InnerTextExample,
       I18nExample,
       IsColorDarkExample,
+      PrettyDurationExample,
       MutationObserverExample,
       OutsideClickDetectorExample,
       PortalExample,

src-docs/src/views/accordion/accordion_multiple.js

@@ -30,5 +30,31 @@ export default () => (
         <p>The content inside can be of any height.</p>
       </EuiText>
     </EuiAccordion>
+
+    <EuiSpacer />
+
+    <EuiAccordion
+      id="accordion3"
+      buttonContent="A third accordion with a nested accordion"
+      paddingSize="m">
+      <EuiText>
+        <p>
+          This content area will grow to accomodate when the accordion below
+          opens
+        </p>
+      </EuiText>
+      <EuiSpacer />
+      <EuiAccordion id="accordion4" buttonContent="A fourth nested accordion">
+        <EuiText>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+          <p>The content inside can be of any height.</p>
+        </EuiText>
+      </EuiAccordion>
+      <EuiSpacer />
+    </EuiAccordion>
   </div>
 );

src-docs/src/views/card/card.js

@@ -7,7 +7,7 @@ import {
   EuiFlexItem,
 } from '../../../../src/components';
 
-const icons = ['Beats', 'Cloud', 'Xpack', 'Kibana'];
+const icons = ['Beats', 'Cloud', 'Logging', 'Kibana'];
 
 const cardNodes = icons.map(function(item, index) {
   return (

src-docs/src/views/color_palette/color_palette_example.js

@@ -14,10 +14,6 @@ import ColorPaletteCustom from './color_palette_custom';
 const colorPaletteCustomSource = require('!!raw-loader!./color_palette_custom');
 const colorPaletteCustomHtml = renderToHtml(ColorPaletteCustom);
 
-import ColorPaletteHistogram from './color_palette_histogram';
-const colorPaletteHistogramSource = require('!!raw-loader!./color_palette_histogram');
-const colorPaletteHistogramHtml = renderToHtml(ColorPaletteHistogram);
-
 export const ColorPaletteExample = {
   title: 'Color Palettes',
   sections: [
@@ -83,26 +79,5 @@ export const ColorPaletteExample = {
       ),
       demo: <ColorPaletteCustom />,
     },
-    {
-      title: 'Usage examples',
-      source: [
-        {
-          type: GuideSectionTypes.JS,
-          code: colorPaletteHistogramSource,
-        },
-        {
-          type: GuideSectionTypes.HTML,
-          code: colorPaletteHistogramHtml,
-        },
-      ],
-      text: (
-        <p>
-          Apply the colors from <EuiCode>eui_palettes.js</EuiCode> or the{' '}
-          <EuiCode>colorPalette</EuiCode>
-          service to the <EuiCode>color</EuiCode> prop of EUI chart components.
-        </p>
-      ),
-      demo: <ColorPaletteHistogram />,
-    },
   ],
 };