FDS-647 layout property added to fombuilder field (#234)

* main FDS-647 layout property added in formbuilder field and colors tokens are updated

* FDS-647 prettified

packages/flow-core/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.8.5] - 2024-02-13
+
+### Improvements
+
+- `f-ollion-dark` theme colors updated.
+
 ## [2.8.4] - 2024-02-13
 
 ### Bug Fixes

packages/flow-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-core",
-  "version": "2.8.4",
+  "version": "2.8.5",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",

packages/flow-core/src/components/f-progress-bar/f-progress-bar-global.scss

@@ -11,20 +11,11 @@ f-progress-bar {
 		flex: 0 0 auto;
 		border-radius: 50%;
 		border: 1px solid var(--f-circle-progress-outline);
-
+		padding: 2px;
 		@each $state, $color in $states {
 			&[state="#{$state}"] {
 				--f-circle-progress-outline: #{map.get($color, "background")};
 			}
 		}
-
-		&[size="x-small"],
-		&[size="small"] {
-			padding: 1px;
-		}
-		&[size="medium"],
-		&[size="large"] {
-			padding: 2px;
-		}
 	}
 }

packages/flow-form-builder/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 # Change Log
 
+## [2.2.4] - 2024-02-13
+
+### Patch Changes
+
+- `layout` property added to field which currently supports `label-left` value.
+
 ## [2.2.3] - 2024-02-13
 
 ### Patch Changes

packages/flow-form-builder/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ollion/flow-form-builder",
-  "version": "2.2.3",
+  "version": "2.2.4",
   "description": "Form builder for the flow design system",
   "module": "dist/flow-form-builder.es.js",
   "main": "dist/flow-form-builder.cjs.js",

packages/flow-form-builder/src/components/f-form-builder/fields/checkbox.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderCheckboxField, FormBuilderField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderCheckboxField;
-	return html`
+	const fieldHtml = html`
 		<f-checkbox-group
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -34,4 +34,8 @@ export default function (
 			${getSlots(name, field)}
 		</f-checkbox-group>
 	`;
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/color.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderColorPickerField, FormBuilderField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderColorPickerField;
-	return html`
+	const fieldHtml = html`
 		<f-color-picker
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -32,4 +32,8 @@ export default function (
 			${getSlots(name, field)}
 		</f-color-picker>
 	`;
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/datetime.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderField, FormBuilderDatetimeField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderDatetimeField;
-	return html`
+	const fieldHtml = html`
 		<f-date-time-picker
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -42,4 +42,8 @@ export default function (
 			${getSlots(name, field)}
 		</f-date-time-picker>
 	`;
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/emoji.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderField, FormBuilderEmojiField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderEmojiField;
-	return html`
+	const fieldHtml = html`
 		<f-emoji-picker
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -47,4 +47,8 @@ export default function (
 			${getSlots(name, field)}
 		</f-emoji-picker>
 	`;
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/file.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderField, FormBuilderFileField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderFileField;
-	return html`
+	const fieldHtml = html`
 		<f-file-upload
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -36,4 +36,8 @@ export default function (
 			${getSlots(name, field)}
 		</f-file-upload>
 	`;
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/radio.ts

@@ -2,7 +2,7 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderField, FormBuilderRadioField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
@@ -11,7 +11,7 @@ export default function (
 ) {
 	const field = _field as FormBuilderRadioField;
 
-	return html`
+	const fieldHtml = html`
 		<f-radio-group
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -35,4 +35,9 @@ export default function (
 			${getSlots(name, field)}
 		</f-radio-group>
 	`;
+
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/select.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderField, FormBuilderSelectField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderSelectField;
-	return html`
+	const fieldHtml = html`
 		<f-select
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -45,4 +45,8 @@ export default function (
 			${getSlots(name, field)}
 		</f-select>
 	`;
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/suggest.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderField, FormBuilderSuggestField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderSuggestField;
-	return html`
+	const fieldHtml = html`
 		<f-suggest
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -43,4 +43,9 @@ export default function (
 			${getSlots(name, field)}
 		</f-suggest>
 	`;
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/switch.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderField, FormBuilderSwitchField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderSwitchField;
-	return html`
+	const fieldHtml = html`
 		<f-switch
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -31,4 +31,9 @@ export default function (
 			${getSlots(name, field)}
 		</f-switch>
 	`;
+
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/text.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderField, FormBuilderTextInputField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderTextInputField;
-	return html`
+	const fieldHtml = html`
 		<f-input
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -44,4 +44,8 @@ export default function (
 			${getSlots(name, field)}
 		</f-input>
 	`;
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }

packages/flow-form-builder/src/components/f-form-builder/fields/textarea.ts

@@ -2,15 +2,15 @@ import { html } from "lit";
 import { FFormInputElements, FormBuilderField, FormBuilderTextAreaField } from "../../../types";
 import { Ref, ref } from "lit/directives/ref.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { getSlots } from "../../../modules/helpers";
+import { getLabelLeftLayout, getSlots } from "../../../modules/helpers";
 export default function (
 	name: string,
 	_field: FormBuilderField,
 	fieldRef: Ref<FFormInputElements>,
 	value: unknown
 ) {
 	const field = _field as FormBuilderTextAreaField;
-	return html`
+	const fieldHtml = html`
 		<f-text-area
 			id=${ifDefined(field.id)}
 			class=${ifDefined(field.className)}
@@ -37,4 +37,8 @@ export default function (
 			${getSlots(name, field)}
 		</f-text-area>
 	`;
+	if (field.layout === "label-left") {
+		return getLabelLeftLayout(field, fieldHtml);
+	}
+	return fieldHtml;
 }