[WIP] Table: Add header, footer and striped style colors #31696
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
aaronrobertshaw
added
[Type] Enhancement
|
Size Change: +804 B (0%) Total Size: 1.31 MB
ℹ️ View Unchanged
|
|
@jasmussen would you have a moment to share some thoughts on potential options for the table block’s UI for secondary colors? The table block was recently updated to use colors block support so it could allow a greater range of background colors as well as control over font color. Part of the feedback of that was to extend this and allow control over secondary background and text colors for the striped style as well as the table header and footer. This all obviously adds a lot of color controls. The ad-hoc controls can’t currently be inserted to the automatically added colors panel. I’ve created this PR as a PoC so we can explore how to solve these UI issues. Currently, the secondary color controls for the striped rows, header or footer only show if they are relevant to the current block i.e. Header background and text color only show if the table has a header etc. Once the new design for the collapsed color control is implemented it would reduce clutter of all these controls. I'm just not sure that would be enough. |
|
Thanks for the ping. This is what I see:
That is definitely a lot of controls, and would benefit profoundly from the reduced color picker interface we have outlined in #27473 (comment). The amount of colors and the fact that they are in a separate panel is especially problematic when the panel gets closed:
High level I feel like we are stressing the limits of the current controls, and although I'm aware of the need to provide additional design tools to enable better patterns, I do worry we are treading down the wrong path by not addressing #27331 sooner. There's also layout shift when the "Secondary Colors" panel appears, moving the toggle from where your cursor was. In the nitpick category, we should reduce duplicated words, so if the panel is called "Secondary colors" (should be sentence case like the others), we don't also need the "color" suffix for labels inside. So what might it look like if we did have material from #27473 and #27331 available to us? Here's a work in progress that uses ingredients. It's a work in progress because I'm not quite happy with all the details, but sharing as it can hopefully get the gist across:
A few of the guiding principles there:
|
11 tasks
|
Closing this old PR. A lot has changed since it was created. If there is any desire for greater design control over table colors, starting from a clean slate would provide a better foundation. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Related: #31261
Description
Adds control for setting background and font colors for the table block's header and footer as well as the striped block style's alternating rows.
How has this been tested?
Manually.
Screenshots
Types of changes
New feature.
Checklist:
*.native.jsfiles for terms that need renaming or removal).