[EuiPanel] Expanding usages for layout purposes

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 - Added `labelWidth` and `descriptionDisplay` props to `EuiSuggestItem` ([#4180](https:/elastic/eui/pull/4180))
 - Added `float` and `margin` props to `EuiImage` ([#4209](https:/elastic/eui/pull/4209))
+- Added `color` and `borderRadius` props to `EuiPanel` ([#4194](https:/elastic/eui/pull/4194))
+- Updated the use case for the `EuiPanel` prop `hasShadow` ([#4194](https:/elastic/eui/pull/4194))
+- Deprecated the `onClick`, `betaBadgeLabel`, `betaBadgeTooltipContent`, and `betaBadgeTitle` props of `EuiPanel` ([#4194](https:/elastic/eui/pull/4194))
 
 **Bug fixes**
 

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) => (
- <EuiPanel paddingSize="s">
+ <EuiPanel color="subdued" paddingSize="s">
  <EuiButtonIcon
  iconType="grab"
  aria-label="Drag Handle"

src-docs/src/views/modal/guidelines.js

@@ -40,7 +40,7 @@ export default () => (
  <EuiFlexGroup wrap={true}>
  <EuiFlexItem style={{ minWidth: 300 }}>
  <div>
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>
  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.">
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>Save dashboard</EuiModalHeaderTitle>
  </EuiModalHeader>
@@ -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.">
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>Add a team member</EuiModalHeaderTitle>
  </EuiModalHeader>
@@ -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.">
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>
  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.">
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>Great!</EuiModalHeaderTitle>
  </EuiModalHeader>
@@ -244,7 +244,7 @@ export default () => (
  text="
  Do. Use the same action verbs in the header and button text.
  ">
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>Refresh field list?</EuiModalHeaderTitle>
  </EuiModalHeader>
@@ -268,7 +268,7 @@ export default () => (
  text='Don&apos;t use a vague header such as "Are you sure?" or
  the button labels "Yes" and "No."
  '>
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>
  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.">
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>
  Delete pipeline &apos;MyPipeline&apos;?
@@ -325,7 +325,7 @@ export default () => (
  type="do"
  panel={false}
  text="Do. For bulk actions, include the number of items in the title.">
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>Delete 6 pipelines?</EuiModalHeaderTitle>
  </EuiModalHeader>
@@ -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&mdash;
  data won't be lost.">
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>Remove index pattern?</EuiModalHeaderTitle>
  </EuiModalHeader>
@@ -376,7 +376,7 @@ export default () => (
  panel={false}
  text="Don't write body text that simply repeats the title.
  It doesn't add value.">
- <EuiPanel hasShadow paddingSize="none">
+ <EuiPanel paddingSize="none">
  <EuiModalHeader>
  <EuiModalHeaderTitle>Remove index pattern?</EuiModalHeaderTitle>
  </EuiModalHeader>

src-docs/src/views/panel/panel.js

@@ -17,19 +17,13 @@ export default () => (
  <EuiSpacer size="l" />
 
  <EuiPanel paddingSize="m">
- <EuiCode>paddingSize=&quot;m&quot;</EuiCode>
+ <EuiCode>paddingSize=&quot;m&quot; (default)</EuiCode>
  </EuiPanel>
 
  <EuiSpacer size="l" />
 
  <EuiPanel paddingSize="l">
  <EuiCode>paddingSize=&quot;l&quot;</EuiCode>
  </EuiPanel>
-
- <EuiSpacer size="l" />
-
- <EuiPanel paddingSize="l" hasShadow>
- <EuiCode>paddingSize=&quot;l&quot;</EuiCode>, <EuiCode>hasShadow</EuiCode>
- </EuiPanel>
  </div>
 );

src-docs/src/views/panel/panel_hover.js → src-docs/src/views/panel/panel_color.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { EuiPanel } from '../../../../src/components';
 
 export default () => (
- <EuiPanel onClick={() => {}}>
- <p>Hover me to see my hover state.</p>
+ <EuiPanel color="subdued" borderRadius="none" hasShadow={false}>
+ <p>I am a simple shaded box</p>
  </EuiPanel>
 );

src-docs/src/views/panel/panel_example.js

@@ -6,38 +6,77 @@ 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';
 
 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 = `<EuiPanel paddingSize="none">
  <!-- Panel with no padding -->
 </EuiPanel>`;
 
-const panelHoverSnippet = `<EuiPanel onClick={handleClick}>
- <!-- Panel with onClick handler -->
+const panelShadowSnippet = `<EuiPanel hasShadow={true}>
+ <!-- Panel with shadow -->
+</EuiPanel>`;
+
+const panelColorSnippet = `<EuiPanel color="subdued" borderRadius="none">
+ <!-- Panel with gray background and no rounded corners -->
 </EuiPanel>`;
 
-const panelBadgeSnippet = `<EuiPanel betaBadgeLabel={badgeLabel}>
- <!-- Panel with BetaBadge -->
+const panelGrowSnippet = `<EuiPanel grow={false}>
+ <!-- Panel whose height won't grow to match -->
 </EuiPanel>`;
 
 export const PanelExample = {
  title: 'Panel',
+ intro: (
+ <>
+ <EuiText>
+ <p>
+ <strong>EuiPanel</strong> is a building block component. It is
+ commonly used as a base for other larger components like{' '}
+ <Link to="/layout/page">
+ <strong>EuiPage</strong>
+ </Link>{' '}
+ and{' '}
+ <Link to="/layout/popover">
+ <strong>EuiPopover</strong>
+ </Link>
+ . Use it as a layout helper for containing content.
+ </p>
+ </EuiText>
+
+ <EuiSpacer size="l" />
+ </>
+ ),
  sections: [
  {
+ title: 'Padding',
  source: [
  {
  type: GuideSectionTypes.JS,
@@ -49,72 +88,111 @@ export const PanelExample = {
  },
  ],
  text: (
- <p>
- <strong>EuiPanel</strong> is a simple wrapper component to add depth
- to a contained layout. It is commonly used as a base for other larger
- components like{' '}
- <Link to="/layout/page">
- <strong>EuiPage</strong>
- </Link>{' '}
- and{' '}
- <Link to="/layout/popover">
- <strong>EuiPopover</strong>
- </Link>
- .
- </p>
+ <p>The most basic use is to simply add padding around your content.</p>
  ),
  props: { EuiPanel },
  snippet: panelSnippet,
  demo: <Panel />,
  },
  {
- title: 'Panel can be hoverable',
+ title: 'Shadow',
  source: [
  {
  type: GuideSectionTypes.JS,
- code: panelHoverSource,
+ code: panelShadowSource,
  },
  {
  type: GuideSectionTypes.HTML,
- code: panelHoverHtml,
+ code: panelShadowHtml,
  },
  ],
  text: (
  <p>
- Adding an <EuiCode>onClick</EuiCode> handler to the{' '}
- <strong>EuiPanel</strong> will turn the wrapping element into a button
- to allow for interaction.
+ <strong>EuiPanel</strong> can give depth to your container with{' '}
+ <EuiCode>hasShadow</EuiCode>.
  </p>
  ),
- snippet: panelHoverSnippet,
- demo: <PanelHover />,
+ props: { EuiPanel },
+ snippet: panelShadowSnippet,
+ demo: <PanelShadow />,
  },
  {
- title: 'Panel beta badges',
+ title: 'Colors and corners',
  source: [
  {
  type: GuideSectionTypes.JS,
- code: panelBadgeSource,
+ code: panelColorSource,
  },
  {
  type: GuideSectionTypes.HTML,
- code: panelBadgeHtml,
+ code: panelColorHtml,
  },
  ],
  text: (
  <p>
- Similar to{' '}
- <Link to="/display/card">
- <strong>EuiCard</strong>
- </Link>
- , panels can also accept an{' '}
- <Link to="/display/badge">
- <strong>EuiBetaBadge</strong>
- </Link>
- .
+ Use <EuiCode>color</EuiCode> 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{' '}
+ <EuiCode language="tsx">{'borderRadius="none"'}</EuiCode>
  </p>
  ),
- snippet: panelBadgeSnippet,
+ props: { EuiPanel },
+ snippet: panelColorSnippet,
+ demo: <PanelColor />,
+ },
+ {
+ title: 'Growing height',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: panelGrowSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: panelGrowHtml,
+ },
+ ],
+ text: (
+ <p>
+ Using <strong>EuiPanel</strong> in an{' '}
+ <Link to="/layout/flex#panels-grow-to-fill-flex-items">
+ <strong>EuiFlexItem</strong>
+ </Link>{' '}
+ will always grow its height to match. This is great for rows of
+ panels. However, you can also turn this feature off by setting{' '}
+ <EuiCode language="tsx">{'grow={false}'}</EuiCode>.
+ </p>
+ ),
+ props: { EuiPanel },
+ snippet: panelGrowSnippet,
+ demo: <PanelGrow />,
+ },
+ {
+ title: 'Panels could be hoverable and have beta badges',
+ source: [
+ {
+ type: GuideSectionTypes.JS,
+ code: panelBadgeSource,
+ },
+ {
+ type: GuideSectionTypes.HTML,
+ code: panelBadgeHtml,
+ },
+ ],
+ text: (
+ <EuiCallOut color="warning" title="Deprecation notice">
+ <p>
+ The ability to add <EuiCode>onClick</EuiCode> and{' '}
+ <Link to="/display/badge">beta badges</Link> is being deprecated. We
+ strongly advise using{' '}
+ <Link to="/display/card">
+ <strong>EuiCard</strong>
+ </Link>{' '}
+ for this type of functionality.
+ </p>
+ </EuiCallOut>
+ ),
  demo: <PanelBadge />,
  },
  ],