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 hasSquareCorners is false, all four corners of the table should have an 8px border-radius.
When hasSquareCorners is false, and pagination is present, the bottom-left and bottom-right corners of the table should have zero border-radius.
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.
When hasSquareCorners is true, all four corners of the table should have a zero border-radius.
When hasSquareCorners is true, and pagination is present, all four corners of the pagination component should have a zero border-radius.
Docs Examples
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
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.
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 hasSquareCorners prop, and corners shouldn't spill when used inside card. If hasPagination is true, then the corners of the pagination should match.
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
hasSquareCorners
isfalse
, all four corners of the table should have an 8px border-radius.hasSquareCorners
isfalse
, and pagination is present, the bottom-left and bottom-right corners of the table should have zero border-radius.hasSquareCorners
isfalse
, and pagination is present, the bottom-left and bottom-right corners of the pagination component should have an 8px border-radius.hasSquareCorners
istrue
, all four corners of the table should have a zero border-radius.hasSquareCorners
istrue
, and pagination is present, all four corners of the pagination component should have a zero border-radius.Docs Examples
hasSquareCorners
and an example. Explain that tables inside Cards should usehasSquareCorners=false
, and tables directly on the page should usehasSquareCorners=true
Focus style update
Datagrid
hasSquareCorners
prop, and corners shouldn't spill when used inside card. IfhasPagination
is true, then the corners of the pagination should match.