From d8aeabdf2c7fb0b4c3e0abf7951aa83f4b63b824 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 11 Jan 2021 15:26:17 -0500 Subject: [PATCH 1/3] Fixing up examples - Swapped actual examples between Sizes and Single panel - Added some more to a few snippets --- .../context_menu/context_menu_example.js | 72 +++++++++++-------- .../src/views/context_menu/single_panel.js | 2 +- src-docs/src/views/context_menu/small.js | 21 ++---- 3 files changed, 52 insertions(+), 43 deletions(-) diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js index 5378ccd6c19..233f47ee452 100644 --- a/src-docs/src/views/context_menu/context_menu_example.js +++ b/src-docs/src/views/context_menu/context_menu_example.js @@ -15,24 +15,44 @@ import { import ContextMenu from './context_menu'; const contextMenuSource = require('!!raw-loader!./context_menu'); const contextMenuHtml = renderToHtml(ContextMenu); -const contextMenuSnippet = `, + onClick: () => { + closePopover(); + }, + }, + ] + } + ]} />`; import SinglePanel from './single_panel'; const singlePanelSource = require('!!raw-loader!./single_panel'); const singlePanelHtml = renderToHtml(SinglePanel); -const singlePanelSnippet = ` + This is a context menu item + + ]} />`; import Small from './small'; const smallSizeSource = require('!!raw-loader!./small'); const smallSizeHtml = renderToHtml(SinglePanel); -const smallSnippet = ``; import ContentPanel from './content_panel'; @@ -46,10 +66,6 @@ const contentPanelSnippet = ` import ContextMenuWithContent from './context_menu_with_content'; const contextMenuWithContentSource = require('!!raw-loader!./context_menu_with_content'); const contextMenuWithContentHtml = renderToHtml(ContextMenuWithContent); -const contextMenuWithContentSnippet = ``; export const ContextMenuExample = { title: 'Context menu', @@ -81,50 +97,51 @@ export const ContextMenuExample = { demo: , }, { - title: 'With single panel', + title: 'Sizes', source: [ { type: GuideSectionTypes.JS, - code: singlePanelSource, + code: smallSizeSource, }, { type: GuideSectionTypes.HTML, - code: singlePanelHtml, + code: smallSizeHtml, }, ], text: (

- Use EuiContextMenuPanel for simple, non-nested - context menus. The below pagination example has no nesting and no - title. + EuiContextMenu supports a small and medium{' '} + size. The default size is medium,{' '} + m, and should be used for most menus and major + actions such as top application menus. Use the smaller size,{' '} + s, for a more compressed version containing minor + actions or repeated menus like in EuiTable{' '} + pagination.

), - snippet: singlePanelSnippet, + snippet: smallSnippet, demo: , }, { - title: 'Sizes', + title: 'With single panel', source: [ { type: GuideSectionTypes.JS, - code: smallSizeSource, + code: singlePanelSource, }, { type: GuideSectionTypes.HTML, - code: smallSizeHtml, + code: singlePanelHtml, }, ], text: (

- EuiContextMenu supports a small and medium{' '} - size. Use the default size m for - major actions such as Share and Export which appear - in top application menus. Use the smaller size s{' '} - for actions that affect only a single item or are repeated like in{' '} - EuiTable actions. + Use EuiContextMenuPanel for simple, non-nested + context menus. The below pagination example has no nesting and no + title.

), - snippet: smallSnippet, + snippet: singlePanelSnippet, demo: , }, { @@ -186,7 +203,6 @@ export const ContextMenuExample = {

), - snippet: contextMenuWithContentSnippet, demo: , }, ], diff --git a/src-docs/src/views/context_menu/single_panel.js b/src-docs/src/views/context_menu/single_panel.js index 37a77afa2fb..bec8d6b933b 100644 --- a/src-docs/src/views/context_menu/single_panel.js +++ b/src-docs/src/views/context_menu/single_panel.js @@ -80,7 +80,7 @@ export default () => { closePopover={closePopover} panelPaddingSize="none" anchorPosition="downLeft"> - + ); }; diff --git a/src-docs/src/views/context_menu/small.js b/src-docs/src/views/context_menu/small.js index fe7253addc7..ec4e64a6a7e 100644 --- a/src-docs/src/views/context_menu/small.js +++ b/src-docs/src/views/context_menu/small.js @@ -19,27 +19,20 @@ export default () => { }; const items = [ - { - closePopover(); - }}> + Copy , - { - closePopover(); - }}> + Edit , + + Share + , ]; const button = ( - Small context menu + Click to show a single panel ); @@ -51,7 +44,7 @@ export default () => { closePopover={closePopover} panelPaddingSize="none" anchorPosition="downLeft"> - + ); }; From 502cc48f11287c7a9860137f9e1c3ac54c94eb55 Mon Sep 17 00:00:00 2001 From: cchaos Date: Mon, 11 Jan 2021 15:55:12 -0500 Subject: [PATCH 2/3] Creating a specific small title class instead of relying on nesting - Also updated the euiPopoverTitle mixin to accept a size prop and re-created it for Amsterdam for better adjustments. --- .../__snapshots__/context_menu.test.tsx.snap | 4 ++-- .../context_menu_panel.test.tsx.snap | 4 ++-- src/components/context_menu/_context_menu.scss | 7 ------- .../context_menu/_context_menu_panel.scss | 5 +++++ .../context_menu/context_menu_panel.tsx | 16 ++++++++++------ src/global_styling/mixins/_popover.scss | 11 +++++++++-- .../global_styling/mixins/_index.scss | 1 + .../global_styling/mixins/_popover.scss | 5 +++++ .../eui-amsterdam/overrides/_context_menu.scss | 5 ----- src/themes/eui-amsterdam/overrides/_index.scss | 1 - src/themes/eui-amsterdam/overrides/_popover.scss | 7 ------- 11 files changed, 34 insertions(+), 32 deletions(-) create mode 100644 src/themes/eui-amsterdam/global_styling/mixins/_popover.scss delete mode 100644 src/themes/eui-amsterdam/overrides/_context_menu.scss diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap index ee5e10eaba8..d70dddefe35 100644 --- a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap +++ b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap @@ -376,11 +376,11 @@ exports[`EuiContextMenu props size s is rendered 1`] = ` class="euiContextMenu euiContextMenu--small" >
+`; + +exports[`EuiContextMenuItem props size s is rendered 1`] = ` + +`; + exports[`EuiContextMenuItem props target is rendered 1`] = ` `; +exports[`EuiContextMenuPanel props size m is rendered 1`] = ` +
+
+ + Title + +
+
+
+
+
+`; + +exports[`EuiContextMenuPanel props size s is rendered 1`] = ` +
+
+ + Title + +
+
+
+
+
+`; + exports[`EuiContextMenuPanel props title is rendered 1`] = `
{ expect(takeMountedSnapshot(component)).toMatchSnapshot(); }); }); + describe('size', () => { SIZES.forEach((size) => { it(`${size} is rendered`, () => { diff --git a/src/components/context_menu/context_menu.tsx b/src/components/context_menu/context_menu.tsx index 4b872732b5c..d45c87d0122 100644 --- a/src/components/context_menu/context_menu.tsx +++ b/src/components/context_menu/context_menu.tsx @@ -66,6 +66,9 @@ export interface EuiContextMenuPanelDescriptor { content?: ReactNode; width?: number; initialFocusedItemIndex?: number; + /** + * Alters the size of the items and the title + */ size?: typeof SIZES[number]; } @@ -80,6 +83,9 @@ export type EuiContextMenuProps = CommonProps & Omit, 'style'> & { panels?: EuiContextMenuPanelDescriptor[]; initialPanelId?: EuiContextMenuPanelId; + /** + * Alters the size of the items and the title + */ size?: typeof SIZES[number]; }; diff --git a/src/components/context_menu/context_menu_item.test.tsx b/src/components/context_menu/context_menu_item.test.tsx index a49f9da6f37..f19b1b0599c 100644 --- a/src/components/context_menu/context_menu_item.test.tsx +++ b/src/components/context_menu/context_menu_item.test.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { render, shallow, mount } from 'enzyme'; import { requiredProps } from '../../test/required_props'; -import { EuiContextMenuItem } from './context_menu_item'; +import { EuiContextMenuItem, SIZES } from './context_menu_item'; describe('EuiContextMenuItem', () => { test('is rendered', () => { @@ -51,6 +51,16 @@ describe('EuiContextMenuItem', () => { }); }); + describe('size', () => { + SIZES.forEach((size) => { + it(`${size} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + describe('onClick', () => { test('renders a button', () => { const component = render( diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx index b00ff68647d..31a6fce10f6 100644 --- a/src/components/context_menu/context_menu_item.tsx +++ b/src/components/context_menu/context_menu_item.tsx @@ -71,6 +71,9 @@ export interface EuiContextMenuItemProps extends CommonProps { * How to align icon with content of button */ layoutAlign?: EuiContextMenuItemLayoutAlignment; + /** + * Reduce the size to `s` when in need of a more compressed menu + */ size?: typeof SIZES[number]; } diff --git a/src/components/context_menu/context_menu_panel.test.tsx b/src/components/context_menu/context_menu_panel.test.tsx index b4d10250b87..e799ebbe183 100644 --- a/src/components/context_menu/context_menu_panel.test.tsx +++ b/src/components/context_menu/context_menu_panel.test.tsx @@ -21,7 +21,7 @@ import React from 'react'; import { render, mount, ReactWrapper } from 'enzyme'; import { findTestSubject, requiredProps } from '../../test'; -import { EuiContextMenuPanel } from './context_menu_panel'; +import { EuiContextMenuPanel, SIZES } from './context_menu_panel'; import { EuiContextMenuItem } from './context_menu_item'; @@ -59,6 +59,18 @@ describe('EuiContextMenuPanel', () => { }); }); + describe('size', () => { + SIZES.forEach((size) => { + it(`${size} is rendered`, () => { + const component = render( + + ); + + expect(component).toMatchSnapshot(); + }); + }); + }); + describe('onClose', () => { test('renders a button as a title', () => { const component = render( diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx index 4e7639664fa..a82b34751d7 100644 --- a/src/components/context_menu/context_menu_panel.tsx +++ b/src/components/context_menu/context_menu_panel.tsx @@ -61,6 +61,9 @@ export interface EuiContextMenuPanelProps { transitionDirection?: EuiContextMenuPanelTransitionDirection; transitionType?: EuiContextMenuPanelTransitionType; watchedItemProps?: string[]; + /** + * Alters the size of the items and the title + */ size?: typeof SIZES[number]; } @@ -496,7 +499,7 @@ export class EuiContextMenuPanel extends Component { MenuItem.type === EuiContextMenuItem ? cloneElement(MenuItem, { buttonRef: this.menuItemRef.bind(this, index), - size: this.props.size, + size, }) : MenuItem )