From b02e168c12216b3b044ae8c680500be64a238f25 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira
-`;
-
-exports[`EuiDataGrid render column actions renders various column actions configurations 2`] = `
-
`;
exports[`EuiListGroup listItems 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/_index.scss b/src/components/list_group/_index.scss
index d8aaf029726..3c706c3793c 100644
--- a/src/components/list_group/_index.scss
+++ b/src/components/list_group/_index.scss
@@ -1,5 +1,5 @@
@import 'variables';
-@import 'list_group';
+// @import 'list_group';
@import 'list_group_item';
@import 'pinnable_list_group/index';
diff --git a/src/components/list_group/_list_group.scss b/src/components/list_group/_list_group.scss
index 58b32426526..6b22594e7c3 100644
--- a/src/components/list_group/_list_group.scss
+++ b/src/components/list_group/_list_group.scss
@@ -4,27 +4,9 @@
* with links flush to the sides.
*/
-.euiListGroup {
- &.euiListGroup-flush {
- padding: 0;
- border: none;
- }
-
- &.euiListGroup-bordered {
- border-radius: $euiBorderRadius;
- border: $euiBorderThin;
- }
-}
-
-.euiListGroup-maxWidthDefault {
- max-width: $euiFormMaxWidth;
-}
-
// Gutter Sizes
@each $gutterName, $gutterSize in $euiListGroupGutterTypes {
.euiListGroup--#{$gutterName} {
- padding: $gutterSize;
-
.euiListGroupItem:not(:first-of-type) {
margin-top: $gutterSize;
}
diff --git a/src/components/list_group/list_group.styles.ts b/src/components/list_group/list_group.styles.ts
new file mode 100644
index 00000000000..b8dcef3a4bd
--- /dev/null
+++ b/src/components/list_group/list_group.styles.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+import { euiFormVariables } from '../form/form.styles';
+
+export const euiListGroupStyles = (euiThemeContext: UseEuiTheme) => {
+ const euiTheme = euiThemeContext.euiTheme;
+ const form = euiFormVariables(euiThemeContext);
+
+ return {
+ // Base
+ euiListGroup: css``,
+ // Variants
+ flush: css`
+ padding: 0;
+ border: none;
+ `,
+ bordered: css`
+ border-radius: ${euiTheme.border.radius.small};
+ border: ${euiTheme.border.thin};
+ `,
+ maxWidthDefault: css`
+ ${logicalCSS('max-width', form.maxWidth)};
+ `,
+ // Gutter sizes
+ none: css``,
+ s: css`
+ padding: ${euiTheme.size.s};
+ `,
+ m: css`
+ padding: ${euiTheme.size.base};
+ `,
+ };
+};
diff --git a/src/components/list_group/list_group.test.tsx b/src/components/list_group/list_group.test.tsx
index 1c7f6107310..9be3c460384 100644
--- a/src/components/list_group/list_group.test.tsx
+++ b/src/components/list_group/list_group.test.tsx
@@ -9,6 +9,7 @@
import React from 'react';
import { render } from 'enzyme';
import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
import { EuiListGroup, GUTTER_SIZES } from './list_group';
import { EuiListGroupItemProps } from './list_group_item';
@@ -44,6 +45,8 @@ const someListItems: EuiListGroupItemProps[] = [
];
describe('EuiListGroup', () => {
+ shouldRenderCustomStyles(
{
+ return `
+ ${logicalCSS('width', size)};
+ ${logicalCSS('height', size)};
+ line-height: ${size};
+ font-size: ${fontSize};
+ `;
+};
+
+export const euiListGroupItemStyles = ({ euiTheme }: UseEuiTheme) => ({
+ // Base
+ euiListGroupItem: css`
+ // Ensures it never scales down below its intended size
+ flex-shrink: 0;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ vertical-align: middle;
+ background-size: cover;
+ ${logicalTextAlignCSS('center')};
+ ${logicalCSS('overflow-x', 'hidden')}
+ // Explicitly state weight so it doesn't get overridden by inheritance
+ font-weight: ${euiTheme.font.weight.medium};
+ `,
+ // Variants
+ plain: css`
+ background-color: ${euiTheme.colors.emptyShade};
+ `,
+ subdued: css`
+ background-color: ${euiTheme.colors.lightestShade};
+ `,
+ user: css`
+ border-radius: 50%;
+ `,
+ space: css`
+ border-radius: ${euiTheme.border.radius.medium};
+ `,
+ // States
+ isDisabled: css`
+ cursor: not-allowed;
+ filter: grayscale(100%);
+ `,
+ // Sizes
+ s: css(
+ _avatarSize({
+ size: euiTheme.size.l,
+ fontSize: euiTheme.size.m,
+ })
+ ),
+ m: css(
+ _avatarSize({
+ size: euiTheme.size.xl,
+ fontSize: `calc(${euiTheme.size.base} * 0.9)`,
+ })
+ ),
+ l: css(
+ _avatarSize({
+ size: euiTheme.size.xxl,
+ fontSize: `calc(${euiTheme.size.l} * 0.8)`,
+ })
+ ),
+ xl: css(
+ _avatarSize({
+ size: `calc(${euiTheme.size.base} * 4)`,
+ fontSize: `calc(${euiTheme.size.xl} * 0.8)`,
+ })
+ ),
+});
diff --git a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
index aa7c6a98106..2ad984c418c 100644
--- a/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
+++ b/src/components/list_group/pinnable_list_group/__snapshots__/pinnable_list_group.test.tsx.snap
@@ -3,7 +3,7 @@
exports[`EuiPinnableListGroup can have custom pin icon titles 1`] = `
-
-`;
-
-exports[`EuiDataGrid render column actions renders various column actions configurations 3`] = `
-
-
+`;
+
+exports[`EuiDataGrid render column actions renders various column actions configurations 2`] = `
+
+
+`;
+
+exports[`EuiDataGrid render column actions renders various column actions configurations 3`] = `
+
+
+`;
+
+exports[`EuiDataGrid render column actions renders various column actions configurations 4`] = `
+
+
-`;
-
-exports[`EuiDataGrid render column actions renders various column actions configurations 4`] = `
-
-
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 36f3973ec14..beb98fd4c10 100644
--- a/src/components/list_group/__snapshots__/list_group.test.tsx.snap
+++ b/src/components/list_group/__snapshots__/list_group.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`EuiListGroup listItems is rendered 1`] = `
class="euiListGroup emotion-euiListGroup-s-maxWidthDefault"
>
-
-
-`;
-
-exports[`EuiDataGrid render column actions renders various column actions configurations 3`] = `
-
-
-`;
-
-exports[`EuiDataGrid render column actions renders various column actions configurations 4`] = `
-
-
+
+`;
+
+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();
});
});
});
From 9452c1580597b4f5784ad48387f5f36f24a9db8f Mon Sep 17 00:00:00 2001
From: Constance Chen