[Storybook] Add playground stories for remaining C components

[cee-chen]

Summary

part 2 of #7460

This PR is slightly more complex than the previous one, as it:

1. Modifies/enhances components with existing storybooks
2. Fixes several types
3. Removes a subcomponent top-level public export that is not being used anywhere in Elastic, and probably was a mistaken export since it doesn't export any corresponding types

Note: Any TODOs in this PR were left as general tech debt / are not meant to be completed in this PR.

QA

• Confirm that the toggles & controls for all the below storybooks work as expected/reasonably
• https://eui.elastic.co/pr_7467/storybook/?path=/story/euicombobox--playground
• https://eui.elastic.co/pr_7467/storybook/?path=/story/euicollapsiblenav--playground
• https://eui.elastic.co/pr_7467/storybook/?path=/story/euicomment--playground
• https://eui.elastic.co/pr_7467/storybook/?path=/story/euicommentevent--regular
• https://eui.elastic.co/pr_7467/storybook/?path=/story/euicommentlist--playground
• https://eui.elastic.co/pr_7467/storybook/?path=/story/euicontextmenuitem--playground
• https://eui.elastic.co/pr_7467/storybook/?path=/story/euicontextmenupanel--playground
• https://eui.elastic.co/pr_7467/storybook/?path=/story/euicontextmenu--playground
• https://eui.elastic.co/pr_7467/storybook/?path=/story/euicontext--playground

General checklist

N/A, docs only

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7467/
• Storybook: https://eui.elastic.co/pr_7467/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: f30bda5

[JasonStoltz]

Both of these are probably suggestions rather than blockers.

[JasonStoltz]

Would this be better as text?

diff --git a/src/components/collapsible_nav/collapsible_nav.stories.tsx b/src/components/collapsible_nav/collapsible_nav.stories.tsx
index 777f63732..1250f1140 100644
--- a/src/components/collapsible_nav/collapsible_nav.stories.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.stories.tsx
@@ -18,9 +18,10 @@ const meta: Meta<EuiCollapsibleNavProps> = {
   title: 'EuiCollapsibleNav',
   component: EuiCollapsibleNav,
   argTypes: {
-    ...disableStorybookControls(['button']),
+    ...disableStorybookControls([]),
     as: { options: ['nav', 'div'], control: 'radio' },
     maxWidth: { control: 'number' }, // TODO: also accepts bool | string
+    button: { control: 'tex
<img width="1561" alt="Screenshot 2024-01-17 at 4 49 46 PM" src="https://github.com/elastic/eui/assets/1427475/d470b54f-b1b8-4343-980b-d9be6eae7dd9">
t' },
   },
   args: {
     // Component defaults
@@ -38,6 +39,7 @@ const meta: Meta<EuiCollapsibleNavProps> = {
     includeFixedHeadersInFocusTrap: true,
     outsideClickCloses: true,
     ownFocus: true,
+    button: 'Toggle nav',
   },
   // TODO: Improve props inherited from EuiFlyout, ideally through
   // a DRY import from `flyout.stories.tsx` once that's created
@@ -48,13 +50,14 @@ type Story = StoryObj<EuiCollapsibleNavProps>;
 
 const StatefulCollapsibleNav = (props: Partial<EuiCollapsibleNavProps>) => {
   const [isOpen, setIsOpen] = useState(props.isOpen);
+  const button = props.button;
   return (
     <EuiCollapsibleNav
       {...props}
       isOpen={isOpen}
       button={
         <EuiButton onClick={() => setIsOpen((isOpen) => !isOpen)}>
-          Toggle nav
+          {button}
         </EuiButton>
       }
       onClose={(...args) => {

[cee-chen]

Personally, I don't think so. IMO, it's confusing/not a good example of what a consumer would actually pass to the button prop, which would be something like: button={<EuiButton onClick={toggleCollapsibleNav} />}. The controls should try to provide code examples for consumers if possible, and setting this to a string would indicate a button automagically renders if they pass button="Open me", which is not the case.

[JasonStoltz]

Nesting any EUI elements in this object causes the following error in the playground whenever you tweak this object:

No idea what the problem is -- I'm guessing something to do with Emotion and rerendering, based on the error message and the fact that it happens on re-render.

We could simply remove the complex nested items for now so at least the playground works:

diff --git a/src/components/comment_list/comment_list.stories.tsx b/src/components/comment_list/comment_list.stories.tsx
index 8eab65bf7..08e379474 100644
--- a/src/components/comment_list/comment_list.stories.tsx
+++ b/src/components/comment_list/comment_list.stories.tsx
@@ -9,11 +9,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { EuiText } from '../text';
-import { EuiButtonIcon } from '../button';
-import { EuiBadge } from '../badge';
-import { EuiFlexGroup, EuiFlexItem } from '../flex';
-
 import { EuiCommentList, EuiCommentListProps } from './comment_list';
 
 const meta: Meta<EuiCommentListProps> = {
@@ -28,15 +23,6 @@ const meta: Meta<EuiCommentListProps> = {
 export default meta;
 type Story = StoryObj<EuiCommentListProps>;
 
-const copyAction = (
-  <EuiButtonIcon
-    title="Custom action"
-    aria-label="Custom action"
-    color="text"
-    iconType="copy"
-  />
-);
-
 export const Playground: Story = {
   args: {
     comments: [
@@ -46,20 +32,15 @@ export const Playground: Story = {
         event: 'added a comment',
         timestamp: 'on Jan 1, 2020',
         children: (
-          <EuiText size="s">
-            <p>
-              Far out in the uncharted backwaters of the unfashionable end of
-              the western spiral arm of the Galaxy lies a small unregarded
-              yellow sun.
-            </p>
-          </EuiText>
+          <p>
+            Far out in the uncharted backwaters of the unfashionable end of the
+            western spiral arm of the Galaxy lies a small unregarded yellow sun.
+          </p>
         ),
-        actions: copyAction,
       },
       {
         username: 'juanab',
         timelineAvatarAriaLabel: 'Juana Barros',
-        actions: copyAction,
         event: 'pushed incident X0Z235',
         timestamp: 'on Jan 3, 2020',
       },
@@ -74,26 +55,7 @@ export const Playground: Story = {
       {
         username: 'pedror',
         timelineAvatarAriaLabel: 'Pedro Rodriguez',
-        actions: copyAction,
-        event: (
-          <EuiFlexGroup
-            responsive={false}
-            alignItems="center"
-            gutterSize="xs"
-            wrap
-          >
-            <EuiFlexItem grow={false}>added tags</EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiBadge>case</EuiBadge>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiBadge>phising</EuiBadge>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiBadge>security</EuiBadge>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        ),
+        event: "added the 'case' tag",
         timestamp: 'on Jan 11, 2020',
         eventIcon: 'tag',
         eventIconAriaLabel: 'tag',
@@ -103,7 +65,6 @@ export const Playground: Story = {
         timelineAvatarAriaLabel: 'Assistant',
         timestamp: 'on Jan 14, 2020, 1:39:04 PM',
         children: <p>An error ocurred sending your message.</p>,
-        actions: copyAction,
         eventColor: 'danger',
       },
     ],

[JasonStoltz]

Sorry, some additions to my last comments. Should have grouped these all together, sorry for the noise.

[cee-chen]

@JasonStoltz A lot of your comments are critiques of Storybook's controls UI/UX, which I 100% agree with. While it's still a step up from our current docs, mostly in terms of responsiveness and discoverability, it's not perfect and it can't be without us taking the time to sit down and write our own custom Storybook addon to modify their controls. This is something I'd definitely like to do, but then we're kind of up against the question of: what's the goal of EUI+ and our timeline(s) on it? We can stop and make it significantly better along the way, but that will almost certainly mean blowing past the current timeline you have set. If we're simply trying to get the current iteration of Docusaurus vaguely up to where our current docs are now, then these aren't friction points we can currently address.

[JasonStoltz]

OK, let's just focus on getting these all migrated to storybook and we can circle back to improve these in the future if necessary.

[cee-chen]

if necessary

It's definitely necessary, just IMO! But probably a fairly involved endeavor to get the DX perfect. These comments have been super helpful in exploring better alternatives!