Add disabled states for form control components

[MAILPOET-2773]

assets/css/src/generic/_buttons.scss

@@ -128,12 +128,6 @@
   }
 }
 
-.mailpoet-button-disabled {
-  opacity: .4;
-  pointer-events: none;
-  touch-action: none;
-}
-
 .mailpoet-button-with-spinner {
   pointer-events: none;
   touch-action: none;

assets/css/src/generic/_helpers.scss

@@ -6,3 +6,9 @@
   display: block;
   height: $grid-gap;
 }
+
+.mailpoet-disabled {
+  opacity: .5;
+  pointer-events: none;
+  touch-action: none;
+}

assets/css/src/mailpoet-plugin.scss

@@ -36,7 +36,7 @@
 @import 'generic/forms-toggle';
 @import 'generic/forms-yesno';
 @import 'generic/grid';
-@import 'generic/helpers';
+@import 'generic/helpers'; // must be the last
 
 // Components
 // Actual UI components.

assets/js/src/common/button/button.tsx

@@ -35,8 +35,8 @@ const Button = ({
         {
           [`mailpoet-button-${dimension}`]: dimension,
           [`mailpoet-button-${variant}`]: variant,
-          'mailpoet-button-disabled': isDisabled,
           'mailpoet-button-with-spinner': withSpinner,
+          'mailpoet-disabled': isDisabled,
           'mailpoet-full-width': isFullWidth,
         }
       )

assets/js/src/common/form/checkbox/checkbox.tsx

@@ -17,6 +17,7 @@ const Checkbox = ({
     className={
       classnames({
         'mailpoet-form-checkbox': true,
+        'mailpoet-disabled': attributes.disabled,
         'mailpoet-full-width': isFullWidth,
       })
     }

assets/js/src/common/form/input/input.tsx

@@ -21,6 +21,7 @@ const Input = ({
         'mailpoet-form-input',
         {
           [`mailpoet-form-input-${dimension}`]: dimension,
+          'mailpoet-disabled': attributes.disabled,
           'mailpoet-full-width': isFullWidth,
         }
       )

assets/js/src/common/form/radio/radio.tsx

@@ -17,6 +17,7 @@ const Radio = ({
     className={
       classnames({
         'mailpoet-form-radio': true,
+        'mailpoet-disabled': attributes.disabled,
         'mailpoet-full-width': isFullWidth,
       })
     }

assets/js/src/common/form/react_select/react_select.tsx

@@ -69,6 +69,7 @@ const ReactSelect = ({
         'mailpoet-form-select',
         {
           [`mailpoet-form-input-${dimension}`]: dimension,
+          'mailpoet-disabled': props.disabled,
           'mailpoet-full-width': isFullWidth,
         }
       )

assets/js/src/common/form/select/select.tsx

@@ -22,6 +22,7 @@ const Select = ({
         'mailpoet-form-select',
         {
           [`mailpoet-form-input-${dimension}`]: dimension,
+          'mailpoet-disabled': attributes.disabled,
           'mailpoet-full-width': isFullWidth,
         }
       )

assets/js/src/common/form/toggle/toggle.tsx

@@ -16,6 +16,7 @@ const Toggle = ({
       classnames({
         'mailpoet-form-toggle': true,
         [`mailpoet-form-toggle-${dimension}`]: dimension,
+        'mailpoet-disabled': attributes.disabled,
       })
     }
   >

assets/js/src/common/form/yesno/yesno.tsx

@@ -17,6 +17,7 @@ const YesNo = ({
       classnames({
         'mailpoet-form-yesno': true,
         'mailpoet-form-yesno-error': showError,
+        'mailpoet-disabled': attributes.disabled,
       })
     }
   >