Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(react-slider): Export internal CSS vars #33682

Draft
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

ValentinaKozlova
Copy link
Contributor

Partner's ask. Discussed it with @micahgodbolt

Previous Behavior

CSS variables were internal

New Behavior

Exported those variables

@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Jan 17, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual regressions to review in the fluentuiv9 Visual Regression Report

Avatar Converged 2 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.Badge Mask RTL.chromium.png 1 Changed
Avatar Converged.badgeMask.chromium.png 2 Changed
Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.Full Overlay Dark Mode.chromium.png 983 Changed

Copy link

github-actions bot commented Jan 17, 2025

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.164 MB
291.433 kB
1.164 MB
291.484 kB
287 B
51 B
react-slider
Slider
37.546 kB
12.631 kB
37.833 kB
12.692 kB
287 B
61 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
69.236 kB
20.182 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
222.641 kB
64.474 kB
react-components
react-components: FluentProvider & webLightTheme
44.473 kB
14.597 kB
react-portal-compat
PortalCompatProvider
8.39 kB
2.64 kB
react-timepicker-compat
TimePicker
108.551 kB
36.094 kB
🤖 This report was generated against 556fc8e7b9a921cedbb07c2f0670dfabcf8ec0ed

Copy link

Pull request demo site: URL

};

const { sliderDirectionVar, sliderStepsPercentVar, sliderProgressVar } = sliderCSSVars;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deconstructing all the vars out here saves a bunch of code below. 61 vars with sliderCSSVars prefix. sliderCSSVars.sliderThumbSizeVar could simply be sliderThumbSizeVar

@micahgodbolt
Copy link
Member

yeah, this works fine. my only last suggestion would be to write a story about customizing, which would also validate the work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: internal CSS variables aren't exported for Slider component
3 participants