@woosmap/ui 4.34.0-beta.14 → 4.34.0-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.34.0-beta.14",
+  "version": "4.34.0-beta.16",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Button/Button.js

@@ -46,7 +46,7 @@ export default class Button extends Component {
         );
         let iconComponent = icon ? <Icon isFill={isFillIcon} size={iconSize} icon={icon} /> : null;
         if (isLoading) {
-            iconComponent = <Icon icon="load" />;
+            iconComponent = <Icon isFill isLoad icon="load" />;
         }
         return (
             <button

package/src/components/Icon/Icon.js

@@ -638,9 +638,9 @@ const Icons = {
 
 class Icon extends Component {
     render() {
-        const { icon, size, className, isFill, title, testId } = this.props;
+        const { icon, size, className, isFill, isLoad, title, testId } = this.props;
         const IconComponent = Object.keys(Icons).includes(icon) ? Icons[icon] : Woosmap;
-        const classes = cl('icon', { 'icon--fill': isFill }, className);
+        const classes = cl('icon', { 'icon--fill': isFill }, { 'icon--load': isLoad }, className);
         return (
             <IconComponent
                 className={classes}
@@ -659,6 +659,7 @@ Icon.defaultProps = {
     title: null,
     testId: 'icon',
     isFill: false,
+    isLoad: false,
 };
 
 Icon.propTypes = {
@@ -666,6 +667,7 @@ Icon.propTypes = {
     className: PropTypes.string,
     icon: PropTypes.string.isRequired,
     isFill: PropTypes.bool,
+    isLoad: PropTypes.bool,
     title: PropTypes.string,
     testId: PropTypes.string,
 };

package/src/components/Input/Input.js

@@ -43,6 +43,7 @@ export default class Input extends Component {
             onBlur,
             onFocus,
             icon,
+            isInputIconFill,
             enableTogglePassword,
         } = this.props;
 
@@ -65,7 +66,7 @@ export default class Input extends Component {
         }
         return (
             <div className="input__container">
-                {icon ? <Icon icon={icon} size={iconSize} /> : null}
+                {icon ? <Icon icon={icon} isFill={isInputIconFill} size={iconSize} /> : null}
                 {React.createElement(type === 'textarea' ? 'textarea' : 'input', {
                     className: cl('input__item', {
                         error,
@@ -167,6 +168,7 @@ Input.propTypes = {
     onFocus: PropTypes.func,
     onPressEnter: PropTypes.func,
     enableTogglePassword: PropTypes.bool,
+    isInputIconFill: PropTypes.bool,
 };
 
 Input.defaultProps = {
@@ -192,4 +194,5 @@ Input.defaultProps = {
     onBlur: null,
     onFocus: null,
     enableTogglePassword: false,
+    isInputIconFill: false,
 };

package/src/styles/console/button.styl

@@ -31,15 +31,18 @@
 			&.btn--large
 				buttonLarge()
 				width $buttonHeightLarge
+			&.btn--primary
+			&.btn--important
+				&.btn--loading
+					.icon--load
+						fill $light
+						stroke-width 0
 			&.btn--primary
 				&:disabled
 					&:hover
 						background-color $primary
 						.icon
 							stroke $light
-				&.btn--loading
-					&:hover
-						background-color $primary
 			&.btn--secondary
 				&:disabled
 					&:hover
@@ -60,6 +63,7 @@
 				flex-shrink 0
 				.icon
 					flex-shrink 0
+			
 	&--primary
 	&--important
 		btn()
@@ -80,6 +84,15 @@
 			flex-shrink 0
 			.icon
 				flex-shrink 0
+		&.btn--loading
+			.icon--load
+				fill $light
+				stroke-width 0
+			&:hover
+				background-color $primary
+				.icon--load
+					fill $light
+					stroke-width 0
 	&--primary
 		background-color $primary
 		&:not(.btn--group):not(.btn--switch)
@@ -700,8 +713,6 @@
 				white-space normal
 				line-height 1
 				margin-top .3rem
-		.icon
-			display block
 @media screen and (max-width 350px)
 	.btn
 		&--tab

package/src/styles/console/icon.styl

@@ -7,6 +7,7 @@
 	&:not(.icon--fill)
 		fill: none
 	&--fill
+	&--load
 		stroke-width: 0
 		fill $secondary