Text area: update scrollbar styling to match VS Code #338
Conversation
Description of changes Update logic for setting the `disabled` attribute value in the button component to fix a cross-browser bug.
* Add badge and button guidelines without images * Add checkbox guidelines * Add divider guidelines * Add badge artwork * Update badge sections * Fix image * Update badge image * Add hero assets for all components * More guideline updates * More do/don'ts * Add radio and tag guidance * Add text field guidelines * Polish docs * Remove unused image * Remove unused image * Update assets structure * Fix progress ring corner radius * Fix images paths * Update button guidelines * Add link to button guidelines * Grammar fixes * Clarify text field guidelines * Grammar * PR feedback * Fix button images resolution * Update badge artwork. Add button artwork * Finish button artwork * Add checkbox artwork * Fix button size in table * More image res fixes * Add data grid and divider artwork * Add dropdown artwork * Add link artwork * Add panels guidelines * Add progress ring artwork * Add radio group artwork * Add missing alt text to radio image markdown * Add tag artwork * Add text area artwork * Add text field artwork * Fix missing badge artwork and alt text * Fix badge border radius * Add icon button example * PR feedback: update checkbox, data grid and dropdown * More PR feedback * Update basic example titles * Fix panel size
| height: ${scrollbarHeight}; | ||
| } | ||
| .control::-webkit-scrollbar-corner { | ||
| background: ${inputBackground}; |
There was a problem hiding this comment.
This works as expected but there are some artifacts (border top/left?) from changing the other scrollbar properties.
There was a problem hiding this comment.
Yeah tried to work on this a bit too and am getting nowhere 😪
Not quite sure where to go from here. If you have some more cycles you could keep working on it but I also think it's minor enough not to be a blocker to merging this PR.
We could just open a new issue and come back to the topic later.
There was a problem hiding this comment.
Will open issue
There was a problem hiding this comment.
Heads up the scrollbar is not visible in high contrast themes. I'd wager you either have to use a different token or do some custom adjustments as modeled in the src/utilities/theme/applyTheme.ts file.
Beyond that issue and the outstanding corner issue everything else looks great!
| height: ${scrollbarHeight}; | ||
| } | ||
| .control::-webkit-scrollbar-corner { | ||
| background: ${inputBackground}; |
There was a problem hiding this comment.
Yeah tried to work on this a bit too and am getting nowhere 😪
Not quite sure where to go from here. If you have some more cycles you could keep working on it but I also think it's minor enough not to be a blocker to merging this PR.
We could just open a new issue and come back to the topic later.
|
Oh if you could also pull in the latest changes from main before merging this PR that would be great! |
…webview-ui-toolkit into ddossett/scrollbars
2 participants
Link to relevant issue
This pull request resolves #258
Description of changes
Adds VS Code scrollbar styling to the
vscode-text-areacomponent.CleanShot.2022-02-16.at.16.29.58.mp4
Todo
scrollbar-cornerissue on resizable text areas.