From 5d7a0baf65c85ef6e60f1e2526ff083ce6be3e9e Mon Sep 17 00:00:00 2001
From: Karina Sigartau <karina.sigartau0711@gmail.com>
Date: Tue, 22 Mar 2022 11:25:08 +0200
Subject: [PATCH] feat(Button): make tooltip appear even if button is disabled

---
 .../WebexActivity.stories.storyshot           |  4 --
 .../WebexMediaAccess.stories.storyshot        |  2 -
 .../WebexMeeting.stories.storyshot            | 60 +------------------
 .../WebexMeetingControl.stories.storyshot     | 11 +---
 .../WebexMeetingControlBar.stories.storyshot  | 22 -------
 ...etingGuestAuthentication.stories.storyshot |  4 +-
 ...eetingHostAuthentication.stories.storyshot |  4 +-
 .../WebexMemberRoster.stories.storyshot       |  3 -
 .../WebexWaitingForHost.stories.storyshot     |  1 -
 .../__snapshots__/Actions.stories.storyshot   | 17 +-----
 .../Containers.stories.storyshot              |  6 --
 .../__snapshots__/Inputs.stories.storyshot    | 10 ----
 .../AdaptiveCard.stories.storyshot            |  1 -
 src/components/generic/Button/Button.jsx      |  5 +-
 src/components/generic/Button/Button.scss     | 12 ++--
 15 files changed, 15 insertions(+), 147 deletions(-)

diff --git a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
index 0b4c76ef3..0e01e2662 100644
--- a/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
+++ b/src/components/WebexActivity/__snapshots__/WebexActivity.stories.storyshot
@@ -429,7 +429,6 @@ Array [
                   aria-label="Clear input"
                   autoFocus={false}
                   className="wxc wxc-button wxc-button--ghost"
-                  disabled={false}
                   onClick={[Function]}
                   style={
                     Object {
@@ -465,7 +464,6 @@ Array [
                     aria-label="Increase value"
                     autoFocus={false}
                     className="wxc wxc-button wxc-number-input__increment-button wxc-button--ghost"
-                    disabled={false}
                     onClick={[Function]}
                     style={
                       Object {
@@ -493,7 +491,6 @@ Array [
                     aria-label="Decrease value"
                     autoFocus={false}
                     className="wxc wxc-button wxc-number-input__decrement-button wxc-button--ghost"
-                    disabled={false}
                     onClick={[Function]}
                     style={
                       Object {
@@ -809,7 +806,6 @@ Array [
           <button
             autoFocus={false}
             className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
diff --git a/src/components/WebexMediaAccess/__snapshots__/WebexMediaAccess.stories.storyshot b/src/components/WebexMediaAccess/__snapshots__/WebexMediaAccess.stories.storyshot
index ea3a2fa99..5e9c3147b 100644
--- a/src/components/WebexMediaAccess/__snapshots__/WebexMediaAccess.stories.storyshot
+++ b/src/components/WebexMediaAccess/__snapshots__/WebexMediaAccess.stories.storyshot
@@ -47,7 +47,6 @@ Array [
       aria-label="Proceed without camera. This setting cannot be changed once the meeting starts."
       autoFocus={false}
       className="wxc wxc-button wxc-button--default"
-      disabled={false}
       onClick={[Function]}
       style={
         Object {
@@ -130,7 +129,6 @@ Array [
       aria-label="Proceed without audio. This setting cannot be changed once the meeting starts."
       autoFocus={false}
       className="wxc wxc-button wxc-button--default"
-      disabled={false}
       onClick={[Function]}
       style={
         Object {
diff --git a/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot b/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot
index 16f9c91c1..9b1500f85 100644
--- a/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot
+++ b/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot
@@ -129,7 +129,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -165,7 +164,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -206,7 +204,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -242,7 +239,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -283,7 +279,6 @@ Array [
               aria-label="Start sharing"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -321,7 +316,6 @@ Array [
               aria-label="Start sharing"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -364,7 +358,6 @@ Array [
               aria-label="Show participants"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -410,7 +403,6 @@ Array [
               aria-label="Show participants"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -461,7 +453,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -499,7 +490,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -542,7 +532,6 @@ Array [
               aria-label="Leave meeting"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--cancel"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -576,7 +565,6 @@ Array [
               aria-label="Leave meeting"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--cancel"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -609,7 +597,6 @@ Array [
             aria-label="Expand additional controls"
             autoFocus={false}
             className="wxc wxc-button wxc-button--toggle"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -760,7 +747,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -796,7 +782,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -837,7 +822,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -873,7 +857,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -914,7 +897,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -952,7 +934,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -995,7 +976,6 @@ Array [
               aria-label="Join meeting. Muted, video off"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1021,7 +1001,6 @@ Array [
               aria-label="Join meeting. Muted, video off"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1046,7 +1025,6 @@ Array [
             aria-label="Expand additional controls"
             autoFocus={false}
             className="wxc wxc-button wxc-button--toggle"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -1276,7 +1254,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1312,7 +1289,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1353,7 +1329,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1389,7 +1364,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1430,7 +1404,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1468,7 +1441,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1511,7 +1483,6 @@ Array [
               aria-label="Join meeting. Muted, video off"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1537,7 +1508,6 @@ Array [
               aria-label="Join meeting. Muted, video off"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1562,7 +1532,6 @@ Array [
             aria-label="Expand additional controls"
             autoFocus={false}
             className="wxc wxc-button wxc-button--toggle"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -1706,7 +1675,6 @@ Array [
             aria-label="Leave the meeting to stop waiting for the host. To return to the meeting after leaving, refresh the web browser and join again."
             autoFocus={false}
             className="wxc wxc-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -1771,7 +1739,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1807,7 +1774,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1848,7 +1814,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1884,7 +1849,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1925,7 +1889,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -1963,7 +1926,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2005,9 +1967,7 @@ Array [
             <button
               aria-label="Join meeting. Muted, video off"
               autoFocus={false}
-              className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-              disabled={true}
-              onClick={[Function]}
+              className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join wxc-button--disabled"
               style={
                 Object {
                   "height": 48,
@@ -2031,9 +1991,7 @@ Array [
             <button
               aria-label="Join meeting. Muted, video off"
               autoFocus={false}
-              className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-              disabled={true}
-              onClick={[Function]}
+              className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join wxc-button--disabled"
               style={
                 Object {
                   "height": 48,
@@ -2057,7 +2015,6 @@ Array [
             aria-label="Expand additional controls"
             autoFocus={false}
             className="wxc wxc-button wxc-button--toggle"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -2204,7 +2161,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2240,7 +2196,6 @@ Array [
               aria-label="Unmute"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2281,7 +2236,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2317,7 +2271,6 @@ Array [
               aria-label="Start video"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2358,7 +2311,6 @@ Array [
               aria-label="Start sharing"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2396,7 +2348,6 @@ Array [
               aria-label="Start sharing"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2439,7 +2390,6 @@ Array [
               aria-label="Show participants"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2485,7 +2435,6 @@ Array [
               aria-label="Show participants"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2536,7 +2485,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2574,7 +2522,6 @@ Array [
               aria-label="Settings"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2617,7 +2564,6 @@ Array [
               aria-label="Leave meeting"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--cancel"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2651,7 +2597,6 @@ Array [
               aria-label="Leave meeting"
               autoFocus={false}
               className="wxc wxc-button wxc-meeting-control__control-button wxc-button--cancel"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -2684,7 +2629,6 @@ Array [
             aria-label="Expand additional controls"
             autoFocus={false}
             className="wxc wxc-button wxc-button--toggle"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
diff --git a/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot b/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot
index 0b8d26448..7578fa010 100644
--- a/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot
+++ b/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot
@@ -9,7 +9,6 @@ Array [
       aria-label="Unmute"
       autoFocus={false}
       className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-      disabled={false}
       onClick={[Function]}
       style={
         Object {
@@ -71,9 +70,7 @@ Array [
   >
     <button
       autoFocus={false}
-      className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-      disabled={true}
-      onClick={[Function]}
+      className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default wxc-button--disabled"
       style={
         Object {
           "height": 48,
@@ -139,9 +136,7 @@ Array [
     <button
       aria-label="Join meeting"
       autoFocus={false}
-      className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-      disabled={true}
-      onClick={[Function]}
+      className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join wxc-button--disabled"
       style={
         Object {
           "height": 48,
@@ -265,7 +260,6 @@ Array [
       aria-label="Unmute"
       autoFocus={false}
       className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-      disabled={false}
       onClick={[Function]}
       style={
         Object {
@@ -329,7 +323,6 @@ Array [
       aria-label="Join meeting. Muted, video off"
       autoFocus={false}
       className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-      disabled={false}
       onClick={[Function]}
       style={
         Object {
diff --git a/src/components/WebexMeetingControlBar/__snapshots__/WebexMeetingControlBar.stories.storyshot b/src/components/WebexMeetingControlBar/__snapshots__/WebexMeetingControlBar.stories.storyshot
index df7e55561..4ea249542 100644
--- a/src/components/WebexMeetingControlBar/__snapshots__/WebexMeetingControlBar.stories.storyshot
+++ b/src/components/WebexMeetingControlBar/__snapshots__/WebexMeetingControlBar.stories.storyshot
@@ -22,7 +22,6 @@ Array [
             aria-label="Unmute"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -58,7 +57,6 @@ Array [
             aria-label="Unmute"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -99,7 +97,6 @@ Array [
             aria-label="Start video"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -135,7 +132,6 @@ Array [
             aria-label="Start video"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -176,7 +172,6 @@ Array [
             aria-label="Start sharing"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -214,7 +209,6 @@ Array [
             aria-label="Start sharing"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -257,7 +251,6 @@ Array [
             aria-label="Show participants"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -303,7 +296,6 @@ Array [
             aria-label="Show participants"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--toggle"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -354,7 +346,6 @@ Array [
             aria-label="Settings"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -392,7 +383,6 @@ Array [
             aria-label="Settings"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -435,7 +425,6 @@ Array [
             aria-label="Leave meeting"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--cancel"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -469,7 +458,6 @@ Array [
             aria-label="Leave meeting"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--cancel"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -502,7 +490,6 @@ Array [
           aria-label="Expand additional controls"
           autoFocus={false}
           className="wxc wxc-button wxc-button--toggle"
-          disabled={false}
           onClick={[Function]}
           style={
             Object {
@@ -582,7 +569,6 @@ Array [
             aria-label="Unmute"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -618,7 +604,6 @@ Array [
             aria-label="Unmute"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -659,7 +644,6 @@ Array [
             aria-label="Start video"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -695,7 +679,6 @@ Array [
             aria-label="Start video"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -736,7 +719,6 @@ Array [
             aria-label="Settings"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -774,7 +756,6 @@ Array [
             aria-label="Settings"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -817,7 +798,6 @@ Array [
             aria-label="Join meeting. Muted, video off"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -843,7 +823,6 @@ Array [
             aria-label="Join meeting. Muted, video off"
             autoFocus={false}
             className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
-            disabled={false}
             onClick={[Function]}
             style={
               Object {
@@ -868,7 +847,6 @@ Array [
           aria-label="Expand additional controls"
           autoFocus={false}
           className="wxc wxc-button wxc-button--toggle"
-          disabled={false}
           onClick={[Function]}
           style={
             Object {
diff --git a/src/components/WebexMeetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot b/src/components/WebexMeetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
index bdf428a10..d213c167c 100644
--- a/src/components/WebexMeetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
+++ b/src/components/WebexMeetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
@@ -108,9 +108,7 @@ Array [
       <button
         aria-label="Start meeting. Start the meeting after entering the required information."
         autoFocus={false}
-        className="wxc wxc-button wxc-meeting-guest-authentication__start-button wxc-button--primary"
-        disabled={true}
-        onClick={[Function]}
+        className="wxc wxc-button wxc-meeting-guest-authentication__start-button wxc-button--primary wxc-button--disabled"
         style={
           Object {
             "height": 28,
diff --git a/src/components/WebexMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot b/src/components/WebexMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
index b52c0dfdd..64b6e2279 100644
--- a/src/components/WebexMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
+++ b/src/components/WebexMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
@@ -72,9 +72,7 @@ Array [
       <button
         aria-label="Start meeting. Start the meeting for all participants after entering the required information."
         autoFocus={false}
-        className="wxc wxc-button wxc-meeting-host-authentication__start-button wxc-button--primary"
-        disabled={true}
-        onClick={[Function]}
+        className="wxc wxc-button wxc-meeting-host-authentication__start-button wxc-button--primary wxc-button--disabled"
         style={
           Object {
             "height": 28,
diff --git a/src/components/WebexMemberRoster/__snapshots__/WebexMemberRoster.stories.storyshot b/src/components/WebexMemberRoster/__snapshots__/WebexMemberRoster.stories.storyshot
index 1947ebe69..e4aa8a589 100644
--- a/src/components/WebexMemberRoster/__snapshots__/WebexMemberRoster.stories.storyshot
+++ b/src/components/WebexMemberRoster/__snapshots__/WebexMemberRoster.stories.storyshot
@@ -26,7 +26,6 @@ Array [
         aria-label="Close participants panel"
         autoFocus={false}
         className="wxc wxc-button wxc-button--ghost"
-        disabled={false}
         style={
           Object {
             "height": 28,
@@ -259,7 +258,6 @@ Array [
         aria-label="Close participants panel"
         autoFocus={false}
         className="wxc wxc-button wxc-button--ghost"
-        disabled={false}
         style={
           Object {
             "height": 28,
@@ -734,7 +732,6 @@ Array [
         aria-label="Close participants panel"
         autoFocus={false}
         className="wxc wxc-button wxc-button--ghost"
-        disabled={false}
         style={
           Object {
             "height": 28,
diff --git a/src/components/WebexWaitingForHost/__snapshots__/WebexWaitingForHost.stories.storyshot b/src/components/WebexWaitingForHost/__snapshots__/WebexWaitingForHost.stories.storyshot
index 75da0d0c0..3db7a6380 100644
--- a/src/components/WebexWaitingForHost/__snapshots__/WebexWaitingForHost.stories.storyshot
+++ b/src/components/WebexWaitingForHost/__snapshots__/WebexWaitingForHost.stories.storyshot
@@ -79,7 +79,6 @@ Array [
         aria-label="Leave the meeting to stop waiting for the host. To return to the meeting after leaving, refresh the web browser and join again."
         autoFocus={false}
         className="wxc wxc-button wxc-button--default"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
index bbd1403c8..4557e55f7 100644
--- a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
+++ b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
@@ -152,7 +152,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -239,7 +238,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -257,7 +255,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--positive wxc-button--join"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -280,7 +277,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--destructive wxc-button--cancel"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -297,9 +293,7 @@ Array [
       
       <button
         autoFocus={false}
-        className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--default wxc-ac-is-enabled--false wxc-ac-action--disabled wxc-button--primary"
-        disabled={true}
-        onClick={[Function]}
+        className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--default wxc-ac-is-enabled--false wxc-ac-action--disabled wxc-button--primary wxc-button--disabled"
         style={
           Object {
             "height": 32,
@@ -385,7 +379,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-show-card wxc wxc-ac wxc-ac-action-style--default wxc-ac-container--horizontal wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -415,7 +408,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-show-card wxc wxc-ac wxc-ac-action-style--default wxc-ac-container--horizontal wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -618,7 +610,6 @@ Array [
               aria-label="Clear input"
               autoFocus={false}
               className="wxc wxc-button wxc-button--ghost"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -654,7 +645,6 @@ Array [
                 aria-label="Increase value"
                 autoFocus={false}
                 className="wxc wxc-button wxc-number-input__increment-button wxc-button--ghost"
-                disabled={false}
                 onClick={[Function]}
                 style={
                   Object {
@@ -682,7 +672,6 @@ Array [
                 aria-label="Decrease value"
                 autoFocus={false}
                 className="wxc wxc-button wxc-number-input__decrement-button wxc-button--ghost"
-                disabled={false}
                 onClick={[Function]}
                 style={
                   Object {
@@ -726,7 +715,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -915,7 +903,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-toggle-visibility wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -933,7 +920,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-toggle-visibility wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -951,7 +937,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-toggle-visibility wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Containers.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Containers.stories.storyshot
index 98c6b6a69..c69d1a525 100644
--- a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Containers.stories.storyshot
+++ b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Containers.stories.storyshot
@@ -46,7 +46,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-show-card wxc wxc-ac wxc-ac-action-style--default wxc-ac-container--horizontal wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -76,7 +75,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -133,7 +131,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-show-card wxc wxc-ac wxc-ac-action-style--default wxc-ac-container--horizontal wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -163,7 +160,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -3099,7 +3095,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         style={
           Object {
             "height": 32,
@@ -3116,7 +3111,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         style={
           Object {
             "height": 32,
diff --git a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
index 80c87a7e2..2f780ec20 100644
--- a/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
+++ b/src/components/adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Inputs.stories.storyshot
@@ -490,7 +490,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -611,7 +610,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -710,7 +708,6 @@ Array [
               aria-label="Clear input"
               autoFocus={false}
               className="wxc wxc-button wxc-button--ghost"
-              disabled={false}
               onClick={[Function]}
               style={
                 Object {
@@ -746,7 +743,6 @@ Array [
                 aria-label="Increase value"
                 autoFocus={false}
                 className="wxc wxc-button wxc-number-input__increment-button wxc-button--ghost"
-                disabled={false}
                 onClick={[Function]}
                 style={
                   Object {
@@ -774,7 +770,6 @@ Array [
                 aria-label="Decrease value"
                 autoFocus={false}
                 className="wxc wxc-button wxc-number-input__decrement-button wxc-button--ghost"
-                disabled={false}
                 onClick={[Function]}
                 style={
                   Object {
@@ -818,7 +813,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -934,7 +928,6 @@ Array [
         <button
           autoFocus={false}
           className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-open-url wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-          disabled={false}
           onClick={[Function]}
           style={
             Object {
@@ -1279,7 +1272,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -1481,7 +1473,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
@@ -1574,7 +1565,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
diff --git a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
index cff9d7056..417afb705 100644
--- a/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
+++ b/src/components/adaptive-cards/AdaptiveCard/__snapshots__/AdaptiveCard.stories.storyshot
@@ -467,7 +467,6 @@ Array [
       <button
         autoFocus={false}
         className="wxc wxc-button wxc wxc-ac-action wxc wxc-ac-action-submit wxc wxc-ac wxc-ac-action-style--default wxc-button--primary"
-        disabled={false}
         onClick={[Function]}
         style={
           Object {
diff --git a/src/components/generic/Button/Button.jsx b/src/components/generic/Button/Button.jsx
index d4cb81dd1..d3c549b59 100644
--- a/src/components/generic/Button/Button.jsx
+++ b/src/components/generic/Button/Button.jsx
@@ -36,7 +36,7 @@ export default function Button({
   tooltip,
   type,
 }) {
-  const [cssClasses] = webexComponentClasses('button', className, {[`${type}`]: true, pressed});
+  const [cssClasses] = webexComponentClasses('button', className, {[`${type}`]: true, pressed, disabled: isDisabled});
   const buttonRef = useRef();
 
   useAutoFocus(buttonRef, autoFocus);
@@ -45,9 +45,8 @@ export default function Button({
     <>
       <button
         className={cssClasses}
-        disabled={isDisabled}
         type="button"
-        onClick={onClick}
+        onClick={!isDisabled ? onClick : undefined}
         aria-label={ariaLabel}
         // disabling no-autofocus because otherwise this element cannot be autofocused depending on the autoFocus prop
         // eslint-disable-next-line jsx-a11y/no-autofocus
diff --git a/src/components/generic/Button/Button.scss b/src/components/generic/Button/Button.scss
index dd8d7b20e..fa8403f10 100644
--- a/src/components/generic/Button/Button.scss
+++ b/src/components/generic/Button/Button.scss
@@ -11,7 +11,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-button;
   line-height: 1;
   padding: 0 0.75rem;
 
-  &:not(:disabled) {
+  &:not(.#{$C}--disabled) {
     cursor: pointer;
   }
 }
@@ -33,7 +33,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-button;
     border: var(--wxc-button--join--active--border);
   }
 
-  &:disabled {
+  &.#{$C}--disabled {
     background: var(--wxc-button--join--disabled--background);
     color: var(--wxc-button--join--disabled--color);
     border: var(--wxc-button--join--disabled--border);
@@ -58,7 +58,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-button;
     border: var(--wxc-button--default--active--border);
   }
 
-  &:disabled {
+  &.#{$C}--disabled {
     background: var(--wxc-button--default--disabled--background);
     color: var(--wxc-button--default--disabled--color);
     border: var(--wxc-button--default--disabled--border);
@@ -82,7 +82,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-button;
     border: var(--wxc-button--cancel--active--border);
   }
 
-  &:disabled {
+  &.#{$C}--disabled {
     background: var(--wxc-button--cancel--disabled--background);
     color: var(--wxc-button--cancel--disabled--color);
     border: var(--wxc-button--cancel--disabled--border);
@@ -108,7 +108,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-button;
     border: var(--wxc-button--ghost--active--border);
   }
 
-  &:disabled {
+  &.#{$C}--disabled {
     background: var(--wxc-button--ghost--disabled--background);
     color: var(--wxc-button--ghost--disabled--color);
     border: var(--wxc-button--ghost--disabled--border);
@@ -136,7 +136,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-button;
     border: var(--wxc-button--primary--active--border);
   }
 
-  &:disabled {
+  &.#{$C}--disabled {
     background: var(--wxc-button--primary--disabled--background);
     color: var(--wxc-button--primary--disabled--color);
     border: var(--wxc-button--primary--disabled--border);