feat(scrollbar): replace TODO colors with React-defined tokens#33705
feat(scrollbar): replace TODO colors with React-defined tokens#33705kamja44 wants to merge 2 commits intofacebook:mainfrom
Conversation
Replaced placeholder colors in VerticalScrollBarView.js and constants.js with standardized React-defined colors, resolving the inline TODO comment. Note: REACT_RESIZE_BAR_BORDER's SCROLL_BORDER is not defined in constants, so it was intentionally left unchanged.
|
Hi @kamja44! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
|
This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated. |
|
Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you! |
Replaced placeholder colors in VerticalScrollBarView.js and constants.js with standardized React-defined colors, resolving the inline TODO comment.
Note: REACT_RESIZE_BAR_BORDER's SCROLL_BORDER is not defined in constants, so it was intentionally left unchanged.
Summary
This is one of my first contributions to open source.
I'm starting with small cleanup tasks like addressing
// TODOcomments to get more familiar with the codebase and contribution process.I'm looking forward to contributing more over time 🙂
This change resolves several TODO comments related to placeholder scrollbar colors in
VerticalScrollBarView.js.Previously, the scrollbar background (
REACT_RESIZE_BAR) and thumb (SCROLL_CARET) were using temporary color values that were not aligned with the React theme system. Although these values were defined in theCOLORSobject, they lacked corresponding CSS variables and were therefore rendered with incorrect or fallback colors.To address this:
COLORSobject:SCROLL_TRACKandSCROLL_THUMBupdateColorsToMatchTheme()to read their values from--color-scroll-trackand--color-scroll-thumbREACT_RESIZE_BARandSCROLL_CARETin thedraw()method with the newSCROLL_TRACKandSCROLL_THUMBentriesThe
REACT_RESIZE_BAR_BORDERcolor was intentionally left unchanged, as there is no corresponding CSS variable defined for it.As a result, the scrollbar visuals are now fully integrated with the theme system. Colors are dynamically resolved from CSS variables, removing the need for hardcoded placeholder values and improving maintainability and theming consistency.
How did you test this change?
updateColorsToMatchTheme()yarn testyarn lintyarn flow dom-nodeyarn build