Merge pull request #851 from 3YOURMIND/kt-value-label-reduce-paddings…

…-and-loading-bars-heights style(kt-value-label): reduce paddings and loading bars heights
3YOURMIND · Dec 7, 2023 · 0fb9e19 · 0fb9e19
2 parents 75c13a1 + 5157c47
commit 0fb9e19
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/documentation/pages/usage/components/value-label.vue b/packages/documentation/pages/usage/components/value-label.vue
@@ -108,6 +108,17 @@
 				</div>
 			</KtForm>
 		</KtI18nContext>
+		<h2>Usage</h2>
+		<p>
+			- When stacking labels on top of each other, create a layout that ensure a
+			min margin of <code>16px</code> (<code>unit-4</code>) between the various
+			value labels.
+		</p>
+		<p>
+			- The last row of the layout where value labels are stacked should not
+			contain any extra margin → ensure a good margin is handled on the
+			different sections of the more general layout.
+		</p>
 	</div>
 </template>
 

diff --git a/packages/kotti-ui/source/kotti-value-label/KtValueLabel.vue b/packages/kotti-ui/source/kotti-value-label/KtValueLabel.vue
@@ -3,9 +3,9 @@
 		<template v-if="isLoading">
 			<div
 				v-if="showHeader || $slots.helpText"
-				class="kt-value-label-loading__header skeleton rectangle"
+				class="kt-value-label-loading__header skeleton rectangle md"
 			/>
-			<div class="kt-value-label-loading__value skeleton rectangle" />
+			<div class="kt-value-label-loading__value skeleton rectangle lg" />
 		</template>
 		<template v-else>
 			<div v-if="showHeader || $slots.helpText" class="kt-value-label__header">
@@ -105,7 +105,7 @@ export default defineComponent<KottiValueLabel.PropsInternal>({
 	}
 
 	> *:not(:last-child) {
-		margin-bottom: var(--unit-2);
+		margin-bottom: var(--unit-1);
 	}
 
 	&__header {