Skip to content
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

feat: CMD-114 restore new mobile table ui #317

Draft
wants to merge 5 commits into
base: main
Choose a base branch
from

Conversation

wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Mar 12, 2024

Overview

Replace old mobile table solution (from Core-Styles) with the new mobile table solution (from APCD).

Status

Related

Changes

  • added media query to handle the table being on a smaller screen
  • removed styles for different tables*
  • added styles for different tables*

* Header, No Header, Paragraphs, Paragraphs with Headers, Nested Tables

Testing

  1. Verify nested tables "look right" on wide screen.
  2. Verify nested tables "look right" on narrow screen.
  3. ⚠️ Verify nested table is backwards-compatible. — How?
  4. Verify consistent:
    • borders
    • spacing
    • font (family, size, weight) across clients (CMS, Docs, Portal)
  5. Verify different font size between clients (CMS, Docs, Portal)
  6. Verify all data is available and visible.

UI

Nested Tables

full-size screenshots of wide and narrow view of nested tables
Wide Narrow
Nested (Full) - Wide Nested (Full) - Narrow

All Tables

Note

The "Wide" screenshots were taken on a browser on which I "zoomed out", so the text will appear smaller than on the "Narrow" screenshots.

screenshots (sometimes limited) of wide and narrow view of all tables
Wide Narrow
Nested Nested - Wide Nested - Narrow
With Paragraphs With Paragraphs - Wide With Paragraphs - Narrow
With Paragraphs (Portal) With Paragraphs (Portal) - Wide With Paragraphs (Portal) - Narrow
Basic Basic - Wide Basic - Narrow
Basic (CMS) Basic (CMS) - Wide Basic (CMS) - Narrow
Basic (Docs) Basic (Docs) - Wide Basic (Docs) - Narrow
No Header No Header - Wide No Header - Narrow
No Header (CMS) No Header (CMS) - Wide No Header (CMS) - Narrow
No Header (Docs) No Header (Docs) - Wide No Header (Docs) - Narrow
Via Paragraphs Via Paragraphs - Wide Via Paragraphs - Narrow
Via Paragrphs (CMS) Via Paragrphs (CMS) - Wide Via Paragraphs (CMS) - Narrow
Via Paragraphs (Docs) Via Paragraphs (Docs) - Wide Via Paragraphs (Docs) - Narrow

@wesleyboar wesleyboar marked this pull request as draft March 12, 2024 19:35
@github-actions github-actions bot added the feature A new feature or replacement of existing feature label Mar 12, 2024
@wesleyboar wesleyboar added the minor A feature in backward-compatible manner label Mar 12, 2024
R-Tomas-Gonzalez and others added 3 commits March 15, 2024 16:10
* add in the use of :has to get rid of class

* currently everything is backward capatible except nested tables

* backward compatibility for nested tables

* adds in data-cols. Forgot to add them in before pushing
* fix: cmd-111 empty `data-col`s

* chore: cmd-111 remove `has-data-cols` class

It is outdated and unused.

* fix: cmd-111 responsive table for headless table

* fix: cmd-111 useless space for missing data-col

* refactor: cmd-111 :--table-has-… → :--table--has-…

* refactor: cmd-111 :--table-has-… → :--table--is-responsive

* build: cmd-111 :--table-has-… → :--table--is-responsive

* fix: cmd-111 more :--table-has-… → :--table--is-responsive
@wesleyboar wesleyboar changed the title feat: TUP-534 restore new mobile table ui feat: CMD-114 restore new mobile table ui Mar 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature A new feature or replacement of existing feature minor A feature in backward-compatible manner
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants