feat: added disabled mode to label

b2wads · Aug 21, 2023 · 5e4b992 · 5e4b992
1 parent 991c7ea
commit 5e4b992
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/source/components/form/elements/form-control-label.js b/source/components/form/elements/form-control-label.js
@@ -33,6 +33,7 @@ class FormControlLabel extends Component {
   static propTypes = {
     label: PropTypes.string,
     labelHighLight: PropTypes.bool,
+    disabled: PropTypes.bool,
     placeholder: PropTypes.string,
     activeLabel: PropTypes.bool,
     onBlur: PropTypes.func,
@@ -93,6 +94,7 @@ class FormControlLabel extends Component {
       iconLeft,
       iconLeftClick,
       context,
+      disabled,
       ...rest
     } = this.props;
 
@@ -111,6 +113,7 @@ class FormControlLabel extends Component {
       [styles.isAutofilled]: this.state.isAutofilled,
       [styles[`has-${validationState}`]]: validationState,
       [styles.isOutline]: this.props.outline,
+      [styles.disabled]: disabled,
     });
 
     const inputClasses = classNames(styles.formControl, {
@@ -148,6 +151,7 @@ class FormControlLabel extends Component {
             onHover={this.onHoverLabel}
             onBlur={this.onBlurLabel}
             checkIsAutofilled={this.checkIsAutofilled}
+            disabled={disabled}
           />
           {typeof iconRight === 'string'
             ? <Icon className={iconRightClasses} name={iconRight} size={18} onClick={iconRightClick} />

diff --git a/source/components/form/elements/form-control-label.styl b/source/components/form/elements/form-control-label.styl
@@ -7,6 +7,7 @@ $c-label = #00A0b2;
 $c-label-active = #878786;
 $c-text-default = #333;
 $c-border-input = #60605f;
+$c-disabled = #c7c7c7;
 
 /* ==========================================================================
 Form Label Component
@@ -64,6 +65,10 @@ Form Label Component
   }
 }
 
+.disabled {
+  color: $c-disabled;
+}
+
 .iconRight, .iconLeft {
   pointer-events: none;
   position: absolute;