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.

Sign up for GitHub

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

Jump to bottom

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

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

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

wants to merge 5 commits into from

Conversation

ValentinaKozlova
Copy link
Contributor

@ValentinaKozlova ValentinaKozlova commented Jan 17, 2025 •
edited
Loading

Partner's ask. Discussed it with @micahgodbolt

Previous Behavior

CSS variables were internal

New Behavior

@ValentinaKozlova ValentinaKozlova self-assigned this Jan 17, 2025
fabricteam
fabricteam reviewed Jan 17, 2025
View reviewed changes
change/@fluentui-react-slider-fd76d130-d916-4372-8ebb-4570aa203878.json
@@ -0,0 +1,7 @@
{
Copy link
Collaborator

@fabricteam fabricteam Jan 17, 2025 •
edited
Loading

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 1 screenshots
Image Name Diff(in Pixels) Image Type
Avatar Converged.badgeMask.chromium.png 3 Changed
Drawer 1 screenshots
Image Name Diff(in Pixels) Image Type
Drawer.Full Overlay RTL.chromium.png 1168 Changed

@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 17, 2025 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library		 1.164 MB
291.433 kB		 1.165 MB
291.541 kB		 529 B
108 B
react-slider
Slider		 37.546 kB
12.631 kB		 38.075 kB
12.74 kB		 529 B
109 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 cc1756e0cb08f40d5c356166b0d9abe9beb80b5b

@github-actions GitHub Actions
Copy link

Pull request demo site: URL

micahgodbolt
micahgodbolt reviewed Jan 17, 2025
View reviewed changes
packages/react-components/react-slider/library/src/components/Slider/useSliderStyles.styles.ts
};

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

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I added it this way because of this comment:
#32939 (comment)

Copy link
Member

Choose a reason for hiding this comment

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

If there is good reason to remove the destructuring, that's fine.

@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.

@ValentinaKozlova ValentinaKozlova marked this pull request as ready for review January 20, 2025 12:28
@ValentinaKozlova ValentinaKozlova requested a review from a team as a code owner January 20, 2025 12:28
dmytrokirpa
dmytrokirpa reviewed Jan 21, 2025
View reviewed changes
Copy link
Contributor

@dmytrokirpa dmytrokirpa left a comment •
edited
Loading

Choose a reason for hiding this comment

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

We might not want to expose all internal variables. For instance, sliderThumbPositionVar is a computed value derived from progressVar, so modifying it independently might not be logical.

However, I agree that color and size variables could be safely exposed.

Hotell
Hotell reviewed Jan 21, 2025
View reviewed changes
Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

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

just to double check to make sure we are not breaking our public API contract.

can you confirm that these vars were supposed to be exposed since release ? and this is just fix to previous assumption ?

we should be very careful about exposing internal things ( they are called internal for some reason )

ty

micahgodbolt
micahgodbolt approved these changes Jan 22, 2025
View reviewed changes
Copy link
Member

@micahgodbolt micahgodbolt left a comment

Choose a reason for hiding this comment

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

i'm fine without the desctructuring if we find that its better for compilers.

@ValentinaKozlova ValentinaKozlova mentioned this pull request Jan 24, 2025
Open
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fabricteam fabricteam fabricteam left review comments

@dmytrokirpa dmytrokirpa dmytrokirpa left review comments

@Hotell Hotell Hotell left review comments

@micahgodbolt micahgodbolt micahgodbolt approved these changes

At least 1 approving review is required to merge this pull request.

Assignees

@ValentinaKozlova ValentinaKozlova

Labels
Component: Slider
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug]: internal CSS variables aren't exported for Slider component
5 participants
@ValentinaKozlova @micahgodbolt @Hotell @dmytrokirpa @fabricteam