fix(Button): Add bool to propTypes of attached (#2105)

* fix(Button): Add bool to propTypes of attached fixes #2104 * fix(ButtonGroup): handling of bool attached prop * style(ButtonGroup): Reorder some things
Semantic-Org · Sep 23, 2017 · 0c66410 · 0c66410
1 parent 6d472c6
commit 0c66410
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/src/elements/Button/Button.d.ts b/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;

diff --git a/src/elements/Button/Button.js b/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,

diff --git a/src/elements/Button/ButtonGroup.d.ts b/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;

diff --git a/src/elements/Button/ButtonGroup.js b/src/elements/Button/ButtonGroup.js
@@ -9,6 +9,7 @@ import {
   META,
   SUI,
   useKeyOnly,
+  useKeyOrValueAndKey,
   useValueAndKey,
   useWidthProp,
 } from '../../lib'
@@ -55,7 +56,7 @@ function ButtonGroup(props) {
     useKeyOnly(secondary, 'secondary'),
     useKeyOnly(toggle, 'toggle'),
     useKeyOnly(vertical, 'vertical'),
-    useValueAndKey(attached, 'attached'),
+    useKeyOrValueAndKey(attached, 'attached'),
     useValueAndKey(floated, 'floated'),
     useWidthProp(widths),
     'buttons',
@@ -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,

diff --git a/test/specs/elements/Button/ButtonGroup-test.js b/test/specs/elements/Button/ButtonGroup-test.js
@@ -13,7 +13,6 @@ describe('ButtonGroup', () => {
     widthClass: 'buttons',
   })
 
-  common.propKeyAndValueToClassName(ButtonGroup, 'attached', ['left', 'right', 'top', 'bottom'])
   common.propKeyAndValueToClassName(ButtonGroup, 'floated', SUI.FLOATS)
 
   common.propKeyOnlyToClassName(ButtonGroup, 'basic')
@@ -31,6 +30,8 @@ describe('ButtonGroup', () => {
   common.propKeyOnlyToClassName(ButtonGroup, 'toggle')
   common.propKeyOnlyToClassName(ButtonGroup, 'vertical')
 
+  common.propKeyOrValueAndKeyToClassName(ButtonGroup, 'attached', ['left', 'right', 'top', 'bottom'])
+
   common.propValueOnlyToClassName(ButtonGroup, 'color', SUI.COLORS)
   common.propValueOnlyToClassName(ButtonGroup, 'size', SUI.SIZES)
 })