[UX/UI] Column / Table tabs on right side panel

[lusebille]

The ‘Table / Colonne’ choice stuff is not very UX friendly , It may be clearer if when you select a cell or column it switching automatically to ‘Column’ because if user click a column he probably want to edit it

Enregistrement.de.l.ecran.2024-05-30.a.15.50.20.mov

[manuhabitela]

Shimming in on this (not sure if you'd prefer specific accessibility-related issues @lusebille?)

I'd say the visual way of telling us what is the current tab between "Table" and "Column" is misleading. The unselected tab has the same background as the tab content, and is in bold text.

We also can argue the only way we are visually told about the selected tab is a color change. So what is the selected tab: the colored one, or the one matching the content background + having bold text?

One clearer way to show current tab would be something like this, with border and color change, no border between current tab and content, and the bold text being the selected tab (there are still small color issues in the screenshot but this is to get a broad idea).

[lusebille]

Ok with that UI evolution, I added a tag 'accessibility' @manuhabitela so you can use it ( but you may not have editing rights I don't know) , I made this mock based on your proposal but adding green to icon https://www.figma.com/design/wcpetFt6aOKzTszcvPPWLQ/%5B05%2F24%5D-Grist-Design?node-id=1769-59987&t=NGpS8UWkP5gvIPOv-1

Anyway ( to not forget it) the main topic of this ticket is ' As a user I want to lead on 'column' tab when I click on a cell' (today user stay ob 'table' tab )

[dsagal]

This issue has two parts, so let me comment separately:

Styling tabs

Confirming that the updated design for the tabs in the creator panel (as in the figma link above) is approved, and ready to implement. This one:

Don't forget to test dark mode.

This part is a good first issue. I'll mark it as such.

Switching tabs on selection

The other part of this task is: when the creator panel is open, and a column in table widget is selected (GridView#selectColumn method), then automatically switch the tab in the creator panel to Column. When the full table is selected (GridView#selectAll method), then switch the tab in the creator panel to Table. Other cases (e.g. for other widgets, or when selecting cells) are not so clear, so let's not make other changes at this time.

It would make sense to implement this part separately from styling. Since this is a new behavior, it needs some test case(s) written, and user testing to check that there are no bad surprises.

[lusebille]

I'm adding another styling change proposal for sub tabs in creator panel :

here are the mocks for this proposal : https://www.figma.com/design/wcpetFt6aOKzTszcvPPWLQ/%5B05%2F24%5D-Grist-Design?node-id=2761-141496&t=qX4iHFYd8uzsW8kZ-1

[lusebille]

I reviewed it , it's fine for me 👍