diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
index 379dfe51dbd..098cee72577 100644
--- a/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
+++ b/src-docs/src/views/collapsible_nav/collapsible_nav_all.tsx
@@ -25,6 +25,7 @@ import { KibanaNavLinks, SecurityGroup } from './collapsible_nav_list';
import contentSvg from '../../images/content.svg';
import { useExitPath } from '../../services/routing/routing';
+import { EuiThemeProvider } from '../../../../src/services';
const TopLinks: EuiPinnableListGroupItemProps[] = [
{
@@ -151,22 +152,23 @@ const CollapsibleNavAll = () => {
{/* Dark deployments section */}
- EuiListGroupItems will inherit the color from their
- element type whether it is a
They also accept options for text size;{' '}
diff --git a/src-docs/src/views/list_group/list_group_extra.js b/src-docs/src/views/list_group/list_group_extra.tsx
similarity index 100%
rename from src-docs/src/views/list_group/list_group_extra.js
rename to src-docs/src/views/list_group/list_group_extra.tsx
diff --git a/src-docs/src/views/list_group/list_group_item_color.tsx b/src-docs/src/views/list_group/list_group_item_color.tsx
index 46c58e3d680..5dca647ebf7 100644
--- a/src-docs/src/views/list_group/list_group_item_color.tsx
+++ b/src-docs/src/views/list_group/list_group_item_color.tsx
@@ -1,15 +1,17 @@
import React from 'react';
import {
+ EuiSpacer,
+ EuiPanel,
EuiListGroupItem,
EuiListGroup,
-} from '../../../../src/components/list_group';
-import { EuiSpacer } from '../../../../src/components/spacer';
+} from '../../../../src/components/';
+import { EuiThemeProvider } from '../../../../src/services';
export default () => (
<>
-
-
`;
exports[`EuiDataGrid render column actions renders various column actions configurations 3`] = `
-
`;
exports[`EuiDataGrid render column actions renders various column actions configurations 4`] = `
-
`;
diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx
index c0e35c66a44..1ee9c75b647 100644
--- a/src/components/datagrid/data_grid.test.tsx
+++ b/src/components/datagrid/data_grid.test.tsx
@@ -10,11 +10,7 @@ import React, { useEffect, useState } from 'react';
import { mount, ReactWrapper, render } from 'enzyme';
import { EuiDataGrid } from './';
import { EuiDataGridProps } from './data_grid_types';
-import {
- findTestSubject,
- requiredProps,
- takeMountedSnapshot,
-} from '../../test';
+import { findTestSubject, requiredProps } from '../../test';
import { EuiDataGridColumnResizer } from './body/header/data_grid_column_resizer';
import { keys } from '../../services';
import { act } from 'react-dom/test-utils';
@@ -1007,9 +1003,7 @@ describe('EuiDataGrid', () => {
/>
);
- expect(
- takeMountedSnapshot(component.find('EuiTablePagination'))
- ).toMatchSnapshot();
+ expect(component.find('EuiTablePagination').render()).toMatchSnapshot();
});
describe('page navigation', () => {
@@ -1972,7 +1966,7 @@ describe('EuiDataGrid', () => {
component,
`dataGridHeaderCellActionGroup-${col}`
);
- expect(actionGroup).toMatchSnapshot();
+ expect(actionGroup.render()).toMatchSnapshot();
}
});
});
@@ -2642,7 +2636,7 @@ describe('EuiDataGrid', () => {
*/
expect(focusableCell.text()).toEqual('1, A');
expect(focusableCell.getDOMNode()).toBe(document.activeElement);
- expect(takeMountedSnapshot(component)).toMatchSnapshot();
+ expect(component.render()).toMatchSnapshot();
/**
* Disable grid navigation using ENTER
@@ -2657,7 +2651,7 @@ describe('EuiDataGrid', () => {
expect(buttons.at(0).text()).toEqual('1');
expect(buttons.at(1).text()).toEqual('A');
expect(buttons.at(0).getDOMNode()).toBe(document.activeElement); // focus should move to first button
- expect(takeMountedSnapshot(component)).toMatchSnapshot(); // should prove focus lock is on
+ expect(component.render()).toMatchSnapshot(); // should prove focus lock is on
/**
* Enable grid navigation ESCAPE
@@ -2669,7 +2663,7 @@ describe('EuiDataGrid', () => {
focusableCell.simulate('keydown', { key: keys.ARROW_RIGHT });
focusableCell = getFocusableCell(component);
expect(focusableCell.text()).toEqual('1, B'); // grid navigation is enabled again, check that we can move
- expect(takeMountedSnapshot(component)).toMatchSnapshot();
+ expect(component.render()).toMatchSnapshot();
/**
* Disable grid navigation using F2
@@ -2684,7 +2678,7 @@ describe('EuiDataGrid', () => {
expect(buttons.at(0).text()).toEqual('1');
expect(buttons.at(1).text()).toEqual('B');
expect(buttons.at(0).getDOMNode()).toBe(document.activeElement); // focus should move to first button
- expect(takeMountedSnapshot(component)).toMatchSnapshot(); // should prove focus lock is on
+ expect(component.render()).toMatchSnapshot(); // should prove focus lock is on
/**
* Enable grid navigation using F2
@@ -2696,7 +2690,7 @@ describe('EuiDataGrid', () => {
focusableCell.simulate('keydown', { key: keys.ARROW_UP });
focusableCell = getFocusableCell(component);
expect(focusableCell.text()).toEqual('0, B'); // grid navigation is enabled again, check that we can move
- expect(takeMountedSnapshot(component)).toMatchSnapshot();
+ expect(component.render()).toMatchSnapshot();
});
});
});
diff --git a/src/components/flyout/flyout.styles.ts b/src/components/flyout/flyout.styles.ts
index f612ad113cf..d805c46b178 100644
--- a/src/components/flyout/flyout.styles.ts
+++ b/src/components/flyout/flyout.styles.ts
@@ -17,7 +17,7 @@ import {
import { UseEuiTheme } from '../../services';
import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
import { transparentize } from '../../services/color';
-import { euiFormMaxWidth } from '../form/form.styles';
+import { euiFormVariables } from '../form/form.styles';
const euiFlyoutSlideInRight = keyframes`
0% {
@@ -191,6 +191,7 @@ const composeFlyoutSizing = (
size: EuiFlyoutSize
) => {
const euiTheme = euiThemeContext.euiTheme;
+ const form = euiFormVariables(euiThemeContext);
// 1. Calculating the minimum width based on the screen takeover breakpoint
const flyoutSizes = {
@@ -202,7 +203,7 @@ const composeFlyoutSizing = (
m: {
// Calculated for forms plus padding
- min: `${mathWithUnits(euiFormMaxWidth(euiThemeContext), (x) => x + 24)}`,
+ min: `${mathWithUnits(form.maxWidth, (x) => x + 24)}`,
width: '50vw',
max: `${euiTheme.breakpoint.m}px`,
},
diff --git a/src/components/form/form.styles.ts b/src/components/form/form.styles.ts
index e8a257a10bb..e8f048dbb7f 100644
--- a/src/components/form/form.styles.ts
+++ b/src/components/form/form.styles.ts
@@ -8,5 +8,17 @@
import { UseEuiTheme } from '../../services';
-export const euiFormMaxWidth = ({ euiTheme }: UseEuiTheme) =>
- `${euiTheme.base * 25}px`;
+export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
+ const { euiTheme } = euiThemeContext;
+
+ return {
+ maxWidth: `${euiTheme.base * 25}px`,
+ controlHeight: euiTheme.size.xxl,
+ controlCompressedHeight: euiTheme.size.xl,
+ controlPadding: euiTheme.size.m,
+ controlCompressedPadding: euiTheme.size.s,
+ controlBorderRadius: euiTheme.border.radius.medium,
+ controlCompressedBorderRadius: euiTheme.border.radius.small,
+ checkboxBorderRadius: euiTheme.border.radius.small,
+ };
+};
diff --git a/src/components/index.scss b/src/components/index.scss
index 1acd7b1eedb..a868fcc3197 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -19,7 +19,6 @@
@import 'form/index';
@import 'header/index';
@import 'key_pad_menu/index';
-@import 'list_group/index';
@import 'markdown_editor/index';
@import 'modal/index';
@import 'notification/index';
diff --git a/src/components/list_group/__snapshots__/list_group.test.tsx.snap b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
index 109b4c11bab..37664455bca 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -3,28 +3,28 @@
exports[`EuiListGroup is rendered 1`] = `
`;
exports[`EuiListGroup listItems is rendered 1`] = `
`;
exports[`EuiListGroup props bordered is rendered 1`] = `
`;
exports[`EuiListGroup props flush is rendered 1`] = `
`;
exports[`EuiListGroup props gutter size m is rendered 1`] = `
`;
exports[`EuiListGroup props gutter size none is rendered 1`] = `
`;
exports[`EuiListGroup props gutter size s is rendered 1`] = `
`;
exports[`EuiListGroup props maxWidth as a number is rendered 1`] = `
`;
exports[`EuiListGroup props maxWidth as a string is rendered 1`] = `
`;
exports[`EuiListGroup props maxWidth as true is rendered 1`] = `
`;
exports[`EuiListGroup props showToolTips is rendered 1`] = `
`;
exports[`EuiListGroup props wrapText is rendered 1`] = `
`;
diff --git a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
index c18e3b9529d..bce94d5da09 100644
--- a/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group_item.test.tsx.snap
@@ -2,47 +2,15 @@
exports[`EuiListGroupItem is rendered 1`] = `