fix(ui): update slider variable for border-radius in the mozilla rules #3077
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
llfalcao
requested review from
emersonlaurentino and
ommeirelles
and removed request for
a team
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
hellofanny
approved these changes
Nov 3, 2025
Contributor
hellofanny
left a comment
hellofanny
left a comment
There was a problem hiding this comment.
Nice catch! Thanks! 🚀
llfalcao
changed the title
Contributor
Author
|
I've updated the PR title. (slider -> ui) |
ommeirelles
pushed a commit
that referenced
this pull request
Nov 18, 2025
#3077) ## What's the purpose of this pull request? This PR fixes the `border-radius` of the Slider thumb in Firefox. The current CSS rule for Mozilla uses an inexistent variable, making the browser render a square instead of a circle: <img width="1028" height="181" alt="image" src="https://github.com/user-attachments/assets/50c08d79-a6a9-4d31-b2e7-5ef9e287080f" /> ## How it works? The `--fs-slider-thumb-radius` variable is replaced by `--fs-slider-thumb-border-radius`, the one that is defined in the default thumb variables. ## How to test it? - Use the `Local Install Instructions` from the [CodeSandbox CI](https://ci.codesandbox.io/status/vtex/faststore/pr/3077) to add this version in the `package.json` of a store. - Import the `Slider` atom (and styles) in a component following the docs: https://developers.vtex.com/docs/guides/faststore/atoms-slider - Run the store in development mode and browse it in Mozilla Firefox. ### Starters Deploy Preview I'm unable to generate a preview link but here's a screenshot from localhost: <img width="1287" height="617" alt="image" src="https://github.com/user-attachments/assets/f0a5a5e9-d657-41db-9415-303b5d17fefd" /> ## Checklist **PR Title and Commit Messages** - [x] PR title and commit messages follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification - Available prefixes: `feat`, `fix`, `chore`, `docs`, `style`, `refactor`, `ci` and `test` **PR Description** - [ ] Added a label according to the PR goal - `breaking change`, `bug`, `contributing`, `performance`, `documentation`.. _(No permissions. It's a bug though.)_ **Dependencies** - [N/A] Committed the `pnpm-lock.yaml` file when there were changes to the packages **Documentation** - [x] PR description - [N/A] For documentation changes, ping `@Mariana-Caetano` to review and update (Or submit a doc request)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What's the purpose of this pull request?
This PR fixes the
border-radiusof the Slider thumb in Firefox. The current CSS rule for Mozilla uses an inexistent variable, making the browser render a square instead of a circle:How it works?
The
--fs-slider-thumb-radiusvariable is replaced by--fs-slider-thumb-border-radius, the one that is defined in the default thumb variables.How to test it?
Local Install Instructionsfrom the CodeSandbox CI to add this version in thepackage.jsonof a store.Slideratom (and styles) in a component following the docs: https://developers.vtex.com/docs/guides/faststore/atoms-sliderStarters Deploy Preview
I'm unable to generate a preview link but here's a screenshot from localhost:
Checklist
PR Title and Commit Messages
feat,fix,chore,docs,style,refactor,ciandtestPR Description
breaking change,bug,contributing,performance,documentation..(No permissions. It's a bug though.)
Dependencies
pnpm-lock.yamlfile when there were changes to the packagesDocumentation
@Mariana-Caetanoto review and update (Or submit a doc request)