[EuiCollapsibleNavBeta] Remove ability for accordion/group titles to …

…contain links (#7337)
elastic · Nov 10, 2023 · 2defed4 · 2defed4
1 parent 8bf5038
commit 2defed4
Show file tree

Hide file tree

Showing 26 changed files with 309 additions and 437 deletions.
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -111,7 +111,6 @@ export const KibanaExample: Story = {
         <EuiCollapsibleNavBeta.Item
           title="Elasticsearch"
           icon="logoElasticsearch"
-          href="#"
           items={[
             { title: 'Get started', href: '#' },
             ...renderGroup('Explore', [
@@ -130,7 +129,6 @@ export const KibanaExample: Story = {
         <EuiCollapsibleNavBeta.Item
           title="Enterprise Search"
           icon="logoEnterpriseSearch"
-          href="#"
           items={[
             { title: 'ESRE', href: '#' },
             { title: 'Vector search', href: '#' },
@@ -146,7 +144,6 @@ export const KibanaExample: Story = {
         <EuiCollapsibleNavBeta.Item
           title="Observability"
           icon="logoObservability"
-          href="#"
           items={[
             { title: 'Get started', href: '#' },
             { title: 'Alerts', href: '#' },
@@ -156,7 +153,6 @@ export const KibanaExample: Story = {
               { title: 'Logs', href: '#' },
               {
                 title: 'Tracing',
-                href: '#',
                 items: [
                   { title: 'Services', href: '#' },
                   { title: 'Traces', href: '#' },
@@ -169,7 +165,6 @@ export const KibanaExample: Story = {
               { title: 'Dashboards', href: '#' },
               {
                 title: 'AIOps',
-                href: '#',
                 items: [
                   { title: 'Anomaly detection', href: '#' },
                   { title: 'Spike analysis', href: '#' },
@@ -183,7 +178,6 @@ export const KibanaExample: Story = {
         <EuiCollapsibleNavBeta.Item
           title="Security"
           icon="logoSecurity"
-          href="#"
           items={[
             { title: 'Get started', href: '#' },
             { title: 'Dashboards', href: '#' },
@@ -194,7 +188,6 @@ export const KibanaExample: Story = {
             { title: 'Intelligence', href: '#' },
             {
               title: 'Explore',
-              href: '#',
               items: [
                 { title: 'Host', href: '#' },
                 { title: 'Users', href: '#' },
@@ -204,7 +197,6 @@ export const KibanaExample: Story = {
             { title: 'Assets', href: '#' },
             {
               title: 'Rules',
-              href: '#',
               items: [
                 { title: 'SIEM rules', href: '#' },
                 { title: 'Shared exception list', href: '#' },
@@ -214,7 +206,6 @@ export const KibanaExample: Story = {
             },
             {
               title: 'Machine learning',
-              href: '#',
               items: [
                 { title: 'Overview', href: '#' },
                 { title: 'Notifications', href: '#' },
@@ -226,7 +217,6 @@ export const KibanaExample: Story = {
             },
             {
               title: 'Settings',
-              href: '#',
               items: [
                 { title: 'Endpoints', href: '#' },
                 { title: 'OS query', href: '#' },
@@ -240,7 +230,6 @@ export const KibanaExample: Story = {
         <EuiCollapsibleNavBeta.Item
           title="Analytics"
           icon="stats"
-          href="#"
           items={[
             { title: 'Discover', href: '#' },
             { title: 'Dashboard', href: '#' },
@@ -250,7 +239,6 @@ export const KibanaExample: Story = {
         <EuiCollapsibleNavBeta.Item
           title="Machine learning"
           icon="indexMapping"
-          href="#"
           items={[
             { title: 'Overview', href: '#' },
             { title: 'Notifications', href: '#' },
@@ -280,7 +268,6 @@ export const KibanaExample: Story = {
         <EuiCollapsibleNavBeta.Item
           title="Developer tools"
           icon="editorCodeBlock"
-          href="#"
           items={[
             { title: 'Console', href: '#' },
             { title: 'Search profiler', href: '#' },
@@ -344,7 +331,6 @@ export const SecurityExample: Story = {
             { title: 'Intelligence', href: '#' },
             {
               title: 'Explore',
-              href: '#',
               items: [
                 { title: 'Host', href: '#' },
                 { title: 'Users', href: '#', isSelected: true },
@@ -355,7 +341,6 @@ export const SecurityExample: Story = {
             { title: 'Assets', href: '#' },
             {
               title: 'Rules',
-              href: '#',
               items: [
                 { title: 'SIEM rules', href: '#' },
                 { title: 'Shared exception list', href: '#' },
@@ -365,7 +350,6 @@ export const SecurityExample: Story = {
             },
             {
               title: 'Machine learning',
-              href: '#',
               items: [
                 { title: 'Overview', href: '#' },
                 { title: 'Notifications', href: '#' },
@@ -377,7 +361,6 @@ export const SecurityExample: Story = {
             },
             {
               title: 'Settings',
-              href: '#',
               items: [
                 { title: 'Endpoints', href: '#' },
                 { title: 'OS query', href: '#' },

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_beta.styles.ts
@@ -12,7 +12,7 @@ import { logicalCSS } from '../../global_styling';
 import { euiShadowFlat } from '../../themes';
 import { euiHeaderVariables } from '../header/header.styles';
 
-import { euiCollapsibleNavBodyStyles } from './collapsible_nav_body_footer.styles';
+import { hideScrollbars } from './collapsible_nav_body_footer.styles';
 
 export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -42,7 +42,7 @@ export const euiCollapsibleNavBetaStyles = (euiThemeContext: UseEuiTheme) => {
       ${euiShadowFlat(euiThemeContext)}
     `,
     isPushCollapsed: css`
-      ${euiCollapsibleNavBodyStyles._isPushCollapsed}
+      ${hideScrollbars}
     `,
     isOverlayFullWidth: css`
       /* Override EuiFlyout's max-width */

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.ts b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.ts
@@ -8,37 +8,40 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { logicalCSS } from '../../global_styling';
+import { logicalCSS, euiYScrollWithShadows } from '../../global_styling';
+
+// Hide the scrollbar for docked mode (while still keeping the nav scrollable)
+// Otherwise if scrollbars are visible, button icon visibility suffers.
+export const hideScrollbars = `
+  scrollbar-width: none; /* Firefox */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Edge, & Safari */
+  }
+`;
 
 export const euiCollapsibleNavBodyStyles = {
   // In case things get really dire responsively, ensure the footer doesn't overtake the body
   euiCollapsibleNav__body: css`
     ${logicalCSS('min-height', '50%')}
   `,
-  get isPushCollapsed() {
-    return css`
-      .euiFlyoutBody__overflow {
-        ${this._isPushCollapsed}
-      }
-    `;
-  },
-  // CSS is reused by main euiCollapsibleNav styles in case the body component isn't used
-  _isPushCollapsed: `
-    /* Hide the scrollbar for docked mode (while still keeping the nav scrollable)
-       Otherwise if scrollbars are visible, button icon visibility suffers. */
-    scrollbar-width: none; /* Firefox */
-
-    &::-webkit-scrollbar {
-      display: none; /* Chrome, Edge, & Safari */
+  isPushCollapsed: css`
+    .euiFlyoutBody__overflow {
+      ${hideScrollbars}
     }
   `,
 };
 
-export const euiCollapsibleNavFooterStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiCollapsibleNavFooterStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiCollapsibleNav__footer: css`
       background-color: ${euiTheme.colors.emptyShade};
       ${logicalCSS('border-top', euiTheme.border.thin)}
+      ${euiYScrollWithShadows(euiThemeContext, { side: 'end' })}
+    `,
+    isPushCollapsed: css`
+      ${hideScrollbars}
     `,
   };
 };
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
@@ -61,9 +61,13 @@ export const EuiCollapsibleNavFooter: EuiFlyoutFooterProps = ({
 }) => {
   const classes = classNames('euiCollapsibleNav__footer', className);
 
+  const { isCollapsed, isPush } = useContext(EuiCollapsibleNavContext);
   const euiTheme = useEuiTheme();
   const styles = euiCollapsibleNavFooterStyles(euiTheme);
-  const cssStyles = [styles.euiCollapsibleNav__footer];
+  const cssStyles = [
+    styles.euiCollapsibleNav__footer,
+    isCollapsed && isPush && styles.isPushCollapsed,
+  ];
 
   return <EuiFlyoutFooter className={classes} css={cssStyles} {...props} />;
 };
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.stories.tsx
@@ -32,7 +32,6 @@ const meta: Meta<EuiCollapsibleNavGroupProps> = {
       { title: 'Dashboards', href: '#' },
       {
         title: 'Explore',
-        href: '#',
         items: [
           { title: 'Hello', href: '#' },
           { title: 'World', href: '#' },
@@ -88,7 +87,4 @@ export const EdgeCaseTesting: Story = {
       <EuiCollapsibleNavBeta.Group {...args} />
     </CollapsibleNavTemplate>
   ),
-  args: {
-    href: '#',
-  },
 };
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx
@@ -16,29 +16,24 @@ import { EuiCollapsibleNavContext } from '../context';
 import {
   EuiCollapsibleNavItem,
   EuiCollapsibleNavSubItems,
-  EuiCollapsibleNavSubItemProps,
-  EuiCollapsibleNavItemProps,
+  type EuiCollapsibleNavItemProps,
+  type _SharedEuiCollapsibleNavItemProps,
 } from '../collapsible_nav_item/collapsible_nav_item';
 import { EuiCollapsedNavPopover } from '../collapsible_nav_item/collapsed/collapsed_nav_popover';
 
 import { euiCollapsibleNavGroupStyles } from './collapsible_nav_group.styles';
 
-export type EuiCollapsibleNavGroupProps = Omit<
-  EuiCollapsibleNavItemProps,
-  'items' | 'accordionProps'
-> & {
-  /**
-   * Will render an array of `EuiCollapsibleNavItems`.
-   *
-   * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
-   * subitem content, pass an object with a `renderItem` callback.
-   */
-  items: EuiCollapsibleNavSubItemProps[];
-  /**
-   * Optional props to pass to the wrapping div
-   */
-  wrapperProps?: HTMLAttributes<HTMLDivElement> & CommonProps;
-};
+export type EuiCollapsibleNavGroupProps = _SharedEuiCollapsibleNavItemProps &
+  Pick<
+    EuiCollapsibleNavItemProps,
+    'title' | 'titleElement' | 'icon' | 'iconProps'
+  > &
+  Required<Pick<EuiCollapsibleNavItemProps, 'items'>> & {
+    /**
+     * Optional props to pass to the wrapping div
+     */
+    wrapperProps?: HTMLAttributes<HTMLDivElement> & CommonProps;
+  };
 
 /**
  * This component should only ever be used as a **top-level component**, and not as a sub-item.

diff --git a/...sible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap b/...sible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
@@ -7,10 +7,12 @@ exports[`EuiCollapsibleNavAccordion renders as a sub item 1`] = `
   <div
     class="euiAccordion__triggerWrapper emotion-EuiAccordionTrigger"
   >
-    <div
+    <button
       aria-controls="generated-id"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
+      type="button"
     >
       <span
         class="euiAccordion__buttonContent"
@@ -21,13 +23,13 @@ exports[`EuiCollapsibleNavAccordion renders as a sub item 1`] = `
           Accordion header
         </span>
       </span>
-    </div>
+    </button>
     <button
       aria-controls="generated-id"
       aria-expanded="false"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed-euiCollapsibleNavAccordion__arrow"
-      tabindex="0"
+      tabindex="-1"
       type="button"
     >
       <span
@@ -77,10 +79,12 @@ exports[`EuiCollapsibleNavAccordion renders as a top level item 1`] = `
   <div
     class="euiAccordion__triggerWrapper emotion-EuiAccordionTrigger"
   >
-    <div
+    <button
       aria-controls="generated-id"
+      aria-expanded="false"
       class="euiAccordion__button emotion-euiAccordion__button"
       id="generated-id"
+      type="button"
     >
       <span
         class="euiAccordion__buttonContent"
@@ -91,13 +95,13 @@ exports[`EuiCollapsibleNavAccordion renders as a top level item 1`] = `
           Accordion header
         </span>
       </span>
-    </div>
+    </button>
     <button
       aria-controls="generated-id"
       aria-expanded="false"
       aria-labelledby="generated-id"
       class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed-euiCollapsibleNavAccordion__arrow"
-      tabindex="0"
+      tabindex="-1"
       type="button"
     >
       <span