Icon: disabled prop should disable onClick callback

[spencer-brown]

Bug Report

Based on past and open issues, it sounds like onClick callback execution has been updated to not fire when disabled === true for some but not all elements. I think Icons should not execute onClick callbacks when disabled === true to maintain parity with other elements (eg Button) which have been updated to maintain parity with HTML.

Steps

A clear and concise description of steps to reproduce the problem.

import React from 'react'
import { Icon } from 'semantic-ui-react'

const IconExampleDisabled = () => <Icon disabled name='users' onClick={() => console.log('hi') }/>

export default IconExampleDisabled

Click the icon.

Expected Result

When the icon is clicked, the onClick callback should not be called and "hi" should not be logged.

Actual Result

When the icon is clicked, "hi" is logged.

Version

0.82.3

Testcase

https://codesandbox.io/s/2o4qo44vrn

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[danielsyang]

Hello, can I work on this? It's going to be my first time contributing here :)

[layershifter]

Yes, feel free to create a new PR 👍 Take a look on Button and it's tests for a reference