[BD-46] docs: refactoring Table on docs site

[PKulkoRaccoonGang]

Description

• check pages in Guides and Foundations and update styles for tables;
• replace deprecated Tables with existing ones in Paragon.

Merge Checklist

• If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
• Does your change adhere to the documented style conventions?
• Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
• Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
• Were your changes tested in the example app?
• Is there adequate test coverage for your changes?
• Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please add wittjeff and adamstankiewicz as reviewers on this PR.

Post-merge Checklist

• Verify your changes were released to NPM at the expected version.
• If you'd like, share your contribution in #show-and-tell.
• 🎉 🙌 Celebrate! Thanks for your contribution.

[openedx-webhooks]

Thanks for the pull request, @PKulkoRaccoonGang!

When this pull request is ready, tag your edX technical lead.

[codecov]

Codecov Report

Base: 90.41% // Head: 90.41% // No change to project coverage 👍

Coverage data is based on head (ab3e6fd) compared to base (7ab67f6).
Patch has no changes to coverable lines.

Additional details and impacted files

@@           Coverage Diff           @@
##            alpha    #1859   +/-   ##
=======================================
  Coverage   90.41%   90.41%           
=======================================
  Files         192      192           
  Lines        3120     3120           
  Branches      746      746           
=======================================
  Hits         2821     2821           
  Misses        283      283           
  Partials       16       16           

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[viktorrusakov]

would be better to implement a custom cell component and use accessor option of DataTable, e.g.

const CodeCell = ({ value }) => (
  <code style={{ fontSize: '16px' }}>
    {value}
  </code>
);

...

columns={[
  {
    Header: 'Use',
    accessor: 'use',
    Cell: CodeCell,
  },
  {
    Header: 'Color',
    accessor: 'color',
    Cell: CodeCell,
  },
  {
    Header: 'Level',
    accessor: 'level',
    Cell: CodeCell,
  },
]}

[PKulkoRaccoonGang]

Done

[viktorrusakov]

can you be more specific here about what function it is? I mean what it expects as arguments and what it returns, see Declaration component for example

[PKulkoRaccoonGang]

Ok, thaks

[viktorrusakov]

isn't this IBoxShadowModel interface defined above?

[PKulkoRaccoonGang]

Yes, it`s true

[viktorrusakov]

I think we have .align-baseline CSS utility class for this style, could we use it here?

[PKulkoRaccoonGang]

Good, thanks

[viktorrusakov]

you can wrap both name and text into span tag or something else and just render it instead of using _dangerouslySetInnerHTML

[PKulkoRaccoonGang]

Thanks

[viktorrusakov]

no need to do .map here, data={bodyClassesAndDescriptions} should work

[PKulkoRaccoonGang]

Thanks, done

[viktorrusakov]

no need to do .map here, data={linksClassesAndDescriptions} should work

[PKulkoRaccoonGang]

Thanks, simplified

[viktorrusakov]

no need to do .map here, data={decorationAndEmphasisClassesAndDescriptions} should work

[PKulkoRaccoonGang]

Thanks, simplified

[viktorrusakov]

no need to do .map here, data={alignmentClassesAndDescriptions} should work

[PKulkoRaccoonGang]

Thanks, simplified

[adamstankiewicz]

🎉

[openedx-webhooks]

@PKulkoRaccoonGang 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.

[edx-semantic-release]

🎉 This PR is included in version 21.0.0-alpha.7 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀