[EuiInlineEdit] Create EuiInlineEdit Docs (#6697)

* Export the EuiInlineEdit Text and Title prop types * Created docs examples for EuiInlineEdit props * Removed an export for EuiInlineEditTextSizes as devs can drill into Title and Text props for the size * [PR Feedback] - Reorder sections of the EuiInlineEdit docs. Update the copy included in a few examples for better understanding * [Oops] Removed and replaced the EuiInlineEditTextSize import in InlineEdit Text example * Update src-docs/src/views/inline_edit/inline_edit_example.js Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --------- Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
elastic · Apr 11, 2023 · 8b5a47f · 8b5a47f
1 parent 117c8b7
commit 8b5a47f
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 34 deletions.
diff --git a/src-docs/src/views/inline_edit/inline_edit_confirm.tsx b/src-docs/src/views/inline_edit/inline_edit_confirm.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { EuiInlineEditText } from '../../../../src';
 
 export default () => {
-  // TO DO: Convert this example to use something like a modal
   const confirmInlineEditChanges = () => {
     // eslint-disable-next-line no-restricted-globals
     const flag = confirm('Are you sure you want to save?') ? true : false;
@@ -14,14 +13,8 @@ export default () => {
     <>
       <EuiInlineEditText
         inputAriaLabel="Edit text inline"
-        defaultValue="Hello World!"
+        defaultValue="Hello! I will need to confirm my changes."
         size="m"
-        editModeProps={{
-          inputProps: { icon: 'cross' },
-        }}
-        readModeProps={{
-          color: 'success',
-        }}
         onConfirm={confirmInlineEditChanges}
       />
     </>

diff --git a/src-docs/src/views/inline_edit/inline_edit_example.js b/src-docs/src/views/inline_edit/inline_edit_example.js
@@ -1,5 +1,7 @@
 import React from 'react';
 
+import { Link } from 'react-router-dom';
+
 import { GuideSectionTypes } from '../../components';
 
 import {
@@ -15,6 +17,9 @@ const inlineEditTextSource = require('!!raw-loader!./inline_edit_text');
 import InlineEditTitle from './inline_edit_title';
 const inlineEditTitleSource = require('!!raw-loader!./inline_edit_title');
 
+import InlineEditModeProps from './inline_edit_mode_props';
+const inlineEditModePropsSource = require('!!raw-loader!./inline_edit_mode_props');
+
 import InlineEditConfirm from './inline_edit_confirm';
 const inlineEditConfirmSource = require('!!raw-loader!././inline_edit_confirm');
 
@@ -25,17 +30,24 @@ export const InlineEditExample = {
   title: 'Inline edit',
   intro: (
     <>
-      <EuiText>This is where the description will go</EuiText>
+      <EuiText>
+        The <strong>EuiInlineEdit</strong> components are useful for updating
+        single-line text outside of a form. The component has two states:{' '}
+        <EuiCode>readMode</EuiCode> shows editable text inside of a button and{' '}
+        <EuiCode>editMode</EuiCode> displays a form control to update the text.
+      </EuiText>
     </>
   ),
   sections: [
     {
-      title: 'InlineEditText',
+      title: 'Display and edit basic text',
       text: (
         <>
           <p>
-            Description needed: how to use the <strong>EuiInlineEdit</strong>{' '}
-            component.
+            Use <strong>EuiInlineEditText</strong> to display and edit basic
+            text. Adjust the <EuiCode>size</EuiCode> property to change the font
+            size in both <EuiCode>readMode</EuiCode> and{' '}
+            <EuiCode>editMode</EuiCode>.
           </p>
         </>
       ),
@@ -49,12 +61,13 @@ export const InlineEditExample = {
       props: { EuiInlineEditText },
     },
     {
-      title: 'InlineEditTitle',
+      title: 'Display and edit headings and titles',
       text: (
         <>
           <p>
-            Description needed: how to use the <strong>EuiInlineEdit</strong>{' '}
-            component.
+            Use <strong>EuiInlineEditTitle</strong> to display and edit titles.
+            Use the <EuiCode>heading</EuiCode> property to set the heading level
+            in <EuiCode>readMode</EuiCode>.
           </p>
         </>
       ),
@@ -67,13 +80,38 @@ export const InlineEditExample = {
       demo: <InlineEditTitle />,
       props: { EuiInlineEditTitle },
     },
+    {
+      title: 'Loading and invalid states',
+      text: (
+        <>
+          <p>
+            Setting the <EuiCode>isLoading</EuiCode> prop to true will add a
+            spinner to the input element in <EuiCode>editMode</EuiCode> and add
+            the loading state to the confirm and cancel input buttons.
+          </p>
+          <p>
+            Setting the <EuiCode>isInvalid</EuiCode> prop to true will display{' '}
+            <strong>EuiInlineEdit</strong>&apos;s error state. Optionally, use{' '}
+            <EuiCode>editModeProps.formRowProps.error</EuiCode> to pass an error
+            message that will be displayed on the form control.
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: inlineEditStatesSource,
+        },
+      ],
+      demo: <InlineEditStates />,
+    },
     {
       title: 'Confirm inline edit',
       text: (
         <>
           <p>
-            Description needed: how to use the <strong>EuiInlineEdit</strong>{' '}
-            component.
+            Use the <EuiCode>onConfirm</EuiCode> property to pass a function
+            that will prompt users to confirm their changes.
           </p>
         </>
       ),
@@ -84,32 +122,43 @@ export const InlineEditExample = {
         },
       ],
       demo: <InlineEditConfirm />,
-      props: { EuiInlineEditText },
     },
     {
-      title: 'Loading and invalid states',
+      title: 'Customizing read and edit modes',
       text: (
         <>
           <p>
-            Setting the <EuiCode>isLoading</EuiCode> prop to true will add a
-            spinner to the input element in <EuiCode>editMode</EuiCode> and add
-            the loading state to the confirm and cancel input buttons.
+            Customize the <EuiCode>readMode</EuiCode> state by passing{' '}
+            <EuiCode>readModeProps</EuiCode>. <EuiCode>readMode</EuiCode>{' '}
+            accepts{' '}
+            <Link to="/navigation/button#empty-button">
+              <strong>EuiButtonEmpty</strong>
+            </Link>{' '}
+            properties with the exception of <EuiCode>onClick</EuiCode>.
           </p>
+
           <p>
-            Setting the <EuiCode>isInvalid</EuiCode> prop to true will display{' '}
-            <strong>EuiInlineEdit</strong>&apos;s error state. Optionally, use{' '}
-            <EuiCode>editModeProps.formRowProps.error</EuiCode> to pass an error
-            message that will be displayed on the form control.
+            Customize the <EuiCode>editMode</EuiCode> state by passing{' '}
+            <EuiCode>editModeProps</EuiCode>. These properties are applied
+            directly to the{' '}
+            <Link to="/forms/form-layouts#form-and-form-rows">
+              <strong>EuiFormRow</strong>
+            </Link>{' '}
+            and{' '}
+            <Link to="/forms/form-controls#text-field">
+              <strong>EuiFieldText</strong>
+            </Link>{' '}
+            components.
           </p>
         </>
       ),
       source: [
         {
           type: GuideSectionTypes.TSX,
-          code: inlineEditStatesSource,
+          code: inlineEditModePropsSource,
         },
       ],
-      demo: <InlineEditStates />,
+      demo: <InlineEditModeProps />,
     },
   ],
 };
diff --git a/src-docs/src/views/inline_edit/inline_edit_mode_props.tsx b/src-docs/src/views/inline_edit/inline_edit_mode_props.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { EuiInlineEditText } from '../../../../src';
+
+export default () => {
+  return (
+    <EuiInlineEditText
+      inputAriaLabel="Edit text inline for readMode and editMode props"
+      defaultValue="This inline edit component has been customized!"
+      size="m"
+      readModeProps={{ color: 'primary', iconSide: 'left' }}
+      editModeProps={{
+        inputProps: {
+          prepend: 'Prepend Example',
+        },
+      }}
+    />
+  );
+};
diff --git a/src-docs/src/views/inline_edit/inline_edit_text.tsx b/src-docs/src/views/inline_edit/inline_edit_text.tsx
@@ -4,7 +4,7 @@ import {
   EuiInlineEditText,
   EuiSpacer,
   EuiButtonGroup,
-  EuiInlineEditTextSizes,
+  EuiInlineEditTextProps,
 } from '../../../../src';
 
 export default () => {
@@ -24,10 +24,10 @@ export default () => {
   ];
 
   const [toggleTextButtonSize, setToggleTextButtonSize] = useState<
-    EuiInlineEditTextSizes
+    EuiInlineEditTextProps['size']
   >('m');
 
-  const textSizeOnChange = (optionId: EuiInlineEditTextSizes) => {
+  const textSizeOnChange = (optionId: EuiInlineEditTextProps['size']) => {
     setToggleTextButtonSize(optionId);
   };
 
@@ -37,7 +37,9 @@ export default () => {
         legend="Text size"
         options={textSizeButtons}
         idSelected={toggleTextButtonSize as string}
-        onChange={(id) => textSizeOnChange(id as EuiInlineEditTextSizes)}
+        onChange={(id) =>
+          textSizeOnChange(id as EuiInlineEditTextProps['size'])
+        }
       />
 
       <EuiSpacer />

diff --git a/src/components/inline_edit/index.ts b/src/components/inline_edit/index.ts
@@ -7,7 +7,7 @@
  */
 
 export { EuiInlineEditText } from './inline_edit_text';
+export type { EuiInlineEditTextProps } from './inline_edit_text';
 
 export { EuiInlineEditTitle } from './inline_edit_title';
-
-export type { EuiInlineEditTextSizes } from './inline_edit_text';
+export type { EuiInlineEditTitleProps } from './inline_edit_title';