[modification request] table styling in Prose

nsolerieu commented 1 month ago

Problem

SWP asked for getting HTML table support for SEO and solution page using the Prose component. It is not supported as of today

Historical context:

Prose only supports paragraphs, headings, quotes, lists and links today
We kept the initial scope light, assuming that support for other tags will improve over time on an as-needed basis
The inherited styling from the ReadMe project got cut from the current Prose component

Solution

Per discussion between Site and Primer Brand, we would like to implement basic styling (aka- support) for of the <table> markup.

Here is an in-situ suggestion using our text, color, border primitives

We cant restrict the amount of column but would highly suggest to limit to 5 or perhaps fix the min-width of <td> and have an overflow-y: scroll

I do not recommend using a boxed design to minimize the visual noise and fit the editorial styling we have been moving toward brand-wise

Urgency

No major urgency, SWP is working on scaling the template and could use capability anytime

rezrah commented 1 month ago

Discussed at Planning:

@nsolerieu to take on some additional design investigation
re-review at next planning session (next Monday)

nsolerieu commented 1 month ago

Scope

This is not the data table component, we do not have the same control since the user is the one shaping the table DOM structure - thsu we can't create a "shell" only style the native HTML markup

Current version of table styling int he github ecosystem: the blog

Design notes:

Looks generic and unpolished
Color looks branded/opinioated
Spacing is very large and formated for few column use (3-4 max)
Borders add a lot of noise
This looks optimized for web 2.0 standards
Mobile behavior is standard - shrink evenly

Desktop	Mobile

Test with real content

Without overriding the native behavior of the table markup, things will squich on mobile which is not working on mobile and could use a collapse specific styling with sticky header.

Text content

Desktop	Mobile

Data

Desktop	Mobile

Suggestion

The only mobile solution to fix this mobile issue is to collapse and keep the table header for context like the example here. This is achieve by adding a data-label to each <td>

Desktop	Mobile

nsolerieu commented 3 weeks ago

Primer Brand x Site design

We decided to not pursue the suggested approach for these reasons:

Allowing editors to pass classes/dat attributes in HTML is not secure
Expecting editors to know what to insert in HTML is unlikely
Text don't belong in a table, especially the large amount we are expecting

Guidelines

No text in tables. Text based comparison or content sets should be formatted as regular text and follow regular editorial guidelines (heading > Text > Separator > Smaller heading > Text > ... )
Large numerical data sets (larger that 4 column) should be formatted using a dedicated data-table
Numerical data set with row label followed by up to 2 columns the ideal case for using this in-prose HTML table

primer / brand