diff --git a/src/components/Buttons/CircleButton.js b/src/components/Buttons/CircleButton.js
index 7da386a4..480ac91d 100644
--- a/src/components/Buttons/CircleButton.js
+++ b/src/components/Buttons/CircleButton.js
@@ -55,6 +55,7 @@ const CircleButton = props => {
styles.default,
props.styles
]}
+ disabled={props.disabled}
>
{ props.children }
@@ -64,6 +65,8 @@ const CircleButton = props => {
CircleButton.propTypes = {
/** Label to be used by screen readers */
ariaLabel: PropTypes.string,
+ /** Bool to disable click/touch listeners */
+ disabled: PropTypes.bool,
/** Callback function called after button click */
onClick: PropTypes.func,
/** Optional style overrides */
diff --git a/src/components/Buttons/__tests__/CircleButton.spec.js b/src/components/Buttons/__tests__/CircleButton.spec.js
index 08a8a78b..4992bc70 100644
--- a/src/components/Buttons/__tests__/CircleButton.spec.js
+++ b/src/components/Buttons/__tests__/CircleButton.spec.js
@@ -66,6 +66,21 @@ it('renders CircleButton with passed ariaLabel correctly', () => {
expect(tree).toMatchSnapshot()
})
+it('renders CircleButton with passed disabled prop correctly', () => {
+ const tree = renderer.create(
+
+
+
+ 1
+
+
+
+ ).toJSON()
+ expect(tree).toMatchSnapshot()
+})
+
it('calls onClick callback correctly', () => {
const onClick = spy()
const CButton = mount(
@@ -85,11 +100,15 @@ it('calls onClick callback correctly', () => {
expect(onClick.calledOnce).toBeTruthy()
})
-it('does not call onClick when not passed one', () => {
+it('does not call onClick when disabled prop is true', () => {
+ const onClick = spy()
const CButton = mount(
-
+
1
@@ -98,4 +117,5 @@ it('does not call onClick when not passed one', () => {
const button = CButton.find('button').first()
button.simulate('click')
+ expect(onClick.calledOnce).toBeFalsy()
})
diff --git a/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap b/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap
index c29d5d72..9420edd7 100644
--- a/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap
+++ b/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap
@@ -9,6 +9,7 @@ exports[`renders CircleButton with Icon correctly 1`] = `
aria-label={undefined}
className="rmq-4534e6b"
data-radium={true}
+ disabled={undefined}
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
@@ -76,6 +77,54 @@ exports[`renders CircleButton with passed ariaLabel correctly 1`] = `
aria-label="this is a button test"
className="rmq-4534e6b"
data-radium={true}
+ disabled={undefined}
+ onBlur={[Function]}
+ onClick={[Function]}
+ onFocus={[Function]}
+ onKeyDown={[Function]}
+ onKeyUp={[Function]}
+ onMouseDown={[Function]}
+ onMouseEnter={[Function]}
+ onMouseLeave={[Function]}
+ style={
+ Object {
+ "backgroundColor": "#FFFFFF",
+ "border": "0",
+ "borderRadius": "50%",
+ "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.26), 0 1px 4px 0 rgba(0, 0, 0, 0.16)",
+ "color": "#43B02A",
+ "height": "40px",
+ "lineHeight": "1",
+ "textAlign": "center",
+ "transition": "background-color 150ms ease-in-out",
+ "width": "40px",
+ "zIndex": 100,
+ }
+ }
+ >
+ 1
+
+
+
+
+`;
+
+exports[`renders CircleButton with passed disabled prop correctly 1`] = `
+