feat: table updates to match UI Kit v1.4.3

[saad-mo]

Closes #1500

adds semantic highlighting support for table rows

Test

• http://127.0.0.1:4000/components/table.html
• http://localhost:3030/table

Changelog

New

• fd-table__row--valid, fd-table__row--warning, fd-table__row--error and fd-table__row--information modifiers for semantic row highlighting

Changed

nothing

Removed

nothing

[netlify]

Deploy preview for fundamental ready!

Built with commit 9f389c3

https://deploy-preview-1501--fundamental.netlify.com

[LeoT7508]

1. The Column Header bar should be 40px tall.

2. The color strip on the left of the rows should have 4 px rounded corners on top and bottom left corners.

3. Can we also double check that the link text in the rows is the correct Action 1 color? It doesn't look right.

4. Can we confirm that the spacing from the colored marker and the check box is 12px?

[saad-mo]

1. The Column Header bar should be 40px tall.
2. The color strip on the left of the rows should have 4 px rounded corners on top and bottom left corners.
3. Can we also double check that the link text in the rows is the correct Action 1 color? It doesn't look right.
4. Can we confirm that the spacing from the colored marker and the check box is 12px?

@LeoT7508 all changes are posted, pls review again - https://deploy-preview-1501--fundamental.netlify.com/components/table.html

[LeoT7508]

Looks like the row heights are 50px, they should be 60px.

Can we also make sure that link text is the right color? (0A6ED1)

[bcullman]

@LeoT7508 - this sounds like scope creep. This PR is about adding highlight support for table rows.

Either this PR needs to be retitled, or non-semantic color work needs to happen in another PR.

[saad-mo]

@LeoT7508 - this sounds like scope creep. This PR is about adding highlight support for table rows.

Either this PR needs to be retitled, or non-semantic color work needs to happen in another PR.

This is part of the overall tables updates. I will name the PR to reflect the full scope of the changes.

[LeoT7508]

@saad-mo

Cool, we can handle those other pieces later.

[saad-mo]

@LeoT7508

I looked into the row height. The default height is 52px which is a result of 16px top and bottom padding plus 20px for text. This height changes depending on the which component is added to one of the table cells. For example, row height changes to 56px if you have a small avatar (fd-image--s) and 69px when you add a contextual menu button. I think we should not force a fixed height of 60px on the rows as it will lead to layout issues in more complex scenarios.

if you agree, pls approve the PR.

[LeoT7508]

@saad-mo

I don't know if that totally makes sense. Because if we have different elements in rows then the row heights will vary and the tables will look broken. What issues will we run into with more complex scenarios? I prefer having a consistent design vs something that could vary and not look right.

[jeannewalters]

@LeoT7508 @saad-mo I think more complex scenarios are when values wrap in columns when data is longer for some lines v others. I can definitely see where this might be needed,

[LeoT7508]

@jeannewalters

We have dealt with those, but we should make the base size 60 always unless we have 2 lines of text.

[saad-mo]

We have dealt with those, but we should make the base size 60 always unless we have 2 lines of text.

The cell height is controlled by padding. We can set to 60px for sure plain text, but the height will increase if we add any component, for example, an identifier or a button. and we will quickly run into verticle alignment issues if we set a fixed height of 60px

let's get on a call. I can explain the issue.

[LeoT7508]

Changes look good, padding inside table rows make sense.