Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: introduce Table components for use in Markdown #613 #844

Merged

Conversation

ryanoglesby08
Copy link
Contributor

This makes it easier for consumers to override individual components in their styleguide, specifically tables in this PR.

  • Update markdown-to-jsx to v6.4.1 to get some table rendering bug fixes. Release notes

@codecov-io
Copy link

codecov-io commented Feb 26, 2018

Codecov Report

Merging #844 into master will increase coverage by 0.05%.
The diff coverage is 100%.

Impacted Files Coverage Δ
...rsg-components/Markdown/Table/TableCellRenderer.js 100% <100%> (ø)
...rsg-components/Markdown/Table/TableHeadRenderer.js 100% <100%> (ø)
src/rsg-components/Markdown/Table/TableRenderer.js 100% <100%> (ø)
src/rsg-components/Markdown/Markdown.js 100% <100%> (ø) ⬆️
...rsg-components/Markdown/Table/TableBodyRenderer.js 100% <100%> (ø)
.../rsg-components/Markdown/Table/TableRowRenderer.js 100% <100%> (ø)
... and 1 more

Copy link
Member

@sapegin sapegin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

thead: {
composes: '$hr',
},
tbody: {},
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we create TableBody and TableRow component to make styling possible?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added!


export function TableCellRenderer({ classes, header, children }) {
if (header) {
return <th className={cx(classes.td, classes.th)}>{children}</th>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can use JSS composition (like in the original version: composes: '$td') and avoid classnames, I this it would be a little bit nicer ;-)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!


const styles = ({ space, color, fontFamily }) => ({
table: {
...paraStyles({ space, color, fontFamily }).para,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should define color and line-height on td, and then we only need margin from Para which whould be copied here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

@sapegin sapegin merged commit 1ce5fd6 into styleguidist:master Feb 26, 2018
@sapegin
Copy link
Member

sapegin commented Feb 26, 2018

Thanks, merged!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants