cengage / react-magma

https://react-magma.cengage.com
MIT License
21 stars 13 forks source link

Style Bug: Fix corners and borders on Table component #1368

Open orion-cengage opened 2 months ago

orion-cengage commented 2 months ago

In our documentation for tables, I'd like to show our tables with square corners instead of rounded using the included prop. This is primarily because unless you put the table inside a card, then consumers should use the squared style by default.

We need to further refine the border-radius of the Table component to fix visual glitches that are occurring.

Border-radius Updates

  1. When hasSquareCorners is false, all four corners of the table should have an 8px border-radius.
  2. When hasSquareCorners is false, and pagination is present, the bottom-left and bottom-right corners of the table should have zero border-radius.
  3. When hasSquareCorners is false, and pagination is present, the bottom-left and bottom-right corners of the pagination component should have an 8px border-radius.
  4. When hasSquareCorners is true, all four corners of the table should have a zero border-radius.
  5. When hasSquareCorners is true, and pagination is present, all four corners of the pagination component should have a zero border-radius.

Docs Examples

  1. Add a heading for hasSquareCorners and an example. Explain that tables inside Cards should use hasSquareCorners=false, and tables directly on the page should use hasSquareCorners=true
  2. Update the following examples by putting the tables inside a Card, and keeping the border-radius on: Vertical borders, Pagination
  3. Update the rest of the examples to turn the border-radius off.
  4. Fix Other Content broken example

Focus style update

  1. Remove pixel offset from the table focus outline, so the 2px blue border touches the table.
  2. We need to see what this looks like when you put a table inside a card, to make sure the outline doesn't get cut off. image image

Datagrid

  1. Test changes above with Datagrid.
  2. Datagrid should accept hasSquareCorners prop, and corners shouldn't spill when used inside card. If hasPagination is true, then the corners of the pagination should match.
silvalaura commented 2 months ago

Doing this will negate #1066