[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
elastic · Nov 3, 2020 · 5d7385c · 5d7385c
1 parent fcda1ac
commit 5d7385c
Show file tree

Hide file tree

Showing 33 changed files with 475 additions and 163 deletions.
diff --git 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
@@ -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"

diff --git a/src-docs/src/views/modal/guidelines.js b/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>

diff --git a/src-docs/src/views/panel/panel.js b/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>
 );
diff --git a/src-docs/src/views/panel/panel_hover.js → src-docs/src/views/panel/panel_color.js b/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>
 );
diff --git a/src-docs/src/views/panel/panel_example.js b/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 />,
     },
   ],