Develop

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@b2wads/grimorio-ui",
   "sideEffects": false,
-  "version": "10.1.7",
+  "version": "10.1.14",
   "description": "UI just like magic",
   "main": "lib/index.js",
   "repository": "https://github.com/b2wads/grimorio-ui",

source/components/form/elements/form-actions.js

@@ -1,34 +1,26 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-// styles
 import styles from '../form.styl';
 
-class FormActions extends PureComponent {
-  constructor(props, context) {
-    super(props, context);
-  }
+const FormActions = ({ children, className }) => {
+  const fullClassName = classNames(className, styles['form-group-actions']);
 
-  static defaultProps = {
-    children: undefined,
-    className: undefined,
-  };
+  return (
+    <div className={fullClassName}>
+      {children}
+    </div>
+  );
+};
 
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-  };
+FormActions.defaultProps = {
+  children: undefined,
+  className: undefined,
+};
 
-  render() {
-    const { children, className } = this.props;
-    const fullClassName = classNames(className, styles['form-group-actions']);
-
-    return (
-      <div className={fullClassName}>
-        {children}
-      </div>
-    );
-  }
-}
+FormActions.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
 
 export default FormActions;

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, {
@@ -127,7 +130,7 @@ class FormControlLabel extends Component {
 
     if (type === 'select') {
       return (
-        <Select className={inputClasses} label={label} onSelect={onChange} {...rest}>
+        <Select className={inputClasses} label={label} onSelect={onChange} {...rest} disabled={disabled}>
           {children}
         </Select>
       );
@@ -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} />

source/components/form/elements/form-control-label.styl

@@ -3,9 +3,11 @@ Variables
 ========================================================================== */
 /* Color
 ========================================================================== */
-$c-label = #A1A1A1;
+$c-label = #00A0b2;
 $c-label-active = #878786;
 $c-text-default = #333;
+$c-border-input = #60605f;
+$c-disabled = #c7c7c7;
 
 /* ==========================================================================
 Form Label Component
@@ -15,36 +17,27 @@ Form Label Component
 }
 
 .controlledLabel {
-  color: $c-label;
-  font-size: 16px;
+  position: relative;
+  left: 6px;
+
+  pointer-events: none;
+
+  font-size: 12px;
   font-weight: 400;
-  left: 0;
   line-height: 1;
-  pointer-events: none;
-  position: absolute;
-  top: 10px;
-  transition: all 0.25s ease;
+
+  background: white;
+  color: $c-label;
 }
 
 .isActive, .isAutofilled {
   font-size: 12px;
-  left: 0;
-  top: -1.5rem;
-  transition: all 0.125s ease;
-  color: $c-label-active;
-
-  &.isHovered {
-    color: var(--c-support-dark);
-  }
-
-  &.labelHighLight {
-    color: var(--c-active-input);
-  }
+  color: $c-label;
 }
 
 .formControl {
-  color: $c-label-active;
-  font-size: 16px;
+  color: $c-border-input;
+  font-size: 14px;
   margin-top: 5px;
 }
 
@@ -61,30 +54,21 @@ Form Label Component
 }
 
 .isOutline {
-  padding-left: 10px;
-  top: 17px;
-}
-
-.isActive.isOutline, .isAutofilled.isOutline {
-  background: $white;
-  left: 5px;
-  padding: 0 5px;
-  top: -6px;
-  width: auto;
-}
-
-.has-iconRight {
-  label, input {
-    padding-right: 35px;
-  }
+  padding: 0 4px;
+  top: 13.4px;
+  display: math;
 }
 
 .has-iconLeft {
-  label, input {
+  input {
     padding-left: 35px;
   }
 }
 
+.disabled {
+  color: $c-disabled!important;
+}
+
 .iconRight, .iconLeft {
   pointer-events: none;
   position: absolute;
@@ -93,10 +77,12 @@ Form Label Component
 
 .iconRight {
   right: 12px;
+  top: 38px;
 }
 
 .iconLeft {
-  left: 12px;
+  left: 16px;
+  top: 38px;
 }
 
 .isClickable {

source/components/form/elements/form-control.styl

@@ -6,7 +6,7 @@ Variables
 
 /* Border color
 ========================================================================== */
-$c-border = #a1a1a1;
+$c-border = #60605f;
 $c-check-border = #7F7F7F;
 /* Field
 ========================================================================== */
@@ -17,7 +17,9 @@ $c-text-default = #333;
 ========================================================================== */
 $c-addon-background = #18a689;
 $c-addon-border = $c-border;
-
+$c-border-hover = #3B3B3A;
+$c-label = #00A0b2;
+$c-disabled = #c7c7c7;
 /* ==========================================================================
 Placeholders
 ========================================================================== */
@@ -26,8 +28,8 @@ Placeholders
 $field {
   border: 0;
   border-bottom: 1px solid $c-border;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
   display: block;
   font-size: inherit;
   height: 35px;
@@ -43,42 +45,44 @@ $field {
   }
 
   &:hover {
-    border-color: var(--c-support-dark);
-    color: var(--c-support-dark);
+    border-color: $c-border-hover;
+    color: $c-border-hover;
   }
 
   &:focus {
-    border-color: var(--c-active-input);
+    border-bottom: 1px solid $c-label;
     color: var(--c-support-dark);
   }
 
   &.isActive {
-    border-color: var(--c-active-input);
+    border-color: $c-gray-2 ;
   }
 
   &:disabled {
-    background: var(--c-back-disabled);
-    color: var(--c-text-disabled);
+    cursor: not-allowed;
+    background: white!important;
+    color: $c-disabled!important;
+    border-color: $c-disabled!important;
   }
 
   &:disabled::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: var(--c-text-disabled);
+    color: $c-disabled!important;
   }
 
   &:disabled:-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: var(--c-text-disabled);
+    color: $c-disabled!important;
   }
 
   &:disabled::-ms-input-placeholder { /* Microsoft Edge */
-    color: var(--c-text-disabled);
+    color: $c-disabled!important;
   }
 }
 
 /* Radio and checkbox
 ========================================================================== */
 $radioCheckbox {
   align-items: center;
-  border: 2px solid $c-check-border;
+  border: 2px solid $c-border;
   cursor: pointer;
   display: flex;
   height: 20px;
@@ -87,12 +91,12 @@ $radioCheckbox {
   width: 20px;
 
   &.isDisabled, &.isDisabled.isActive {
-    background:  var(--c-back-disabled);
-    border-color: var(--c-text-disabled);
-    cursor: not-allowed;
+    background:  white!important;
+    border-color:$c-disabled!important;
+    cursor: not-allowed!important;
 
     i {
-      color: var(--c-text-disabled);
+      color: $c-disabled!important;
     }
   }
 }
@@ -139,6 +143,12 @@ Form Control Component
   border-radius: 3px;
   margin-top: 0;
   padding: 24px 10px 22px;
+
+    &:focus:not(.isDisabled, .has-error, .has-warning)  {
+    outline: 1px solid $c-label;
+    border-color: $c-label;
+    color: var(--c-support-dark);
+  }
 }
 
 .form-field--select {
@@ -177,13 +187,13 @@ Form Control Component
 
   input[type='radio']:disabled {
     &:checked ~ .fakeInput {
-      background: var(--c-back-disabled);
-      border-color: var(--c-text-disabled);
-      cursor: not-allowed;
+      background: white!important;
+      border-color: $c-disabled!important;
+      cursor: not-allowed!important;
     }
 
     &:checked ~ .fakeInput:before {
-      background: var(--c-back-disabled);
+      background: white!important;
     }
   }
 }
@@ -268,9 +278,9 @@ Form Control Component
 }
 
 .form-addon--disabled {
-  background: var(--c-back-disabled);
-  border-color: var(--c-back-disabled);
-  color: var(--c-text-disabled);
+  background: white!important;
+  border-color: $c-disabled!important;
+  color: $c-disabled!important;
 }
 
 /* Feedback