rename ToggleGroup to ToggleGroup.Root

digdir · Jun 18, 2024 · 6f181b6 · 6f181b6
1 parent e5d1fb4
commit 6f181b6
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 40 deletions.
diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.stories.tsx
@@ -14,16 +14,16 @@ import { ToggleGroup } from '.';
 
 export default {
   title: 'Komponenter/ToggleGroup',
-  component: ToggleGroup,
+  component: ToggleGroup.Root,
 } as Meta;
 
-export const Preview: StoryFn<typeof ToggleGroup> = (args) => {
+export const Preview: StoryFn<typeof ToggleGroup.Root> = (args) => {
   return (
-    <ToggleGroup {...args}>
+    <ToggleGroup.Root {...args}>
       <ToggleGroup.Item value='Peanut'>Peanut</ToggleGroup.Item>
       <ToggleGroup.Item value='Walnut'>Walnut</ToggleGroup.Item>
       <ToggleGroup.Item value='Pistachio'>Pistachio 🤤</ToggleGroup.Item>
-    </ToggleGroup>
+    </ToggleGroup.Root>
   );
 };
 
@@ -39,7 +39,7 @@ export const OnlyIcons: StoryFn<typeof ToggleGroup> = () => {
   };
 
   return (
-    <ToggleGroup
+    <ToggleGroup.Root
       defaultValue={'option-1'}
       onChange={handleChange}
     >
@@ -70,7 +70,7 @@ export const OnlyIcons: StoryFn<typeof ToggleGroup> = () => {
           fontSize='1.5rem'
         />
       </ToggleGroup.Item>
-    </ToggleGroup>
+    </ToggleGroup.Root>
   );
 };
 
@@ -87,7 +87,7 @@ export const Controlled: StoryFn<typeof ToggleGroup> = () => {
         </Button>
       </div>
       <br />
-      <ToggleGroup
+      <ToggleGroup.Root
         value={value}
         size='md'
         onChange={setValue}
@@ -104,7 +104,7 @@ export const Controlled: StoryFn<typeof ToggleGroup> = () => {
           <NewspaperFillIcon fontSize='1.5rem' />
           Walnut
         </ToggleGroup.Item>
-      </ToggleGroup>
+      </ToggleGroup.Root>
       <br />
       <span>You have chosen: {value}</span>
     </>

diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.test.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.test.tsx
@@ -9,9 +9,9 @@ const user = userEvent.setup();
 describe('ToggleGroup', () => {
   test('has generated name for ToggleGroupItem children', () => {
     render(
-      <ToggleGroup>
+      <ToggleGroup.Root>
         <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
-      </ToggleGroup>,
+      </ToggleGroup.Root>,
     );
 
     const item = screen.getByRole('radio');
@@ -20,9 +20,9 @@ describe('ToggleGroup', () => {
 
   test('has passed name to ToggleGroupItem children', (): void => {
     render(
-      <ToggleGroup name='my name'>
+      <ToggleGroup.Root name='my name'>
         <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
-      </ToggleGroup>,
+      </ToggleGroup.Root>,
     );
 
     const item = screen.getByRole<HTMLButtonElement>('radio');
@@ -31,11 +31,11 @@ describe('ToggleGroup', () => {
 
   test('can navigate with tab and arrow keys', async () => {
     render(
-      <ToggleGroup>
+      <ToggleGroup.Root>
         <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
         <ToggleGroup.Item value='test2'>test2</ToggleGroup.Item>
         <ToggleGroup.Item value='test3'>test3</ToggleGroup.Item>
-      </ToggleGroup>,
+      </ToggleGroup.Root>,
     );
 
     const item1 = screen.getByRole<HTMLButtonElement>('radio', {
@@ -58,11 +58,11 @@ describe('ToggleGroup', () => {
   });
   test('has correct ToggleGroupItem defaultChecked & checked when defaultValue is used', () => {
     render(
-      <ToggleGroup defaultValue='test2'>
+      <ToggleGroup.Root defaultValue='test2'>
         <ToggleGroup.Item value='test1'>test1</ToggleGroup.Item>
         <ToggleGroup.Item value='test2'>test2</ToggleGroup.Item>
         <ToggleGroup.Item value='test3'>test3</ToggleGroup.Item>
-      </ToggleGroup>,
+      </ToggleGroup.Root>,
     );
 
     const item = screen.getByRole<HTMLButtonElement>('radio', {
@@ -74,10 +74,10 @@ describe('ToggleGroup', () => {
     let onChangeValue = '';
 
     render(
-      <ToggleGroup onChange={(value) => (onChangeValue = value)}>
+      <ToggleGroup.Root onChange={(value) => (onChangeValue = value)}>
         <ToggleGroup.Item value='test1'>test1</ToggleGroup.Item>
         <ToggleGroup.Item value='test2'>test2</ToggleGroup.Item>
-      </ToggleGroup>,
+      </ToggleGroup.Root>,
     );
 
     const item = screen.getByRole<HTMLButtonElement>('radio', {
@@ -95,13 +95,13 @@ describe('ToggleGroup', () => {
     let onChangeValue = '';
 
     render(
-      <ToggleGroup
+      <ToggleGroup.Root
         defaultValue='test1'
         onChange={(value) => (onChangeValue = value)}
       >
         <ToggleGroup.Item value='test1'>test1</ToggleGroup.Item>
         <ToggleGroup.Item value='test2'>test2</ToggleGroup.Item>
-      </ToggleGroup>,
+      </ToggleGroup.Root>,
     );
 
     const item1 = screen.getByRole<HTMLButtonElement>('radio', {
@@ -123,9 +123,9 @@ describe('ToggleGroup', () => {
   test('if we pass a name, we should have a hidden input with that name', () => {
     const name = 'my-name';
     const { container } = render(
-      <ToggleGroup name={name}>
+      <ToggleGroup.Root name={name}>
         <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
-      </ToggleGroup>,
+      </ToggleGroup.Root>,
     );
 
     const input = container.querySelector(`input[name="${name}"]`);
@@ -135,12 +135,12 @@ describe('ToggleGroup', () => {
   test('if we pass a name, we should have a hidden input with that name and value', () => {
     const name = 'my-name';
     const { container } = render(
-      <ToggleGroup
+      <ToggleGroup.Root
         name='my-name'
         defaultValue='test'
       >
         <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
-      </ToggleGroup>,
+      </ToggleGroup.Root>,
     );
 
     const input = container.querySelector(`input[name="${name}"]`);
@@ -156,13 +156,13 @@ describe('ToggleGroup', () => {
 
       render(
         <form onSubmit={handleSubmit}>
-          <ToggleGroup
+          <ToggleGroup.Root
             name='test'
             defaultValue='test2'
           >
             <ToggleGroup.Item value='test1'>test1</ToggleGroup.Item>
             <ToggleGroup.Item value='test2'>test2</ToggleGroup.Item>
-          </ToggleGroup>
+          </ToggleGroup.Root>
           <button type='submit'>Submit</button>
         </form>,
       );
@@ -177,9 +177,9 @@ describe('ToggleGroup', () => {
 
   test('if we dont pass a name, we should not have a hidden input', () => {
     render(
-      <ToggleGroup>
+      <ToggleGroup.Root>
         <ToggleGroup.Item value='test'>test</ToggleGroup.Item>
-      </ToggleGroup>,
+      </ToggleGroup.Root>,
     );
 
     const input = document.querySelector('input[type="hidden"]');

diff --git a/packages/react/src/components/ToggleGroup/ToggleGroup.tsx b/packages/react/src/components/ToggleGroup/ToggleGroup.tsx
@@ -34,14 +34,14 @@ export type ToggleGroupProps = {
 /** `ToggleGroup` component.
  * @example
  * ```tsx
- * <ToggleGroup onChange={(value) => console.log(value)}>
+ * <ToggleGroup.Root onChange={(value) => console.log(value)}>
  *   <ToggleGroup.Item value='1'>Toggle 1</ToggleGroup.Item>
  *   <ToggleGroup.Item value='2'>Toggle 2</ToggleGroup.Item>
  *   <ToggleGroup.Item value='3'>Toggle 3</ToggleGroup.Item>
- * </ToggleGroup>
+ * </ToggleGroup.Root>
  * ```
  */
-export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
+export const ToggleGroupRoot = forwardRef<HTMLDivElement, ToggleGroupProps>(
   (
     {
       size = 'md',
@@ -109,4 +109,4 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   },
 );
 
-ToggleGroup.displayName = 'ToggleGroup';
+ToggleGroupRoot.displayName = 'ToggleGroupRoot';
diff --git a/packages/react/src/components/ToggleGroup/index.ts b/packages/react/src/components/ToggleGroup/index.ts
@@ -1,17 +1,17 @@
-import { ToggleGroup as ToggleGroupRoot } from './ToggleGroup';
+import { ToggleGroupRoot } from './ToggleGroup';
 import { ToggleGroupItem } from './ToggleGroupItem/ToggleGroupItem';
 
 export type { ToggleGroupProps } from './ToggleGroup';
 export type { ToggleGroupItemProps } from './ToggleGroupItem/ToggleGroupItem';
 
-type ToggleGroupComponent = typeof ToggleGroupRoot & {
+type ToggleGroupComponent = {
+  Root: typeof ToggleGroupRoot;
   Item: typeof ToggleGroupItem;
 };
 
-const ToggleGroup = ToggleGroupRoot as ToggleGroupComponent;
+const ToggleGroup = {} as ToggleGroupComponent;
 
+ToggleGroup.Root = ToggleGroupRoot;
 ToggleGroup.Item = ToggleGroupItem;
 
-ToggleGroup.Item.displayName = 'ToggleGroup.Item';
-
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroup, ToggleGroupRoot, ToggleGroupItem };
diff --git a/packages/react/stories/showcase.stories.tsx b/packages/react/stories/showcase.stories.tsx
@@ -355,14 +355,14 @@ export const Showcase: StoryFn = () => {
           Svar under så finner vi flyreise
         </Paragraph>
         <div className={classes.toggleCombo}>
-          <ToggleGroup
+          <ToggleGroup.Root
             defaultValue='norway'
             size='sm'
           >
             <ToggleGroup.Item value='norway'>Norge</ToggleGroup.Item>
             <ToggleGroup.Item value='sweden'>Sverige</ToggleGroup.Item>
             <ToggleGroup.Item value='utlandet'>Utlandet</ToggleGroup.Item>
-          </ToggleGroup>
+          </ToggleGroup.Root>
           <Combobox
             description='Velg et sted'
             label='Hvor går reisen?'