-
Notifications
You must be signed in to change notification settings - Fork 46
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
DS 835: Table Element #2548
DS 835: Table Element #2548
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@colbytcook, I reviewed the docs and noticed:
- Docs > Table Examples: The full-width tables aren't full width.
- Tests > Table Default html: The tables are full-width until the JS loads. I think @MarcinMr works around this on the 6.x branch by scoping the
width: 100%
rule to.c-bolt-table > table
, or in your casee-bolt-table-wrapper > .e-bolt-table
.
These are the only issues I found. Here are a couple other thoughts, not blockers:
Full-width tables in wysiwyg
If I'm a content author and I make a plain HTML table and I want it to be width 100% (and I'm not going to edit the raw markup), how do I do this? Since the "full-width" style comes from the wrapper and the wrapper is added by JS I don't think there's anything in place to support full-width tables for a non-power-user. To solve that we'd have to check for some additional class on the <table>
itself. Is this a use case we are solving for? Any thoughts?
Wrapper full-width classname
To make the container full-width I'd actually go with u-bolt-block
, like @MarcinMr did on the 6.x branch. I didn't realize that literally the only thing this wrapper had to do was set display: block
. Alternatively, if you prefer a component class, maybe e-bolt-table-wrapper--full-width
would tell the user more about what it does?
@danielamorse I addressed the feedback you had
Full Width Prop
For WYSIWYG support, we can simply add a class ( I updated the existing docs pages with these changes (where applicable) and created a new documentation page for the full width prop. Let me know if you have any other questions regarding this. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@colbytcook awesome, love the full_width
prop. Tested locally and it looks good to me.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- i think the PR description needs to be updated again, at least since adding the full_width prop, if not more than that.
- see inline comment as well
@@ -0,0 +1,114 @@ | |||
{% set usage %}{% verbatim %} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this demo could probably be shortened, maybe like layout's. The other demos on the page show the full context.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@cjwhitedev I don't mind this initial demo page being longer than Layouts because layout examples are larger scoped than a table.
@cjwhitedev Updated the PR description and responded to your inline comment |
description: | ||
'Generates a table cell as a table header <th> element if set to true. <th> elements can be used in table head, table body, or table footer.', | ||
}, | ||
filters: { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is filters
a real prop? I don't see it used in the twig template or any of the examples.
Jira
https://pegadigitalit.atlassian.net/browse/DS-835
Summary
The new element
table
is created that can replace the basic functionalities of the current Table ComponentDetails
<table>
)<table>
)<table>
if neededHow to test
(Focus on testing in all browsers)
table-element
docs.Release notes
There is a new Table Element that replaces the basic functionalities of the current Table Component