fix(Button): Add bool to propTypes of attached

src/elements/Button/Button.d.ts

@@ -24,8 +24,8 @@ export interface ButtonProps {
   /** A button can animate to show hidden content. */
   animated?: boolean | 'fade' | 'vertical';
 
-  /** A button can be attached to the top or bottom of other content. */
-  attached?: 'left' | 'right' | 'top' | 'bottom';
+  /** A button can be attached to other content. */
+  attached?: boolean | 'left' | 'right' | 'top' | 'bottom';
 
   /** A basic button is less pronounced. */
   basic?: boolean;

src/elements/Button/Button.js

@@ -41,8 +41,11 @@ class Button extends Component {
       PropTypes.oneOf(['fade', 'vertical']),
     ]),
 
-    /** A button can be attached to the top or bottom of other content. */
-    attached: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+    /** A button can be attached to other content. */
+    attached: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+    ]),
 
     /** A basic button is less pronounced. */
     basic: PropTypes.bool,

src/elements/Button/ButtonGroup.d.ts

@@ -12,8 +12,8 @@ export interface ButtonGroupProps {
   /** An element type to render as (string or function). */
   as?: any;
 
-  /** A button can be attached to the top or bottom of other content. */
-  attached?: 'left' | 'right' | 'top' | 'bottom';
+  /** Groups can be attached to other content. */
+  attached?: boolean | 'left' | 'right' | 'top' | 'bottom';
 
   /** Groups can be less pronounced. */
   basic?: boolean;

src/elements/Button/ButtonGroup.js

@@ -10,6 +10,7 @@ import {
   SUI,
   useKeyOnly,
   useValueAndKey,
+  useKeyOrValueAndKey,
   useWidthProp,
 } from '../../lib'
 
@@ -55,8 +56,8 @@ function ButtonGroup(props) {
     useKeyOnly(secondary, 'secondary'),
     useKeyOnly(toggle, 'toggle'),
     useKeyOnly(vertical, 'vertical'),
-    useValueAndKey(attached, 'attached'),
     useValueAndKey(floated, 'floated'),
+    useKeyOrValueAndKey(attached, 'attached'),
     useWidthProp(widths),
     'buttons',
     className,
@@ -77,8 +78,11 @@ ButtonGroup.propTypes = {
   /** An element type to render as (string or function). */
   as: customPropTypes.as,
 
-  /** A button can be attached to the top or bottom of other content. */
-  attached: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+  /** Groups can be attached to other content. */
+  attached: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
+  ]),
 
   /** Groups can be less pronounced. */
   basic: PropTypes.bool,

test/specs/elements/Button/ButtonGroup-test.js

@@ -13,7 +13,8 @@ describe('ButtonGroup', () => {
     widthClass: 'buttons',
   })
 
-  common.propKeyAndValueToClassName(ButtonGroup, 'attached', ['left', 'right', 'top', 'bottom'])
+  common.propKeyOrValueAndKeyToClassName(ButtonGroup, 'attached', ['left', 'right', 'top', 'bottom'])
+
   common.propKeyAndValueToClassName(ButtonGroup, 'floated', SUI.FLOATS)
 
   common.propKeyOnlyToClassName(ButtonGroup, 'basic')