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 */} - + + ]} + /> + diff --git a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx index 6eca7b58387..f31e9fdb9da 100644 --- a/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx +++ b/src-docs/src/views/collapsible_nav/collapsible_nav_list.tsx @@ -11,6 +11,7 @@ import { import { EuiSpacer } from '../../../../src/components/spacer'; import { EuiButton, EuiButtonIcon } from '../../../../src/components/button'; import { EuiLink } from '../../../../src/components/link'; +import { EuiThemeProvider } from '../../../../src/services'; const deploymentsList: EuiListGroupProps['listItems'] = [ { @@ -62,11 +63,11 @@ export const DeploymentsGroup = ( background="dark" >
- - - - Manage deployments - + + + + Manage deployments +
); diff --git a/src-docs/src/views/list_group/list_group.js b/src-docs/src/views/list_group/list_group.tsx similarity index 100% rename from src-docs/src/views/list_group/list_group.js rename to src-docs/src/views/list_group/list_group.tsx diff --git a/src-docs/src/views/list_group/list_group_example.js b/src-docs/src/views/list_group/list_group_example.js index fa22fcb9ecf..d300221fc52 100644 --- a/src-docs/src/views/list_group/list_group_example.js +++ b/src-docs/src/views/list_group/list_group_example.js @@ -9,7 +9,7 @@ import { EuiPinnableListGroup, EuiCode, } from '../../../../src/components'; -import { EuiPinnableListGroupItem } from './props'; +import { EuiPinnableListGroupItem, EuiListGroupItemExtraAction } from './props'; import ListGroup from './list_group'; const listGroupSource = require('!!raw-loader!./list_group'); @@ -53,7 +53,11 @@ export const ListGroupExample = {

), - props: { EuiListGroup, EuiListGroupItem }, + props: { + EuiListGroup, + EuiListGroupItem, + EuiListGroupItemExtraAction, + }, demo: , snippet: ` @@ -103,7 +107,7 @@ export const ListGroupExample = { title: 'Secondary link actions', source: [ { - type: GuideSectionTypes.JS, + type: GuideSectionTypes.TSX, code: listGroupLinkActionsSource, }, ], @@ -129,6 +133,9 @@ export const ListGroupExample = { alwaysShow: pinned, }} />`, + props: { + EuiListGroupItemExtraAction, + }, }, { title: 'Text wrapping and tooltips', @@ -172,13 +179,11 @@ export const ListGroupExample = { text: ( <>

- EuiListGroupItems will inherit the color from their - element type whether it is a button,{' '} - anchor, or span. You can - enforce a different color of primary,{' '} - text, or subdued with the{' '} - color prop. Or provide the prop directly to{' '} - EuiListGroup. + EuiListGroupItems will get by default the color{' '} + text. You can enforce a different color of{' '} + primary, text, or{' '} + subdued with the color prop. + Or provide the prop directly to EuiListGroup.

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 () => ( <> - + {}} @@ -25,8 +27,12 @@ export default () => ( - - - + + + + + + + ); diff --git a/src-docs/src/views/list_group/list_group_link_actions.js b/src-docs/src/views/list_group/list_group_link_actions.tsx similarity index 87% rename from src-docs/src/views/list_group/list_group_link_actions.js rename to src-docs/src/views/list_group/list_group_link_actions.tsx index cc91b32cda3..63bff6c90ee 100644 --- a/src-docs/src/views/list_group/list_group_link_actions.js +++ b/src-docs/src/views/list_group/list_group_link_actions.tsx @@ -4,10 +4,10 @@ import { EuiListGroup, EuiListGroupItem } from '../../../../src/components'; import { useGeneratedHtmlId } from '../../../../src/services'; export default () => { - const [favorite1, setFavorite1] = useState(undefined); - const [favorite2, setFavorite2] = useState('link2'); - const [favorite3, setFavorite3] = useState(undefined); - const [favorite4, setFavorite4] = useState(undefined); + const [favorite1, setFavorite1] = useState(undefined); + const [favorite2, setFavorite2] = useState('link2'); + const [favorite3, setFavorite3] = useState(undefined); + const [favorite4, setFavorite4] = useState(undefined); const listGroupLinkId__1 = useGeneratedHtmlId({ prefix: 'listGroupLink', @@ -33,28 +33,28 @@ export default () => { const link1Clicked = () => { setFavorite1(favorite1 === 'link1' ? undefined : 'link1'); if (favorite1 === undefined) { - document.activeElement.blur(); + (document.activeElement as HTMLElement).blur(); } }; const link2Clicked = () => { setFavorite2(favorite2 === 'link2' ? undefined : 'link2'); if (favorite2 === undefined) { - document.activeElement.blur(); + (document.activeElement as HTMLElement).blur(); } }; const link3Clicked = () => { setFavorite3(favorite3 === 'link3' ? undefined : 'link3'); if (favorite3 === undefined) { - document.activeElement.blur(); + (document.activeElement as HTMLElement).blur(); } }; const link4Clicked = () => { setFavorite4(favorite4 === 'link4' ? undefined : 'link4'); if (favorite3 === undefined) { - document.activeElement.blur(); + (document.activeElement as HTMLElement).blur(); } }; diff --git a/src-docs/src/views/list_group/list_group_links.js b/src-docs/src/views/list_group/list_group_links.tsx similarity index 85% rename from src-docs/src/views/list_group/list_group_links.js rename to src-docs/src/views/list_group/list_group_links.tsx index c0c5e7198ac..34fb9abeaee 100644 --- a/src-docs/src/views/list_group/list_group_links.js +++ b/src-docs/src/views/list_group/list_group_links.tsx @@ -7,36 +7,31 @@ const myContent = [ label: 'First link', href: '#/display/list-group', iconType: 'calendar', - size: 's', }, { label: 'This is an active link with very long label that truncates', href: '#/display/list-group', isActive: true, iconType: 'clock', - size: 's', }, { label: 'Third link is disabled', href: '#/display/list-group', isDisabled: true, iconType: 'compute', - size: 's', }, { label: 'Fourth link', href: '#/display/list-group', iconType: 'copyClipboard', - size: 's', }, { label: 'Fifth link', href: '#/display/list-group', iconType: 'crosshairs', - size: 's', }, ]; export default () => { - return ; + return ; }; diff --git a/src-docs/src/views/list_group/pinnable_list_group.tsx b/src-docs/src/views/list_group/pinnable_list_group.tsx index bd1fac31b95..78eecbf09f5 100644 --- a/src-docs/src/views/list_group/pinnable_list_group.tsx +++ b/src-docs/src/views/list_group/pinnable_list_group.tsx @@ -9,7 +9,7 @@ const someListItems: EuiPinnableListGroupItemProps[] = [ { id: '1', label: 'Label with iconType', - iconType: 'stop', + iconType: 'home', pinned: false, }, { @@ -22,6 +22,7 @@ const someListItems: EuiPinnableListGroupItemProps[] = [ label: 'Link with href and custom pin titles', href: '/#', pinned: false, + color: 'primary', }, { id: '3', diff --git a/src-docs/src/views/list_group/props.tsx b/src-docs/src/views/list_group/props.tsx index fe8669ddc6b..9e860cb0014 100644 --- a/src-docs/src/views/list_group/props.tsx +++ b/src-docs/src/views/list_group/props.tsx @@ -1,7 +1,14 @@ import React, { FunctionComponent } from 'react'; -import { EuiPinnableListGroupItemProps } from '../../../../src/components/list_group'; +import { + EuiPinnableListGroupItemProps, + EuiListGroupItemExtraActionProps, +} from '../../../../src/components/list_group'; export const EuiPinnableListGroupItem: FunctionComponent = () => (

); + +export const EuiListGroupItemExtraAction: FunctionComponent = () => ( +
+); diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap index 83964508177..8dc7a58ca01 100644 --- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap +++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap @@ -138,784 +138,319 @@ exports[`EuiDataGrid pagination renders 1`] = ` exports[`EuiDataGrid render column actions renders various column actions configurations 1`] = `
    - - } - onClick={[Function]} - showToolTip={false} - size="xs" - wrapText={false} +
  • -
  • - -
    • -     - , - } - } + - } - onClick={[Function]} - showToolTip={false} - size="xs" - wrapText={false} + + Hide column + + + +
  • -
  • - -
    • -     - , - } - } + - } - onClick={[Function]} - showToolTip={false} - size="xs" - wrapText={false} + + Sort A-Z + + + +
  • -
  • - -
    • -     - - } - onClick={[Function]} - showToolTip={false} - size="xs" - wrapText={false} + + Sort Z-A + + + +
  • -
  • - -
    • -     - - } - onClick={[Function]} - showToolTip={false} - size="xs" - wrapText={false} + + Move left + + + +
  • -
  • - -
    • -     + Move right + + +
`; exports[`EuiDataGrid render column actions renders various column actions configurations 2`] = `
    - -
  • - -
    • -     + test + + +
`; exports[`EuiDataGrid render column actions renders various column actions configurations 3`] = `
    - , - } - } - /> - } - onClick={[Function]} - showToolTip={false} - size="xs" - wrapText={false} +
  • -
  • - -
    • -     - , - } - } + - } - onClick={[Function]} - showToolTip={false} - size="xs" - wrapText={false} + + Sort A-Z + + + +
  • -
  • - -
    • -     - + + +
  • -
  • - -
    • -     + test + + +
`; exports[`EuiDataGrid render column actions renders various column actions configurations 4`] = `
    - -
  • - -
    • -     - + + +
  • -
  • - -
    • -     - + + +
  • -
  • - -
    • -     - + + +
  • -
  • - -
    • -     - + + +
  • -
  • - -
    • -     - + + +
  • -
  • - -
    • -     + test + + +
`; 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`] = `