From 305d71d1ea9677ac66be945bb7324d8af1d7e506 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 9 Jul 2020 22:21:32 +0530 Subject: [PATCH 01/19] created playground for badges --- src-docs/src/routes.js | 4 +- src-docs/src/views/badge/badge_example.js | 7 ++ src-docs/src/views/badge/playground.js | 118 ++++++++++++++++++++++ 3 files changed, 128 insertions(+), 1 deletion(-) create mode 100644 src-docs/src/views/badge/playground.js diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index e22299234fc..71fd3c625b0 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -263,7 +263,9 @@ const createExample = (example, customTitle) => { let playgroundComponent; if (playground) { - playgroundComponent = playgroundCreator(playground()); + if (Array.isArray(playground)) { + playgroundComponent = playground.map(elm => playgroundCreator(elm())); + } else playgroundComponent = playgroundCreator(playground()); } const component = () => ( diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index 703c6c4fbb3..d52586655cf 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -14,6 +14,11 @@ import { EuiBadgeGroup, EuiCallOut, } from '../../../../src/components'; +import { + badgeConfig, + betaBadgeConfig, + notificationBadgeConfig, +} from './playground'; import Badge from './badge'; @@ -317,4 +322,6 @@ export const BadgeExample = { demo: , }, ], + playground: [badgeConfig, betaBadgeConfig, notificationBadgeConfig], + // playground: badgeConfig, }; diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js new file mode 100644 index 00000000000..ba350ea1dac --- /dev/null +++ b/src-docs/src/views/badge/playground.js @@ -0,0 +1,118 @@ +import { PropTypes } from 'react-view'; +import { + EuiBadge, + EuiNotificationBadge, + EuiBetaBadge, +} from '../../../../src/components/'; +import { propUtilityForPlayground } from '../../services/playground'; + +export const badgeConfig = () => { + const docgenInfo = Array.isArray(EuiBadge.__docgenInfo) + ? EuiBadge.__docgenInfo[0] + : EuiBadge.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.onClick = { + ...propsToUse.onClick, + value: "() => console.log('Clicked')", + }; + + propsToUse.children = { + type: PropTypes.String, + value: 'badge content', + hidden: true, + }; + + propsToUse.iconType = { + ...propsToUse.iconType, + type: PropTypes.String, + }; + + propsToUse.color = { + ...propsToUse.color, + value: undefined, + type: PropTypes.String, + custom: { + ...propsToUse.color.custom, + // validator: val => { + // const regex = /^#(?:[0-9a-fA-F]{3}){1,2}$/g; + // return val.match(regex); + // }, + }, + }; + + return { + config: { + componentName: 'EuiBadge', + props: propsToUse, + scope: { + EuiBadge, + }, + imports: { + '@elastic/eui': { + named: ['EuiBadge'], + }, + }, + }, + }; +}; + +export const betaBadgeConfig = () => { + const docgenInfo = Array.isArray(EuiBetaBadge.__docgenInfo) + ? EuiBetaBadge.__docgenInfo[0] + : EuiBetaBadge.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.label = { + ...propsToUse.label, + type: PropTypes.String, + value: 'content', + }; + propsToUse.iconType = { + ...propsToUse.iconType, + type: PropTypes.String, + }; + + return { + config: { + componentName: 'EuiBetaBadge', + props: propsToUse, + scope: { + EuiBetaBadge, + }, + imports: { + '@elastic/eui': { + named: ['EuiBetaBadge'], + }, + }, + }, + }; +}; + +export const notificationBadgeConfig = () => { + const docgenInfo = Array.isArray(EuiNotificationBadge.__docgenInfo) + ? EuiNotificationBadge.__docgenInfo[0] + : EuiNotificationBadge.__docgenInfo; + const propsToUse = propUtilityForPlayground(docgenInfo.props); + + propsToUse.children = { + type: PropTypes.String, + value: 'badge content', + hidden: true, + }; + + return { + config: { + componentName: 'EuiNotificationBadge', + props: propsToUse, + scope: { + EuiNotificationBadge, + }, + imports: { + '@elastic/eui': { + named: ['EuiNotificationBadge'], + }, + }, + }, + }; +}; From 8026fb945bc292fbeb4eb763068f5fdc139605fa Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Thu, 9 Jul 2020 22:28:51 +0530 Subject: [PATCH 02/19] removed commented code --- src-docs/src/views/badge/badge_example.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src-docs/src/views/badge/badge_example.js b/src-docs/src/views/badge/badge_example.js index d52586655cf..60f815c12c1 100644 --- a/src-docs/src/views/badge/badge_example.js +++ b/src-docs/src/views/badge/badge_example.js @@ -323,5 +323,4 @@ export const BadgeExample = { }, ], playground: [badgeConfig, betaBadgeConfig, notificationBadgeConfig], - // playground: badgeConfig, }; From e238128693d2a37e42a991673983180d092eb15a Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 10 Jul 2020 21:31:28 +0530 Subject: [PATCH 03/19] used validator for iconType and colour --- src-docs/src/views/badge/playground.js | 32 ++++++++++++++++++++++---- 1 file changed, 27 insertions(+), 5 deletions(-) diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js index ba350ea1dac..ae39b53803b 100644 --- a/src-docs/src/views/badge/playground.js +++ b/src-docs/src/views/badge/playground.js @@ -4,7 +4,14 @@ import { EuiNotificationBadge, EuiBetaBadge, } from '../../../../src/components/'; -import { propUtilityForPlayground } from '../../services/playground'; +import { + propUtilityForPlayground, + mapOptions, +} from '../../services/playground'; +import { checkValidColor } from '../../../../src/components/avatar'; +import { iconTypes } from '../icon/icons'; + +const options = mapOptions(iconTypes); export const badgeConfig = () => { const docgenInfo = Array.isArray(EuiBadge.__docgenInfo) @@ -25,7 +32,12 @@ export const badgeConfig = () => { propsToUse.iconType = { ...propsToUse.iconType, + value: undefined, type: PropTypes.String, + custom: { + ...propsToUse.iconType.custom, + validator: val => options[val], + }, }; propsToUse.color = { @@ -34,10 +46,14 @@ export const badgeConfig = () => { type: PropTypes.String, custom: { ...propsToUse.color.custom, - // validator: val => { - // const regex = /^#(?:[0-9a-fA-F]{3}){1,2}$/g; - // return val.match(regex); - // }, + validator: val => { + try { + checkValidColor(val); + return true; + } catch (error) { + return false; + } + }, }, }; @@ -68,9 +84,15 @@ export const betaBadgeConfig = () => { type: PropTypes.String, value: 'content', }; + propsToUse.iconType = { ...propsToUse.iconType, + value: undefined, type: PropTypes.String, + custom: { + ...propsToUse.iconType.custom, + validator: val => options[val], + }, }; return { From 745201414b99118ab17ff56cd349b6d22315ea7e Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Sat, 11 Jul 2020 18:47:59 +0530 Subject: [PATCH 04/19] updated variable name --- src-docs/src/views/badge/playground.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js index ae39b53803b..3fc9c102658 100644 --- a/src-docs/src/views/badge/playground.js +++ b/src-docs/src/views/badge/playground.js @@ -11,7 +11,7 @@ import { import { checkValidColor } from '../../../../src/components/avatar'; import { iconTypes } from '../icon/icons'; -const options = mapOptions(iconTypes); +const iconOptions = mapOptions(iconTypes); export const badgeConfig = () => { const docgenInfo = Array.isArray(EuiBadge.__docgenInfo) @@ -36,7 +36,7 @@ export const badgeConfig = () => { type: PropTypes.String, custom: { ...propsToUse.iconType.custom, - validator: val => options[val], + validator: val => iconOptions[val], }, }; @@ -91,7 +91,7 @@ export const betaBadgeConfig = () => { type: PropTypes.String, custom: { ...propsToUse.iconType.custom, - validator: val => options[val], + validator: val => iconOptions[val], }, }; From 5f6581bf5dd3022c23ff4f2d0a862b4ce9fed1a1 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 14 Jul 2020 13:55:35 +0530 Subject: [PATCH 05/19] removed colour validation --- src-docs/src/views/badge/playground.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js index 3fc9c102658..8543b291fcd 100644 --- a/src-docs/src/views/badge/playground.js +++ b/src-docs/src/views/badge/playground.js @@ -44,17 +44,6 @@ export const badgeConfig = () => { ...propsToUse.color, value: undefined, type: PropTypes.String, - custom: { - ...propsToUse.color.custom, - validator: val => { - try { - checkValidColor(val); - return true; - } catch (error) { - return false; - } - }, - }, }; return { From 91e8a15be9751e34bf53473782cce31dd87e98d5 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 14 Jul 2020 15:00:13 +0530 Subject: [PATCH 06/19] removed unnecessary imports --- src-docs/src/views/badge/playground.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js index 8543b291fcd..0be3a93b0be 100644 --- a/src-docs/src/views/badge/playground.js +++ b/src-docs/src/views/badge/playground.js @@ -8,7 +8,6 @@ import { propUtilityForPlayground, mapOptions, } from '../../services/playground'; -import { checkValidColor } from '../../../../src/components/avatar'; import { iconTypes } from '../icon/icons'; const iconOptions = mapOptions(iconTypes); From 80ca1df73d64867639c1ab79d57c0c66f5bb6b8b Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 14 Jul 2020 20:18:47 +0530 Subject: [PATCH 07/19] removed default values, fullscreen mode --- .../src/services/playground/playground.js | 2 +- src-docs/src/services/playground/props.js | 45 ++++++++++--------- 2 files changed, 24 insertions(+), 23 deletions(-) diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js index 6c23d46a956..a0318dd836c 100644 --- a/src-docs/src/services/playground/playground.js +++ b/src-docs/src/services/playground/playground.js @@ -68,7 +68,7 @@ export default ({ config, setGhostBackground }) => { language="html" fontSize="m" paddingSize="m" - overflowHeight={300} + // overflowHeight={300} isCopyable> {getSnippet(params.editorProps.code)} diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js index 97e82585bb8..47db0f9a89f 100644 --- a/src-docs/src/services/playground/props.js +++ b/src-docs/src/services/playground/props.js @@ -9,27 +9,27 @@ const getProp = (prop, propName) => { switch (prop.type.name) { case 'bool': newProp.type = PropTypes.Boolean; - if (prop.defaultValue) { - newProp.defaultValue = prop.defaultValue.value === 'true'; - newProp.value = prop.defaultValue.value === 'true'; - } else { - newProp.defaultValue = false; - newProp.value = false; - } + // if (prop.defaultValue) { + // newProp.defaultValue = prop.defaultValue.value === 'true'; + // newProp.value = prop.defaultValue.value === 'true'; + // } else { + // newProp.defaultValue = false; + // newProp.value = false; + // } break; case 'enum': newProp.type = PropTypes.Enum; newProp.required = prop.required; - if (prop.defaultValue) { - newProp.defaultValue = prop.defaultValue.value; - newProp.value = prop.defaultValue.value.substring( - 1, - prop.defaultValue.value.length - 1 - ); - } else { - newProp.value = undefined; - } + // if (prop.defaultValue) { + // newProp.defaultValue = prop.defaultValue.value; + // newProp.value = prop.defaultValue.value.substring( + // 1, + // prop.defaultValue.value.length - 1 + // ); + // } else { + newProp.value = undefined; + // } newProp.options = {}; for (const i in prop.type.value) { const val = prop.type.value[i].value; @@ -41,15 +41,15 @@ const getProp = (prop, propName) => { case 'number': newProp.type = PropTypes.Number; newProp.placeholder = propName; - if (prop.defaultValue) newProp.value = prop.defaultValue.value; - else newProp.value = 0; + // if (prop.defaultValue) newProp.value = prop.defaultValue.value; + // else newProp.value = 0; break; case 'string': newProp.type = PropTypes.String; newProp.placeholder = propName; - if (prop.defaultValue) newProp.value = prop.defaultValue.value; - else newProp.value = ''; + // if (prop.defaultValue) newProp.value = prop.defaultValue.value; + // else newProp.value = ''; break; case 'func': @@ -62,8 +62,9 @@ const getProp = (prop, propName) => { case 'element': newProp.type = PropTypes.ReactNode; newProp.placeholder = propName; - if (prop.defaultValue) newProp.value = prop.defaultValue.value; - else newProp.value = undefined; + // if (prop.defaultValue) newProp.value = prop.defaultValue.value; + // else + newProp.value = undefined; break; default: From 758f70e31136ef32441f92198c4ac4f1f4c47577 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 14 Jul 2020 20:20:42 +0530 Subject: [PATCH 08/19] suggesstions --- src-docs/src/views/badge/playground.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js index 0be3a93b0be..b95a918bb95 100644 --- a/src-docs/src/views/badge/playground.js +++ b/src-docs/src/views/badge/playground.js @@ -25,7 +25,7 @@ export const badgeConfig = () => { propsToUse.children = { type: PropTypes.String, - value: 'badge content', + value: 'Badge content', hidden: true, }; @@ -107,7 +107,7 @@ export const notificationBadgeConfig = () => { propsToUse.children = { type: PropTypes.String, - value: 'badge content', + value: '10', hidden: true, }; From 252401e93160268348463fb363bef700026c1730 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 14 Jul 2020 20:46:46 +0530 Subject: [PATCH 09/19] removed placeholder, added required, some badge props set to string --- src-docs/src/services/playground/knobs.js | 23 ++++++++++- src-docs/src/services/playground/props.js | 47 ++++++++++++----------- src-docs/src/views/badge/playground.js | 15 ++++++++ 3 files changed, 61 insertions(+), 24 deletions(-) diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index 37e724d726f..ad6969129b4 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -15,6 +15,7 @@ import { EuiTableHeaderCell, EuiTableRow, EuiTableRowCell, + EuiTextColor, } from '../../../../src/components/'; import { @@ -210,13 +211,33 @@ const KnobColumn = ({ state, knobNames, error, set }) => { {markup(humanizedType)} ); + if (state[name].custom) + console.log('state[name].custom.origin', state[name].custom.origin); + + let humanizedName = ( + {name} + ); + + if ( + state[name].custom && + state[name].custom.origin && + state[name].custom.origin.required + ) { + humanizedName = ( + + {humanizedName}{' '} + (required) + + ); + } + return ( - {name} + {humanizedName} {state[name].description && ( <>
diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js index 47db0f9a89f..b2ab1a5b2fa 100644 --- a/src-docs/src/services/playground/props.js +++ b/src-docs/src/services/playground/props.js @@ -1,7 +1,7 @@ /* eslint-disable guard-for-in */ import { PropTypes } from 'react-view'; -const getProp = (prop, propName) => { +const getProp = prop => { const newProp = {}; if (prop.description) newProp.description = prop.description; newProp.custom = { origin: prop }; @@ -9,25 +9,26 @@ const getProp = (prop, propName) => { switch (prop.type.name) { case 'bool': newProp.type = PropTypes.Boolean; - // if (prop.defaultValue) { - // newProp.defaultValue = prop.defaultValue.value === 'true'; - // newProp.value = prop.defaultValue.value === 'true'; - // } else { - // newProp.defaultValue = false; - // newProp.value = false; - // } + if (prop.defaultValue) { + newProp.defaultValue = prop.defaultValue.value === 'true'; + newProp.value = prop.defaultValue.value === 'true'; + } else { + newProp.defaultValue = false; + newProp.value = false; + } break; case 'enum': newProp.type = PropTypes.Enum; newProp.required = prop.required; - // if (prop.defaultValue) { - // newProp.defaultValue = prop.defaultValue.value; - // newProp.value = prop.defaultValue.value.substring( - // 1, - // prop.defaultValue.value.length - 1 - // ); - // } else { + if (prop.defaultValue) { + newProp.defaultValue = prop.defaultValue.value; + // newProp.value = prop.defaultValue.value.substring( + // 1, + // prop.defaultValue.value.length - 1 + // ); + } + // else { newProp.value = undefined; // } newProp.options = {}; @@ -40,29 +41,29 @@ const getProp = (prop, propName) => { case 'number': newProp.type = PropTypes.Number; - newProp.placeholder = propName; - // if (prop.defaultValue) newProp.value = prop.defaultValue.value; + // newProp.placeholder = propName; + if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value; // else newProp.value = 0; break; case 'string': newProp.type = PropTypes.String; - newProp.placeholder = propName; - // if (prop.defaultValue) newProp.value = prop.defaultValue.value; + // newProp.placeholder = propName; + if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value; // else newProp.value = ''; break; case 'func': newProp.type = PropTypes.Function; - newProp.placeholder = propName; + // newProp.placeholder = propName; break; case 'node': case 'element': newProp.type = PropTypes.ReactNode; - newProp.placeholder = propName; - // if (prop.defaultValue) newProp.value = prop.defaultValue.value; + // newProp.placeholder = propName; + if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value; // else newProp.value = undefined; break; @@ -79,7 +80,7 @@ const propUtilityForPlayground = props => { const modifiedProps = {}; for (const key in props) { - if (props[key].type) modifiedProps[key] = getProp(props[key], key); + if (props[key].type) modifiedProps[key] = getProp(props[key]); } return modifiedProps; }; diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js index b95a918bb95..d9491b1e5d7 100644 --- a/src-docs/src/views/badge/playground.js +++ b/src-docs/src/views/badge/playground.js @@ -29,6 +29,16 @@ export const badgeConfig = () => { hidden: true, }; + propsToUse.onClickAriaLabel = { + ...propsToUse.onClickAriaLabel, + type: PropTypes.String, + }; + + propsToUse.iconOnClickAriaLabel = { + ...propsToUse.iconOnClickAriaLabel, + type: PropTypes.String, + }; + propsToUse.iconType = { ...propsToUse.iconType, value: undefined, @@ -73,6 +83,11 @@ export const betaBadgeConfig = () => { value: 'content', }; + propsToUse.tooltipContent = { + ...propsToUse.tooltipContent, + type: PropTypes.String, + }; + propsToUse.iconType = { ...propsToUse.iconType, value: undefined, From 41b766b4382ec1ac3ef39e1013b79675ae838b5d Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 14 Jul 2020 21:38:08 +0530 Subject: [PATCH 10/19] used actual value of child in text field --- src-docs/src/services/playground/knobs.js | 30 ++++++++++++++--------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index ad6969129b4..fa3542e603b 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -56,6 +56,7 @@ const Knob = ({ custom, }) => { const [val, set] = useValueDebounce(globalVal, globalSet); + let knobProps = {}; switch (type) { case PropTypes.Ref: return ( @@ -93,22 +94,29 @@ const Knob = ({ case PropTypes.String: case PropTypes.Date: + if (custom && custom.validator) { + knobProps = {}; + knobProps.onChange = e => { + const value = e.target.value; + if (custom.validator(value)) set(value); + else set(undefined); + }; + } else { + knobProps = {}; + knobProps.value = val; + knobProps.onChange = e => { + const value = e.target.value; + set(value); + }; + } return ( <> { - const value = e.target.value; - if (custom && custom.validator) { - if (custom.validator(value)) set(value); - else set(undefined); - } else { - set(value); - } - }} aria-label={description} compressed fullWidth + {...knobProps} /> {error &&
error {error}
} @@ -211,8 +219,8 @@ const KnobColumn = ({ state, knobNames, error, set }) => { {markup(humanizedType)} ); - if (state[name].custom) - console.log('state[name].custom.origin', state[name].custom.origin); + // if (state[name].custom) + // console.log('state[name].custom.origin', state[name].custom.origin); let humanizedName = ( {name} From 01cb9d72ee712ca01a12af8eaeb567823c0d740b Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 14 Jul 2020 21:58:40 +0530 Subject: [PATCH 11/19] added sanitize function --- src-docs/src/services/playground/knobs.js | 9 ++++++++- src-docs/src/views/badge/playground.js | 5 +++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index fa3542e603b..34b248f7b73 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -101,6 +101,12 @@ const Knob = ({ if (custom.validator(value)) set(value); else set(undefined); }; + } else if (custom && custom.sanitize) { + knobProps = {}; + knobProps.onChange = e => { + const value = e.target.value; + set(custom.sanitize(value)); + }; } else { knobProps = {}; knobProps.value = val; @@ -109,6 +115,7 @@ const Knob = ({ set(value); }; } + return ( <> { set={value => set(value, name)} enumName={state[name].enumName} defaultValue={state[name].defaultValue} - custom={state[name].custom} + custom={state[name] && state[name].custom} /> diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js index d9491b1e5d7..21388bf401c 100644 --- a/src-docs/src/views/badge/playground.js +++ b/src-docs/src/views/badge/playground.js @@ -27,6 +27,11 @@ export const badgeConfig = () => { type: PropTypes.String, value: 'Badge content', hidden: true, + custom: { + sanitize: val => { + return val.replace(/<(?:"[^"]"['"]|'[^']'['"]|[^'">])+>/g, ''); + }, + }, }; propsToUse.onClickAriaLabel = { From 01ec85b7b6e8bde0c49b74c6e7b8b50a57d782c6 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 14 Jul 2020 22:07:03 +0530 Subject: [PATCH 12/19] fixed unique-key warning --- src-docs/src/routes.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js index 71fd3c625b0..1b266d99632 100644 --- a/src-docs/src/routes.js +++ b/src-docs/src/routes.js @@ -1,4 +1,4 @@ -import React, { createElement } from 'react'; +import React, { createElement, Fragment } from 'react'; import { GuidePage, GuideSection } from './components'; @@ -264,7 +264,9 @@ const createExample = (example, customTitle) => { let playgroundComponent; if (playground) { if (Array.isArray(playground)) { - playgroundComponent = playground.map(elm => playgroundCreator(elm())); + playgroundComponent = playground.map((elm, idx) => { + return {playgroundCreator(elm())}; + }); } else playgroundComponent = playgroundCreator(playground()); } From 6bd096cc5d137f4ee9ba63d9f684747c1b867e9a Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Tue, 14 Jul 2020 22:23:12 +0530 Subject: [PATCH 13/19] added validation --- src-docs/src/services/playground/knobs.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index 34b248f7b73..467f80fa9f8 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -16,6 +16,7 @@ import { EuiTableRow, EuiTableRowCell, EuiTextColor, + EuiFormRow, } from '../../../../src/components/'; import { @@ -117,18 +118,18 @@ const Knob = ({ } return ( - <> + 0} error={error}> 0} compressed fullWidth {...knobProps} /> - - {error &&
error {error}
} - + ); + case PropTypes.Boolean: return ( <> @@ -144,6 +145,7 @@ const Knob = ({ {error &&
error {error}
} ); + case PropTypes.Enum: const optionsKeys = Object.keys(options); const numberOfOptions = optionsKeys.length; @@ -181,7 +183,7 @@ const Knob = ({ })); return ( - <> + 0} error={error}> { globalSet(e.target.value); }} + isInvalid={error && error.length > 0} aria-label={`Select ${name}`} compressed /> {error &&
error {error}
} - + ); } From 7e35a727aca5bad474e1bb585da59874fa73afa7 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Wed, 15 Jul 2020 00:36:33 +0530 Subject: [PATCH 14/19] updated to identify the change whenthe state changes --- src-docs/src/services/playground/knobs.js | 39 ++++++++++++++++++++--- src-docs/src/views/badge/playground.js | 32 ++++++++++++++++++- 2 files changed, 66 insertions(+), 5 deletions(-) diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index 467f80fa9f8..2f084a6f750 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; import { assertUnreachable, PropTypes, useValueDebounce } from 'react-view'; import { EuiSpacer, @@ -46,7 +46,7 @@ const Label = ({ children, tooltip }) => { const Knob = ({ name, - error, + error: errorMsg, type, defaultValue, val: globalVal, @@ -55,8 +55,18 @@ const Knob = ({ description, placeholder, custom, + state, + orgSet, }) => { const [val, set] = useValueDebounce(globalVal, globalSet); + const [error, setError] = useState(errorMsg); + + useEffect(() => { + if (custom && custom.checkDep) { + setError(custom.checkDep(val, state)); + } + }, [state, val, custom]); + let knobProps = {}; switch (type) { case PropTypes.Ref: @@ -196,16 +206,35 @@ const Knob = ({ aria-label={`Select ${name}`} compressed /> - {error &&
error {error}
} ); } + case PropTypes.Custom: + if (custom && custom.use) { + switch (custom.use) { + case 'switch': + return ( + { + const value = e.target.checked; + globalSet(value); + if (custom.modifyOtherProps) + custom.modifyOtherProps(value, state, orgSet); + }} + compressed + /> + ); + } + } + case PropTypes.ReactNode: case PropTypes.Function: case PropTypes.Array: case PropTypes.Object: - case PropTypes.Custom: return null; default: return assertUnreachable(); @@ -297,6 +326,8 @@ const KnobColumn = ({ state, knobNames, error, set }) => { enumName={state[name].enumName} defaultValue={state[name].defaultValue} custom={state[name] && state[name].custom} + state={state} + orgSet={set} /> diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js index 21388bf401c..1bb89930b7f 100644 --- a/src-docs/src/views/badge/playground.js +++ b/src-docs/src/views/badge/playground.js @@ -20,7 +20,21 @@ export const badgeConfig = () => { propsToUse.onClick = { ...propsToUse.onClick, - value: "() => console.log('Clicked')", + type: PropTypes.Custom, + value: undefined, + custom: { + ...propsToUse.onClick.custom, + use: 'switch', + modifyOtherProps: (val, state, set) => { + if (val) { + if (!state.onClickAriaLabel.value) { + set('onClickAriaLabel value', 'onClickAriaLabel'); + } + } else { + set(state.onClickAriaLabel.value, 'onClickAriaLabel'); + } + }, + }, }; propsToUse.children = { @@ -37,6 +51,15 @@ export const badgeConfig = () => { propsToUse.onClickAriaLabel = { ...propsToUse.onClickAriaLabel, type: PropTypes.String, + custom: { + ...propsToUse.onClickAriaLabel.custom, + checkDep: (val, state) => { + if (state.onClick.value && !val) { + return 'When passing onClick to EuiBadge, you must also provide onClickAriaLabel'; + } + return undefined; + }, + }, }; propsToUse.iconOnClickAriaLabel = { @@ -72,6 +95,13 @@ export const badgeConfig = () => { named: ['EuiBadge'], }, }, + customProps: { + onClick: { + generate: _val => { + return null; + }, + }, + }, }, }; }; From 2e64aa1a003981227ba1b60e76351fbaf18ae64a Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 17 Jul 2020 00:25:46 +0530 Subject: [PATCH 15/19] suggestions --- src-docs/src/services/playground/knobs.js | 11 +++++++++-- src-docs/src/views/badge/playground.js | 2 +- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index 2f084a6f750..1c67506bf97 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -114,6 +114,7 @@ const Knob = ({ }; } else if (custom && custom.sanitize) { knobProps = {}; + knobProps.value = val; knobProps.onChange = e => { const value = e.target.value; set(custom.sanitize(value)); @@ -128,7 +129,10 @@ const Knob = ({ } return ( - 0} error={error}> + 0} + error={error} + fullWidth> 0} error={error}> + 0} + error={error} + fullWidth> { modifyOtherProps: (val, state, set) => { if (val) { if (!state.onClickAriaLabel.value) { - set('onClickAriaLabel value', 'onClickAriaLabel'); + set('onClickAriaLabel', 'onClickAriaLabel'); } } else { set(state.onClickAriaLabel.value, 'onClickAriaLabel'); From de5875085d612e7543cc618261406a0f82fca177 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 17 Jul 2020 01:13:30 +0530 Subject: [PATCH 16/19] added onCLick function snippet --- src-docs/src/services/playground/knobs.js | 37 +++++++++++------------ src-docs/src/views/badge/playground.js | 13 ++++++-- 2 files changed, 29 insertions(+), 21 deletions(-) diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index 1c67506bf97..3a4fb62f36c 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -49,16 +49,14 @@ const Knob = ({ error: errorMsg, type, defaultValue, - val: globalVal, - set: globalSet, + val, + set, options = {}, description, placeholder, custom, state, - orgSet, }) => { - const [val, set] = useValueDebounce(globalVal, globalSet); const [error, setError] = useState(errorMsg); useEffect(() => { @@ -152,7 +150,7 @@ const Knob = ({ label="" checked={val} onChange={e => { - globalSet(e.target.checked); + set(e.target.checked); }} compressed /> @@ -183,7 +181,7 @@ const Knob = ({ onChange={id => { let val = id; if (val.includes('__')) val = val.split('__')[0]; - globalSet(val); + set(val); }} name={`Select ${name}`} /> @@ -207,7 +205,7 @@ const Knob = ({ options={flattenedOptions} value={valueKey} onChange={e => { - globalSet(e.target.value); + set(e.target.value); }} isInvalid={error && error.length > 0} aria-label={`Select ${name}`} @@ -222,18 +220,19 @@ const Knob = ({ switch (custom.use) { case 'switch': return ( - { - const value = e.target.checked; - globalSet(value); - if (custom.modifyOtherProps) - custom.modifyOtherProps(value, state, orgSet); - }} - compressed - /> + <> + { + const value = e.target.checked; + + set(value ? value : undefined); + }} + compressed + /> + ); } } diff --git a/src-docs/src/views/badge/playground.js b/src-docs/src/views/badge/playground.js index 933bbbf9484..18163a71828 100644 --- a/src-docs/src/views/badge/playground.js +++ b/src-docs/src/views/badge/playground.js @@ -9,6 +9,7 @@ import { mapOptions, } from '../../services/playground'; import { iconTypes } from '../icon/icons'; +import * as t from '@babel/types'; const iconOptions = mapOptions(iconTypes); @@ -25,7 +26,9 @@ export const badgeConfig = () => { custom: { ...propsToUse.onClick.custom, use: 'switch', + label: 'Simulate', modifyOtherProps: (val, state, set) => { + console.log(val, 'state', state); if (val) { if (!state.onClickAriaLabel.value) { set('onClickAriaLabel', 'onClickAriaLabel'); @@ -97,8 +100,14 @@ export const badgeConfig = () => { }, customProps: { onClick: { - generate: _val => { - return null; + generate: val => { + if (!val) return null; + const obj = t.arrowFunctionExpression( + [], + t.blockStatement([]), + false + ); + return obj; }, }, }, From 6cfa22da326be3b85f8977fc759e98e4102a5ce1 Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 17 Jul 2020 21:12:15 +0530 Subject: [PATCH 17/19] removed error popup by react-view --- src-docs/src/services/playground/playground.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js index a0318dd836c..4f0cc7b8801 100644 --- a/src-docs/src/services/playground/playground.js +++ b/src-docs/src/services/playground/playground.js @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import classNames from 'classnames'; import format from 'html-format'; -import { useView, Compiler, Error, Placeholder } from 'react-view'; +import { useView, Compiler, Placeholder } from 'react-view'; import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components'; import Knobs from './knobs'; @@ -61,7 +61,6 @@ export default ({ config, setGhostBackground }) => { placeholder={Placeholder} /> - Date: Fri, 17 Jul 2020 21:14:04 +0530 Subject: [PATCH 18/19] removed lint err --- src-docs/src/services/playground/knobs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index 3a4fb62f36c..37544914cec 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { assertUnreachable, PropTypes, useValueDebounce } from 'react-view'; +import { assertUnreachable, PropTypes } from 'react-view'; import { EuiSpacer, EuiSwitch, From 1b5d6ce805e68edc1bed2fdbc3ab7aa93368cd4a Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Sat, 18 Jul 2020 16:50:05 +0530 Subject: [PATCH 19/19] removed commented code --- src-docs/src/services/playground/knobs.js | 3 --- src-docs/src/services/playground/playground.js | 7 +------ src-docs/src/services/playground/props.js | 13 ------------- 3 files changed, 1 insertion(+), 22 deletions(-) diff --git a/src-docs/src/services/playground/knobs.js b/src-docs/src/services/playground/knobs.js index 37544914cec..c79b328a8a4 100644 --- a/src-docs/src/services/playground/knobs.js +++ b/src-docs/src/services/playground/knobs.js @@ -264,9 +264,6 @@ const KnobColumn = ({ state, knobNames, error, set }) => { {markup(humanizedType)} ); - // if (state[name].custom) - // console.log('state[name].custom.origin', state[name].custom.origin); - let humanizedName = ( {name} ); diff --git a/src-docs/src/services/playground/playground.js b/src-docs/src/services/playground/playground.js index 4f0cc7b8801..7c23dd19114 100644 --- a/src-docs/src/services/playground/playground.js +++ b/src-docs/src/services/playground/playground.js @@ -63,12 +63,7 @@ export default ({ config, setGhostBackground }) => { - + {getSnippet(params.editorProps.code)} diff --git a/src-docs/src/services/playground/props.js b/src-docs/src/services/playground/props.js index b2ab1a5b2fa..3809e60d88f 100644 --- a/src-docs/src/services/playground/props.js +++ b/src-docs/src/services/playground/props.js @@ -23,14 +23,8 @@ const getProp = prop => { newProp.required = prop.required; if (prop.defaultValue) { newProp.defaultValue = prop.defaultValue.value; - // newProp.value = prop.defaultValue.value.substring( - // 1, - // prop.defaultValue.value.length - 1 - // ); } - // else { newProp.value = undefined; - // } newProp.options = {}; for (const i in prop.type.value) { const val = prop.type.value[i].value; @@ -41,30 +35,23 @@ const getProp = prop => { case 'number': newProp.type = PropTypes.Number; - // newProp.placeholder = propName; if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value; - // else newProp.value = 0; break; case 'string': newProp.type = PropTypes.String; - // newProp.placeholder = propName; if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value; - // else newProp.value = ''; break; case 'func': newProp.type = PropTypes.Function; - // newProp.placeholder = propName; break; case 'node': case 'element': newProp.type = PropTypes.ReactNode; - // newProp.placeholder = propName; if (prop.defaultValue) newProp.defaultValue = prop.defaultValue.value; - // else newProp.value = undefined; break;