feat: Add LicenseBanner #3568
feat: Add LicenseBanner #3568
Conversation
| const styles = useStyles() | ||
| interface ArrowProps { | ||
| margin?: boolean | ||
| } |
There was a problem hiding this comment.
We could share this typing with the makeStyles block above: makeStyles<Theme, ArrowProps>
There was a problem hiding this comment.
I also wonder if, instead of a margin prop, we add a style prop that we spread in the children. Makes things a bit more flexible, but just a suggestion!
There was a problem hiding this comment.
We may want to consider keeping link text blue for accessibility reasons.
(This comment ended up in the wrong place, sorry for the confusion!)
@Kira-Pilot Yeah, so I changed this because I thought the color combination was bad and it was also going to pose a contrast issue, but I have been wondering if it's obvious enough. I think the chevron and placement helps. But I also think I'm having trouble making it blue or underlined because it's a not a navigation link. It's really a button in functionality. What do you think is the best way to style that? I guess Zenhub styles "Show 4 more" on this page like a link (bold and blue).
There was a problem hiding this comment.
Going to wait on a style prop here because I think this component will be revisited in future color work and it'll be easier to tell then what to do.
There was a problem hiding this comment.
@presleyp That makes sense! I agree with your logic and I don't think it's something we need to change right now. Let's keep it back of mind and look out for link inspo in the future.
Co-authored-by: Kira Pilot <kira@coder.com>
Co-authored-by: Kira Pilot <kira@coder.com>
|
We may want to consider keeping link text blue for accessibility reasons. No strong opinions on this thought - I think we still have a lot of contrast. This looks great! Really thorough and nice job. |
Fixes #3217
Showing the color scheme (more up to date than the gif below):
Description
Pillcomponent fromWorkspaceStatusBadgeto reuse inLicenseBannerViewExpandercomponent fromErrorSummaryto reuse inLicenseBannerViewLicenseBannerView- see remaining issues below!LicenseBannertoentitlementsXService.Left to do:
To try it out
The current api will always return falsey data, as if you are using the open source offering. To view the banner, use the XState inspector to send an event of type "SHOW_MOCK_BANNER". To hide the banner, send, you guessed it, "HIDE_MOCK_BANNER."
Design changes
Here is the Figma. I have deviated from it in some ways:
ErrorSummary.WorkspaceStatusBadgeI also changed the color of the More/Less link from light blue to near-white, which affected the
ErrorSummary. Let me know if you think it's a problem!