Commit Graph

7 Commits

Author SHA1 Message Date
Kian Bazza
5085e48241 feat(components): add origin-aware animations (#6945)
This PR adds origin-aware animations to the following components:

- Context menu
- Dropdown menu
- Hover card
- Menu bar
- Popover
- Select
- Tooltip

This is accomplished with the custom property `--radix-<component>-transform-origin`, exposed by Radix on the following components:

For more information on this custom property, see the Radix docs; context menu as an example: https://www.radix-ui.com/primitives/docs/components/context-menu#origin-aware-animations

You can see a side-by-side comparison in the following video:

https://github.com/user-attachments/assets/ad8d548b-eb8d-4818-acb4-73c7cdaecc3f
2025-03-17 11:04:00 +00:00
Valentin Gavran
d999f803a8 fix(select): make select content scrollable if height is limited (#6681)
* fix(select): make select content scrollable if height is limited

Select content now becomes scrollable when the browser window height is too small to display the full menu. This improves usability on smaller screens.

Radix also supports the same behavior for other components. I will also submit PRs for the other components separately.

Added the following properties to the Select Content component:

- `max-h-[--radix-select-content-available-height]`
- `overflow-y-auto` & `overflow-x-hidden` instead of `overflow-hidden` (existed before)

* fix(select): make select content scrollable if height is limited

Select content now becomes scrollable when the browser window height is too small to display the full menu. This improves usability on smaller screens.

Radix also supports the same behavior for other components. I will also submit PRs for the other components separately.

Added the following properties to the Select Content component:

- `max-h-[--radix-select-content-available-height]`
- `overflow-y-auto` & `overflow-x-hidden` instead of `overflow-hidden` (existed before)

---------

Co-authored-by: shadcn <m@shadcn.com>
2025-03-12 11:16:21 +04:00
Aaron
32f0bc0de9 fix(select): make select placeholder text show as faded (#6055)
Use the [data-placeholder] data attribute supplied by radix-ui instead of the `placeholder` state selector, which doesn't do anything for buttons (afaict, which radix-ui renders `SelectTrigger` into).

Reference: https://www.radix-ui.com/primitives/docs/components/select#api-reference

Before:
![Screenshot from 2024-12-12 15-52-50](https://github.com/user-attachments/assets/106c4c44-d6b9-4513-b2a9-77814ae46b8b)

After:
![image](https://github.com/user-attachments/assets/b09556f7-e274-4918-90c4-32c5aa8773cc)
2025-02-22 08:17:56 +00:00
shadcn
8fad64a854 feat(select): add scroll up and down button 2023-11-12 14:25:35 +04:00
Iain Wandless
ef9fa600a5 feat(select): scrollable with large datasets
update to default ui
2023-10-10 14:01:43 +01:00
shadcn
3c9f7ca0e2 feat: themes (#1135) 2023-08-07 22:39:16 +04:00
shadcn
eeb17545a1 feat: new CLI, Styles and more (#637) 2023-06-22 22:44:52 +04:00