Remove deprecated properties alert and error from all input components

Refs: #7015
public-ui · Dec 17, 2024 · f48311c · f48311c
1 parent 5c1515f
commit f48311c
Show file tree

Hide file tree

Showing 41 changed files with 29 additions and 528 deletions.
diff --git a/packages/components/src/components/@deprecated/input/controller.ts b/packages/components/src/components/@deprecated/input/controller.ts
@@ -71,20 +71,6 @@ export class InputController extends ControlledInputController implements Watche
 		validateTooltipAlign(this.component, value);
 	}
 
-	/**
-	 * @deprecated
-	 */
-	public validateError(value?: string): void {
-		if (typeof value === 'string' && value.length > 0) {
-			this.validateMsg({
-				_description: value,
-				_type: 'error',
-			});
-		} else {
-			this.validateMsg(undefined);
-		}
-	}
-
 	public validateHideError(value?: HideErrorPropType): void {
 		validateHideError(this.component, value, {
 			hooks: {
@@ -161,11 +147,7 @@ export class InputController extends ControlledInputController implements Watche
 		super.componentWillLoad();
 		this.validateAccessKey(this.component._accessKey);
 		this.validateAdjustHeight(this.component._adjustHeight);
-		this.validateError(this.component._error);
-		// _msg should only override _error if it is also defined.
-		if (this.component._msg) {
-			this.validateMsg(this.component._msg);
-		}
+		this.validateMsg(this.component._msg);
 		this.validateDisabled(this.component._disabled);
 		this.validateHideError(this.component._hideError);
 		this.validateHideLabel(this.component._hideLabel);

diff --git a/packages/components/src/components/@deprecated/input/types.ts b/packages/components/src/components/@deprecated/input/types.ts
@@ -6,7 +6,6 @@ type OptionalProps = PropLabelWithExpertSlot & {
 	accessKey: AccessKeyPropType;
 	adjustHeight: boolean;
 	disabled: boolean;
-	error: string;
 	hideError: boolean;
 	hideLabel: boolean;
 	hint: string;

diff --git a/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap
@@ -29,7 +29,7 @@ exports[`kol-combobox should render with _label="Label" _name="field" _placehold
 <kol-combobox _alert="" class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox">
-      <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
         <span slot="label">
           <span>
             Label

diff --git a/packages/components/src/components/input-adapter-leanup/controller.ts b/packages/components/src/components/input-adapter-leanup/controller.ts
@@ -1,10 +1,11 @@
 import type { Generic } from 'adopted-style-sheets';
 
-import { validateTouched, watchBoolean } from '../../schema';
+import { validateTouched } from '../../schema';
 
 import { AssociatedInputController } from './associated.controller';
 
 import type { Props, Watches } from './types';
+
 export class ControlledInputController extends AssociatedInputController implements Watches {
 	protected readonly component: Generic.Element.Component & Props;
 
@@ -13,17 +14,12 @@ export class ControlledInputController extends AssociatedInputController impleme
 		this.component = component;
 	}
 
-	public validateAlert(value?: boolean): void {
-		watchBoolean(this.component, '_alert', value);
-	}
-
 	public validateTouched(value?: boolean): void {
 		validateTouched(this.component, value);
 	}
 
 	public componentWillLoad(): void {
 		super.componentWillLoad();
-		this.validateAlert(this.component._alert);
 		this.validateTouched(this.component._touched);
 	}
 }
diff --git a/packages/components/src/components/input-adapter-leanup/types.ts b/packages/components/src/components/input-adapter-leanup/types.ts
@@ -2,7 +2,6 @@ import type { Generic } from 'adopted-style-sheets';
 
 type RequiredProps = NonNullable<unknown>;
 type OptionalProps = {
-	alert: boolean;
 	touched: boolean;
 };
 export type Props = Generic.Element.Members<RequiredProps, OptionalProps>;

diff --git a/packages/components/src/components/input-checkbox/shadow.tsx b/packages/components/src/components/input-checkbox/shadow.tsx
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 
 import type {
 	CheckedPropType,
+	FocusableElement,
 	HideErrorPropType,
 	IdPropType,
 	IndeterminatePropType,
@@ -27,7 +28,6 @@ import type {
 import { nonce } from '../../utils/dev.utils';
 import { tryToDispatchKoliBriEvent } from '../../utils/events';
 import { InputCheckboxController } from './controller';
-import type { FocusableElement } from '../../schema/interfaces/FocusableElement';
 
 import KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';
 import KolInputStateWrapperFc, { type InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper';
@@ -151,12 +151,6 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 	 */
 	@Prop() public _accessKey?: string;
 
-	/**
-	 * Defines whether the screen-readers should read out the notification.
-	 * @deprecated Will be removed in v3. Use automatic behaviour instead.
-	 */
-	@Prop({ mutable: true, reflect: true }) public _alert?: boolean;
-
 	/**
 	 * Defines whether the checkbox is checked or not. Can be read and written.
 	 * @TODO: Change type back to `CheckedPropType` after Stencil#4663 has been resolved.
@@ -175,12 +169,6 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 	 */
 	@Prop() public _disabled?: boolean = false;
 
-	/**
-	 * Defines the error message text.
-	 * @deprecated Will be removed in v3. Use `msg` instead.
-	 */
-	@Prop() public _error?: string;
-
 	/**
 	 * Hides the caption by default and displays the caption text with a tooltip when the
 	 * interactive element is focused or the mouse is over it.
@@ -300,22 +288,14 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 	}
 
 	private showAsAlert(): boolean {
-		if (this.state._alert === undefined) {
-			return Boolean(this.state._touched) && !this.inputHasFocus;
-		}
-		return this.state._alert;
+		return Boolean(this.state._touched) && !this.inputHasFocus;
 	}
 
 	@Watch('_accessKey')
 	public validateAccessKey(value?: string): void {
 		this.controller.validateAccessKey(value);
 	}
 
-	@Watch('_alert')
-	public validateAlert(value?: boolean): void {
-		this.controller.validateAlert(value);
-	}
-
 	@Watch('_checked')
 	public validateChecked(value?: CheckedPropType): void {
 		this.controller.validateChecked(value);
@@ -326,11 +306,6 @@ export class KolInputCheckbox implements InputCheckboxAPI, FocusableElement {
 		this.controller.validateDisabled(value);
 	}
 
-	@Watch('_error')
-	public validateError(value?: string): void {
-		this.controller.validateError(value);
-	}
-
 	@Watch('_hideError')
 	public validateHideError(value?: HideErrorPropType): void {
 		this.controller.validateHideError(value);

diff --git a/packages/components/src/components/input-color/shadow.tsx b/packages/components/src/components/input-color/shadow.tsx
@@ -111,12 +111,6 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 	 */
 	@Prop() public _accessKey?: string;
 
-	/**
-	 * Defines whether the screen-readers should read out the notification.
-	 * @deprecated Will be removed in v3. Use automatic behaviour instead.
-	 */
-	@Prop({ mutable: true, reflect: true }) public _alert?: boolean;
-
 	/**
 	 * Defines whether the input can be auto-completed.
 	 */
@@ -128,12 +122,6 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 	 */
 	@Prop() public _disabled?: boolean = false;
 
-	/**
-	 * Defines the error message text.
-	 * @deprecated Will be removed in v3. Use `msg` instead.
-	 */
-	@Prop() public _error?: string;
-
 	/**
 	 * Hides the error message but leaves it in the DOM for the input's aria-describedby.
 	 * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.
@@ -239,22 +227,14 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 	}
 
 	private showAsAlert(): boolean {
-		if (this.state._alert === undefined) {
-			return Boolean(this.state._touched) && !this.inputHasFocus;
-		}
-		return this.state._alert;
+		return Boolean(this.state._touched) && !this.inputHasFocus;
 	}
 
 	@Watch('_accessKey')
 	public validateAccessKey(value?: string): void {
 		this.controller.validateAccessKey(value);
 	}
 
-	@Watch('_alert')
-	public validateAlert(value?: boolean): void {
-		this.controller.validateAlert(value);
-	}
-
 	@Watch('_autoComplete')
 	public validateAutoComplete(value?: InputTypeOnOff): void {
 		this.controller.validateAutoComplete(value);
@@ -265,11 +245,6 @@ export class KolInputColor implements InputColorAPI, FocusableElement {
 		this.controller.validateDisabled(value);
 	}
 
-	@Watch('_error')
-	public validateError(value?: string): void {
-		this.controller.validateError(value);
-	}
-
 	@Watch('_hideError')
 	public validateHideError(value?: HideErrorPropType): void {
 		this.controller.validateHideError(value);

diff --git a/packages/components/src/components/input-date/input-date.e2e.ts b/packages/components/src/components/input-date/input-date.e2e.ts
@@ -360,23 +360,7 @@ test.describe('kol-input-date', () => {
 			await expect(page.locator('input')).toHaveValue('');
 		});
 	});
-	test.describe('when _error or _msg is set', () => {
-		test('should display and hide message based on _error value', async ({ page }) => {
-			await page.setContent(`<kol-input-date
-				_error="An error message"
-				_label="Date input"
-				_touched
-			></kol-input-date>`);
-
-			await expect(page.locator('.kol-alert')).toBeVisible();
-
-			const input = page.locator('kol-input-date');
-			await input.evaluate((element: HTMLKolInputDateElement) => {
-				element._error = undefined;
-			});
-
-			await expect(page.locator('.kol-alert')).not.toBeVisible();
-		});
+	test.describe('when _msg is set', () => {
 		test('should display and hide message based on _msg value', async ({ page }) => {
 			await page.setContent(`<kol-input-date
 				_label="Date input"

diff --git a/packages/components/src/components/input-date/shadow.tsx b/packages/components/src/components/input-date/shadow.tsx
@@ -173,12 +173,6 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 	 */
 	@Prop() public _accessKey?: string;
 
-	/**
-	 * Defines whether the screen-readers should read out the notification.
-	 * @deprecated Will be removed in v3. Use automatic behaviour instead.
-	 */
-	@Prop({ mutable: true, reflect: true }) public _alert?: boolean;
-
 	/**
 	 * Defines whether the input can be auto-completed.
 	 */
@@ -190,12 +184,6 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 	 */
 	@Prop() public _disabled?: boolean = false;
 
-	/**
-	 * Defines the error message text.
-	 * @deprecated Will be removed in v3. Use `msg` instead.
-	 */
-	@Prop() public _error?: string;
-
 	/**
 	 * Hides the error message but leaves it in the DOM for the input's aria-describedby.
 	 * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.
@@ -335,22 +323,14 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 	}
 
 	private showAsAlert(): boolean {
-		if (this.state._alert === undefined) {
-			return Boolean(this.state._touched) && !this.inputHasFocus;
-		}
-		return this.state._alert;
+		return Boolean(this.state._touched) && !this.inputHasFocus;
 	}
 
 	@Watch('_accessKey')
 	public validateAccessKey(value?: string): void {
 		this.controller.validateAccessKey(value);
 	}
 
-	@Watch('_alert')
-	public validateAlert(value?: boolean): void {
-		this.controller.validateAlert(value);
-	}
-
 	@Watch('_autoComplete')
 	public validateAutoComplete(value?: InputTypeOnOff): void {
 		this.controller.validateAutoComplete(value);
@@ -361,11 +341,6 @@ export class KolInputDate implements InputDateAPI, FocusableElement {
 		this.controller.validateDisabled(value);
 	}
 
-	@Watch('_error')
-	public validateError(value?: string): void {
-		this.controller.validateError(value);
-	}
-
 	@Watch('_hideError')
 	public validateHideError(value?: HideErrorPropType): void {
 		this.controller.validateHideError(value);

diff --git a/packages/components/src/components/input-email/shadow.tsx b/packages/components/src/components/input-email/shadow.tsx
@@ -133,12 +133,6 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	 */
 	@Prop() public _accessKey?: string;
 
-	/**
-	 * Defines whether the screen-readers should read out the notification.
-	 * @deprecated Will be removed in v3. Use automatic behaviour instead.
-	 */
-	@Prop({ mutable: true, reflect: true }) public _alert?: boolean;
-
 	/**
 	 * Defines whether the input can be auto-completed.
 	 */
@@ -150,11 +144,6 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	 */
 	@Prop() public _disabled?: boolean = false;
 
-	/**
-	 * Defines the error message text.
-	 */
-	@Prop() public _error?: string;
-
 	/**
 	 * Shows the character count on the lower border of the input.
 	 * @TODO: Change type back to `HasCounterPropType` after Stencil#4663 has been resolved.
@@ -301,22 +290,14 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 	}
 
 	private showAsAlert(): boolean {
-		if (this.state._alert === undefined) {
-			return Boolean(this.state._touched) && !this.inputHasFocus;
-		}
-		return this.state._alert;
+		return Boolean(this.state._touched) && !this.inputHasFocus;
 	}
 
 	@Watch('_accessKey')
 	public validateAccessKey(value?: string): void {
 		this.controller.validateAccessKey(value);
 	}
 
-	@Watch('_alert')
-	public validateAlert(value?: boolean): void {
-		this.controller.validateAlert(value);
-	}
-
 	@Watch('_autoComplete')
 	public validateAutoComplete(value?: InputTypeOnOff): void {
 		this.controller.validateAutoComplete(value);
@@ -327,11 +308,6 @@ export class KolInputEmail implements InputEmailAPI, FocusableElement {
 		this.controller.validateDisabled(value);
 	}
 
-	@Watch('_error')
-	public validateError(value?: string): void {
-		this.controller.validateError(value);
-	}
-
 	@Watch('_hasCounter')
 	public validateHasCounter(value?: boolean): void {
 		this.controller.validateHasCounter(value);