feat: show type badge in DataGrid header #144
Conversation
✅ Deploy Preview for hew-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #144 +/- ##
=======================================
Coverage 82.75% 82.75%
=======================================
Files 49 49
Lines 6499 6499
Branches 457 457
=======================================
Hits 5378 5378
Misses 1121 1121 ☔ View full report in Codecov by Sentry. |
| const backgroundColor = '#13569c'; | ||
|
|
||
| ctx.beginPath(); | ||
| ctx.font = tagFont; | ||
| ctx.fillStyle = backgroundColor; | ||
| ctx.strokeStyle = backgroundColor; | ||
| ctx.lineWidth = 1; | ||
| roundedRect(ctx, x, y - 10, measureTextCached(typeName, ctx, tagFont).width + 16, 18, 4); | ||
| ctx.stroke(); | ||
| ctx.fill(); | ||
| ctx.fillStyle = '#fff'; |
There was a problem hiding this comment.
can we use the data grid theme here? the colors should probably respond to the overall theme. i see in the theme there's a textBubble and bgBubble theme that we could use here source.
There was a problem hiding this comment.
fixed it.
light mode
dark mode
what do you think? I think it's hard to look at the type badge. Also, should badge color be the same or similar to hew badge color? (default badge).
There was a problem hiding this comment.
I agree -- looking at the theme it appears we use the textBubble theme variable as the border of the tags for the tag cell. That said, the badge background color does change with the theme -- could we reproduce the logic from the badge component here?
in addition, note that the badge font weight is bold. that's definitely something we want to retain.
There was a problem hiding this comment.
Dark Mode
Light Mode
| ...bgColor, | ||
| s: bgColor.s > 0 ? 70 : 0, | ||
| }); | ||
| const textColor = getComputedStyle(ctx.canvas).getPropertyValue('--gdg-text-bubble'); |
There was a problem hiding this comment.
i think for the text color we might need to copy the text color logic from the badge as well. as mentioned before, we're using that color variable for the tags text border source
There was a problem hiding this comment.
getComputedStyle(ctx.canvas).getPropertyValue('--gdg-text-bubble'); and theme.textBubble are equivalent.
Did you mean textDark code?
with textDark
Screen.Recording.2024-10-16.at.11.01.51.AM.mov