💄 Update select (#1813)

This commit is contained in:
Luke Vella 2025-07-11 16:35:27 +01:00 committed by GitHub
parent f5eb092d5d
commit 2889967726
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 25 additions and 33 deletions

View file

@ -1,7 +1,6 @@
"use client"; "use client";
import languages, { supportedLngs } from "@rallly/languages"; import languages, { supportedLngs } from "@rallly/languages";
import { Button } from "@rallly/ui/button";
import { import {
Select, Select,
SelectContent, SelectContent,
@ -41,10 +40,8 @@ const LanguageSelect = () => {
router.replace(`/${newLocale}${newPath}`); router.replace(`/${newLocale}${newPath}`);
}} }}
> >
<SelectTrigger asChild> <SelectTrigger className="w-full">
<Button className="w-full"> <SelectValue />
<SelectValue />
</Button>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{Object.entries(languages).map(([code, name]) => ( {Object.entries(languages).map(([code, name]) => (

View file

@ -99,10 +99,8 @@ const DateTimePreferencesForm = () => {
field.onChange(Number.parseInt(value)); field.onChange(Number.parseInt(value));
}} }}
> >
<SelectTrigger asChild> <SelectTrigger>
<Button> <SelectValue />
<SelectValue />
</Button>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{dayjs.weekdays().map((day, index) => ( {dayjs.weekdays().map((day, index) => (

View file

@ -1,4 +1,3 @@
import { Button } from "@rallly/ui/button";
import { import {
Select, Select,
SelectContent, SelectContent,
@ -62,10 +61,8 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = ({
open={open} open={open}
onOpenChange={setOpen} onOpenChange={setOpen}
> >
<SelectTrigger asChild> <SelectTrigger className={className}>
<Button className={className}> <SelectValue placeholder="Select time" />
<SelectValue placeholder="Select time" />
</Button>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{open ? ( {open ? (

View file

@ -1,5 +1,4 @@
import languages from "@rallly/languages"; import languages from "@rallly/languages";
import { Button } from "@rallly/ui/button";
import { Icon } from "@rallly/ui/icon"; import { Icon } from "@rallly/ui/icon";
import { import {
Select, Select,
@ -17,13 +16,11 @@ export const LanguageSelect: React.FunctionComponent<{
}> = ({ className, value, onChange }) => { }> = ({ className, value, onChange }) => {
return ( return (
<Select value={value} onValueChange={onChange}> <Select value={value} onValueChange={onChange}>
<SelectTrigger asChild className={className}> <SelectTrigger className={className}>
<Button> <Icon>
<Icon> <LanguagesIcon />
<LanguagesIcon /> </Icon>
</Icon> <SelectValue />
<SelectValue />
</Button>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{Object.entries(languages).map(([code, name]) => ( {Object.entries(languages).map(([code, name]) => (

View file

@ -81,10 +81,8 @@ const MobilePoll: React.FunctionComponent = () => {
}} }}
disabled={isEditing} disabled={isEditing}
> >
<SelectTrigger asChild className="w-full"> <SelectTrigger className="w-full">
<Button> <SelectValue />
<SelectValue />
</Button>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="all"> <SelectItem value="all">

View file

@ -4,6 +4,7 @@ import * as SelectPrimitive from "@radix-ui/react-select";
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"; import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
import * as React from "react"; import * as React from "react";
import { buttonVariants } from "./button";
import { Icon } from "./icon"; import { Icon } from "./icon";
import { cn } from "./lib/utils"; import { cn } from "./lib/utils";
@ -12,7 +13,7 @@ const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group; const SelectGroup = SelectPrimitive.Group;
const SelectValue = React.forwardRef< const SelectValue = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Value>, React.ComponentRef<typeof SelectPrimitive.Value>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value> React.ComponentPropsWithoutRef<typeof SelectPrimitive.Value>
>(({ ...props }, ref) => { >(({ ...props }, ref) => {
return ( return (
@ -27,17 +28,21 @@ const SelectValue = React.forwardRef<
SelectValue.displayName = SelectPrimitive.Value.displayName; SelectValue.displayName = SelectPrimitive.Value.displayName;
const SelectTrigger = React.forwardRef< const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>, React.ComponentRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => ( >(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger ref={ref} className={cn(className)} {...props}> <SelectPrimitive.Trigger
ref={ref}
className={cn(buttonVariants({ variant: "default" }), className)}
{...props}
>
{children} {children}
</SelectPrimitive.Trigger> </SelectPrimitive.Trigger>
)); ));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectContent = React.forwardRef< const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>, React.ComponentRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => ( >(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal> <SelectPrimitive.Portal>
@ -66,7 +71,7 @@ const SelectContent = React.forwardRef<
SelectContent.displayName = SelectPrimitive.Content.displayName; SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = React.forwardRef< const SelectLabel = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Label>, React.ComponentRef<typeof SelectPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<SelectPrimitive.Label <SelectPrimitive.Label
@ -81,7 +86,7 @@ const SelectLabel = React.forwardRef<
SelectLabel.displayName = SelectPrimitive.Label.displayName; SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = React.forwardRef< const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>, React.ComponentRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => ( >(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item <SelectPrimitive.Item
@ -105,7 +110,7 @@ const SelectItem = React.forwardRef<
SelectItem.displayName = SelectPrimitive.Item.displayName; SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = React.forwardRef< const SelectSeparator = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Separator>, React.ComponentRef<typeof SelectPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
>(({ className, ...props }, ref) => ( >(({ className, ...props }, ref) => (
<SelectPrimitive.Separator <SelectPrimitive.Separator