diff --git a/examples/basic/src/components/Alert.jsx b/examples/basic/src/components/Alert.jsx index 5f0a2d5b6..89cf0b80e 100644 --- a/examples/basic/src/components/Alert.jsx +++ b/examples/basic/src/components/Alert.jsx @@ -20,6 +20,7 @@ const AlertStyled = styled('div')` export const Alert = props => Alert.propTypes = { + /** `info`, `positive`, `negative`, or `warning` */ kind: t.oneOf(['info', 'positive', 'negative', 'warning']), } diff --git a/packages/docz-theme-default/src/styles/index.ts b/packages/docz-theme-default/src/styles/index.ts index fc618f8fa..233ed27cd 100644 --- a/packages/docz-theme-default/src/styles/index.ts +++ b/packages/docz-theme-default/src/styles/index.ts @@ -58,7 +58,8 @@ export const styles = { lineHeight: 1.8, }, table: { - overflowY: ['hidden', 'hidden', 'hidden', 'initial'], + overflowY: 'hidden', + overflowX: ['initial', 'initial', 'initial', 'hidden'], display: ['block', 'block', 'block', 'table'], width: '100%', marginBottom: [20, 40], diff --git a/packages/docz/src/components/PropsTable.tsx b/packages/docz/src/components/PropsTable.tsx index 66ad616b3..38151616e 100644 --- a/packages/docz/src/components/PropsTable.tsx +++ b/packages/docz/src/components/PropsTable.tsx @@ -105,6 +105,12 @@ const BasePropsTable: SFC = ({ of: component, components }) => { return null } + const includeDescription: boolean = Object.keys(props).some( + (name: string) => + props[name] && + typeof props[name].description !== 'undefined' && + props[name].description !== '' + ) const Table = components.table || 'table' const Thead = components.thead || 'thead' const Tr = components.tr || 'tr' @@ -122,9 +128,11 @@ const BasePropsTable: SFC = ({ of: component, components }) => { Type Required Default - - Description - + {includeDescription && ( + + Description + + )} @@ -138,11 +146,23 @@ const BasePropsTable: SFC = ({ of: component, components }) => { {name} {getPropType(prop, Tooltip)} {String(prop.required)} - - {prop.defaultValue && - prop.defaultValue.value.replace(/\'/g, '')} - - {prop.description && prop.description} + {!prop.defaultValue ? ( + + [No Default] + + ) : ( + + {prop.defaultValue.value === "''" ? ( + [Empty String] + ) : ( + prop.defaultValue && + prop.defaultValue.value.replace(/\'/g, '') + )} + + )} + {includeDescription && ( + {prop.description && prop.description} + )} ) })}