fix(slider): Place last dragged slider handle over the other handle #1778
Conversation
This file contains 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
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@mauriciabad is attempting to deploy a commit to the NextUI Team on Vercel. A member of the Team first needs to authorize it. |
jrgarciadev
approved these changes
Oct 22, 2023
jrgarciadev
added a commit
that referenced
this pull request
Nov 3, 2023
* feat: Slider Component (#1686) * feat(slider): initial structure * chore(slider): readme improved * fix: fixed border color of slider track * docs: added range story * feat: added rtl support to slider * feat: improved value label formatting * feat: refactor styling and add colors support to slider * chore: improved thumb color * docs: improved slider stories * chore(slider): default color changed by foreground * Update packages/core/theme/src/components/slider.ts Co-authored-by: Jakob Guddas <[email protected]> * feat: added fillOffset prop * Update packages/components/slider/src/use-slider.ts * fix(slider): animation * Update packages/components/slider/src/use-slider.ts * Update packages/core/theme/src/components/slider.ts * feat: slider steps * refactor: renamed variables * feat: improved slider step styling * fix: hide infinite steps * fix: fixed step transparency issue * fix: fixed thumb focus issue * Update packages/components/slider/src/use-slider.ts Co-authored-by: Junior Garcia <[email protected]> * feat(slider): vertical orientation added, start & end content, bug fixes * chore(slider): tests added * fix(docs): scrollbar added to the sidebar (#1743) * feat(slider): marks added * chore(slider): example ts-doc changed * feat(slider): vertical marks support * feat(core): slider tooltip support added, popover modified (#1746) * Feat/slider custom styles (#1751) * feat(slider): custom styles story added * fix(slider): custom styles on different sizes * Fix/slider tooltip android position (#1753) * feat(slider): custom styles story added * fix(slider): tooltip update position dependecies added * fix(popover): arrow placements improved * feat(slider): docs started, custom thumb and custom output stories added * feat(slider): render function added to custom render the slider parts * feat(slider): docs in progress, new properties and examples added * fix(slider): some issues fixed, output renamed to value, documentation improved * feat(slider): docs done * chore: changeset --------- Co-authored-by: Jakob Guddas <[email protected]> * Client side routing (#1764) * feat(slider): initial structure * chore(slider): readme improved * fix: fixed border color of slider track * docs: added range story * feat: added rtl support to slider * feat: improved value label formatting * feat: refactor styling and add colors support to slider * chore: improved thumb color * docs: improved slider stories * chore(slider): default color changed by foreground * Update packages/core/theme/src/components/slider.ts Co-authored-by: Jakob Guddas <[email protected]> * feat: added fillOffset prop * Update packages/components/slider/src/use-slider.ts * fix(slider): animation * Update packages/components/slider/src/use-slider.ts * Update packages/core/theme/src/components/slider.ts * feat: slider steps * refactor: renamed variables * feat: improved slider step styling * fix: hide infinite steps * fix: fixed step transparency issue * fix: fixed thumb focus issue * Update packages/components/slider/src/use-slider.ts Co-authored-by: Junior Garcia <[email protected]> * feat(slider): vertical orientation added, start & end content, bug fixes * chore(slider): tests added * feat(slider): marks added * chore(slider): example ts-doc changed * feat(slider): vertical marks support * feat(core): slider tooltip support added, popover modified (#1746) * Feat/slider custom styles (#1751) * feat(slider): custom styles story added * fix(slider): custom styles on different sizes * Fix/slider tooltip android position (#1753) * feat(slider): custom styles story added * fix(slider): tooltip update position dependecies added * fix(popover): arrow placements improved * feat(slider): docs started, custom thumb and custom output stories added * feat(slider): render function added to custom render the slider parts * feat(slider): docs in progress, new properties and examples added * fix(slider): some issues fixed, output renamed to value, documentation improved * feat(slider): docs done * chore: changeset * chore: react aria packages upgraded * feat(system): router provider added * feat: client side routing support added to items components * chore(docs): routing docs started * chore: changeset * feat(docs): client side routing documented * feat(pagination): client router support added to pagination * fix(link): csr added --------- Co-authored-by: Jakob Guddas <[email protected]> * feat: added RTL support to accordion component (#1725) * feat: added RTL support to accordion component * Create healthy-cobras-crash.md * feat: added RTL support to avatar and avatar group component (#1727) * feat: added RTL support to avatar and avatar group components * Create tender-penguins-love.md * Update tender-penguins-love.md * feat: added RTL support to button group component (#1726) * feat: added RTL support to button component * feat: added RTL support to button component * Create orange-bobcats-kneel.md * Update button.ts * refactor(root): styles refactor (#1688) * refactor(root): styles refactor * chore(tabs): remove needless type extends * fix(tabs): typecheck * Breadcrumbs component (#1794) * feat(components): breadcrumbs initial structure * feat(breadcrumbs): tests and examples added * feat(docs): breadcrumbs documentation done * feat(docs): breadcrumbs docs done * chore(breadcrumbs): readme changed * fix(slider): Place last dragged slider handle over the other handle (#1778) * Set `data-focused` in handle * Style focused handle on top * Add tests * fix(core): tests and build * fix(button): show only spinner if button isLoading & isIconOnly (#1800) * fix(button): show only spinner if button isLoading & isIconOnly * chore: add changeset * fix(button): remove repeating code * Fix blur/opaque Popover (#1812) * fix(popover): double underlay click * chore: use ref instead of a state * Feat/controlled scroll shadow (#1819) * feat(scroll-shadow): logic improved, controlled support added * feat(scroll-shadow): controlled visibility * fix(scroll-shadow): visibility tests * Autocomplete component (Single Selection) (#1797) * feat(autocomplete): initial structure * feat(core): use press custom hook implemented, autocomplete improved, input and select animations fixed * chore(button): add console.log on press * feat(core): select & input label position, autocomplete improvements, listbox and menu empty state * chore: tailwind-variants upgraded * chore: autocomplete stories in progress * fix: input and select label placement * fix(autocomplete): popover trigger * chore(root): react-aria pkgs and framer-motion upgraded * fix(input,select): outside label scale removed * feat(autocomplete): more stories and use cases supported * fix(core): custom items support on collection-based comps, menu generic items support added * chore(core): tailwind-variants upgraded, custom tv function adapted * chore(docs): select on-change controlled e.g. changed, sandpack theme fixed * chore(autocomplete): docs started, tests added * chore: in progress * feat(menu): top and end content added, autocomplete docs improved * feat(docs): autocomplete documentation almost done * fix(input): outside styles * feat(docs): autocomplete async filtering added * chore(docs): autocomplete highlighted lines added * feat(docs): autocomplete a11y and slots added * feat(docs): autocomplete a11y and slots added * feat(docs): autocomplete docs done * fix(root): peer dependencies (#1848) * Fix/small issues (#1851) * fix(input): visible outline * fix(button): button group radius prop * chore(navbar): menu item active status added * fix(docs): pagination missing keys custom items * fix(core): extendVariants support added to collection-based components * fix(theme): card body padding * chore(theme): transition added to menu/listbox items * fix(input): textarea styles fixed, new prop added * chore(input): textarea height animated * feat(button): hover opacity added * chore(textarea): hide scroll when the limit hasn't been reached * chore(docs): updated badge added to textarea * feat(docs): blog v2.2.0 image and entry added * fix(avatar): ring primary color * chore(docs): tabs added again, autocomplete iframes removed --------- Co-authored-by: Jakob Guddas <[email protected]> Co-authored-by: Maurici Abad Gutierrez <[email protected]> Co-authored-by: Ivan Kucher <[email protected]>
jrgarciadev
added a commit
that referenced
this pull request
Nov 3, 2023
* feat: Slider Component (#1686) * feat(slider): initial structure * chore(slider): readme improved * fix: fixed border color of slider track * docs: added range story * feat: added rtl support to slider * feat: improved value label formatting * feat: refactor styling and add colors support to slider * chore: improved thumb color * docs: improved slider stories * chore(slider): default color changed by foreground * Update packages/core/theme/src/components/slider.ts Co-authored-by: Jakob Guddas <[email protected]> * feat: added fillOffset prop * Update packages/components/slider/src/use-slider.ts * fix(slider): animation * Update packages/components/slider/src/use-slider.ts * Update packages/core/theme/src/components/slider.ts * feat: slider steps * refactor: renamed variables * feat: improved slider step styling * fix: hide infinite steps * fix: fixed step transparency issue * fix: fixed thumb focus issue * Update packages/components/slider/src/use-slider.ts Co-authored-by: Junior Garcia <[email protected]> * feat(slider): vertical orientation added, start & end content, bug fixes * chore(slider): tests added * fix(docs): scrollbar added to the sidebar (#1743) * feat(slider): marks added * chore(slider): example ts-doc changed * feat(slider): vertical marks support * feat(core): slider tooltip support added, popover modified (#1746) * Feat/slider custom styles (#1751) * feat(slider): custom styles story added * fix(slider): custom styles on different sizes * Fix/slider tooltip android position (#1753) * feat(slider): custom styles story added * fix(slider): tooltip update position dependecies added * fix(popover): arrow placements improved * feat(slider): docs started, custom thumb and custom output stories added * feat(slider): render function added to custom render the slider parts * feat(slider): docs in progress, new properties and examples added * fix(slider): some issues fixed, output renamed to value, documentation improved * feat(slider): docs done * chore: changeset --------- Co-authored-by: Jakob Guddas <[email protected]> * Client side routing (#1764) * feat(slider): initial structure * chore(slider): readme improved * fix: fixed border color of slider track * docs: added range story * feat: added rtl support to slider * feat: improved value label formatting * feat: refactor styling and add colors support to slider * chore: improved thumb color * docs: improved slider stories * chore(slider): default color changed by foreground * Update packages/core/theme/src/components/slider.ts Co-authored-by: Jakob Guddas <[email protected]> * feat: added fillOffset prop * Update packages/components/slider/src/use-slider.ts * fix(slider): animation * Update packages/components/slider/src/use-slider.ts * Update packages/core/theme/src/components/slider.ts * feat: slider steps * refactor: renamed variables * feat: improved slider step styling * fix: hide infinite steps * fix: fixed step transparency issue * fix: fixed thumb focus issue * Update packages/components/slider/src/use-slider.ts Co-authored-by: Junior Garcia <[email protected]> * feat(slider): vertical orientation added, start & end content, bug fixes * chore(slider): tests added * feat(slider): marks added * chore(slider): example ts-doc changed * feat(slider): vertical marks support * feat(core): slider tooltip support added, popover modified (#1746) * Feat/slider custom styles (#1751) * feat(slider): custom styles story added * fix(slider): custom styles on different sizes * Fix/slider tooltip android position (#1753) * feat(slider): custom styles story added * fix(slider): tooltip update position dependecies added * fix(popover): arrow placements improved * feat(slider): docs started, custom thumb and custom output stories added * feat(slider): render function added to custom render the slider parts * feat(slider): docs in progress, new properties and examples added * fix(slider): some issues fixed, output renamed to value, documentation improved * feat(slider): docs done * chore: changeset * chore: react aria packages upgraded * feat(system): router provider added * feat: client side routing support added to items components * chore(docs): routing docs started * chore: changeset * feat(docs): client side routing documented * feat(pagination): client router support added to pagination * fix(link): csr added --------- Co-authored-by: Jakob Guddas <[email protected]> * feat: added RTL support to accordion component (#1725) * feat: added RTL support to accordion component * Create healthy-cobras-crash.md * feat: added RTL support to avatar and avatar group component (#1727) * feat: added RTL support to avatar and avatar group components * Create tender-penguins-love.md * Update tender-penguins-love.md * feat: added RTL support to button group component (#1726) * feat: added RTL support to button component * feat: added RTL support to button component * Create orange-bobcats-kneel.md * Update button.ts * refactor(root): styles refactor (#1688) * refactor(root): styles refactor * chore(tabs): remove needless type extends * fix(tabs): typecheck * Breadcrumbs component (#1794) * feat(components): breadcrumbs initial structure * feat(breadcrumbs): tests and examples added * feat(docs): breadcrumbs documentation done * feat(docs): breadcrumbs docs done * chore(breadcrumbs): readme changed * fix(slider): Place last dragged slider handle over the other handle (#1778) * Set `data-focused` in handle * Style focused handle on top * Add tests * fix(core): tests and build * fix(button): show only spinner if button isLoading & isIconOnly (#1800) * fix(button): show only spinner if button isLoading & isIconOnly * chore: add changeset * fix(button): remove repeating code * Fix blur/opaque Popover (#1812) * fix(popover): double underlay click * chore: use ref instead of a state * Feat/controlled scroll shadow (#1819) * feat(scroll-shadow): logic improved, controlled support added * feat(scroll-shadow): controlled visibility * fix(scroll-shadow): visibility tests * Autocomplete component (Single Selection) (#1797) * feat(autocomplete): initial structure * feat(core): use press custom hook implemented, autocomplete improved, input and select animations fixed * chore(button): add console.log on press * feat(core): select & input label position, autocomplete improvements, listbox and menu empty state * chore: tailwind-variants upgraded * chore: autocomplete stories in progress * fix: input and select label placement * fix(autocomplete): popover trigger * chore(root): react-aria pkgs and framer-motion upgraded * fix(input,select): outside label scale removed * feat(autocomplete): more stories and use cases supported * fix(core): custom items support on collection-based comps, menu generic items support added * chore(core): tailwind-variants upgraded, custom tv function adapted * chore(docs): select on-change controlled e.g. changed, sandpack theme fixed * chore(autocomplete): docs started, tests added * chore: in progress * feat(menu): top and end content added, autocomplete docs improved * feat(docs): autocomplete documentation almost done * fix(input): outside styles * feat(docs): autocomplete async filtering added * chore(docs): autocomplete highlighted lines added * feat(docs): autocomplete a11y and slots added * feat(docs): autocomplete a11y and slots added * feat(docs): autocomplete docs done * fix(root): peer dependencies (#1848) * Fix/small issues (#1851) * fix(input): visible outline * fix(button): button group radius prop * chore(navbar): menu item active status added * fix(docs): pagination missing keys custom items * fix(core): extendVariants support added to collection-based components * fix(theme): card body padding * chore(theme): transition added to menu/listbox items * fix(input): textarea styles fixed, new prop added * chore(input): textarea height animated * feat(button): hover opacity added * chore(textarea): hide scroll when the limit hasn't been reached * chore(docs): updated badge added to textarea * feat(docs): blog v2.2.0 image and entry added * fix(avatar): ring primary color * chore(docs): tabs added again, autocomplete iframes removed * chore: v2 blog post --------- Co-authored-by: Jakob Guddas <[email protected]> Co-authored-by: Maurici Abad Gutierrez <[email protected]> Co-authored-by: Ivan Kucher <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
📝 Description
Fixes #1686 (comment)
⛳️ Current behavior (updates)
There is a bug in the slider that if both handles are placed on the right side, then they can't be draged on to another position, leaving the user stuck. There's still a way to move the handles, using the kayboard or clicking on the track, but the user may not know that those inputs work.
🚀 New behavior
Now, the last grabbed handle has the data attribute
data-focused. Now, the user can't get stuch at an end.💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
With this fix, it's still not possible to "swap" the handles by draging one over the other, wich would be a nice feature, but not important.