AllanZhengYP · pull · Oct 4, 2022 · Oct 4, 2022
diff --git a/...ages/amplify-ui-components/src/components/amplify-amazon-button/amplify-amazon-button.tsx b/...ages/amplify-ui-components/src/components/amplify-amazon-button/amplify-amazon-button.tsx
@@ -26,6 +26,12 @@ export class AmplifyAmazonButton {
 	@Prop()
 	handleAuthStateChange: AuthStateHandler = dispatchAuthStateChangeEvent;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	private federatedSignIn = response => {
 		const { access_token, expires_in } = response;
 

diff --git a/...es/amplify-ui-components/src/components/amplify-auth-container/amplify-auth-container.tsx b/...es/amplify-ui-components/src/components/amplify-auth-container/amplify-auth-container.tsx
@@ -7,6 +7,11 @@ import { Component, h, Host } from '@stencil/core';
 	tag: 'amplify-auth-container',
 })
 export class AmplifyAuthContainer {
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
 	render() {
 		return (
 			<Host>

diff --git a/packages/amplify-ui-components/src/components/amplify-auth-fields/amplify-auth-fields.tsx b/packages/amplify-ui-components/src/components/amplify-auth-fields/amplify-auth-fields.tsx
@@ -25,6 +25,12 @@ export class AmplifyAuthFields {
 	 */
 	@Prop() formFields: FormFieldTypes | string[];
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	private constructFormFieldOptions(formFields: FormFieldTypes | string[]) {
 		const content = [];
 

diff --git a/packages/amplify-ui-components/src/components/amplify-auth0-button/amplify-auth0-button.tsx b/packages/amplify-ui-components/src/components/amplify-auth0-button/amplify-auth0-button.tsx
@@ -25,6 +25,12 @@ export class AmplifyAuth0Button {
 
 	private _auth0: any;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	private handleLoad = () => {
 		// @ts-ignore Property 'auth0' does not exist on type '{}'.
 		const { oauth = {} } = Auth.configure();

diff --git a/...ages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx b/...ages/amplify-ui-components/src/components/amplify-authenticator/amplify-authenticator.tsx
@@ -85,6 +85,10 @@ export class AmplifyAuthenticator {
 	};
 
 	async componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+
 		onAuthUIStateChange((authState, authData) => {
 			this.onAuthStateChange(authState, authData as CognitoUserInterface);
 			this.toastMessage = '';

diff --git a/packages/amplify-ui-components/src/components/amplify-button/amplify-button.tsx b/packages/amplify-ui-components/src/components/amplify-button/amplify-button.tsx
@@ -22,6 +22,12 @@ export class AmplifyButton {
 	/** Name of icon to be placed inside the button */
 	@Prop() icon?: IconNameType;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<Host>

diff --git a/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx b/packages/amplify-ui-components/src/components/amplify-chatbot/amplify-chatbot.tsx
@@ -101,6 +101,10 @@ export class AmplifyChatbot {
 	 * Lifecycle functions
 	 */
 	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+
 		if (!Interactions || typeof Interactions.onComplete !== 'function') {
 			throw new Error(NO_INTERACTIONS_MODULE_FOUND);
 		}

diff --git a/packages/amplify-ui-components/src/components/amplify-checkbox/amplify-checkbox.tsx b/packages/amplify-ui-components/src/components/amplify-checkbox/amplify-checkbox.tsx
@@ -23,6 +23,12 @@ export class AmplifyCheckbox {
 		this.checked = !this.checked;
 	};
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<span class="checkbox">

diff --git a/packages/amplify-ui-components/src/components/amplify-code-field/amplify-code-field.tsx b/packages/amplify-ui-components/src/components/amplify-code-field/amplify-code-field.tsx
@@ -26,6 +26,12 @@ export class AmplifyCodeField {
 	/** Will disable the input if set to true */
 	@Prop() disabled?: boolean;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<amplify-form-field

diff --git a/.../amplify-ui-components/src/components/amplify-confirm-sign-in/amplify-confirm-sign-in.tsx b/.../amplify-ui-components/src/components/amplify-confirm-sign-in/amplify-confirm-sign-in.tsx
@@ -71,6 +71,9 @@ export class AmplifyConfirmSignIn {
 	private constructedFormFieldOptions: FormFieldTypes | string[];
 
 	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
 		this.setup();
 	}
 

diff --git a/.../amplify-ui-components/src/components/amplify-confirm-sign-up/amplify-confirm-sign-up.tsx b/.../amplify-ui-components/src/components/amplify-confirm-sign-up/amplify-confirm-sign-up.tsx
@@ -82,6 +82,10 @@ export class AmplifyConfirmSignUp {
 	};
 
 	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+
 		this.setup();
 	}
 

diff --git a/packages/amplify-ui-components/src/components/amplify-container/amplify-container.tsx b/packages/amplify-ui-components/src/components/amplify-container/amplify-container.tsx
@@ -8,6 +8,12 @@ import { Component, h, Host } from '@stencil/core';
 	styleUrl: 'amplify-container.scss',
 })
 export class AmplifyContainer {
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<Host>

diff --git a/...lify-ui-components/src/components/amplify-country-dial-code/amplify-country-dial-code.tsx b/...lify-ui-components/src/components/amplify-country-dial-code/amplify-country-dial-code.tsx
@@ -20,6 +20,10 @@ export class AmplifyCountryDialCode {
 	private selectedDialCode: string;
 
 	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+
 		this.setSelectedDialCode();
 	}
 

diff --git a/packages/amplify-ui-components/src/components/amplify-email-field/amplify-email-field.tsx b/packages/amplify-ui-components/src/components/amplify-email-field/amplify-email-field.tsx
@@ -26,6 +26,12 @@ export class AmplifyEmailField {
 	/** Used for the hint text that displays underneath the input field */
 	@Prop() hint?: string | FunctionalComponent | null;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<amplify-form-field

diff --git a/.../amplify-ui-components/src/components/amplify-facebook-button/amplify-facebook-button.tsx b/.../amplify-ui-components/src/components/amplify-facebook-button/amplify-facebook-button.tsx
@@ -26,6 +26,12 @@ export class AmplifyFacebookButton {
 	@Prop()
 	handleAuthStateChange: AuthStateHandler = dispatchAuthStateChangeEvent;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	private federatedSignIn = authResponse => {
 		const { accessToken, expiresIn } = authResponse;
 

diff --git a/...lify-ui-components/src/components/amplify-federated-buttons/amplify-federated-buttons.tsx b/...lify-ui-components/src/components/amplify-federated-buttons/amplify-federated-buttons.tsx
@@ -25,6 +25,10 @@ export class AmplifyFederatedButtons {
 	handleAuthStateChange: AuthStateHandler = dispatchAuthStateChangeEvent;
 
 	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+
 		if (!Auth || typeof Auth.configure !== 'function') {
 			throw new Error(NO_AUTH_MODULE_FOUND);
 		}

diff --git a/...lify-ui-components/src/components/amplify-federated-sign-in/amplify-federated-sign-in.tsx b/...lify-ui-components/src/components/amplify-federated-sign-in/amplify-federated-sign-in.tsx
@@ -18,6 +18,10 @@ export class AmplifyFederatedSignIn {
 	@Prop() federated: any = {};
 
 	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+
 		if (!Auth || typeof Auth.configure !== 'function') {
 			throw new Error(NO_AUTH_MODULE_FOUND);
 		}

diff --git a/.../amplify-ui-components/src/components/amplify-forgot-password/amplify-forgot-password.tsx b/.../amplify-ui-components/src/components/amplify-forgot-password/amplify-forgot-password.tsx
@@ -71,6 +71,10 @@ export class AmplifyForgotPassword {
 	};
 
 	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+
 		checkUsernameAlias(this.usernameAlias);
 		this.buildFormFields();
 	}

diff --git a/packages/amplify-ui-components/src/components/amplify-form-field/amplify-form-field.tsx b/packages/amplify-ui-components/src/components/amplify-form-field/amplify-form-field.tsx
@@ -34,6 +34,12 @@ export class AmplifyFormField {
 	/** Will disable the input if set to true */
 	@Prop() disabled?: boolean;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<div class="form-field">

diff --git a/packages/amplify-ui-components/src/components/amplify-form-section/amplify-form-section.tsx b/packages/amplify-ui-components/src/components/amplify-form-section/amplify-form-section.tsx
@@ -29,6 +29,12 @@ export class AmplifyFormSection {
 		this.handleSubmit(ev.detail);
 	}
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<form onSubmit={this.handleSubmit}>

diff --git a/...ages/amplify-ui-components/src/components/amplify-google-button/amplify-google-button.tsx b/...ages/amplify-ui-components/src/components/amplify-google-button/amplify-google-button.tsx
@@ -25,6 +25,12 @@ export class AmplifyGoogleButton {
 	/** App-specific client ID from Google */
 	@Prop() clientId: FederatedConfig['googleClientId'];
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	private getAuthInstance() {
 		if (window['gapi'] && window['gapi'].auth2) {
 			return (

diff --git a/packages/amplify-ui-components/src/components/amplify-greetings/amplify-greetings.tsx b/packages/amplify-ui-components/src/components/amplify-greetings/amplify-greetings.tsx
@@ -21,6 +21,12 @@ export class AmplifyGreetings {
 	@Prop()
 	handleAuthStateChange: AuthStateHandler = dispatchAuthStateChangeEvent;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<header class="greetings">

diff --git a/packages/amplify-ui-components/src/components/amplify-hint/amplify-hint.tsx b/packages/amplify-ui-components/src/components/amplify-hint/amplify-hint.tsx
@@ -9,6 +9,12 @@ import { Component, h } from '@stencil/core';
 	shadow: true,
 })
 export class AmplifyHint {
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<div class="hint">

diff --git a/packages/amplify-ui-components/src/components/amplify-icon-button/amplify-icon-button.tsx b/packages/amplify-ui-components/src/components/amplify-icon-button/amplify-icon-button.tsx
@@ -14,6 +14,12 @@ export class AmplifyIconButton {
 	/** (Optional) Whether or not to show the tooltip automatically */
 	@Prop() autoShowTooltip: boolean = false;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<span class="action-button">

diff --git a/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.tsx b/packages/amplify-ui-components/src/components/amplify-icon/amplify-icon.tsx
@@ -11,6 +11,12 @@ export class AmplifyIcon {
 	@Prop() name: IconNameType;
 
 	@Watch('name')
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	validateName(newValue: string) {
 		const isBlank = typeof newValue == null;
 		if (isBlank) {

diff --git a/packages/amplify-ui-components/src/components/amplify-input/amplify-input.tsx b/packages/amplify-ui-components/src/components/amplify-input/amplify-input.tsx
@@ -68,6 +68,10 @@ export class AmplifyInput {
 	}
 
 	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+
 		// the below behaviors are only applicable if `amplify-input` is used by `amplify-authenticator`.
 		if (!closestElement('amplify-authenticator', this.el)) return;
 

diff --git a/packages/amplify-ui-components/src/components/amplify-label/amplify-label.tsx b/packages/amplify-ui-components/src/components/amplify-label/amplify-label.tsx
@@ -11,6 +11,12 @@ export class AmplifyLabel {
 	/** Reflects the value of the for content property of html element */
 	@Prop() htmlFor: string;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<label class="label" htmlFor={this.htmlFor}>

diff --git a/packages/amplify-ui-components/src/components/amplify-link/amplify-link.tsx b/packages/amplify-ui-components/src/components/amplify-link/amplify-link.tsx
@@ -10,6 +10,12 @@ export class AmplifyLink {
 	/** The link role is used to identify an element that creates a hyperlink to a resource that is in the application or external */
 	@Prop() role: string = 'navigation';
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<a class="link" role={this.role}>

diff --git a/.../amplify-ui-components/src/components/amplify-loading-spinner/amplify-loading-spinner.tsx b/.../amplify-ui-components/src/components/amplify-loading-spinner/amplify-loading-spinner.tsx
@@ -6,6 +6,11 @@ import { Component, h } from '@stencil/core';
 	shadow: true,
 })
 export class AmplifyLoadingSpinner {
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
 	render() {
 		return <amplify-icon class="loading-spinner" name="loading" />;
 	}

diff --git a/packages/amplify-ui-components/src/components/amplify-nav/amplify-nav.tsx b/packages/amplify-ui-components/src/components/amplify-nav/amplify-nav.tsx
@@ -6,6 +6,11 @@ import { Component, h } from '@stencil/core';
 	shadow: true,
 })
 export class AmplifyNav {
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
 	render() {
 		return (
 			<nav class="nav">

diff --git a/packages/amplify-ui-components/src/components/amplify-oauth-button/amplify-oauth-button.tsx b/packages/amplify-ui-components/src/components/amplify-oauth-button/amplify-oauth-button.tsx
@@ -18,6 +18,12 @@ export class AmplifyOAuthButton {
 		Auth.federatedSignIn();
 	}
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<amplify-sign-in-button

diff --git a/...es/amplify-ui-components/src/components/amplify-password-field/amplify-password-field.tsx b/...es/amplify-ui-components/src/components/amplify-password-field/amplify-password-field.tsx
@@ -26,6 +26,12 @@ export class AmplifyPasswordField {
 	/** Will disable the input if set to true */
 	@Prop() disabled?: boolean;
 
+	componentWillLoad() {
+		console.warn(
+			'Version `1.x` of Amplify UI has been deprecated and will be removed in a future major version of `aws-amplify`. Please visit https://ui.docs.amplify.aws/ for the current version of Amplify UI.'
+		);
+	}
+
 	render() {
 		return (
 			<amplify-form-field