Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 don't understand the use of the name heavy, is it the border or colour?
So given this is on the
th
element and there are no other header selectors I would be tempted to use:.table-header
or
.table__header
Then if there are different iterations in the future we can add modifiers then.
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 the default th styling not in effect the table__header? I would have thought that this is a variant of the default th? .table__header--heavy?
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 suppose this is a broader question for designers what is the default border styling for a table?
The work on the
th
should be a reset in base. The component should have a standard border size.Then we have a tones file
Implementation
But that doesn't help the current situation!
Potentially
.table__header--highlight
although this feels a little odd to me without a.table__header
class.As tables are a guaranteed structure in html you get the table styles for free when adding a table without a selector, apply
.table__header
and you get the custom styles, this would be my ideal.Or following the same patten then:
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 like the:
but shouldn't we try to keep the class as close as possible to the component that is being affected i.e. the th?
So it would be .table__header--highlight