docs(storybook): PR feedback

- remove stateful content from stories for EuiConfirmModal and EuiOverlayMask - add EuiModal as decorator for EuiModal sub-component stories
elastic · Mar 21, 2024 · 301ab13 · 301ab13
1 parent a9445a6
commit 301ab13
Show file tree

Hide file tree

Showing 7 changed files with 186 additions and 73 deletions.
diff --git a/src/components/modal/confirm_modal.stories.tsx b/src/components/modal/confirm_modal.stories.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
@@ -19,8 +19,6 @@ import {
   EuiConfirmModalProps,
 } from './confirm_modal';
 
-import { EuiButton } from '../button';
-
 const meta: Meta<EuiConfirmModalProps> = {
   title: 'Layout/EuiConfirmModal',
   component: EuiConfirmModal,
@@ -52,37 +50,14 @@ type Story = StoryObj<EuiConfirmModalProps>;
 const onCancel = action('onCancel');
 const onConfirm = action('onConfirm');
 
-const StatefulConfirmModal = (props: EuiConfirmModalProps) => {
-  const [isOpen, setIsOpen] = useState(true);
-  return (
-    <>
-      <EuiButton size="s" onClick={() => setIsOpen(!isOpen)}>
-        Toggle ConfirmModal
-      </EuiButton>
-      {isOpen && (
-        <EuiConfirmModal
-          {...props}
-          onConfirm={(...args) => {
-            setIsOpen(false);
-            onConfirm(...args);
-          }}
-          onCancel={(...args) => {
-            setIsOpen(false);
-            onCancel(...args);
-          }}
-        />
-      )}
-    </>
-  );
-};
-
 export const Playground: Story = {
   args: {
     title: 'Confirm modal title',
     children: 'Confirm modal content',
     confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel',
     onCancel,
     onConfirm,
   },
-  render: (args) => <StatefulConfirmModal {...args} />,
+  render: (args) => <EuiConfirmModal {...args} />,
 };
diff --git a/src/components/modal/modal.stories.tsx b/src/components/modal/modal.stories.tsx
@@ -10,7 +10,16 @@ import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { EuiButton } from '../button';
+import { useGeneratedHtmlId } from '../../services';
+import { EuiButton, EuiButtonEmpty } from '../button';
+import {
+  EuiFieldText,
+  EuiForm,
+  EuiFormProps,
+  EuiFormRow,
+  EuiSwitch,
+} from '../form';
+
 import { EuiModalHeader } from './modal_header';
 import { EuiModalHeaderTitle } from './modal_header_title';
 import { EuiModalBody } from './modal_body';
@@ -35,8 +44,57 @@ type Story = StoryObj<EuiModalProps>;
 
 const onClose = action('onClose');
 
+export const Playground: Story = {
+  args: {
+    children: (
+      <>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>Modal body</EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton fill>Modal footer</EuiButton>
+        </EuiModalFooter>
+      </>
+    ),
+  },
+};
+
+export const InitialFocus: Story = {
+  args: {
+    initialFocus: '[name=popswitch]',
+  },
+  render: (args) => <StatefulFormModal {...args} />,
+};
+
+export const ToggleExample: Story = {
+  args: {
+    children: (
+      <>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>Modal body</EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton onClick={onClose} fill>
+            Modal footer
+          </EuiButton>
+        </EuiModalFooter>
+      </>
+    ),
+  },
+  render: (args) => <StatefulModal {...args} />,
+};
+
+/* Story content components */
+
 const StatefulModal = (props: EuiModalProps) => {
   const [isOpen, setIsOpen] = useState(true);
+
   return (
     <>
       <EuiButton size="s" onClick={() => setIsOpen(!isOpen)}>
@@ -55,23 +113,77 @@ const StatefulModal = (props: EuiModalProps) => {
   );
 };
 
-export const Playground: Story = {
-  args: {
-    children: (
-      <>
-        <EuiModalHeader>
-          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
-        </EuiModalHeader>
+const StatefulFormModal = (props: EuiModalProps) => {
+  const { children, ...rest } = props;
+  const [isOpen, setIsOpen] = useState(true);
+  const modalFormId = useGeneratedHtmlId({ prefix: 'modalForm' });
+  const modalTitleId = useGeneratedHtmlId();
 
-        <EuiModalBody>Modal body</EuiModalBody>
+  const handleOnClose = () => setIsOpen(false);
 
-        <EuiModalFooter>
-          <EuiButton onClick={onClose} fill>
-            Modal footer
-          </EuiButton>
-        </EuiModalFooter>
-      </>
-    ),
-  },
-  render: (args) => <StatefulModal {...args} />,
+  return (
+    <>
+      <EuiButton size="s" onClick={() => setIsOpen(!isOpen)}>
+        Toggle Modal
+      </EuiButton>
+      {isOpen && (
+        <EuiModal
+          {...rest}
+          onClose={(...args) => {
+            setIsOpen(false);
+            onClose(...args);
+          }}
+        >
+          <EuiModalHeader>
+            <EuiModalHeaderTitle id={modalTitleId}>
+              Modal title
+            </EuiModalHeaderTitle>
+          </EuiModalHeader>
+
+          <EuiModalBody>
+            <ExampleForm id={modalFormId} />
+          </EuiModalBody>
+
+          <EuiModalFooter>
+            <EuiButtonEmpty onClick={handleOnClose}>Cancel</EuiButtonEmpty>
+
+            <EuiButton
+              type="submit"
+              form={modalFormId}
+              onClick={handleOnClose}
+              fill
+            >
+              Save
+            </EuiButton>
+          </EuiModalFooter>
+        </EuiModal>
+      )}
+    </>
+  );
+};
+
+const ExampleForm = ({ id }: Partial<EuiFormProps>) => {
+  const modalFormSwitchId = useGeneratedHtmlId({ prefix: 'modalFormSwitch' });
+
+  const [isSwitchChecked, setIsSwitchChecked] = useState(true);
+  const onSwitchChange = () =>
+    setIsSwitchChecked((isSwitchChecked) => !isSwitchChecked);
+
+  return (
+    <EuiForm id={id} component="form">
+      <EuiFormRow>
+        <EuiSwitch
+          id={modalFormSwitchId}
+          name="popswitch"
+          label="Cool modal form"
+          checked={isSwitchChecked}
+          onChange={onSwitchChange}
+        />
+      </EuiFormRow>
+
+      <EuiFormRow label="A text field">
+        <EuiFieldText name="popfirst" />
+      </EuiFormRow>
+    </EuiForm>
+  );
 };
diff --git a/src/components/modal/modal_body.stories.tsx b/src/components/modal/modal_body.stories.tsx
@@ -6,13 +6,23 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
+import { EuiModal } from './modal';
 import { EuiModalBody, EuiModalBodyProps } from './modal_body';
 
 const meta: Meta<EuiModalBodyProps> = {
   title: 'Layout/EuiModal/EuiModalBody',
   component: EuiModalBody,
+  decorators: [
+    (Story) => (
+      <EuiModal onClose={action('onClose')}>
+        <Story />
+      </EuiModal>
+    ),
+  ],
 };
 
 export default meta;

diff --git a/src/components/modal/modal_footer.stories.tsx b/src/components/modal/modal_footer.stories.tsx
@@ -6,13 +6,23 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
+import { EuiModal } from './modal';
 import { EuiModalFooter, EuiModalFooterProps } from './modal_footer';
 
 const meta: Meta<EuiModalFooterProps> = {
   title: 'Layout/EuiModal/EuiModalFooter',
   component: EuiModalFooter,
+  decorators: [
+    (Story) => (
+      <EuiModal onClose={action('onClose')}>
+        <Story />
+      </EuiModal>
+    ),
+  ],
 };
 
 export default meta;

diff --git a/src/components/modal/modal_header.stories.tsx b/src/components/modal/modal_header.stories.tsx
@@ -6,13 +6,23 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
+import { EuiModal } from './modal';
 import { EuiModalHeader, EuiModalHeaderProps } from './modal_header';
 
 const meta: Meta<EuiModalHeaderProps> = {
   title: 'Layout/EuiModal/EuiModalHeader',
   component: EuiModalHeader,
+  decorators: [
+    (Story) => (
+      <EuiModal onClose={action('onClose')}>
+        <Story />
+      </EuiModal>
+    ),
+  ],
 };
 
 export default meta;

diff --git a/src/components/modal/modal_header_title.stories.tsx b/src/components/modal/modal_header_title.stories.tsx
@@ -6,8 +6,12 @@
  * Side Public License, v 1.
  */
 
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
+import { EuiModal } from './modal';
+import { EuiModalHeader } from './modal_header';
 import {
   EuiModalHeaderTitle,
   EuiModalHeaderTitleProps,
@@ -23,6 +27,15 @@ const meta: Meta<EuiModalHeaderTitleProps> = {
   args: {
     component: 'h1',
   },
+  decorators: [
+    (Story) => (
+      <EuiModal onClose={action('onClose')}>
+        <EuiModalHeader>
+          <Story />
+        </EuiModalHeader>
+      </EuiModal>
+    ),
+  ],
 };
 
 export default meta;

diff --git a/src/components/overlay_mask/overlay_mask.stories.tsx b/src/components/overlay_mask/overlay_mask.stories.tsx
@@ -6,19 +6,20 @@
  * Side Public License, v 1.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { disableStorybookControls } from '../../../.storybook/utils';
-import { EuiButton } from '../button';
-import { EuiHeader } from '../header';
-import { EuiSpacer } from '../spacer';
 import { EuiOverlayMask, EuiOverlayMaskProps } from './overlay_mask';
+import { EuiHeader } from '../header';
 
 const meta: Meta<EuiOverlayMaskProps> = {
   title: 'Utilities/EuiOverlayMask',
   component: EuiOverlayMask,
-  argTypes: disableStorybookControls(['maskRef']),
+  argTypes: {
+    children: { control: { type: 'text' } },
+    ...disableStorybookControls(['maskRef']),
+  },
   // Component defaults
   args: {
     headerZindexLocation: 'above',
@@ -28,29 +29,11 @@ const meta: Meta<EuiOverlayMaskProps> = {
 export default meta;
 type Story = StoryObj<EuiOverlayMaskProps>;
 
-const StatefulPlayground = (props: EuiOverlayMaskProps) => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  return (
+export const Playground: Story = {
+  render: (args) => (
     <div>
       <EuiHeader position="fixed" />
-      <EuiSpacer size="xxl" />
-      <EuiButton size="s" onClick={() => setIsOpen(!isOpen)}>
-        Toggle Overlay
-      </EuiButton>
-      {isOpen && (
-        <EuiOverlayMask {...props}>
-          {props.children ?? (
-            <EuiButton onClick={() => setIsOpen(false)}>
-              Close Overlay
-            </EuiButton>
-          )}
-        </EuiOverlayMask>
-      )}
+      <EuiOverlayMask {...args} />
     </div>
-  );
-};
-
-export const Playground: Story = {
-  render: (args) => <StatefulPlayground {...args} />,
+  ),
 };