From b812c1bf0dfc316f0bd8c52e2e6efede4af6e123 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 19 Aug 2020 01:07:21 +0530 Subject: [PATCH 01/10] [Playground] EuiFieldText, EuiFieldSearch, EuiFieldNumber, EuiFieldPassword, --- src-docs/src/services/playground/knobs.js | 10 +- .../form_controls/form_controls_example.js | 3 + .../src/views/form_controls/playground.js | 199 ++++++++++++++++++ 3 files changed, 208 insertions(+), 4 deletions(-) create mode 100644 src-docs/src/views/form_controls/playground.js diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index f199c9b85b0..3629dd14a75 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -266,7 +266,7 @@ const KnobColumn = ({ state, knobNames, error, set }) => { return ( <> {knobNames.map((name, idx) => { - let humanizedType = ''; + let humanizedType; if ( state[name].custom && @@ -275,8 +275,10 @@ const KnobColumn = ({ state, knobNames, error, set }) => { ) humanizedType = humanizeType(state[name].custom.origin.type); - const typeMarkup = ( - {markup(humanizedType)} + const typeMarkup = humanizedType && ( + + {markup(humanizedType)} + ); let humanizedName = ( @@ -330,7 +332,7 @@ const KnobColumn = ({ state, knobNames, error, set }) => { key={`type__${name}-${idx}`} header="Type" className="playgroundKnobs__rowCell"> - {typeMarkup} + {typeMarkup} , }, ], + playground: playgrounds, }; diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js new file mode 100644 index 00000000000..40456094d5f --- /dev/null +++ b/src-docs/src/views/form_controls/playground.js @@ -0,0 +1,199 @@ +import { + propUtilityForPlayground, + dummyFunction, + simulateFunction, + iconValidator, +} from '../../services/playground'; +import { + EuiIcon, + EuiFieldText, + EuiFieldSearch, + EuiFieldNumber, + EuiFieldPassword, +} from '../../../../src/components/'; +import { PropTypes } from 'react-view'; + +const fieldTextConfig = () => { + const docgenInfo = Array.isArray(EuiFieldText.__docgenInfo) + ? EuiFieldText.__docgenInfo[0] + : EuiFieldText.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.append = { + ...propsToUse.append, + type: PropTypes.String, + }; + propsToUse.prepend = { + ...propsToUse.prepend, + type: PropTypes.String, + }; + + propsToUse.value = { + ...propsToUse.value, + stateful: false, + type: PropTypes.String, + value: '', + }; + + propsToUse.onChange = simulateFunction(propsToUse.onChange); + propsToUse.icon = iconValidator(propsToUse.icon); + + return { + config: { + componentName: 'EuiFieldText', + props: propsToUse, + scope: { + EuiFieldText, + }, + imports: { + '@elastic/eui': { + named: ['EuiFieldText'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; + +export const fieldSearchConfig = () => { + const docgenInfo = Array.isArray(EuiFieldSearch.__docgenInfo) + ? EuiFieldSearch.__docgenInfo[0] + : EuiFieldSearch.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.append = { + ...propsToUse.append, + type: PropTypes.String, + }; + propsToUse.prepend = { + ...propsToUse.prepend, + type: PropTypes.String, + }; + + propsToUse.value = { + ...propsToUse.value, + stateful: false, + type: PropTypes.String, + value: '', + }; + + propsToUse.onSearch = simulateFunction(propsToUse.onSearch); + propsToUse.onChange = simulateFunction(propsToUse.onChange); + + return { + config: { + componentName: 'EuiFieldSearch', + props: propsToUse, + scope: { + EuiFieldSearch, + }, + imports: { + '@elastic/eui': { + named: ['EuiFieldSearch'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; + +export const fieldNumberConfig = () => { + const docgenInfo = Array.isArray(EuiFieldNumber.__docgenInfo) + ? EuiFieldNumber.__docgenInfo[0] + : EuiFieldNumber.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.append = { + ...propsToUse.append, + type: PropTypes.String, + }; + propsToUse.prepend = { + ...propsToUse.prepend, + type: PropTypes.String, + }; + + propsToUse.icon = iconValidator(propsToUse.icon); + propsToUse.onChange = simulateFunction(propsToUse.onChange); + + propsToUse.value = { + ...propsToUse.value, + stateful: false, + type: PropTypes.Number, + }; + propsToUse.step = { + ...propsToUse.step, + type: PropTypes.Number, + }; + + return { + config: { + componentName: 'EuiFieldNumber', + props: propsToUse, + scope: { + EuiFieldNumber, + }, + imports: { + '@elastic/eui': { + named: ['EuiFieldNumber'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; + +export const fieldPasswordConfig = () => { + const docgenInfo = Array.isArray(EuiFieldPassword.__docgenInfo) + ? EuiFieldPassword.__docgenInfo[0] + : EuiFieldPassword.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.append = { + ...propsToUse.append, + type: PropTypes.String, + }; + propsToUse.prepend = { + ...propsToUse.prepend, + type: PropTypes.String, + }; + + propsToUse.value = { + ...propsToUse.value, + stateful: false, + type: PropTypes.String, + value: '', + }; + + propsToUse.onChange = simulateFunction(propsToUse.onChange); + + return { + config: { + componentName: 'EuiFieldPassword', + props: propsToUse, + scope: { + EuiFieldPassword, + }, + imports: { + '@elastic/eui': { + named: ['EuiFieldPassword'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; + +export default [ + fieldTextConfig, + fieldSearchConfig, + fieldNumberConfig, + fieldPasswordConfig, +]; From 38551b2c0434f255978c71f655065513fc5745dd Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 19 Aug 2020 01:20:33 +0530 Subject: [PATCH 02/10] removed unnecessary import --- src-docs/src/views/form_controls/playground.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js index 40456094d5f..6d06c389ef8 100644 --- a/src-docs/src/views/form_controls/playground.js +++ b/src-docs/src/views/form_controls/playground.js @@ -5,7 +5,6 @@ import { iconValidator, } from '../../services/playground'; import { - EuiIcon, EuiFieldText, EuiFieldSearch, EuiFieldNumber, From a3612f02680c077b33fe67c7d516ff947d8e2c5f Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 19 Aug 2020 19:09:30 +0530 Subject: [PATCH 03/10] EuiTextArea, EuiCheckbox, EuiRadio --- .../src/views/form_controls/playground.js | 125 ++++++++++++++++++ 1 file changed, 125 insertions(+) diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js index 6d06c389ef8..c1b61c9722d 100644 --- a/src-docs/src/views/form_controls/playground.js +++ b/src-docs/src/views/form_controls/playground.js @@ -9,6 +9,9 @@ import { EuiFieldSearch, EuiFieldNumber, EuiFieldPassword, + EuiTextArea, + EuiCheckbox, + EuiRadio, } from '../../../../src/components/'; import { PropTypes } from 'react-view'; @@ -190,9 +193,131 @@ export const fieldPasswordConfig = () => { }; }; +export const textAreaConfig = () => { + const docgenInfo = Array.isArray(EuiTextArea.__docgenInfo) + ? EuiTextArea.__docgenInfo[0] + : EuiTextArea.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.value = { + ...propsToUse.value, + stateful: false, + type: PropTypes.String, + value: '', + }; + propsToUse.placeholder = { + ...propsToUse.placeholder, + type: PropTypes.String, + }; + + propsToUse.resize = { + ...propsToUse.resize, + defaultValue: 'vertical', + }; + + propsToUse.onChange = simulateFunction(propsToUse.onChange); + + return { + config: { + componentName: 'EuiTextArea', + props: propsToUse, + scope: { + EuiTextArea, + }, + imports: { + '@elastic/eui': { + named: ['EuiTextArea'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; + +export const checkboxConfig = () => { + const docgenInfo = Array.isArray(EuiCheckbox.__docgenInfo) + ? EuiCheckbox.__docgenInfo[0] + : EuiCheckbox.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.id = { + ...propsToUse.id, + value: 'Plyground__checkbox', + }; + propsToUse.label = { + ...propsToUse.label, + type: PropTypes.String, + value: 'label', + }; + + propsToUse.onChange = simulateFunction(propsToUse.onChange); + + return { + config: { + componentName: 'EuiCheckbox', + props: propsToUse, + scope: { + EuiCheckbox, + }, + imports: { + '@elastic/eui': { + named: ['EuiCheckbox'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; + +export const radioConfig = () => { + const docgenInfo = Array.isArray(EuiRadio.__docgenInfo) + ? EuiRadio.__docgenInfo[0] + : EuiRadio.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.id = { + ...propsToUse.id, + type: PropTypes.String, + value: 'Plyground__radio', + }; + + propsToUse.label = { + ...propsToUse.label, + type: PropTypes.String, + value: 'label', + }; + + propsToUse.onChange = simulateFunction(propsToUse.onChange); + + return { + config: { + componentName: 'EuiRadio', + props: propsToUse, + scope: { + EuiRadio, + }, + imports: { + '@elastic/eui': { + named: ['EuiRadio'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; + export default [ fieldTextConfig, fieldSearchConfig, fieldNumberConfig, fieldPasswordConfig, + textAreaConfig, + checkboxConfig, + radioConfig, ]; From d78ec00ec46bb03a8b99f562306ff35978ac85d9 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 21 Aug 2020 02:57:08 +0530 Subject: [PATCH 04/10] Update src-docs/src/views/form_controls/playground.js Co-authored-by: Greg Thompson --- src-docs/src/views/form_controls/playground.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js index c1b61c9722d..6e177f7ca58 100644 --- a/src-docs/src/views/form_controls/playground.js +++ b/src-docs/src/views/form_controls/playground.js @@ -244,7 +244,7 @@ export const checkboxConfig = () => { propsToUse.id = { ...propsToUse.id, - value: 'Plyground__checkbox', + value: 'Playground__checkbox', }; propsToUse.label = { ...propsToUse.label, From 57affeb887f870692f24ec9abe2f584a89d6f072 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 21 Aug 2020 02:57:15 +0530 Subject: [PATCH 05/10] Update src-docs/src/views/form_controls/playground.js Co-authored-by: Greg Thompson --- src-docs/src/views/form_controls/playground.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js index 6e177f7ca58..d6947c21d2f 100644 --- a/src-docs/src/views/form_controls/playground.js +++ b/src-docs/src/views/form_controls/playground.js @@ -282,7 +282,7 @@ export const radioConfig = () => { propsToUse.id = { ...propsToUse.id, type: PropTypes.String, - value: 'Plyground__radio', + value: 'Playground__radio', }; propsToUse.label = { From 3e29bb9c41f54e779564ba44579f9256dddda229 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 21 Aug 2020 03:04:27 +0530 Subject: [PATCH 06/10] Updated type prop for EuiFieldPassword --- src-docs/src/views/form_controls/playground.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js index c1b61c9722d..69a2fc710fe 100644 --- a/src-docs/src/views/form_controls/playground.js +++ b/src-docs/src/views/form_controls/playground.js @@ -3,6 +3,7 @@ import { dummyFunction, simulateFunction, iconValidator, + createOptionalEnum, } from '../../services/playground'; import { EuiFieldText, @@ -172,6 +173,14 @@ export const fieldPasswordConfig = () => { value: '', }; + propsToUse.type = createOptionalEnum({ + ...propsToUse.type, + type: PropTypes.Enum, + options: { + dual: 'dual', + }, + }); + propsToUse.onChange = simulateFunction(propsToUse.onChange); return { From fe588c1114c92c5ae6c96140b1c4f5806a1ee68c Mon Sep 17 00:00:00 2001 From: Greg Thompson Date: Thu, 20 Aug 2020 16:08:27 -0600 Subject: [PATCH 07/10] type type --- src/components/form/field_password/field_password.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form/field_password/field_password.tsx b/src/components/form/field_password/field_password.tsx index a6ffac4da70..050922dc4c2 100644 --- a/src/components/form/field_password/field_password.tsx +++ b/src/components/form/field_password/field_password.tsx @@ -38,7 +38,7 @@ import { useCombinedRefs } from '../../../services'; export type EuiFieldPasswordProps = Omit< InputHTMLAttributes, - 'value' + 'type' | 'value' > & CommonProps & { isInvalid?: boolean; From 622020b323da6cd11c64e0abf9a2a61a354f0c97 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 21 Aug 2020 23:05:33 +0530 Subject: [PATCH 08/10] props for type are now correct [EuiFieldPassword] --- src-docs/src/views/form_controls/playground.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js index 5c4b1dce904..244dd743bca 100644 --- a/src-docs/src/views/form_controls/playground.js +++ b/src-docs/src/views/form_controls/playground.js @@ -3,7 +3,6 @@ import { dummyFunction, simulateFunction, iconValidator, - createOptionalEnum, } from '../../services/playground'; import { EuiFieldText, @@ -173,13 +172,11 @@ export const fieldPasswordConfig = () => { value: '', }; - propsToUse.type = createOptionalEnum({ + propsToUse.type = { ...propsToUse.type, - type: PropTypes.Enum, - options: { - dual: 'dual', - }, - }); + value: 'password', + defaultValue: 'password', + }; propsToUse.onChange = simulateFunction(propsToUse.onChange); From 510fcdd8a6a5ab0cc542fff572d4b487d84dff0b Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Sat, 22 Aug 2020 02:12:32 +0530 Subject: [PATCH 09/10] [Playground] EuiSwitch --- .../src/views/form_controls/playground.js | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js index 244dd743bca..055a7cd34ae 100644 --- a/src-docs/src/views/form_controls/playground.js +++ b/src-docs/src/views/form_controls/playground.js @@ -12,6 +12,7 @@ import { EuiTextArea, EuiCheckbox, EuiRadio, + EuiSwitch, } from '../../../../src/components/'; import { PropTypes } from 'react-view'; @@ -318,6 +319,44 @@ export const radioConfig = () => { }; }; +const switchConfig = () => { + const docgenInfo = Array.isArray(EuiSwitch.__docgenInfo) + ? EuiSwitch.__docgenInfo[0] + : EuiSwitch.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.label = { + ...propsToUse.label, + type: PropTypes.String, + value: 'playground_switch_label', + }; + + propsToUse.checked = { + ...propsToUse.checked, + type: PropTypes.Boolean, + value: false, + }; + propsToUse.onChange = simulateFunction(propsToUse.onChange); + + return { + config: { + componentName: 'EuiSwitch', + props: propsToUse, + scope: { + EuiSwitch, + }, + imports: { + '@elastic/eui': { + named: ['EuiSwitch'], + }, + }, + customProps: { + onChange: dummyFunction, + }, + }, + }; +}; + export default [ fieldTextConfig, fieldSearchConfig, @@ -326,4 +365,5 @@ export default [ textAreaConfig, checkboxConfig, radioConfig, + switchConfig, ]; From b11d10ac495e8f793a7d6fea90f7283ca19c3765 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Sat, 22 Aug 2020 19:33:52 +0530 Subject: [PATCH 10/10] fixed switch --- src-docs/src/views/form_controls/playground.js | 6 +++--- src/components/form/switch/switch.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/form_controls/playground.js b/src-docs/src/views/form_controls/playground.js index 055a7cd34ae..976f2288107 100644 --- a/src-docs/src/views/form_controls/playground.js +++ b/src-docs/src/views/form_controls/playground.js @@ -328,14 +328,14 @@ const switchConfig = () => { propsToUse.label = { ...propsToUse.label, type: PropTypes.String, - value: 'playground_switch_label', + value: 'Label', }; propsToUse.checked = { ...propsToUse.checked, - type: PropTypes.Boolean, - value: false, + value: true, }; + propsToUse.onChange = simulateFunction(propsToUse.onChange); return { diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx index 7be319f7ba4..629f64e871f 100644 --- a/src/components/form/switch/switch.tsx +++ b/src/components/form/switch/switch.tsx @@ -104,7 +104,7 @@ export const EuiSwitch: FunctionComponent = ({