🧑‍💻Button.Toggle: allow wrapped Button as child (#3590)

equinor · Aug 19, 2024 · b374b12 · b374b12
1 parent 1d71e1a
commit b374b12
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/packages/eds-core-react/src/components/Button/ToggleButton/ToggleButton.docs.mdx b/packages/eds-core-react/src/components/Button/ToggleButton/ToggleButton.docs.mdx
@@ -72,3 +72,10 @@ Multiple selection allows for logically-grouped options, to have multiple option
 To controll at least one button to be active, you can adapt your `handleChange` function with `selectedIndexes` prop.
 
 <Canvas of={ComponentStories.Controlled} />
+
+### Wrapped Buttons
+
+Be sure to pass on props when wrapping the Button, since `Button.Toggle` uses this to update its childrens state
+
+<Canvas of={ComponentStories.Wrapped} />
+
diff --git a/packages/eds-core-react/src/components/Button/ToggleButton/ToggleButton.stories.tsx b/packages/eds-core-react/src/components/Button/ToggleButton/ToggleButton.stories.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, ComponentProps } from 'react'
 import { Button, ToggleButtonProps, Icon, Tooltip } from '../../..'
 import {
   save,
@@ -122,3 +122,19 @@ export const Controlled: StoryFn<ToggleButtonProps> = () => {
     </Button.Toggle>
   )
 }
+
+export const Wrapped: StoryFn<ToggleButtonProps> = () => {
+  type ButtonProps = ComponentProps<typeof Button> &
+    JSX.IntrinsicAttributes & { title: string }
+
+  const ButtonWrapper = ({ title, ...props }: ButtonProps) => {
+    return <Button {...props}>{title}</Button>
+  }
+  return (
+    <Button.Toggle aria-label="wrapper example">
+      <ButtonWrapper title="Hello" />
+      <ButtonWrapper title="world" />
+      <ButtonWrapper title="foo" />
+    </Button.Toggle>
+  )
+}
diff --git a/packages/eds-core-react/src/components/Button/ToggleButton/ToggleButton.tsx b/packages/eds-core-react/src/components/Button/ToggleButton/ToggleButton.tsx
@@ -9,7 +9,7 @@ import {
   isValidElement,
   AllHTMLAttributes,
 } from 'react'
-import { Button, ButtonProps } from '../Button'
+import { ButtonProps } from '../Button'
 import { Tooltip } from '../../Tooltip'
 import { ButtonGroupProps, ButtonGroup } from '../ButtonGroup'
 
@@ -44,7 +44,7 @@ export const ToggleButton = forwardRef<HTMLDivElement, ToggleButtonProps>(
       index: number,
     ) {
       const childElement = child as ReactElement<AllHTMLAttributes<HTMLElement>>
-      if (isValidElement(child) && child.type === Button) {
+      if (isValidElement(child)) {
         const buttonProps: ButtonProps = {
           'aria-pressed': isSelected ? true : undefined,
           variant: isSelected ? 'contained' : 'outlined',