refactor(form): deprecate labelPosition (#172)

apps/demo/src/pages/index.astro

@@ -62,7 +62,6 @@ const config: ControlConfig = {
   type: "checkbox",
   name: "is-awesome",
   label: "is Awesome?",
-  labelPosition: "right",
 };
 
 // insert a control

apps/docs/src/pages/en/page-2.md

@@ -56,7 +56,6 @@ form.controls.push(
     type: "checkbox",
     name: "is-awesome",
     label: "is Awesome?",
-    labelPosition: "right",
   })
 );
 

packages/common/types/control.types.ts

@@ -33,7 +33,6 @@ export interface ControlBase {
   type?: ControlType;
   value?: string | number | string[];
   label?: string;
-  labelPosition?: "right" | "left";
   placeholder?: string;
   validators?: string[]; // TODO: implement validator type
   options?: string[] | ControlOption[];

packages/form/README.md

@@ -58,7 +58,6 @@ form.controls.push(
     type: "checkbox",
     name: "is-awesome",
     label: "is Awesome?",
-    labelPosition: "right",
   })
 );
 

packages/form/components/Form.astro

@@ -57,3 +57,4 @@ const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
 		border-color: red;
 	}
 </style>
+ 

packages/form/components/Label.astro

@@ -15,7 +15,7 @@ const isRequired: boolean = showValidationHints && validators.includes('validato
 ---
 
 {
-	control.label && control.labelPosition === 'left' && (
+	control.label && control.type !== "checkbox" && (
 		<label for={control.name} data-validation-required={isRequired ? "true" : null}>
 			{control.label}
 		</label>
@@ -25,7 +25,7 @@ const isRequired: boolean = showValidationHints && validators.includes('validato
 <slot />
 
 {
-	control.label && control.labelPosition === 'right' && (
+	control.label && control.type === "checkbox" && (
 		<label for={control.name} data-validation-required={isRequired ? "true" : null}>
 			{control.label}
 		</label>

packages/form/components/controls/Input.astro

@@ -36,7 +36,6 @@ const validatorAttributes: Record<string, string> = validators?.reduce((prev, va
 	checked={control.value === 'checked'}
 	placeholder={control.placeholder}
 	data-label={control.label}
-	data-label-position={control.labelPosition}
 	data-validator-haserrors={hasErrors.toString()}
 	readonly={readOnly || null}
   disabled={(readOnly || null) && control.type === 'checkbox'}

packages/form/components/controls/TextArea.astro

@@ -32,7 +32,6 @@ const validatorAttributes: Record<string, string> = validators?.reduce((prev, va
 	rows={control?.rows ?? 3}
 	cols={control?.cols ?? 21}
 	data-label={control?.label}
-	data-label-position={control?.labelPosition}
 	readonly={readOnly || null}
 	{...validatorAttributes}
 >

packages/form/core/form-control.ts

@@ -18,7 +18,6 @@ export class FormControl {
 	private _type: ControlType = 'text';
 	private _value?: string | number | null | string[] | ControlOption[];
 	private _label = '';
-	private _labelPosition?: 'right' | 'left' = 'left';
 	private _isValid = true;
 	private _isPristine = true;
 	private _placeholder: string | null = null;
@@ -43,7 +42,6 @@ export class FormControl {
 			type = 'text',
 			value = null,
 			label = '',
-			labelPosition = 'left',
 			placeholder = null,
 			validators = [],
 			options = [],
@@ -53,7 +51,6 @@ export class FormControl {
 		this._type = type;
 		this._value = value;
 		this._label = label;
-		this._labelPosition = labelPosition;
 		this._placeholder = placeholder;
 		this._validators = validators;
 		this._options = options;
@@ -96,10 +93,6 @@ export class FormControl {
 		return this._label;
 	}
 
-	get labelPosition() {
-		return this._labelPosition;
-	}
-
 	get placeholder() {
 		return this._placeholder;
 	}

packages/form/test/Field.astro.test.js

@@ -17,7 +17,6 @@ describe('Field.astro test', () => {
 			control: {
 				label: expectedLabel,
 				name: 'username',
-				labelPosition: 'left',
 			},
 			showValidationHints: false,
 		};
@@ -38,7 +37,6 @@ describe('Field.astro test', () => {
 			control: {
 				label: expectedLabel,
 				name: 'username',
-				labelPosition: 'left',
 				validators: ['validator-required'],
 			},
 			showValidationHints: true,
@@ -60,7 +58,6 @@ describe('Field.astro test', () => {
 			control: {
 				label: 'FAKE LABEL',
 				name: 'username',
-				labelPosition: 'left',
 				validators: ['validator-required'],
 				errors: [
 					{
@@ -88,7 +85,6 @@ describe('Field.astro test', () => {
 			control: {
 				label: expectedLabel,
 				name: 'username',
-				labelPosition: 'left',
 				validators: ['validator-required'],
 			},
 			readOnly: true,

packages/form/test/FieldSet.astro.test.js

@@ -10,7 +10,6 @@ describe('FieldSet.astro test', () => {
 		name: 'test',
 		label: 'Test',
 		type: 'text',
-		labelPosition: 'left',
 	};
 
 	beforeEach(() => {

packages/validator/README.md

@@ -62,7 +62,6 @@ form.controls.push(
     type: "checkbox",
     name: "is-awesome",
     label: "is Awesome?",
-    labelPosition: "right",
   })
 );