status tags for modular dashboard #723
Conversation
shayan-roshan
requested review from
davereed,
christyhermansen,
yerramshilpa and
cwolf10
as code owners
|
| &--info { | ||
| @include u-bg("info-lighter"); | ||
| @include u-border("info-light"); |
There was a problem hiding this comment.
Did you confirm with Shannon that they wanted to use info-light from USWDS? For the buttons, we went with a one-off tweak in the color, so the info-light button won't match this border color.
There was a problem hiding this comment.
the description in the story says that the color they want for the border is info-light
There was a problem hiding this comment.
Yes but between making that story and merging #718 the designers chose to adjust what hex code was used for the buttons that you are using on those card. If you just use the USWDS color token, the buttons and status border won't match.
@shannoncates-gsa can you confirm whether the info and error statuses should use the USWDS info and error tokens or should they use the adjusted tokens that we used for the buttons?
There was a problem hiding this comment.
I confirmed with Shannon and fixed the colors.
There was a problem hiding this comment.
You've still got info-lighter which was also re-defined to E7F6F8, that intended to be left to the USWDS color?
| @include u-border("accent-cool"); | ||
| } | ||
| &--locked { |
There was a problem hiding this comment.
Can you include some spacing between the icon and text to match the mockup?
|
mobile view fixed |
|
Mobile view looks better without the overlap. I am seeing that the borders of the main card and the status tag aren't matching though. The status has got square corners and the card is rounded. Might want to round the corners so that everything lines up. 
|
|
border radius fixed |
|
Mobile fix looks good. I still see that the info border is using the USWDS color rather than the slight variation we are using for the button. Did Shannon say that was intended to be different? |
added new status tags, as per:
https://github.com/orgs/GSA/projects/45/views/8?pane=issue&itemId=78916641&issue=GSA%7Csam-design-system%7C1525