Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

Issue 567 - Add border-radius support#568

Merged
Marc-Andre-Rivet merged 7 commits intomasterfrom
567-border-radius
Sep 5, 2019
Merged

Issue 567 - Add border-radius support#568
Marc-Andre-Rivet merged 7 commits intomasterfrom
567-border-radius

Conversation

@Marc-Andre-Rivet
Copy link
Copy Markdown
Contributor

@Marc-Andre-Rivet Marc-Andre-Rivet commented Sep 4, 2019

Fixes #567

- apply table borders only to container
- add basic test
@chriddyp chriddyp temporarily deployed to dash-table-review-pr-568 September 4, 2019 14:18 Inactive
ref='table'
className={innerClasses.join(' ')}
style={tableStyle}
style={R.omit(BORDER_PROPERTIES_AND_FRAGMENTS, tableStyle)}
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Omit the border stuff on the inner container and only apply to the outer container - otherwise the border gets doubled.

['borderLeftStyle', 'borderLeftStyle'],
['borderLeftWidth', 'borderLeftWidth'],
['borderRight', 'borderRight'],
['borderRadius', 'borderRadius'],
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Adding support for border-radius and the Python and React flavors

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

whew, exciting file... any reason this couldn't be rewritten DRYer? Like:

const attrParts = [
    // each attr only once
    ['align', 'content'],
    ['align', 'items'],
    ['alignment', 'adjust'],
    ...
];

const makeMap = attrParts => {
   // generate the tripled list in all formats
}

export default new Map(makeMap(attrParts));

Wouldn't need to be done now, but seems more maintainable and efficient.

Copy link
Copy Markdown
Contributor Author

@Marc-Andre-Rivet Marc-Andre-Rivet Sep 4, 2019

Choose a reason for hiding this comment

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

Actually this file is generated - forgot to push the generator update.

Goal of the generator is to prevent having to eval all of this at runtime and only have a table mapping for python/css/react casing. It's not dry because it's essentially a lookup table. That said, your comment below (#568 (comment)) is correct. Should generate a resolved array of these values instead of doing it on the fly for the filtered usages.

borderRadius: '15px',
overflow: 'hidden'
}
}} />)); No newline at end of file
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Basic test to make sure the radius is applied

@Marc-Andre-Rivet Marc-Andre-Rivet marked this pull request as ready for review September 4, 2019 14:21
@chriddyp chriddyp temporarily deployed to dash-table-review-pr-568 September 4, 2019 17:34 Inactive
)
);

export const HEIGHT_AND_WIDTH_PROPERTIES: string[] = R.uniq(
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

heh could get rid of these R.uniq calls too if py2jsCssProperties was rewritten 🌴 and exposed the unique list too 😉

@chriddyp chriddyp temporarily deployed to dash-table-review-pr-568 September 4, 2019 20:08 Inactive
@chriddyp chriddyp temporarily deployed to dash-table-review-pr-568 September 4, 2019 20:36 Inactive
@chriddyp chriddyp temporarily deployed to dash-table-review-pr-568 September 5, 2019 13:11 Inactive
- update generator accordingly
@Marc-Andre-Rivet
Copy link
Copy Markdown
Contributor Author

Marc-Andre-Rivet commented Sep 5, 2019

Updated the generator based on @alexcjohnson comments. Using fragments, and without the regex involved this is indeed smaller than it was before and the initial gen cost in the FE is negligible.

@chriddyp chriddyp had a problem deploying to dash-table-review-pr-568 September 5, 2019 15:16 Failure

export default new Map<string, string>(entries);

export const KnownCssProperties = camels; No newline at end of file
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

heh 🐫 makes it 🌴 🎉

ref='table'
className={innerClasses.join(' ')}
style={tableStyle}
style={INNER_STYLE}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Ah that's way better 🏆

Copy link
Copy Markdown
Collaborator

@alexcjohnson alexcjohnson left a comment

Choose a reason for hiding this comment

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

💃 love it

@Marc-Andre-Rivet Marc-Andre-Rivet merged commit 1c57ddc into master Sep 5, 2019
@Marc-Andre-Rivet Marc-Andre-Rivet deleted the 567-border-radius branch September 5, 2019 15:53
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

style_** props do not support border-radius, border_radius, borderRadius

3 participants