fix(icons): correct the color of icon for a button in disabled state

webex · Mar 23, 2022 · 6da117e · 6da117e
1 parent f3bf6ec
commit 6da117e
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 16 deletions.
diff --git a/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot b/src/components/WebexMeeting/__snapshots__/WebexMeeting.stories.storyshot
@@ -1967,14 +1967,15 @@ Array [
             <button
               aria-label="Join meeting. Muted, video off"
               autoFocus={false}
-              className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join wxc-button--disabled"
+              className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
               style={
                 Object {
                   "height": 48,
                 }
               }
               tabIndex={0}
               type="button"
+              wxc-disabled="true"
             >
               <span
                 className="wxc-meeting-control__button-text"
@@ -1991,14 +1992,15 @@ Array [
             <button
               aria-label="Join meeting. Muted, video off"
               autoFocus={false}
-              className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join wxc-button--disabled"
+              className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
               style={
                 Object {
                   "height": 48,
                 }
               }
               tabIndex={0}
               type="button"
+              wxc-disabled="true"
             >
               <span
                 className="wxc-meeting-control__button-text"

diff --git a/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot b/src/components/WebexMeetingControl/__snapshots__/WebexMeetingControl.stories.storyshot
@@ -70,14 +70,15 @@ Array [
   >
     <button
       autoFocus={false}
-      className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default wxc-button--disabled"
+      className="wxc wxc-button wxc-meeting-control__control-button wxc-button--default"
       style={
         Object {
           "height": 48,
         }
       }
       tabIndex={0}
       type="button"
+      wxc-disabled="true"
     >
       <svg
         className="wxc-icon wxc wxc-audio-microphone-icon"
@@ -136,14 +137,15 @@ Array [
     <button
       aria-label="Join meeting"
       autoFocus={false}
-      className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join wxc-button--disabled"
+      className="wxc wxc-button wxc-meeting-control__control-button wxc-button--join"
       style={
         Object {
           "height": 48,
         }
       }
       tabIndex={0}
       type="button"
+      wxc-disabled="true"
     >
       <span
         className="wxc-meeting-control__button-text"

diff --git a/...eetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot b/...eetingGuestAuthentication/__snapshots__/WebexMeetingGuestAuthentication.stories.storyshot
@@ -108,14 +108,15 @@ 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 wxc-button--disabled"
+        className="wxc wxc-button wxc-meeting-guest-authentication__start-button wxc-button--primary"
         style={
           Object {
             "height": 28,
           }
         }
         tabIndex={103}
         type="button"
+        wxc-disabled="true"
       >
         Start meeting
       </button>

diff --git a/...xMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot b/...xMeetingHostAuthentication/__snapshots__/WebexMeetingHostAuthentication.stories.storyshot
@@ -72,14 +72,15 @@ 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 wxc-button--disabled"
+        className="wxc wxc-button wxc-meeting-host-authentication__start-button wxc-button--primary"
         style={
           Object {
             "height": 28,
           }
         }
         tabIndex={102}
         type="button"
+        wxc-disabled="true"
       >
         Start meeting
       </button>

diff --git a/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot b/.../adaptive-cards/AdaptiveCard/AdaptiveCard.stories/__snapshots__/Actions.stories.storyshot
@@ -293,14 +293,15 @@ 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 wxc-button--disabled"
+        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"
         style={
           Object {
             "height": 32,
           }
         }
         tabIndex={0}
         type="button"
+        wxc-disabled="true"
       >
         <span>
           Open url

diff --git 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, disabled: isDisabled});
+  const [cssClasses] = webexComponentClasses('button', className, {[`${type}`]: true, pressed});
   const buttonRef = useRef();
 
   useAutoFocus(buttonRef, autoFocus);
@@ -54,6 +54,7 @@ export default function Button({
         tabIndex={tabIndex}
         ref={buttonRef}
         style={{height: size, ...style}}
+        wxc-disabled={isDisabled ? 'true' : undefined}
       >
         {children}
       </button>

diff --git 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(.#{$C}--disabled) {
+  &:not([wxc-disabled]) {
     cursor: pointer;
   }
 }
@@ -33,7 +33,7 @@ $C: #{$WEBEX_COMPONENTS_CLASS_PREFIX}-button;
     border: var(--wxc-button--join--active--border);
   }
 
-  &.#{$C}--disabled {
+  &[wxc-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);
   }
 
-  &.#{$C}--disabled {
+  &[wxc-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);
   }
 
-  &.#{$C}--disabled {
+  &[wxc-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);
   }
 
-  &.#{$C}--disabled {
+  &[wxc-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);
   }
 
-  &.#{$C}--disabled {
+  &[wxc-disabled] {
     background: var(--wxc-button--primary--disabled--background);
     color: var(--wxc-button--primary--disabled--color);
     border: var(--wxc-button--primary--disabled--border);

diff --git a/src/components/icons/_icons.scss b/src/components/icons/_icons.scss
@@ -4,14 +4,14 @@
 .wxc-icon {
   fill: currentColor;
 
-  :disabled & {
+  :disabled &, [wxc-disabled] & {
     path { fill: currentColor; }
   }
 
   .accent {
     fill: var(--wxc-icon--accent-color);
 
-    :disabled & {
+    :disabled &, [wxc-disabled] & {
       display: none;
     }
   }