[Docs] Fixing up some more pages under Navigation (#5053)

* Updating guidance on overflow usage * Ams - Fixing border radius of EuiNotificationBadge * Fixing up Facets to behave like links do in Ams, and docs * [EuiPagination] Fix default `activePage` to be `0` * [EuiTreeView] Restricting no use of `children` since it errors * Playground: Only render the `Default: ` text if there is a default `value`
elastic · Aug 25, 2021 · db1f6f4 · db1f6f4
1 parent fd6ec96
commit db1f6f4
Show file tree

Hide file tree

Showing 28 changed files with 721 additions and 250 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,10 +2,17 @@
 
 - Updated `EuiToolTip` to remain showing tooltip while child element is in focus ([#5066](https://github.com/elastic/eui/pull/5066))
 - Removed `children` from TypeScript definition in `EuiIconTip` ([#5066](https://github.com/elastic/eui/pull/5066))
+- Removed `children` as a possible prop on `EuiTreeView` ([#5053](https://github.com/elastic/eui/pull/5053))
 
 **Bug fixes**
 
 - Fixed location of default value of `EuiToolTip`'s `display` prop ([#5066](https://github.com/elastic/eui/pull/5066))
+- Fixed default value of `EuiPagination`'s `activePage` to target first page ([#5053](https://github.com/elastic/eui/pull/5053))
+
+**Theme: Amsterdam**
+
+- Reduced `EuiNotificationBadge` border-radius to `small` ([#5053](https://github.com/elastic/eui/pull/5053))
+- Fixed hover and focus states of `EuiFacet` to match established pattern ([#5053](https://github.com/elastic/eui/pull/5053))
 
 ## [`37.3.1`](https://github.com/elastic/eui/tree/v37.3.1)
 

diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_snippets.tsx
@@ -12,14 +12,14 @@ export const GuideSectionSnippets: FunctionComponent<GuideSectionSnippets> = ({
   let snippetCode;
   if (typeof snippets === 'string') {
     snippetCode = (
-      <EuiCodeBlock language="html" fontSize="m" paddingSize="m" isCopyable>
+      <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m" isCopyable>
         {snippets}
       </EuiCodeBlock>
     );
   } else {
     snippetCode = snippets.map((snip, index) => (
       <React.Fragment key={`snippet${index}`}>
-        <EuiCodeBlock language="html" fontSize="m" paddingSize="m" isCopyable>
+        <EuiCodeBlock language="jsx" fontSize="m" paddingSize="m" isCopyable>
           {snip}
         </EuiCodeBlock>
         {index < snippets.length - 1 && <EuiSpacer size="xs" />}

diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
@@ -365,10 +365,10 @@ const navigation = [
       KeyPadMenuExample,
       LinkExample,
       PaginationExample,
-      TreeViewExample,
       SideNavExample,
       StepsExample,
       TabsExample,
+      TreeViewExample,
     ].map((example) => createExample(example)),
   },
   {

diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js
@@ -448,7 +448,7 @@ const KnobColumn = ({ state, knobNames, error, set, isPlayground }) => {
       const defaultValue = state[name].custom.origin.defaultValue;
       defaultValueMarkup = (
         <EuiText size="xs">
-          {isPlayground && 'Default: '}
+          {isPlayground && defaultValue.value && 'Default: '}
           <EuiCode>{defaultValue.value}</EuiCode>
           {defaultValue.comment && (
             <>

diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js
@@ -42,7 +42,7 @@ export default ({
     // TODO: Replace `html-format` with something better.
     // Notably, something more jsx-friendly
     try {
-      formatted = format(newCode.trim(), ' '.repeat(4));
+      formatted = format(newCode.trim(), '  '.repeat(1));
     } catch {
       formatted = newCode.trim();
     }

diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs.js b/src-docs/src/views/breadcrumbs/breadcrumbs.js
@@ -4,9 +4,7 @@ import {
   EuiBreadcrumbs,
   EuiButton,
   EuiPageContent,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiTitle,
+  EuiPageHeader,
   EuiSpacer,
 } from '../../../../src/components';
 
@@ -15,6 +13,7 @@ export default () => {
     {
       text: 'Animals',
       href: '#',
+      color: 'primary',
       onClick: (e) => {
         e.preventDefault();
       },
@@ -47,17 +46,11 @@ export default () => {
         aria-label="An example of EuiBreadcrumbs"
       />
       <EuiSpacer size="xs" />
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
-          <EuiTitle size="l">
-            <h1>Boa constrictor</h1>
-          </EuiTitle>
-        </EuiPageContentHeaderSection>
-
-        <EuiPageContentHeaderSection>
-          <EuiButton>Cancel</EuiButton>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
+      <EuiPageHeader
+        role=""
+        pageTitle="Boa constrictor"
+        rightSideItems={[<EuiButton>Cancel</EuiButton>]}
+      />
     </EuiPageContent>
   );
 };
diff --git a/src-docs/src/views/breadcrumbs/breadcrumbs_example.js b/src-docs/src/views/breadcrumbs/breadcrumbs_example.js
@@ -1,28 +1,29 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiBreadcrumbs } from '../../../../src/components';
+import { EuiCode, EuiBreadcrumbs, EuiText } from '../../../../src/components';
 import { BreadcrumbResponsiveMaxCount, BreadcrumbProps } from './props';
 
+import { breadcrumbsConfig } from './playground';
+
 import Breadcrumbs from './breadcrumbs';
 const breadcrumbsSource = require('!!raw-loader!./breadcrumbs');
-const breadcrumbsHtml = renderToHtml(Breadcrumbs);
 
 import Responsive from './responsive';
 const responsiveSource = require('!!raw-loader!./responsive');
-const responsiveHtml = renderToHtml(Responsive);
+import ResponsiveCustom from './responsive_custom';
+const responsiveCustomSource = require('!!raw-loader!./responsive_custom');
 
 import Truncate from './truncate';
 const truncateSource = require('!!raw-loader!./truncate');
-const truncateHtml = renderToHtml(Truncate);
+import TruncateSingle from './truncate_single';
+const truncateSingleSource = require('!!raw-loader!./truncate_single');
 
 import Max from './max';
+import { EuiCallOut } from '../../../../src/components/call_out';
 const maxSource = require('!!raw-loader!./max');
-const maxHtml = renderToHtml(Max);
 
 const breadcrumpProps = {
   EuiBreadcrumbs,
@@ -32,37 +33,56 @@ const breadcrumpProps = {
 
 export const BreadcrumbsExample = {
   title: 'Breadcrumbs',
+  intro: (
+    <EuiText>
+      <p>
+        <strong>EuiBreadcrumbs</strong> let the user track their progress within
+        and back out of a UX flow and work well when used in combination with{' '}
+        <Link to="/layout/page-header">
+          <strong>EuiPageHeader</strong>
+        </Link>
+        . They are meant to be used at lower page level flows, while{' '}
+        <Link to="/layout/header">
+          <strong>EuiHeaderBreadcrumbs</strong>
+        </Link>{' '}
+        should be used for application-wide navigation.
+      </p>
+    </EuiText>
+  ),
   sections: [
     {
       source: [
         {
           type: GuideSectionTypes.JS,
           code: breadcrumbsSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: breadcrumbsHtml,
-        },
       ],
       text: (
-        <p>
-          <strong>EuiBreadcrumbs</strong> let the user track their progress
-          within and back out of a UX flow. You can provide an{' '}
-          <EuiCode>href</EuiCode> prop on any breadcrumb item that you wish to
-          make clickable, including the last item, though we recommend the last
-          item represent the current page and therefore the link is unnecessary.
-          They work well within{' '}
-          <Link to="/layout/page">
-            <strong>EuiPageContentHeader</strong>
-          </Link>{' '}
-          but be careful not to use them within an app that also uses{' '}
-          <Link to="/layout/header">
-            <strong>EuiHeaderBreadcrumbs</strong>
-          </Link>
-          .
-        </p>
+        <>
+          <p>
+            <strong>EuiBreadcrumbs</strong> requires an array of{' '}
+            <strong>EuiBreadcrumb</strong> objects as{' '}
+            <EuiCode>breadcrumbs</EuiCode> and handles truncation, including
+            middle-truncation in the case of many items, and mobile
+            responsiveness. Each item accepts an <EuiCode>href</EuiCode> prop,
+            though we recommend the last item represent the current page and
+            therefore the link is unnecessary.
+          </p>
+          <EuiCallOut
+            color="warning"
+            iconType="accessibility"
+            title={
+              <>
+                For accessibility, it is highly recommended to provide a
+                descriptive <EuiCode>aria-label</EuiCode> for each set of
+                breadcrumbs.
+              </>
+            }
+          />
+        </>
       ),
       props: breadcrumpProps,
+      playground: breadcrumbsConfig,
       snippet: `<EuiBreadcrumbs
   breadcrumbs={[
     {
@@ -73,11 +93,15 @@ export const BreadcrumbsExample = {
       text: 'Breadcrumb 2',
       href: '#',
     },
+    {
+      text: 'Current',
+      href: '#',
+    },
   ]}
-  aria-label=""
 />
 `,
       demo: <Breadcrumbs />,
+      demoPanelProps: { color: 'subdued' },
     },
     {
       title: 'Limit the number of breadcrumbs',
@@ -86,10 +110,6 @@ export const BreadcrumbsExample = {
           type: GuideSectionTypes.JS,
           code: maxSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: maxHtml,
-        },
       ],
       text: (
         <>
@@ -105,7 +125,6 @@ export const BreadcrumbsExample = {
       snippet: `<EuiBreadcrumbs
   max={4}
   breadcrumbs={breadcrumbs}
-  aria-label=""
 />`,
       demo: <Max />,
     },
@@ -116,20 +135,14 @@ export const BreadcrumbsExample = {
           type: GuideSectionTypes.JS,
           code: truncateSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: truncateHtml,
-        },
       ],
       text: (
         <>
           <p>
             <strong>EuiBreadcrumbs</strong> will truncate the full set by
             default, forcing it to a single line and setting a max width on all
             items except for the last. You can turn this off by setting{' '}
-            <EuiCode language="ts">{'truncate={false}'}</EuiCode>. You can also
-            force truncation on single breadcrumb <strong>item</strong> by
-            adding <EuiCode>{'truncate: true'}</EuiCode>.
+            <EuiCode language="ts">{'truncate={false}'}</EuiCode>.
           </p>
         </>
       ),
@@ -139,8 +152,28 @@ export const BreadcrumbsExample = {
         `<EuiBreadcrumbs
   truncate={true}
   breadcrumbs={breadcrumbs}
-  aria-label=""
 />`,
+      ],
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: truncateSingleSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            Alternatively, you can force truncation on single breadcrumb{' '}
+            <strong>item</strong> by adding{' '}
+            <EuiCode>{'truncate: true'}</EuiCode> to the object.
+          </p>
+        </>
+      ),
+      props: breadcrumpProps,
+      demo: <TruncateSingle />,
+      snippet: [
         `<EuiBreadcrumbs
   truncate={false}
   breadcrumbs={[
@@ -149,7 +182,6 @@ export const BreadcrumbsExample = {
       truncate: true,
     }
   ]}
-  aria-label=""
 />`,
       ],
     },
@@ -160,10 +192,6 @@ export const BreadcrumbsExample = {
           type: GuideSectionTypes.JS,
           code: responsiveSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: responsiveHtml,
-        },
       ],
       text: (
         <>
@@ -173,10 +201,6 @@ export const BreadcrumbsExample = {
             <EuiCode language="ts">{'responsive={false}'}</EuiCode> will keep
             all breadcrumbs visible at all screens sizes.
           </p>
-          <p>
-            Alternatively, you can change number of breadcrumbs that show per
-            breakpoint by passing a custom responsive object.
-          </p>
         </>
       ),
       props: breadcrumpProps,
@@ -185,19 +209,37 @@ export const BreadcrumbsExample = {
   responsive={false}
   max={null}
   breadcrumbs={breadcrumbs}
-  aria-label=""
 />`,
+      ],
+      demo: <Responsive />,
+    },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: responsiveCustomSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            Alternatively, you can change number of breadcrumbs that show per
+            breakpoint by passing a custom responsive object.
+          </p>
+        </>
+      ),
+      props: breadcrumpProps,
+      snippet: [
         `<EuiBreadcrumbs
   responsive={{
     xs: 2,
     s: 5,
   }}
   max={null}
   breadcrumbs={breadcrumbs}
-  aria-label=""
 />`,
       ],
-      demo: <Responsive />,
+      demo: <ResponsiveCustom />,
     },
   ],
 };