[EuiInlineEdit] Add Playground & Code Snippets

src-docs/src/views/inline_edit/inline_edit_example.js

@@ -11,17 +11,58 @@ import {
   EuiInlineEditTitle,
 } from '../../../../src';
 
+import { inlineEditTextConfig, inlineEditTitleConfig } from './playground';
+
 import InlineEditText from './inline_edit_text';
 const inlineEditTextSource = require('!!raw-loader!./inline_edit_text');
+const inlineEditTextSnippet = `<EuiInlineEditText
+  inputAriaLabel="Edit text inline"
+  defaultValue="Hello World!"
+/>`;
 
 import InlineEditTitle from './inline_edit_title';
 const inlineEditTitleSource = require('!!raw-loader!./inline_edit_title');
+const inlineEditTitleSnippet = `<EuiInlineEditTitle
+  inputAriaLabel="Edit title inline"
+  defaultValue="Hello World (but as a title)!"
+  heading="h3"
+/>`;
 
 import InlineEditModeProps from './inline_edit_mode_props';
 const inlineEditModePropsSource = require('!!raw-loader!./inline_edit_mode_props');
+const inlineEditModePropsSnippet = `<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',
+    },
+    formRowProps: {
+      helpText: 'Example help text',
+    },
+    saveButtonProps: {
+      color: 'primary',
+    },
+    cancelButtonProps: {
+      display: 'empty',
+    },
+  }}
+/>`;
 
 import InlineEditSave from './inline_edit_save';
 const inlineEditSaveSource = require('!!raw-loader!././inline_edit_save');
+const inlineEditModeSaveSnippet = `<EuiInlineEditText
+  inputAriaLabel="Edit text inline"
+  defaultValue={defaultInlineEditValue}
+  onSave={(newInlineEditValue: string) => {
+    localStorage.setItem('inlineEditValue', newInlineEditValue);
+  }}
+/>`;
 
 import InlineEditValidation from './inline_edit_validation';
 const inlineEditValidationSource = require('!!raw-loader!././inline_edit_validation');
@@ -60,6 +101,8 @@ export const InlineEditExample = {
       ],
       demo: <InlineEditText />,
       props: { EuiInlineEditText },
+      snippet: inlineEditTextSnippet,
+      playground: inlineEditTextConfig,
     },
     {
       title: 'Display and edit headings and titles',
@@ -80,6 +123,8 @@ export const InlineEditExample = {
       ],
       demo: <InlineEditTitle />,
       props: { EuiInlineEditTitle },
+      snippet: inlineEditTitleSnippet,
+      playground: inlineEditTitleConfig,
     },
     {
       title: 'Saving edited text',
@@ -98,6 +143,7 @@ export const InlineEditExample = {
         },
       ],
       demo: <InlineEditSave />,
+      snippet: inlineEditModeSaveSnippet,
     },
     {
       title: 'Validating edited text',
@@ -187,6 +233,7 @@ export const InlineEditExample = {
         },
       ],
       demo: <InlineEditModeProps />,
+      snippet: inlineEditModePropsSnippet,
     },
   ],
 };

src-docs/src/views/inline_edit/playground.js

@@ -0,0 +1,103 @@
+import { PropTypes } from 'react-view';
+import {
+  EuiInlineEditText,
+  EuiInlineEditTitle,
+} from '../../../../src/components';
+import {
+  propUtilityForPlayground,
+  dummyFunction,
+  simulateFunction,
+} from '../../services/playground';
+
+const setCommonPropsToUse = (propsToUse) => {
+  propsToUse.inputAriaLabel = {
+    ...propsToUse.inputAriaLabel,
+    value: 'Edit text inline',
+    type: PropTypes.String,
+  };
+
+  propsToUse.isLoading = {
+    type: PropTypes.Boolean,
+  };
+
+  propsToUse.isInvalid = {
+    type: PropTypes.Boolean,
+  };
+
+  propsToUse.startWithEditOpen = {
+    type: PropTypes.Boolean,
+  };
+
+  propsToUse.onSave = simulateFunction(propsToUse.onSave);
+};
+
+export const inlineEditTextConfig = () => {
+  const docgenInfo = Array.isArray(EuiInlineEditText.__docgenInfo)
+    ? EuiInlineEditText.__docgenInfo[0]
+    : EuiInlineEditText.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.defaultValue = {
+    ...propsToUse.defaultValue,
+    value: 'Hello! You are editing text content!',
+    type: PropTypes.String,
+  };
+
+  setCommonPropsToUse(propsToUse);
+
+  return {
+    config: {
+      componentName: 'EuiInlineEditText',
+      props: propsToUse,
+      scope: {
+        EuiInlineEditText,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiInlineEditText'],
+        },
+      },
+      customProps: {
+        onSave: dummyFunction,
+      },
+    },
+  };
+};
+
+export const inlineEditTitleConfig = () => {
+  const docgenInfo = Array.isArray(EuiInlineEditTitle.__docgenInfo)
+    ? EuiInlineEditTitle.__docgenInfo[0]
+    : EuiInlineEditTitle.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.defaultValue = {
+    ...propsToUse.defaultValue,
+    value: 'Hello! You are editing a title!',
+    type: PropTypes.String,
+  };
+
+  propsToUse.heading = {
+    ...propsToUse.heading,
+    value: 'h4',
+  };
+
+  setCommonPropsToUse(propsToUse);
+
+  return {
+    config: {
+      componentName: 'EuiInlineEditTitle',
+      props: propsToUse,
+      scope: {
+        EuiInlineEditTitle,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiInlineEditTitle'],
+        },
+      },
+      customProps: {
+        onSave: dummyFunction,
+      },
+    },
+  };
+};

src/components/inline_edit/inline_edit_title.tsx

@@ -18,7 +18,7 @@ import {
 import { useEuiTheme } from '../../services';
 import { euiInlineEditTitleStyles } from './inline_edit_title.styles';
 
-export const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+export const HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'] as const;
 type Heading = typeof HEADINGS[number];
 
 export type EuiInlineEditTitleProps = EuiInlineEditCommonProps & {
@@ -27,7 +27,8 @@ export type EuiInlineEditTitleProps = EuiInlineEditCommonProps & {
    */
   size?: EuiTitleSize;
   /**
-   * Level of heading to be used for the title
+   * Level of heading to be used for the title.
+   * Use `span` for text that is not semantically a heading, but should still visually appear as a title.
    */
   heading: Heading;
 };