[Docs] Fixing the logic for shadow and border combinations of EuiPanel (

#5623)
elastic · Feb 11, 2022 · a5b0e11 · a5b0e11
1 parent 4318014
commit a5b0e11
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 24 deletions.
diff --git a/src-docs/src/views/panel/panel_example.js b/src-docs/src/views/panel/panel_example.js
@@ -134,20 +134,19 @@ export const PanelExample = {
           <p>
             <strong>EuiPanel</strong> can give depth to your container with{' '}
             <EuiCode>hasShadow</EuiCode> while <EuiCode>hasBorder</EuiCode> can
-            add containment. Just be sure not to include too many nested panels
-            with these settings.
+            add containment. Just be sure not to include too many{' '}
+            <Link to="/layout/panel/guidelines">nested panels</Link> with these
+            settings.
           </p>
           <EuiCallOut
             color="warning"
             title="Certain allowed combinations of shadow, border, and color depend on the current theme."
           >
             <p>
               For instance, only plain or transparent panels can have a border
-              and/or shadow. The Amsterdam theme doesn&apos;t allow combining
-              the <EuiCode>hasBorder</EuiCode> option with{' '}
-              <EuiCode>hasShadow</EuiCode>. The default theme only allows
-              removing the border if both <EuiCode>hasShadow</EuiCode> and{' '}
-              <EuiCode>hasBorder</EuiCode> are set to <EuiCode>false</EuiCode>.
+              and/or shadow. The default theme doesn&apos;t allow combining the{' '}
+              <EuiCode>hasBorder</EuiCode> option with{' '}
+              <EuiCode>hasShadow</EuiCode>.
             </p>
           </EuiCallOut>
         </>

diff --git a/src-docs/src/views/panel/panel_shadow.js b/src-docs/src/views/panel/panel_shadow.js
@@ -1,11 +1,15 @@
-import React, { useContext } from 'react';
-
-import { EuiPanel, EuiCode, EuiSpacer } from '../../../../src/components';
-import { ThemeContext } from '../../components';
+import React from 'react';
+import {
+  EuiPanel,
+  EuiCode,
+  EuiSpacer,
+  LEGACY_NAME_KEY,
+  useEuiTheme,
+} from '../../../../src';
 
 export default () => {
-  const themeContext = useContext(ThemeContext);
-  const isAmsterdamTheme = !themeContext.theme.includes('legacy');
+  const { euiTheme } = useEuiTheme();
+  const isLegacyTheme = euiTheme.themeName.includes(LEGACY_NAME_KEY);
 
   return (
     <div>
@@ -15,19 +19,19 @@ export default () => {
 
       <EuiSpacer />
 
-      {/* This example only works for the Amsterdam theme. The default theme has `hasBorder={true}` by default. */}
-      {isAmsterdamTheme && (
-        <>
-          <EuiPanel hasBorder={true}>
-            <EuiCode>{'hasBorder={true}'}</EuiCode>
-          </EuiPanel>
-          <EuiSpacer />
-        </>
+      {/* This example only works for the default theme. The legacy theme has `hasBorder={true}` by default. */}
+      {!isLegacyTheme && (
+        <EuiPanel hasBorder={true}>
+          <EuiCode>{'hasBorder={true}'}</EuiCode>
+        </EuiPanel>
       )}
 
-      <EuiPanel hasShadow={false} hasBorder={false}>
-        <EuiCode>{'hasShadow={false} hasBorder={false}'}</EuiCode>
-      </EuiPanel>
+      {/* This example only matters for the legacy theme. The default theme has `hasBorder={false}` by default. */}
+      {isLegacyTheme && (
+        <EuiPanel hasShadow={false} hasBorder={false}>
+          <EuiCode>{'hasShadow={false} hasBorder={false}'}</EuiCode>
+        </EuiPanel>
+      )}
     </div>
   );
 };