More data viewer style tweaks #5055
Conversation
| id="slice-enablement-checkbox" | ||
| className="slice-enablement-checkbox" | ||
| <Checkbox | ||
| styles={checkboxStyles} |
There was a problem hiding this comment.
Figured out how to style FluentUI controls without hacks, went back and changed this to a FluentUI checkbox
…to joyceerhl/more-styles
Codecov Report
@@ Coverage Diff @@
## main #5055 +/- ##
=====================================
- Coverage 76% 76% -1%
=====================================
Files 404 404
Lines 26877 26877
Branches 3894 3894
=====================================
- Hits 20495 20481 -14
- Misses 4759 4778 +19
+ Partials 1623 1618 -5
|
| case ColumnType.Number: | ||
| return this.renderNumber(this.props.value as number); | ||
|
|
||
| default: | ||
| break; | ||
| } | ||
| } | ||
| // Otherwise an unknown type or a string | ||
| // Otherwise an unknown type, boolean, or a string |
There was a problem hiding this comment.
Yay for updating comments. thanks.
| text-align: right; | ||
| display: flex; | ||
| padding: 3px; | ||
| color: var(--vscode-settings-textInputForeground); |
There was a problem hiding this comment.
Bit hard to track through all the CSS, but this color looks a bit suspicious to me. It's from the GUI settings editor specifically.
https://code.visualstudio.com/api/references/theme-color#settings-editor-colors
I would expect it only to be used alongside textInputBackground which I'm not currently seeing. Using it against other background could lead to accessibility issues.
There was a problem hiding this comment.
Whoops, looks like the background is added later in this PR. This should be ok then as long at this icon is showing up under .slice-data. Is that the case?
There was a problem hiding this comment.
Hm this is actually used against --vscode-menu-background and it's the token used in the figma mockups
There was a problem hiding this comment.
Switching to menu-foreground after discussing with Jill. Eventually I think we want to use whatever the new table widget is using, but I'll wait till the design for that has stabilized.
There was a problem hiding this comment.
Awesome. Thanks for following up with Jill. These color usage mismatches used to cause lots of issue back in Visual Studio so I try to push being strict on them as much as possible.
There was a problem hiding this comment.
I did another pass and found a few more token mismatches for foreground vs background, so fixed those too :)
Found a few issues while testing with different themes, plus some more tweaks to make the data viewer look like the figma mockups.