@farm-investimentos/front-mfe-components 11.6.0 → 11.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.6.0",
+	"version": "11.6.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/Form/Form.stories.js

@@ -257,7 +257,7 @@ export const Grid = () => ({
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 3</farm-label>
-					<farm-textfield />
+					<farm-textfield hint="some hint text" persistent-hint="true"  />
 				</farm-col>
 				<farm-col cols="12" md="3">
 					<farm-label>Label 4</farm-label>

package/src/components/layout/Row/Row.scss

@@ -39,10 +39,4 @@
         margin-top: 12px;
         margin-bottom: 12px;
     }
-
-    &--y-form-gutters > .farm-col {
-        margin-top: 12px;
-        margin-bottom: -12px;
-    }
-
 }

package/src/components/layout/Row/Row.stories.js

@@ -110,34 +110,3 @@ export const yGridGutters = () => ({
 		</farm-row>
 	</div>`,
 });
-
-export const yFormGutters = () => ({
-	template: `<div>
-		<farm-row y-form-gutters>
-			<farm-col md="6">
-				<div style="border:1px solid red;">
-					<farm-label>label 1</farm-label>
-					<farm-textfield />
-				</div>
-			</farm-col>
-			<farm-col md="6">
-				<div style="border:1px solid red;">
-					<farm-label>label 2</farm-label>
-					<farm-textfield />
-				</div>
-			</farm-col>
-			<farm-col md="6">
-				<div style="border:1px solid red;">
-					<farm-label>label 3</farm-label>
-					<farm-textfield hint="some hint text" persistent-hint />
-				</div>
-			</farm-col>
-			<farm-col md="6">
-				<div style="border:1px solid red;">
-					<farm-label>label 4</farm-label>
-					<farm-textfield />
-				</div>
-			</farm-col>
-		</farm-row>
-	</div>`,
-});

package/src/components/layout/Row/Row.vue

@@ -9,7 +9,6 @@
 			'farm-row--no-default-gutters': noDefaultGutters,
 			'farm-row--extra-decrease': extraDecrease,
 			'farm-row--y-grid-gutters': yGridGutters,
-			'farm-row--y-form-gutters': yFormGutters,
 		}"
 	>
 		<slot></slot>
@@ -69,13 +68,6 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
-		/**
-		 * Add proper gutters to farm-cols in Y axis to be used with form elements
-		 */
-		yFormGutters: {
-			type: Boolean,
-			default: false,
-		},
 	},
 	inheritAttrs: true,
 });

package/src/scss/FormOverrides.scss

@@ -1,7 +1,9 @@
 .theme--light {
+
 	.fieldset-default,
 	.v-col-fieldset-default {
 		border: 0;
+
 		label {
 			font-weight: bold;
 			display: block;
@@ -15,49 +17,61 @@
 				.v-input__append-inner {
 					margin-top: 8px;
 				}
+
 				.v-input__prepend-inner {
 					margin-top: 8px;
 				}
 			}
+
 			.v-input__prepend-outer {
 				margin-top: 8px;
 			}
 		}
+
 		&.v-text-field.v-input--dense.v-text-field--outlined {
 			.v-input__slot {
 				min-height: 36px !important;
 				height: 36px;
 				background: white;
+
 				fieldset {
 					border-color: var(--v-gray-lighten2);
 				}
+
 				input,
 				.v-select__selection {
 					font-size: 0.75rem;
 				}
+
 				.v-input__append-inner {
 					margin-top: 8px;
 				}
+
 				.v-input__prepend-inner {
 					margin-top: 8px;
 				}
 			}
+
 			.v-input__prepend-outer {
 				margin-top: 8px;
 			}
+
 			&.v-input--is-label-active.v-input--is-focused {
 				.v-input__slot fieldset {
 					border-color: var(--v-secondary-base);
 				}
+
 				input {
 					color: var(--v-secondary-base);
 				}
 			}
+
 			&.error--text {
 				.v-input__slot fieldset {
 					border-color: var(--v-error-base);
 					border-width: 1px;
 				}
+
 				&:after {
 					content: '\F0028';
 					position: absolute;
@@ -68,28 +82,46 @@
 			}
 		}
 	}
+
 	.v-textarea.v-text-field--enclosed .v-text-field__slot {
 		textarea {
 			font-size: 0.75rem;
 			line-height: 1.25rem;
 		}
 	}
-	.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)
-		> .v-input__control
-		> .v-input__slot
-		fieldset {
+
+	.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot fieldset {
 		border-color: var(--v-gray-lighten2);
 	}
-	.v-text-field--outlined.v-input--is-focused > .v-input__control > .v-input__slot fieldset {
+
+	.v-text-field--outlined.v-input--is-focused>.v-input__control>.v-input__slot fieldset {
 		border-color: var(--v-gray-lighten2);
 		border-width: 1px;
 	}
+
 	.v-text-field .v-text-field__details {
 		padding-left: 0 !important;
-		min-height: 16px;
+		min-height: 16px !important;
+		margin-bottom: 0 !important;
+	}
+}
+
+.v-text-field {
+	.v-input__slot {
+		margin-bottom: 4px;
+	}
+
+	&.v-text-field--enclosed .v-text-field__details {
+		min-height: 16px !important;
+		margin-bottom: 4px !important;
+	}
+
+	&.v-text-field--solo .v-input__control {
+		min-height: 30px;
 	}
 }
-.v-form {
+
+.v-text-field .v-form {
 	.v-col-fieldset-default {
 		margin-bottom: 0;
 		padding-bottom: 0;
@@ -98,57 +130,63 @@
 			color: var(--v-error-base);
 		}
 	}
+
 	.row.form__footer-buttons--right {
 		margin: 0;
 		margin-top: 1rem;
 		padding: 0;
 		justify-content: flex-end;
+
 		.v-btn {
 			margin-left: 1rem;
 		}
 	}
 }
+
 .v-form.v-form-importfile {
-	> .row:first-child {
+	>.row:first-child {
 		border-bottom: 1px solid var(--v-gray-lighten2);
 		padding: 1rem;
+
 		h3 {
 			font-weight: 700;
 			color: var(--v-secondary-base);
 		}
 	}
 
-	> .row:nth-child(2) {
+	>.row:nth-child(2) {
 		padding: 1rem;
+
 		legend {
 			font-weight: 700;
 			width: 100%;
 		}
 	}
 }
+
 .v-form.form-custom-disabled {
 	.theme--light {
 		&.v-text-field.v-input--is-disabled .v-input__slot {
 			padding-left: 0;
+
 			input,
 			label {
 				color: var(--v-primary-base);
 				font-size: 1rem !important;
 			}
 		}
+
 		&.v-text-field.v-input--is-disabled .v-input__slot fieldset {
 			border: none;
 		}
 	}
 }
-.v-text-field.v-text-field--solo .v-input__control {
-	min-height: 30px;
-}
 
 .theme--light.v-input--switch {
 	.v-input--switch__thumb {
 		color: #ffffff !important;
 	}
+
 	.v-input--switch__track.theme--light {
 		background: #f0643b;
 
@@ -156,6 +194,7 @@
 			background-color: var(--v-secondary-base);
 		}
 	}
+
 	label {
 		font-size: 0.5rem;
 		font-weight: 600;
@@ -168,9 +207,11 @@
 	.v-form {
 		.row.form__footer-buttons--right {
 			justify-content: unset;
+
 			.v-btn {
 				margin-left: 0;
 			}
+
 			.v-btn:not(:first-child) {
 				margin-top: 1rem;
 			}
@@ -183,11 +224,13 @@
 	.v-icon.v-icon {
 		font-size: 22px;
 		color: var(--farm-neutral-darken);
+
 		&.mdi-checkbox-marked,
 		&.mdi-minus-box {
 			color: var(--farm-primary-base);
 		}
 	}
+
 	.v-input--selection-controls__ripple {
 		display: none;
 	}
@@ -198,20 +241,24 @@
 		padding: 8px 12px;
 		height: 36px;
 		border-bottom: none;
+
 		&:hover {
 			background-color: var(--farm-primary-lighten);
 		}
 	}
+
 	.v-list-item .v-list-item__content {
 		padding: 0;
 	}
+
 	.v-list-item__title {
 		font-weight: 700;
 		font-size: 12px;
 		color: var(--farm-text-primary);
 		line-height: 12px;
 	}
+
 	.v-list-item__action:first-child {
 		margin-right: 16px;
 	}
-}
+}