react-magma
react-magma copied to clipboard
Style Bug: Fix corners and borders on Table component
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
- When
hasSquareCornersisfalse, all four corners of the table should have an 8px border-radius. - When
hasSquareCornersisfalse, and pagination is present, the bottom-left and bottom-right corners of the table should have zero border-radius. - When
hasSquareCornersisfalse, and pagination is present, the bottom-left and bottom-right corners of the pagination component should have an 8px border-radius. - When
hasSquareCornersistrue, all four corners of the table should have a zero border-radius. - When
hasSquareCornersistrue, and pagination is present, all four corners of the pagination component should have a zero border-radius.
Docs Examples
- Add a heading for
hasSquareCornersand an example. Explain that tables inside Cards should usehasSquareCorners=false, and tables directly on the page should usehasSquareCorners=true - Update the following examples by putting the tables inside a Card, and keeping the border-radius on: Vertical borders, Pagination
- Update the rest of the examples to turn the border-radius off.
- Fix Other Content broken example
Focus style update
- Remove pixel offset from the table focus outline, so the 2px blue border touches the table.
- 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.
Datagrid
- Test changes above with Datagrid.
- Datagrid should accept
hasSquareCornersprop, and corners shouldn't spill when used inside card. IfhasPaginationis true, then the corners of the pagination should match.
Doing this will negate #1066