-
Notifications
You must be signed in to change notification settings - Fork 4.5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(toggle-group): add toggle-group component (#1547)
* feat: added toggle-group component * fix(components): ran build:registry script * fix(components): fixed colors in toggle-group - Dark mode border color is now consistent with the toggle component * fix(components): fixed component.json toggle-group - Added the content field to `components.json` for toggle-group - Ran build:registry again * feat(toggle-group): simplify implementation --------- Co-authored-by: shadcn <[email protected]>
- Loading branch information
1 parent
3dc6207
commit 1db90ba
Showing
23 changed files
with
705 additions
and
0 deletions.
There are no files selected for viewing
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
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| --- | ||
| title: Toggle Group | ||
| description: A set of two-state buttons that can be toggled on or off. | ||
| component: true | ||
| radix: | ||
| link: https://www.radix-ui.com/docs/primitives/components/toggle-group | ||
| api: https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference | ||
| --- | ||
|
|
||
| <ComponentPreview name="toggle-group-demo" /> | ||
|
|
||
| ## Installation | ||
|
|
||
| <Tabs defaultValue="cli"> | ||
|
|
||
| <TabsList> | ||
| <TabsTrigger value="cli">CLI</TabsTrigger> | ||
| <TabsTrigger value="manual">Manual</TabsTrigger> | ||
| </TabsList> | ||
| <TabsContent value="cli"> | ||
|
|
||
| ```bash | ||
| npx shadcn-ui@latest add toggle-group | ||
| ``` | ||
|
|
||
| </TabsContent> | ||
|
|
||
| <TabsContent value="manual"> | ||
|
|
||
| <Steps> | ||
|
|
||
| <Step>Install the following dependencies:</Step> | ||
|
|
||
| ```bash | ||
| npm install @radix-ui/react-toggle-group | ||
| ``` | ||
|
|
||
| <Step>Copy and paste the following code into your project.</Step> | ||
|
|
||
| <ComponentSource name="toggle-group" /> | ||
|
|
||
| <Step>Update the import paths to match your project setup.</Step> | ||
|
|
||
| </Steps> | ||
|
|
||
| </TabsContent> | ||
|
|
||
| </Tabs> | ||
|
|
||
| ## Usage | ||
|
|
||
| ```tsx | ||
| import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" | ||
| ``` | ||
|
|
||
| ```tsx | ||
| <ToggleGroup type="single"> | ||
| <ToggleGroupItem value="a">A</ToggleGroupItem> | ||
| <ToggleGroupItem value="b">B</ToggleGroupItem> | ||
| <ToggleGroupItem value="c">C</ToggleGroupItem> | ||
| </ToggleGroup> | ||
| ``` | ||
|
|
||
| ## Examples | ||
|
|
||
| ### Default | ||
|
|
||
| <ComponentPreview name="toggle-group-demo" /> | ||
|
|
||
| ### Outline | ||
|
|
||
| <ComponentPreview name="toggle-group-outline" /> | ||
|
|
||
| ### Single | ||
|
|
||
| <ComponentPreview name="toggle-group-single" /> | ||
|
|
||
| ### Small | ||
|
|
||
| <ComponentPreview name="toggle-group-sm" /> | ||
|
|
||
| ### Large | ||
|
|
||
| <ComponentPreview name="toggle-group-lg" /> | ||
|
|
||
| ### Disabled | ||
|
|
||
| <ComponentPreview name="toggle-group-disabled" /> |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| { | ||
| "name": "toggle-group", | ||
| "dependencies": [ | ||
| "@radix-ui/react-toggle-group" | ||
| ], | ||
| "registryDependencies": [ | ||
| "toggle" | ||
| ], | ||
| "files": [ | ||
| { | ||
| "name": "toggle-group.tsx", | ||
| "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/default/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n VariantProps<typeof toggleVariants>\n>({\n size: \"default\",\n variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n <ToggleGroupPrimitive.Root\n ref={ref}\n className={cn(\"flex items-center justify-center gap-1\", className)}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref}\n className={cn(\n toggleVariants({\n variant: context.variant || variant,\n size: context.size || size,\n }),\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n" | ||
| } | ||
| ], | ||
| "type": "components:ui" | ||
| } |
16 changes: 16 additions & 0 deletions
16
apps/www/public/registry/styles/new-york/toggle-group.json
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| { | ||
| "name": "toggle-group", | ||
| "dependencies": [ | ||
| "@radix-ui/react-toggle-group" | ||
| ], | ||
| "registryDependencies": [ | ||
| "toggle" | ||
| ], | ||
| "files": [ | ||
| { | ||
| "name": "toggle-group.tsx", | ||
| "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/new-york/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n VariantProps<typeof toggleVariants>\n>({\n size: \"default\",\n variant: \"default\",\n})\n\nconst ToggleGroup = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &\n VariantProps<typeof toggleVariants>\n>(({ className, variant, size, children, ...props }, ref) => (\n <ToggleGroupPrimitive.Root\n ref={ref}\n className={cn(\"flex items-center justify-center gap-1\", className)}\n {...props}\n >\n <ToggleGroupContext.Provider value={{ variant, size }}>\n {children}\n </ToggleGroupContext.Provider>\n </ToggleGroupPrimitive.Root>\n))\n\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName\n\nconst ToggleGroupItem = React.forwardRef<\n React.ElementRef<typeof ToggleGroupPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &\n VariantProps<typeof toggleVariants>\n>(({ className, children, variant, size, ...props }, ref) => {\n const context = React.useContext(ToggleGroupContext)\n\n return (\n <ToggleGroupPrimitive.Item\n ref={ref}\n className={cn(\n toggleVariants({\n variant: context.variant || variant,\n size: context.size || size,\n }),\n className\n )}\n {...props}\n >\n {children}\n </ToggleGroupPrimitive.Item>\n )\n})\n\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName\n\nexport { ToggleGroup, ToggleGroupItem }\n" | ||
| } | ||
| ], | ||
| "type": "components:ui" | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Bold, Italic, Underline } from "lucide-react" | ||
|
|
||
| import { | ||
| ToggleGroup, | ||
| ToggleGroupItem, | ||
| } from "@/registry/default/ui/toggle-group" | ||
|
|
||
| export default function ToggleGroupDemo() { | ||
| return ( | ||
| <ToggleGroup type="multiple"> | ||
| <ToggleGroupItem value="bold" aria-label="Toggle bold"> | ||
| <Bold className="h-4 w-4" /> | ||
| </ToggleGroupItem> | ||
| <ToggleGroupItem value="italic" aria-label="Toggle italic"> | ||
| <Italic className="h-4 w-4" /> | ||
| </ToggleGroupItem> | ||
| <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"> | ||
| <Underline className="h-4 w-4" /> | ||
| </ToggleGroupItem> | ||
| </ToggleGroup> | ||
| ) | ||
| } |
22 changes: 22 additions & 0 deletions
22
apps/www/registry/default/example/toggle-group-disabled.tsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Bold, Italic, Underline } from "lucide-react" | ||
|
|
||
| import { | ||
| ToggleGroup, | ||
| ToggleGroupItem, | ||
| } from "@/registry/default/ui/toggle-group" | ||
|
|
||
| export default function ToggleGroupDemo() { | ||
| return ( | ||
| <ToggleGroup disabled type="single"> | ||
| <ToggleGroupItem value="bold" aria-label="Toggle bold"> | ||
| <Bold className="h-4 w-4" /> | ||
| </ToggleGroupItem> | ||
| <ToggleGroupItem value="italic" aria-label="Toggle italic"> | ||
| <Italic className="h-4 w-4" /> | ||
| </ToggleGroupItem> | ||
| <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"> | ||
| <Underline className="h-4 w-4" /> | ||
| </ToggleGroupItem> | ||
| </ToggleGroup> | ||
| ) | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import { Bold, Italic, Underline } from "lucide-react" | ||
|
|
||
| import { | ||
| ToggleGroup, | ||
| ToggleGroupItem, | ||
| } from "@/registry/default/ui/toggle-group" | ||
|
|
||
| export default function ToggleGroupDemo() { | ||
| return ( | ||
| <ToggleGroup size={"lg"} type="multiple"> | ||
| <ToggleGroupItem value="bold" aria-label="Toggle bold"> | ||
| <Bold className="h-4 w-4" /> | ||
| </ToggleGroupItem> | ||
| <ToggleGroupItem value="italic" aria-label="Toggle italic"> | ||
| <Italic className="h-4 w-4" /> | ||
| </ToggleGroupItem> | ||
| <ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"> | ||
| <Underline className="h-4 w-4" /> | ||
| </ToggleGroupItem> | ||
| </ToggleGroup> | ||
| ) | ||
| } |
Oops, something went wrong.
1db90baThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
ui – ./apps/www
ui-shadcn-pro.vercel.app
ui-git-main-shadcn-pro.vercel.app
ui.shadcn.com
example-playground.vercel.app