From 16153ed3e072d238f276da9a06ee68d5e1460268 Mon Sep 17 00:00:00 2001 From: Devon Govett Date: Wed, 20 Nov 2024 09:06:14 -0800 Subject: [PATCH] chore: Add ActionButtonGroup and ToggleButtonGroup to example apps and tailwind starter kit (#7407) * Add ActionButtonGroup and ToggleButtonGroup to S2 example apps * Add ToggleButtonGroup to RAC Tailwind starter kit * enable verdaccio build * Fix TS * Revert "enable verdaccio build" This reverts commit 3f1ee42878454dc8f5342efd846b5bfceea34bb7. --- examples/s2-parcel-example/src/App.js | 12 +++++++++ examples/s2-vite-project/src/App.tsx | 12 +++++++++ examples/s2-webpack-5-example/src/App.js | 12 +++++++++ starters/tailwind/src/ToggleButton.tsx | 2 +- starters/tailwind/src/ToggleButtonGroup.tsx | 21 +++++++++++++++ .../stories/ToggleButtonGroup.stories.tsx | 27 +++++++++++++++++++ 6 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 starters/tailwind/src/ToggleButtonGroup.tsx create mode 100644 starters/tailwind/stories/ToggleButtonGroup.stories.tsx diff --git a/examples/s2-parcel-example/src/App.js b/examples/s2-parcel-example/src/App.js index 94292892fe7..26200afa8a1 100644 --- a/examples/s2-parcel-example/src/App.js +++ b/examples/s2-parcel-example/src/App.js @@ -14,6 +14,7 @@ import React, { useState } from "react"; import "@react-spectrum/s2/page.css"; import { ActionButton, + ActionButtonGroup, ActionMenu, Button, ButtonGroup, @@ -34,6 +35,7 @@ import { TableView, Text, ToggleButton, + ToggleButtonGroup } from "@react-spectrum/s2"; import Edit from "@react-spectrum/s2/icons/Edit"; import Section from "./components/Section"; @@ -100,6 +102,16 @@ function App() { > Link Button + + Cut + Copy + Paste + + + Bold + Italic + Underline + diff --git a/examples/s2-vite-project/src/App.tsx b/examples/s2-vite-project/src/App.tsx index 041a6b1f96e..8ea3e636222 100644 --- a/examples/s2-vite-project/src/App.tsx +++ b/examples/s2-vite-project/src/App.tsx @@ -14,6 +14,7 @@ import React, { useState } from "react"; import "@react-spectrum/s2/page.css"; import { ActionButton, + ActionButtonGroup, ActionMenu, Button, ButtonGroup, @@ -34,6 +35,7 @@ import { TableView, Text, ToggleButton, + ToggleButtonGroup } from "@react-spectrum/s2"; import Edit from "@react-spectrum/s2/icons/Edit"; import Section from "./components/Section"; @@ -100,6 +102,16 @@ function App() { > Link Button + + Cut + Copy + Paste + + + Bold + Italic + Underline + diff --git a/examples/s2-webpack-5-example/src/App.js b/examples/s2-webpack-5-example/src/App.js index 16c74f390b1..d2cc185657c 100644 --- a/examples/s2-webpack-5-example/src/App.js +++ b/examples/s2-webpack-5-example/src/App.js @@ -14,6 +14,7 @@ import React, { useState } from "react"; import "@react-spectrum/s2/page.css"; import { ActionButton, + ActionButtonGroup, ActionMenu, Button, ButtonGroup, @@ -34,6 +35,7 @@ import { TableView, Text, ToggleButton, + ToggleButtonGroup } from "@react-spectrum/s2"; import Edit from "@react-spectrum/s2/icons/Edit"; import Section from "./components/Section"; @@ -100,6 +102,16 @@ function App() { > Link Button + + Cut + Copy + Paste + + + Bold + Italic + Underline + diff --git a/starters/tailwind/src/ToggleButton.tsx b/starters/tailwind/src/ToggleButton.tsx index d8d7d8c86ce..4f6bce13a27 100644 --- a/starters/tailwind/src/ToggleButton.tsx +++ b/starters/tailwind/src/ToggleButton.tsx @@ -5,7 +5,7 @@ import { focusRing } from './utils'; let styles = tv({ extend: focusRing, - base: 'px-5 py-2 text-sm text-center transition rounded-lg border border-black/10 dark:border-white/10 forced-colors:border-[ButtonBorder] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none cursor-default forced-color-adjust-none', + base: 'px-5 py-2 [&:has(svg:only-child)]:px-2 text-sm text-center transition rounded-lg border border-black/10 dark:border-white/10 forced-colors:border-[ButtonBorder] shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] dark:shadow-none cursor-default forced-color-adjust-none', variants: { isSelected: { false: 'bg-gray-100 hover:bg-gray-200 pressed:bg-gray-300 text-gray-800 dark:bg-zinc-600 dark:hover:bg-zinc-500 dark:pressed:bg-zinc-400 dark:text-zinc-100 forced-colors:!bg-[ButtonFace] forced-colors:!text-[ButtonText]', diff --git a/starters/tailwind/src/ToggleButtonGroup.tsx b/starters/tailwind/src/ToggleButtonGroup.tsx new file mode 100644 index 00000000000..e1b92c1dd30 --- /dev/null +++ b/starters/tailwind/src/ToggleButtonGroup.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { composeRenderProps, ToggleButtonGroup as RACToggleButtonGroup, ToggleButtonGroupProps } from 'react-aria-components'; +import { tv } from 'tailwind-variants'; + +const styles = tv({ + base: 'flex gap-1', + variants: { + orientation: { + horizontal: 'flex-row', + vertical: 'flex-col' + } + } +}); + +export function ToggleButtonGroup(props: ToggleButtonGroupProps) { + return ( + styles({orientation: props.orientation || 'horizontal', className}))} /> + ); +} diff --git a/starters/tailwind/stories/ToggleButtonGroup.stories.tsx b/starters/tailwind/stories/ToggleButtonGroup.stories.tsx new file mode 100644 index 00000000000..90e3ea2b9a4 --- /dev/null +++ b/starters/tailwind/stories/ToggleButtonGroup.stories.tsx @@ -0,0 +1,27 @@ +import type { Meta } from '@storybook/react'; +import React from 'react'; +import { ToggleButton } from '../src/ToggleButton'; +import { ToggleButtonGroup } from '../src/ToggleButtonGroup'; +import { Bold, Italic, Underline } from 'lucide-react' + +const meta: Meta = { + component: ToggleButtonGroup, + parameters: { + layout: 'centered' + }, + tags: ['autodocs'] +}; + +export default meta; + +export const Example = (args: any) => ( + + + + + +); + +Example.args = { + selectionMode: 'multiple' +};