feat(Table): add component, theme, and story #9932

TylerAPfledderer · 2023-04-08T02:19:36Z

Description

This is part of the Implementation of the DS v1

Creates a custom Table component, along with theming and a Storybook story file

Closes #8030

gatsby-cloud · 2023-04-08T02:56:05Z

✅ ethereum-org-website-dev deploy preview ready

Deploy preview
Build logs · 42m build time

TylerAPfledderer · 2023-05-21T20:38:22Z

@pettinarip I've based the creation of this new Table component on the current MarkdownTable, where only the table element is passed to the MDX provider and all the table elements are injected inside.

Based on the fact that Chakra's Table component is a multi-part component, I had to nest the styles for all the table elements inside the table part. And I am only using TableContainer and Table from Chakra, and not the child components.

TylerAPfledderer · 2023-06-16T19:29:56Z

@pettinarip I've based the creation of this new Table component on the current MarkdownTable, where only the table element is passed to the MDX provider and all the table elements are injected inside.

Based on the fact that Chakra's Table component is a multi-part component, I had to nest the styles for all the table elements inside the table part. And I am only using TableContainer and Table from Chakra, and not the child components.

I'm going to see what needs to be done to use all of Chakra's table components to pass in as a group to the components object for markdown content. But I would do that in a separate PR as an improvement.

pettinarip · 2023-06-19T15:01:11Z

@pettinarip I've based the creation of this new Table component on the current MarkdownTable, where only the table element is passed to the MDX provider and all the table elements are injected inside.
Based on the fact that Chakra's Table component is a multi-part component, I had to nest the styles for all the table elements inside the table part. And I am only using TableContainer and Table from Chakra, and not the child components.

I'm going to see what needs to be done to use all of Chakra's table components to pass in as a group to the components object for markdown content. But I would do that in a separate PR as an improvement.

Nice, sounds good.

TylerAPfledderer · 2023-06-20T03:01:21Z

@pettinarip figured out that it was too easy to apply the Chakra table components, and ended up updating this PR with them implemented! 😄

TylerAPfledderer · 2023-06-20T17:48:45Z

@pettinarip I've updated the PR to integrate the new Table component to the templates.

I would point an immediate oddball, like on the /developers/docs/evm/opcodes/ page, where the table is too long in the space without overflow, compressing the header text. I would think resolving this by either extending the content width of the parent container, or allow overflow scrolling of the table with a higher-level min-width. Not sure how consistent this would be between templates. Let me know if you need any clarification here.

(Hopefully more consistency in the new DS with layouts will be helpful here!)

pettinarip · 2023-06-28T19:00:31Z

Nice @TylerAPfledderer

I would point an immediate oddball, like on the /developers/docs/evm/opcodes/ page, where the table is too long in the space without overflow, compressing the header text. I would think resolving this by either extending the content width of the parent container, or allow overflow scrolling of the table with a higher-level min-width. Not sure how consistent this would be between templates. Let me know if you need any clarification here.

I think we would want to keep doing what we have in prod which is a horizontal scroll. cc @nloureiro what do you think of this case?

PR opcodes page

pettinarip

Looks great @TylerAPfledderer

pettinarip · 2023-06-28T18:54:32Z

src/components/Table/index.tsx

+} from "@chakra-ui/react"
+import { MDXProviderComponentsProp } from "@mdx-js/react"
+
+interface TableProps extends ThemingProps<"Table"> {


Curious, would it be the same as importing TableProps from the chakra package?

Correct! .... kinda 😅

It only allows for the theming props and child components, and that's it. I was thinking to lock down the props, unless there was already a consideration for an instance or two that needed to apply other style props directly.

nloureiro · 2023-06-29T08:34:59Z

The table looks great, awesome job! Just one detail we discussed before: the alignment on the head should be to the bottom of the cell and not to the top.

TylerAPfledderer · 2023-06-30T03:40:16Z

The table looks great, awesome job! Just one detail we discussed before: the alignment on the head should be to the bottom of the cell and not to the top.

@nloureiro This has now been added! 😄

TylerAPfledderer · 2023-06-30T04:08:25Z

Nice @TylerAPfledderer

I would point an immediate oddball, like on the /developers/docs/evm/opcodes/ page, where the table is too long in the space without overflow, compressing the header text. I would think resolving this by either extending the content width of the parent container, or allow overflow scrolling of the table with a higher-level min-width. Not sure how consistent this would be between templates. Let me know if you need any clarification here.

I think we would want to keep doing what we have in prod which is a horizontal scroll. cc @nloureiro what do you think of this case?

PR opcodes page

Quick solution here is to remove the layout="fixed" prop, which is a prop that renders table-layout: 'fixed'. But for this opcodes page in particular, it would result in this:

Which of course makes it look like there is no horizontal overflow. (There is a lot of content farther down in the Initial Stack column)

A downside to removing the layout="fixed" is other tables with fewer columns not being able to properly expand the width of their respective pages. (See Staking Withdrawls)

pettinarip · 2023-07-20T10:00:31Z

@TylerAPfledderer

Agreed. I think we need to remove the fixed layout only in the opcodes page for now (unless we detect another case). That will show it in a similar way as we have in prod.

Remove the Table `layout` prop that was set to fixed so it can go back to the default of auto and allow cells to expand width based on content.

TylerAPfledderer · 2023-07-22T01:13:30Z

@pettinarip pushed changes. Should be good to go?

pettinarip · 2023-07-28T16:58:33Z

@TylerAPfledderer same as in the Link PR, it looks good to me but since this PR touches many parts of the website, I want more eyes on it.

It'd be also nice if @nloureiro could take another look at this once he is back.

wackerow · 2023-08-01T12:29:21Z

To help with testing, just did a quick grep of the codebase, and we appear to have markdown tables on the following pages:

wackerow

Did some spot checking on the tables noted above... they're looking great! Seeing proper x-scroll where needed, header appear aligned appropriately (bottom-left by default), custom alignments (ie: | ---: |) appear to be working correctly, and the cells are also matching that horizontal alignment, and seem to be aligned to the top as requested.

Thanks for all the efforts on this @TylerAPfledderer!

pettinarip

🚢

github-actions bot added the review needed 👀 label Apr 8, 2023

pettinarip mentioned this pull request Apr 10, 2023

Fix list & table styles #8139

Closed

TylerAPfledderer marked this pull request as ready for review April 13, 2023 03:42

TylerAPfledderer requested review from samajammin, wackerow, corwintines, pettinarip, minimalsm, jmcook1186 and nhsz as code owners April 13, 2023 03:42

pettinarip mentioned this pull request Apr 14, 2023

Implementation of the DS v1 #9548

Open

TylerAPfledderer mentioned this pull request May 19, 2023

refactor(MarkdownTable): apply TableContainer and header padding #10188

Closed

feat(Table): add component, theme, and story

d9ece15

TylerAPfledderer force-pushed the feat/new-table-theme branch from f45cce0 to d9ece15 Compare May 21, 2023 20:21

TylerAPfledderer added 3 commits May 22, 2023 09:51

style(theme/Table): change row hover to backgroundHighlight

8d2f598

Merge remote-tracking branch 'origin/dev' into feat/new-table-theme

c1c36a2

refactor(theme/Table): use minimal styling as the default.

c62911c

TylerAPfledderer force-pushed the feat/new-table-theme branch from 73fdc9d to c62911c Compare June 15, 2023 21:18

pettinarip assigned TylerAPfledderer Jun 15, 2023

TylerAPfledderer added 3 commits June 16, 2023 15:37

Merge remote-tracking branch 'origin/dev' into feat/new-table-theme

7981280

revert(theme/table): revert to simple variant as default

6a856cc

refactor(theme/table): set text-alignment of headers to initial

7cb260e

TylerAPfledderer added 3 commits June 19, 2023 22:30

refactor(Table): apply the Chakra table components

2144910

feat(theme/Table): add striped variant with header bg color

332db5d

refactor(Table): remove padded wrapper

4bcff66

Merge branch 'dev' into feat/new-table-theme

27f4fbc

nloureiro mentioned this pull request Jun 27, 2023

[Design system V2] Rich tables component #9433

Closed

pettinarip reviewed Jun 28, 2023

View reviewed changes

TylerAPfledderer added 4 commits June 29, 2023 18:12

Merge branch 'dev' into feat/new-table-theme

78a101a

fix(theme/component): fix import/export of the Table theme

5f573f1

refactor(Table.stories): add larger gap between component examples

72ea757

refactor(theme/Table): add bottom vertical alignment for headings

3b6606f

TylerAPfledderer added 4 commits June 30, 2023 18:57

Merge remote-tracking branch 'origin/dev' into feat/new-table-theme

be52b27

Merge remote-tracking branch 'origin/dev' into feat/new-table-theme

edcc404

Merge remote-tracking branch 'origin/dev' into feat/new-table-theme

feef8b8

Merge remote-tracking branch 'origin/dev' into feat/new-table-theme

cfc5ab7

TylerAPfledderer added 2 commits July 20, 2023 21:21

fix(Table): remove fixed layout

4162eed

Remove the Table `layout` prop that was set to fixed so it can go back to the default of auto and allow cells to expand width based on content.

chore(Table): add TODO comment regarding fixed layout

32e16c8

Merge branch 'dev' into feat/new-table-theme

bb42801

wackerow approved these changes Aug 1, 2023

View reviewed changes

pettinarip approved these changes Aug 7, 2023

View reviewed changes

pettinarip merged commit a641422 into ethereum:dev Aug 7, 2023

TylerAPfledderer deleted the feat/new-table-theme branch August 7, 2023 15:27

This was referenced Aug 9, 2023

Release candidate: v7.19.0 #10902

Merged

Deploy v7.18.0 #10908

Merged

pettinarip removed the review needed 👀 label Sep 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Table): add component, theme, and story #9932

feat(Table): add component, theme, and story #9932

TylerAPfledderer commented Apr 8, 2023 •

edited

Loading

gatsby-cloud bot commented Apr 8, 2023 •

edited

Loading

TylerAPfledderer commented May 21, 2023

TylerAPfledderer commented Jun 16, 2023

pettinarip commented Jun 19, 2023

TylerAPfledderer commented Jun 20, 2023

TylerAPfledderer commented Jun 20, 2023

pettinarip commented Jun 28, 2023

pettinarip left a comment

pettinarip Jun 28, 2023

TylerAPfledderer Jun 30, 2023

nloureiro commented Jun 29, 2023

TylerAPfledderer commented Jun 30, 2023

TylerAPfledderer commented Jun 30, 2023

pettinarip commented Jul 20, 2023

TylerAPfledderer commented Jul 22, 2023

pettinarip commented Jul 28, 2023

wackerow commented Aug 1, 2023

wackerow left a comment

pettinarip left a comment

feat(Table): add component, theme, and story #9932

feat(Table): add component, theme, and story #9932

Conversation

TylerAPfledderer commented Apr 8, 2023 • edited Loading

Description

gatsby-cloud bot commented Apr 8, 2023 • edited Loading

✅ ethereum-org-website-dev deploy preview ready

TylerAPfledderer commented May 21, 2023

TylerAPfledderer commented Jun 16, 2023

pettinarip commented Jun 19, 2023

TylerAPfledderer commented Jun 20, 2023

TylerAPfledderer commented Jun 20, 2023

pettinarip commented Jun 28, 2023

pettinarip left a comment

Choose a reason for hiding this comment

pettinarip Jun 28, 2023

Choose a reason for hiding this comment

TylerAPfledderer Jun 30, 2023

Choose a reason for hiding this comment

nloureiro commented Jun 29, 2023

TylerAPfledderer commented Jun 30, 2023

TylerAPfledderer commented Jun 30, 2023

pettinarip commented Jul 20, 2023

TylerAPfledderer commented Jul 22, 2023

pettinarip commented Jul 28, 2023

wackerow commented Aug 1, 2023

wackerow left a comment

Choose a reason for hiding this comment

pettinarip left a comment

Choose a reason for hiding this comment

TylerAPfledderer commented Apr 8, 2023 •

edited

Loading

gatsby-cloud bot commented Apr 8, 2023 •

edited

Loading