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 3f1ee42.

Author: devongovett

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
             </LinkButton>
+            <ActionButtonGroup density="compact">
+              <ActionButton>Cut</ActionButton>
+              <ActionButton>Copy</ActionButton>
+              <ActionButton>Paste</ActionButton>
+            </ActionButtonGroup>
+            <ToggleButtonGroup density="compact" selectionMode="multiple">
+              <ToggleButton id="bold">Bold</ToggleButton>
+              <ToggleButton id="italic">Italic</ToggleButton>
+              <ToggleButton id="underline">Underline</ToggleButton>
+            </ToggleButtonGroup>
           </ButtonGroup>
         </Section>
 

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
             </LinkButton>
+            <ActionButtonGroup density="compact">
+              <ActionButton>Cut</ActionButton>
+              <ActionButton>Copy</ActionButton>
+              <ActionButton>Paste</ActionButton>
+            </ActionButtonGroup>
+            <ToggleButtonGroup density="compact" selectionMode="multiple">
+              <ToggleButton id="bold">Bold</ToggleButton>
+              <ToggleButton id="italic">Italic</ToggleButton>
+              <ToggleButton id="underline">Underline</ToggleButton>
+            </ToggleButtonGroup>
           </ButtonGroup>
         </Section>
 

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
             </LinkButton>
+            <ActionButtonGroup density="compact">
+              <ActionButton>Cut</ActionButton>
+              <ActionButton>Copy</ActionButton>
+              <ActionButton>Paste</ActionButton>
+            </ActionButtonGroup>
+            <ToggleButtonGroup density="compact" selectionMode="multiple">
+              <ToggleButton id="bold">Bold</ToggleButton>
+              <ToggleButton id="italic">Italic</ToggleButton>
+              <ToggleButton id="underline">Underline</ToggleButton>
+            </ToggleButtonGroup>
           </ButtonGroup>
         </Section>
 

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]',

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 (
+    <RACToggleButtonGroup
+      {...props}
+      className={composeRenderProps(props.className, (className) => styles({orientation: props.orientation || 'horizontal', className}))} />
+  );
+}

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<typeof ToggleButtonGroup> = {
+  component: ToggleButtonGroup,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+};
+
+export default meta;
+
+export const Example = (args: any) => (
+  <ToggleButtonGroup {...args}>
+    <ToggleButton id="bold" aria-label="Bold"><Bold className="w-4 h-4" /></ToggleButton>
+    <ToggleButton id="italic" aria-label="Italic"><Italic className="w-4 h-4" /></ToggleButton>
+    <ToggleButton id="underline" aria-label="Underline"><Underline className="w-4 h-4" /></ToggleButton>
+  </ToggleButtonGroup>
+);
+
+Example.args = {
+  selectionMode: 'multiple'
+};