From 5d7385c93410de7194c93de0e24d7e3d54878c08 Mon Sep 17 00:00:00 2001 From: Caroline Horn <549577+cchaos@users.noreply.github.com> Date: Tue, 3 Nov 2020 13:08:20 -0500 Subject: [PATCH] [EuiPanel] Expanding usages for layout purposes (#4194) * [EuiPanel] Added `color` and `borderRadius` options * [EuiPanel] `hasShadow` defaults to `true` but is the slight version - color and radius modifiers are now in the mixin * Fix up usages * Updated docs and added deprecation notices --- CHANGELOG.md | 3 + .../drag_and_drop/drag_and_drop_complex.js | 2 +- src-docs/src/views/modal/guidelines.js | 22 +-- src-docs/src/views/panel/panel.js | 8 +- .../panel/{panel_hover.js => panel_color.js} | 4 +- src-docs/src/views/panel/panel_example.js | 162 +++++++++++++----- src-docs/src/views/panel/panel_grow.js | 38 ++++ src-docs/src/views/panel/panel_shadow.js | 17 ++ .../card/__snapshots__/card.test.tsx.snap | 32 ++-- src/components/card/_card.scss | 2 +- src/components/card/card.tsx | 6 +- .../checkable_card.test.tsx.snap | 4 +- .../card/checkable_card/checkable_card.tsx | 2 + .../__snapshots__/combo_box.test.tsx.snap | 2 +- .../combo_box_options_list.tsx | 1 + .../comment_list/_comment_event.scss | 2 + src/components/drag_and_drop/_droppable.scss | 5 + .../__snapshots__/super_select.test.tsx.snap | 6 +- .../__snapshots__/page_content.test.tsx.snap | 2 +- .../panel/__snapshots__/panel.test.tsx.snap | 82 ++++++++- src/components/panel/_panel.scss | 2 +- src/components/panel/panel.test.tsx | 38 +++- src/components/panel/panel.tsx | 78 ++++++--- .../__snapshots__/popover.test.tsx.snap | 18 +- src/components/popover/popover.tsx | 1 + src/components/table/_responsive.scss | 12 +- src/global_styling/mixins/_panel.scss | 26 +-- src/global_styling/variables/_borders.scss | 1 + src/global_styling/variables/_form.scss | 2 +- src/global_styling/variables/_panel.scss | 15 +- .../global_styling/mixins/_panel.scss | 31 ++-- .../global_styling/variables/_index.scss | 3 +- .../global_styling/variables/_panel.scss | 9 + 33 files changed, 475 insertions(+), 163 deletions(-) rename src-docs/src/views/panel/{panel_hover.js => panel_color.js} (54%) create mode 100644 src-docs/src/views/panel/panel_grow.js create mode 100644 src-docs/src/views/panel/panel_shadow.js create mode 100644 src/themes/eui-amsterdam/global_styling/variables/_panel.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index fdbb6584fab..88b23091143 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,9 @@ - Added `labelWidth` and `descriptionDisplay` props to `EuiSuggestItem` ([#4180](https://github.com/elastic/eui/pull/4180)) - Added `float` and `margin` props to `EuiImage` ([#4209](https://github.com/elastic/eui/pull/4209)) +- Added `color` and `borderRadius` props to `EuiPanel` ([#4194](https://github.com/elastic/eui/pull/4194)) +- Updated the use case for the `EuiPanel` prop `hasShadow` ([#4194](https://github.com/elastic/eui/pull/4194)) +- Deprecated the `onClick`, `betaBadgeLabel`, `betaBadgeTooltipContent`, and `betaBadgeTitle` props of `EuiPanel` ([#4194](https://github.com/elastic/eui/pull/4194)) **Bug fixes** diff --git a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js index 48c03dfd079..86709b35d85 100644 --- a/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js +++ b/src-docs/src/views/drag_and_drop/drag_and_drop_complex.js @@ -78,7 +78,7 @@ export default () => { disableInteractiveElementBlocking // Allows button to be drag handle > {(provided) => ( - + (
- + A modal title should be one line @@ -101,7 +101,7 @@ export default () => ( type="do" text="Do. A save action is a good use case for a modal. The meaning is clear and the content is simple."> - + Save dashboard @@ -127,7 +127,7 @@ export default () => ( type="dont" text="Don't. Modals aren't the best design solution for multiple steps or complex user input. An in-page form is more appropriate."> - + Add a team member @@ -192,7 +192,7 @@ export default () => ( type="do" text="Do. Use a modal for confirmation when the user might lose data. For the body text, use one to two short sentences that explain the consequences."> - + Save changes before leaving? @@ -218,7 +218,7 @@ export default () => ( text="Don't. Confirmations aren't good for messages. Toasts are best for success messages because they are less disruptive. Error and warning messages often appear directly on the page."> - + Great! @@ -244,7 +244,7 @@ export default () => ( text=" Do. Use the same action verbs in the header and button text. "> - + Refresh field list? @@ -268,7 +268,7 @@ export default () => ( text='Don't use a vague header such as "Are you sure?" or the button labels "Yes" and "No." '> - + Are you sure you want to refresh this field list? @@ -299,7 +299,7 @@ export default () => ( text="Do. Asking users to delete a single item should include the item name in the title, if possible. Use single quotes around the name if it helps clarify meaning."> - + Delete pipeline 'MyPipeline'? @@ -325,7 +325,7 @@ export default () => ( type="do" panel={false} text="Do. For bulk actions, include the number of items in the title."> - + Delete 6 pipelines? @@ -356,7 +356,7 @@ export default () => ( text="Do. Here the header and body are enough. The modal asks the user whether to remove an index pattern— data won't be lost."> - + Remove index pattern? @@ -376,7 +376,7 @@ export default () => ( panel={false} text="Don't write body text that simply repeats the title. It doesn't add value."> - + Remove index pattern? diff --git a/src-docs/src/views/panel/panel.js b/src-docs/src/views/panel/panel.js index 1e0c2bf0ee7..68f2faeb400 100644 --- a/src-docs/src/views/panel/panel.js +++ b/src-docs/src/views/panel/panel.js @@ -17,7 +17,7 @@ export default () => ( - paddingSize="m" + paddingSize="m" (default) @@ -25,11 +25,5 @@ export default () => ( paddingSize="l" - - - - - paddingSize="l", hasShadow -
); diff --git a/src-docs/src/views/panel/panel_hover.js b/src-docs/src/views/panel/panel_color.js similarity index 54% rename from src-docs/src/views/panel/panel_hover.js rename to src-docs/src/views/panel/panel_color.js index 8d121097d9a..559cc523476 100644 --- a/src-docs/src/views/panel/panel_hover.js +++ b/src-docs/src/views/panel/panel_color.js @@ -3,7 +3,7 @@ import React from 'react'; import { EuiPanel } from '../../../../src/components'; export default () => ( - {}}> -

Hover me to see my hover state.

+ +

I am a simple shaded box

 ); diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js index bdc6649ff5c..516a6258592 100644 --- a/src-docs/src/views/panel/panel_example.js +++ b/src-docs/src/views/panel/panel_example.js @@ -6,7 +6,13 @@ import { renderToHtml } from '../../services'; import { GuideSectionTypes } from '../../components'; -import { EuiCode, EuiPanel } from '../../../../src/components'; +import { + EuiCode, + EuiPanel, + EuiSpacer, + EuiText, + EuiCallOut, +} from '../../../../src/components'; import { panelConfig } from './playground'; @@ -14,30 +20,63 @@ import Panel from './panel'; const panelSource = require('!!raw-loader!./panel'); const panelHtml = renderToHtml(Panel); -import PanelHover from './panel_hover'; -const panelHoverSource = require('!!raw-loader!./panel_hover'); -const panelHoverHtml = renderToHtml(PanelHover); +import PanelShadow from './panel_shadow'; +const panelShadowSource = require('!!raw-loader!./panel_shadow'); +const panelShadowHtml = renderToHtml(PanelShadow); + +import PanelColor from './panel_color'; +const panelColorSource = require('!!raw-loader!./panel_color'); +const panelColorHtml = renderToHtml(PanelColor); import PanelBadge from './panel_badge'; const panelBadgeSource = require('!!raw-loader!./panel_badge'); const panelBadgeHtml = renderToHtml(PanelBadge); +import PanelGrow from './panel_grow'; +const panelGrowSource = require('!!raw-loader!./panel_grow'); +const panelGrowHtml = renderToHtml(PanelGrow); + const panelSnippet = ` `; -const panelHoverSnippet = ` - +const panelShadowSnippet = ` + +`; + +const panelColorSnippet = ` + `; -const panelBadgeSnippet = ` - +const panelGrowSnippet = ` + `; export const PanelExample = { title: 'Panel', + intro: ( + <> + +

+ EuiPanel is a building block component. It is + commonly used as a base for other larger components like{' '} + + EuiPage + {' '} + and{' '} + + EuiPopover + + . Use it as a layout helper for containing content. +

+ + + + + ), sections: [ { + title: 'Padding', source: [ { type: GuideSectionTypes.JS, @@ -49,72 +88,111 @@ export const PanelExample = { }, ], text: ( -

- EuiPanel is a simple wrapper component to add depth - to a contained layout. It is commonly used as a base for other larger - components like{' '} - - EuiPage - {' '} - and{' '} - - EuiPopover - - . -

+

The most basic use is to simply add padding around your content.

), props: { EuiPanel }, snippet: panelSnippet, demo: , }, { - title: 'Panel can be hoverable', + title: 'Shadow', source: [ { type: GuideSectionTypes.JS, - code: panelHoverSource, + code: panelShadowSource, }, { type: GuideSectionTypes.HTML, - code: panelHoverHtml, + code: panelShadowHtml, }, ], text: (

- Adding an onClick handler to the{' '} - EuiPanel will turn the wrapping element into a button - to allow for interaction. + EuiPanel can give depth to your container with{' '} + hasShadow.

), - snippet: panelHoverSnippet, - demo: , + props: { EuiPanel }, + snippet: panelShadowSnippet, + demo: , }, { - title: 'Panel beta badges', + title: 'Colors and corners', source: [ { type: GuideSectionTypes.JS, - code: panelBadgeSource, + code: panelColorSource, }, { type: GuideSectionTypes.HTML, - code: panelBadgeHtml, + code: panelColorHtml, }, ], text: (

- Similar to{' '} - - EuiCard - - , panels can also accept an{' '} - - EuiBetaBadge - - . + Use color to add background shading to your panel + and provide an additional helpful aesthetic to your container in + context. Be mindful to use color sparingly. You can also remove the + rounded corners depending on the placement of your panel with{' '} + {'borderRadius="none"'}

), - snippet: panelBadgeSnippet, + props: { EuiPanel }, + snippet: panelColorSnippet, + demo: , + }, + { + title: 'Growing height', + source: [ + { + type: GuideSectionTypes.JS, + code: panelGrowSource, + }, + { + type: GuideSectionTypes.HTML, + code: panelGrowHtml, + }, + ], + text: ( +

+ Using EuiPanel in an{' '} + + EuiFlexItem + {' '} + will always grow its height to match. This is great for rows of + panels. However, you can also turn this feature off by setting{' '} + {'grow={false}'}. +

+ ), + props: { EuiPanel }, + snippet: panelGrowSnippet, + demo: , + }, + { + title: 'Panels could be hoverable and have beta badges', + source: [ + { + type: GuideSectionTypes.JS, + code: panelBadgeSource, + }, + { + type: GuideSectionTypes.HTML, + code: panelBadgeHtml, + }, + ], + text: ( + +

+ The ability to add onClick and{' '} + beta badges is being deprecated. We + strongly advise using{' '} + + EuiCard + {' '} + for this type of functionality. +

+ + ), demo: , }, ], diff --git a/src-docs/src/views/panel/panel_grow.js b/src-docs/src/views/panel/panel_grow.js new file mode 100644 index 00000000000..6e5bc789e16 --- /dev/null +++ b/src-docs/src/views/panel/panel_grow.js @@ -0,0 +1,38 @@ +import React from 'react'; + +import { + EuiPanel, + EuiFlexGroup, + EuiFlexItem, + EuiText, +} from '../../../../src/components'; + +export default () => ( + + + + +

+ I am some panel content... +
...
...
+ whose content is tall +

+ + + + + + +

I am some panel content... whose content will grow

+ + + + + + +

I am some panel content... whose content did not grow

+ + + + +); diff --git a/src-docs/src/views/panel/panel_shadow.js b/src-docs/src/views/panel/panel_shadow.js new file mode 100644 index 00000000000..a32a1f1635f --- /dev/null +++ b/src-docs/src/views/panel/panel_shadow.js @@ -0,0 +1,17 @@ +import React from 'react'; + +import { EuiPanel, EuiCode, EuiSpacer } from '../../../../src/components'; + +export default () => ( +
+ + {'hasShadow={true}'} + + + + + + {'hasShadow={false}'} + +
+); diff --git a/src/components/card/__snapshots__/card.test.tsx.snap b/src/components/card/__snapshots__/card.test.tsx.snap index 4500c6e8f0f..60ba4aa9a83 100644 --- a/src/components/card/__snapshots__/card.test.tsx.snap +++ b/src/components/card/__snapshots__/card.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiCard is rendered 1`] = `
= ({ const classes = classNames( 'euiCard', + 'euiCard--shadow', // For matching EuiPanel mixin + 'euiCard--borderRadiusMedium', // For matching EuiPanel mixin paddingSizeToClassNameMap[paddingSize], displayToClassNameMap[display], textAlignToClassNameMap[textAlign], layoutToClassNameMap[layout], { 'euiCard--isClickable': - onClick || href || (selectable && !selectable.isDisabled), + (!isDisabled && onClick) || + href || + (selectable && !selectable.isDisabled), 'euiCard--hasBetaBadge': betaBadgeLabel, 'euiCard--hasIcon': icon, 'euiCard--hasChildren': children, diff --git a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap b/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap index 82cc79d5158..7ad2e0db3fa 100644 --- a/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap +++ b/src/components/card/checkable_card/__snapshots__/checkable_card.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiCheckableCard is rendered 1`] = `
= ({ const { id } = rest; const classes = classNames( 'euiCheckableCard', + 'euiCheckableCard--shadow', // For matching EuiPanel mixin + 'euiCheckableCard--borderRadiusMedium', // For matching EuiPanel mixin { 'euiCheckableCard-isChecked': checked, 'euiCheckableCard-isDisabled': disabled, diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap index 7ac80de282b..2f6b0617431 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -309,7 +309,7 @@ exports[`props options list is rendered 1`] = `
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx index 95c3925bb46..76ab0fea4cf 100644 --- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx +++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx @@ -477,6 +477,7 @@ export class EuiComboBoxOptionsList extends Component< return ( @@ -412,7 +412,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `