From 70f0d495e039311f5a013367ac74e836c808d62c Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 28 Apr 2023 14:39:08 -0400 Subject: [PATCH 1/7] [EuiInlineEdit] Create a playground for both EuiInlineEdit Text and Title --- src-docs/src/views/inline_edit/playground.js | 105 +++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 src-docs/src/views/inline_edit/playground.js diff --git a/src-docs/src/views/inline_edit/playground.js b/src-docs/src/views/inline_edit/playground.js new file mode 100644 index 00000000000..c76b11f0c8c --- /dev/null +++ b/src-docs/src/views/inline_edit/playground.js @@ -0,0 +1,105 @@ +import { PropTypes } from 'react-view'; +import { + EuiInlineEditText, + EuiInlineEditTitle, +} from '../../../../src/components'; +import { + propUtilityForPlayground, + dummyFunction, + simulateFunction, +} from '../../services/playground'; + +const commonPropsToUse = (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); + + return propsToUse; +}; + +export const inlineEditTextConfig = () => { + const docgenInfo = Array.isArray(EuiInlineEditText.__docgenInfo) + ? EuiInlineEditText.__docgenInfo[0] + : EuiInlineEditText.__docgenInfo; + let propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.defaultValue = { + ...propsToUse.defaultValue, + value: 'Hello! You are editing text content!', + type: PropTypes.String, + }; + + propsToUse = commonPropsToUse(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; + let propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.defaultValue = { + ...propsToUse.defaultValue, + value: 'Hello! You are editing a title!', + type: PropTypes.String, + }; + + propsToUse.heading = { + ...propsToUse.heading, + value: 'h2', + }; + + propsToUse = commonPropsToUse(propsToUse); + + return { + config: { + componentName: 'EuiInlineEditTitle', + props: propsToUse, + scope: { + EuiInlineEditTitle, + }, + imports: { + '@elastic/eui': { + named: ['EuiInlineEditTitle'], + }, + }, + customProps: { + onSave: dummyFunction, + }, + }, + }; +}; From 006070ad7efcfdec0c6de39bbeb7ad92daa9142b Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Fri, 28 Apr 2023 14:40:08 -0400 Subject: [PATCH 2/7] [EuiInlineEdit] Add code snippets for each InlineEdit example in the docs --- .../views/inline_edit/inline_edit_example.js | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) diff --git a/src-docs/src/views/inline_edit/inline_edit_example.js b/src-docs/src/views/inline_edit/inline_edit_example.js index 8e4dde90c6b..1c04ad8503c 100644 --- a/src-docs/src/views/inline_edit/inline_edit_example.js +++ b/src-docs/src/views/inline_edit/inline_edit_example.js @@ -11,20 +11,72 @@ 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 = ``; import InlineEditTitle from './inline_edit_title'; const inlineEditTitleSource = require('!!raw-loader!./inline_edit_title'); +const inlineEditTitleSnippet = ``; import InlineEditModeProps from './inline_edit_mode_props'; const inlineEditModePropsSource = require('!!raw-loader!./inline_edit_mode_props'); +const inlineEditModePropsSnippet = ``; import InlineEditSave from './inline_edit_save'; const inlineEditSaveSource = require('!!raw-loader!././inline_edit_save'); +const inlineEditModeSaveSnippet = ` { + localStorage.setItem('inlineEditValue', newInlineEditValue); + }} +/>`; import InlineEditValidation from './inline_edit_validation'; const inlineEditValidationSource = require('!!raw-loader!././inline_edit_validation'); +const inlineEditValidationSnippet = ` setErrors([]) }, + }} + isInvalid={isInvalid} + isLoading={isLoading} + onSave={onSave} +/>`; export const InlineEditExample = { title: 'Inline edit', @@ -60,6 +112,8 @@ export const InlineEditExample = { ], demo: , props: { EuiInlineEditText }, + snippet: inlineEditTextSnippet, + playground: inlineEditTextConfig, }, { title: 'Display and edit headings and titles', @@ -80,6 +134,8 @@ export const InlineEditExample = { ], demo: , props: { EuiInlineEditTitle }, + snippet: inlineEditTitleSnippet, + playground: inlineEditTitleConfig, }, { title: 'Saving edited text', @@ -98,6 +154,7 @@ export const InlineEditExample = { }, ], demo: , + snippet: inlineEditModeSaveSnippet, }, { title: 'Validating edited text', @@ -129,6 +186,7 @@ export const InlineEditExample = { }, ], demo: , + snippet: inlineEditValidationSnippet, }, { title: 'Customizing read and edit modes', @@ -187,6 +245,7 @@ export const InlineEditExample = { }, ], demo: , + snippet: inlineEditModePropsSnippet, }, ], }; From e1c3d12974be611f8a6403249b45c5e62e691d2c Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 2 May 2023 13:40:51 -0400 Subject: [PATCH 3/7] Removed the inline edit validation code snippet in favor of the DemoJS because it's more helpful --- .../src/views/inline_edit/inline_edit_example.js | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/src-docs/src/views/inline_edit/inline_edit_example.js b/src-docs/src/views/inline_edit/inline_edit_example.js index 1c04ad8503c..4273ad6b4fe 100644 --- a/src-docs/src/views/inline_edit/inline_edit_example.js +++ b/src-docs/src/views/inline_edit/inline_edit_example.js @@ -66,17 +66,6 @@ const inlineEditModeSaveSnippet = ` setErrors([]) }, - }} - isInvalid={isInvalid} - isLoading={isLoading} - onSave={onSave} -/>`; export const InlineEditExample = { title: 'Inline edit', @@ -186,7 +175,6 @@ export const InlineEditExample = { }, ], demo: , - snippet: inlineEditValidationSnippet, }, { title: 'Customizing read and edit modes', From 4294c3a9bd728f470c817c46b2a628351acbc8c5 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 2 May 2023 13:43:59 -0400 Subject: [PATCH 4/7] Small updates to DRY util. --- src-docs/src/views/inline_edit/playground.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/inline_edit/playground.js b/src-docs/src/views/inline_edit/playground.js index c76b11f0c8c..d6bb2d269b2 100644 --- a/src-docs/src/views/inline_edit/playground.js +++ b/src-docs/src/views/inline_edit/playground.js @@ -9,7 +9,7 @@ import { simulateFunction, } from '../../services/playground'; -const commonPropsToUse = (propsToUse) => { +const setCommonPropsToUse = (propsToUse) => { propsToUse.inputAriaLabel = { ...propsToUse.inputAriaLabel, value: 'Edit text inline', @@ -29,15 +29,13 @@ const commonPropsToUse = (propsToUse) => { }; propsToUse.onSave = simulateFunction(propsToUse.onSave); - - return propsToUse; }; export const inlineEditTextConfig = () => { const docgenInfo = Array.isArray(EuiInlineEditText.__docgenInfo) ? EuiInlineEditText.__docgenInfo[0] : EuiInlineEditText.__docgenInfo; - let propsToUse = propUtilityForPlayground(docgenInfo.props); + const propsToUse = propUtilityForPlayground(docgenInfo.props); propsToUse.defaultValue = { ...propsToUse.defaultValue, @@ -45,7 +43,7 @@ export const inlineEditTextConfig = () => { type: PropTypes.String, }; - propsToUse = commonPropsToUse(propsToUse); + setCommonPropsToUse(propsToUse); return { config: { @@ -70,7 +68,7 @@ export const inlineEditTitleConfig = () => { const docgenInfo = Array.isArray(EuiInlineEditTitle.__docgenInfo) ? EuiInlineEditTitle.__docgenInfo[0] : EuiInlineEditTitle.__docgenInfo; - let propsToUse = propUtilityForPlayground(docgenInfo.props); + const propsToUse = propUtilityForPlayground(docgenInfo.props); propsToUse.defaultValue = { ...propsToUse.defaultValue, @@ -83,7 +81,7 @@ export const inlineEditTitleConfig = () => { value: 'h2', }; - propsToUse = commonPropsToUse(propsToUse); + setCommonPropsToUse(propsToUse); return { config: { From cb4e508ac95a7f92f5c66b5f5f8b0914cf303382 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 2 May 2023 13:56:03 -0400 Subject: [PATCH 5/7] Added the span option to the list of headings available for EuiInlineEdit Title. --- src-docs/src/views/inline_edit/playground.js | 2 +- src/components/inline_edit/inline_edit_title.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/inline_edit/playground.js b/src-docs/src/views/inline_edit/playground.js index d6bb2d269b2..7d7290905d4 100644 --- a/src-docs/src/views/inline_edit/playground.js +++ b/src-docs/src/views/inline_edit/playground.js @@ -78,7 +78,7 @@ export const inlineEditTitleConfig = () => { propsToUse.heading = { ...propsToUse.heading, - value: 'h2', + value: 'h4', }; setCommonPropsToUse(propsToUse); diff --git a/src/components/inline_edit/inline_edit_title.tsx b/src/components/inline_edit/inline_edit_title.tsx index 04de2ae2056..677b1a9b43a 100644 --- a/src/components/inline_edit/inline_edit_title.tsx +++ b/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 & { From 37cccc0ef1a838695ccc4be6f5ccf32a7c1594d2 Mon Sep 17 00:00:00 2001 From: Bree Hall Date: Tue, 2 May 2023 15:16:45 -0400 Subject: [PATCH 6/7] Update EuiInlineEdit Title heading prop documentation for clarity --- src/components/inline_edit/inline_edit_title.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/inline_edit/inline_edit_title.tsx b/src/components/inline_edit/inline_edit_title.tsx index 677b1a9b43a..51d087cd5d2 100644 --- a/src/components/inline_edit/inline_edit_title.tsx +++ b/src/components/inline_edit/inline_edit_title.tsx @@ -28,6 +28,7 @@ export type EuiInlineEditTitleProps = EuiInlineEditCommonProps & { size?: EuiTitleSize; /** * 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; }; From 13204b2279d3ad2ee46d57564e4a7122a902d43b Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Tue, 2 May 2023 15:33:17 -0400 Subject: [PATCH 7/7] Update src/components/inline_edit/inline_edit_title.tsx Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com> --- src/components/inline_edit/inline_edit_title.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/inline_edit/inline_edit_title.tsx b/src/components/inline_edit/inline_edit_title.tsx index 51d087cd5d2..6f9d3d0b1d4 100644 --- a/src/components/inline_edit/inline_edit_title.tsx +++ b/src/components/inline_edit/inline_edit_title.tsx @@ -27,7 +27,7 @@ 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;