diff --git a/docs/templates/ComponentDocs.js b/docs/templates/ComponentDocs.js index cf6d283..a0a8e1d 100644 --- a/docs/templates/ComponentDocs.js +++ b/docs/templates/ComponentDocs.js @@ -21,17 +21,38 @@ const propsHeader = style({ }); const propInfo = style({ - display: 'flex', - flexDirection: 'row', - alignItems: 'center', + position: 'relative', +}); + +const propRequired = style({ + position: 'absolute', + left: -24, + fontSize: '24px', + color: '#aaa', + + '&:hover:after': { + content: 'attr(data-hint)', + display: 'inline-block', + position: 'absolute', + left: 0, + borderRadius: '3px', + bottom: '40px', + padding: '0 8px', + fontSize: '12px', + color: '#fff', + background: '#333', + zIndex: 10, + }, }); const propLabel = style({ + display: 'inline-block', backgroundColor: '#f0f0f0', borderRadius: '3px', padding: '0 8px', margin: '8px 16px 8px 0', textDecoration: 'none', + whiteSpace: 'nowrap', }); export default function ComponentDocs(props: any) { @@ -41,16 +62,23 @@ export default function ComponentDocs(props: any) {

{props.info.description}

Props

{Object.keys(props.info.props).map(prop => { - const { flowType } = props.info.props[prop]; + const { flowType, type, required } = props.info.props[prop]; return (
+ + {required ? '*' : ''} + - {prop}: {flowType.raw || flowType.name} + {prop}: {flowType.name === 'any' && type ? (type.raw || type.name) : (flowType.raw || flowType.name)} {props.info.props[prop].description}