feat: #218 v5 Table Container and Table Toolbar

[ksolanki7]

Description

Details of Table atoms completed in this PR:

• Table Container
• Table Toolbar

Additional Changes:

• Fix Skeleton style to support flex display

[codacy-production]

Coverage summary from Codacy

See diff coverage on Codacy

Coverage variation	Diff coverage
Report missing for 1e4977d1	✅ 91.67%

Coverage variation details

	Coverable lines	Covered lines	Coverage
Common ancestor commit (1e4977d)	Report Missing	Report Missing	Report Missing
Head commit (12492c8)	4446	3991	89.77%

Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch: <coverage of head commit> - <coverage of common ancestor commit>

Diff coverage details

	Coverable lines	Covered lines	Diff coverage
Pull request (#234)	24	22	91.67%

Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified: <covered lines added or modified>/<coverable lines added or modified> * 100%

See your quality gate settings    Change summary preferences

_{Codacy stopped sending the deprecated coverage status on June 5th, 2024. Learn more}

Footnotes

1. Codacy didn't receive coverage data for the commit, or there was an error processing the received data. Check your integration for errors and validate that your coverage setup is correct. ↩

[ksolanki7]

@kurtdoherty
question: Since this prop accepts a ReactNode, is there a standard approach we should follow for test cases? Specifically, should we replicate the exact children that will be used in production, or would using a simple component, such as a Button, suffice to meet the test case requirements?

[kurtdoherty]

For unit tests, I think it's fine to use fake text for any ReactNode props. Composing in actual atoms like TableToolbar and Menu will result in our subject's snapshot (in this case, TableContainer) capturing the implementation detail of those other components. When those other components are then changed, we'll see test failures here because the snapshot content won't match, which is not something we want.

[kurtdoherty]

Thanks @ksolanki7, looks good 👏 Two nice and simple components 💪

issue: One main problem I've noticed here is the folder and file naming. You seem to have used camel case where the rest of the repo using snake/hyphen case. Can you please update all the files and folders to be consistent with the rest of the repo? 🙏

[kurtdoherty]

question: what was the motivation behind this change?

[ksolanki7]

answer: I was facing challenges using display: inline-block for the parent element, which did not align the child element in the center. So, I updated the display property to flex.

FYI: Figma does not have the display property, which I used to support the child element alignment in the parent container.

[kurtdoherty]

For unit tests, I think it's fine to use fake text for any ReactNode props. Composing in actual atoms like TableToolbar and Menu will result in our subject's snapshot (in this case, TableContainer) capturing the implementation detail of those other components. When those other components are then changed, we'll see test failures here because the snapshot content won't match, which is not something we want.

[kurtdoherty]

question: Is this strictly needed? Do we care what the background of this container is?

[ksolanki7]

answer: I copied this across from Figma, I'll double-check with Andrei if it's a requirement. If not, I will remove it.

[kurtdoherty]

issue: I think we have CSS variables for font weights that we should be using. I can certainly see the variables defined in Figma.

[ksolanki7]

As discussed, the font-weight variables do not work and need some fixes. I will update it once the fix is in place.