Remove inline styling vue (#1814)

jacoblogan · Jacob Logan · web-flow · commit d66a7265e9de · 2022-05-09T03:22:40.000-07:00
* remove inline styling from vue authenticator

Co-authored-by: Jacob Logan &lt;lognjc@amazon.com&gt;
diff --git a/.changeset/heavy-boats-tease.md b/.changeset/heavy-boats-tease.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-vue": patch
+---
+
+Remove inline styling from vue authenticator
diff --git a/packages/vue/src/components/alias-control.vue b/packages/vue/src/components/alias-control.vue
@@ -37,8 +37,8 @@ const randomPhone = Math.floor(Math.random() * 999999);
   <base-wrapper
     class="
       amplify-flex amplify-field amplify-textfield amplify-phonenumberfield
+      amplify-authenticator__column
     "
-    style="flex-direction: column"
   >
     <base-label
       :for="'amplify-field-' + random"
@@ -57,8 +57,8 @@ const randomPhone = Math.floor(Math.random() * 999999);
             amplify-field
             amplify-selectfield
             amplify-countrycodeselect
+            amplify-authenticator__column
           "
-          style="flex-direction: column"
           v-if="type === 'tel'"
         >
           <base-label
@@ -80,8 +80,11 @@ const randomPhone = Math.floor(Math.random() * 999999);
             >
             </base-select>
             <base-wrapper
-              class="amplify-flex amplify-select__icon-wrapper"
-              style="align-items: center; justify-content: center"
+              class="
+                amplify-flex
+                amplify-select__icon-wrapper
+                amplify-authenticator__icon-wrapper
+              "
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/vue/src/components/confirm-reset-password.vue b/packages/vue/src/components/confirm-reset-password.vue
@@ -80,8 +80,7 @@ function onBlur(e: Event) {
         @submit.prevent="onConfirmResetPasswordSubmit"
       >
         <base-field-set
-          class="amplify-flex"
-          style="flex-direction: column"
+          class="amplify-flex amplify-authenticator__column"
           :disabled="actorState.matches('confirmResetPassword.pending')"
         >
           <slot name="header">
@@ -90,30 +89,28 @@ function onBlur(e: Event) {
             </base-heading>
           </slot>
 
-          <base-wrapper class="amplify-flex" style="flex-direction: column">
+          <base-wrapper class="amplify-flex amplify-authenticator__column">
             <base-form-fields route="confirmResetPassword"></base-form-fields>
           </base-wrapper>
-          <base-footer class="amplify-flex" style="flex-direction: column">
+          <base-footer class="amplify-flex amplify-authenticator__column">
             <base-alert v-if="actorState?.context?.remoteError">
               {{ translate(actorState?.context?.remoteError) }}
             </base-alert>
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-variation="primary"
               type="submit"
-              style="font-weight: normal"
               :disabled="actorState.matches('confirmResetPassword.pending')"
               >{{ confirmResetPasswordText }}</amplify-button
             >
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-size="small"
               data-variation="link"
               type="button"
               @click.prevent="onLostYourCodeClicked"
-              style="font-weight: normal"
             >
               {{ resendCodeText }}
             </amplify-button>
diff --git a/packages/vue/src/components/confirm-sign-in.vue b/packages/vue/src/components/confirm-sign-in.vue
@@ -78,37 +78,34 @@ const onBackToSignInClicked = (): void => {
         @submit.prevent="onConfirmSignInSubmit"
       >
         <base-field-set
-          class="amplify-flex"
-          style="flex-direction: column"
+          class="amplify-flex amplify-authenticator__column"
           :disabled="actorState.matches('confirmSignIn.pending')"
         >
           <slot name="header">
             <base-heading :level="3" class="amplify-heading">
               {{ confirmSignInHeading }}
             </base-heading>
           </slot>
-          <base-wrapper class="amplify-flex" style="flex-direction: column">
+          <base-wrapper class="amplify-flex amplify-authenticator__column">
             <base-form-fields route="confirmSignIn"></base-form-fields>
           </base-wrapper>
-          <base-footer class="amplify-flex" style="flex-direction: column">
+          <base-footer class="amplify-flex amplify-authenticator__column">
             <base-alert v-if="actorState?.context?.remoteError">
               {{ translate(actorState?.context?.remoteError) }}
             </base-alert>
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-loading="false"
               data-variation="primary"
-              style="font-weight: normal"
               :disabled="actorState.matches('confirmSignIn.pending')"
               >{{ confirmText }}</amplify-button
             >
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-size="small"
               data-variation="link"
-              style="font-weight: normal"
               type="button"
               @click.prevent="onBackToSignInClicked"
             >
diff --git a/packages/vue/src/components/confirm-sign-up.vue b/packages/vue/src/components/confirm-sign-up.vue
@@ -74,50 +74,43 @@ const onLostCodeClicked = (): void => {
   <slot v-bind="$attrs" name="confirmSignUpSlotI">
     <base-wrapper v-bind="$attrs">
       <base-form @input="onInput" @submit.prevent="onConfirmSignUpSubmit">
-        <base-wrapper class="amplify-flex" style="flex-direction: column">
+        <base-wrapper class="amplify-flex amplify-authenticator__column">
           <slot name="header">
             <base-heading
-              class="amplify-heading"
-              style="font-size: 1.5rem"
+              class="amplify-heading amplify-authenticator__heading"
               :level="3"
             >
               {{ confirmSignUpHeading }}
             </base-heading>
           </slot>
-          <base-text style="margin-bottom: 1rem">
+          <base-text class="amplify-authenticator__subtitle">
             {{ subtitleText }}
           </base-text>
           <base-field-set
-            class="amplify-flex"
-            style="flex-direction: column"
+            class="amplify-flex amplify-authenticator__column"
             :disabled="isPending"
           >
             <base-form-fields route="confirmSignUp"></base-form-fields>
           </base-field-set>
 
-          <base-footer
-            class="amplify-flex"
-            style="flex-direction: column; align-items: unset"
-          >
+          <base-footer class="amplify-flex amplify-authenticator__column">
             <base-alert v-if="error">
               {{ translate(error) }}
             </base-alert>
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-loading="false"
               data-variation="primary"
               type="submit"
-              style="font-weight: normal"
               :disabled="isPending"
             >
               {{ confirmText }}
             </amplify-button>
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-variation="default"
-              style="font-weight: normal"
               type="button"
               @click.prevent="onLostCodeClicked"
             >
diff --git a/packages/vue/src/components/confirm-verify-user.vue b/packages/vue/src/components/confirm-verify-user.vue
@@ -69,38 +69,35 @@ const onSkipClicked = (): void => {
     <base-wrapper v-bind="$attrs">
       <base-form @input="onInput" @submit.prevent="onConfirmVerifyUserSubmit">
         <base-field-set
-          class="amplify-flex"
-          style="flex-direction: column"
+          class="amplify-flex amplify-authenticator__column"
           :disabled="actorState.matches('confirmVerifyUser.pending')"
         >
           <slot name="header">
             <base-heading :level="3" class="amplify-heading">
               {{ verifyHeading }}
             </base-heading>
           </slot>
-          <base-wrapper class="amplify-flex" style="flex-direction: column">
+          <base-wrapper class="amplify-flex amplify-authenticator__column">
             <base-form-fields route="confirmVerifyUser"></base-form-fields>
           </base-wrapper>
 
-          <base-footer class="amplify-flex" style="flex-direction: column">
+          <base-footer class="amplify-flex amplify-authenticator__column">
             <base-alert v-if="actorState?.context?.remoteError">
               {{ translate(actorState?.context.remoteError) }}
             </base-alert>
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-variation="primary"
               type="submit"
-              style="font-weight: normal"
               :disabled="actorState.matches('confirmVerifyUser.pending')"
               >{{ submitText }}</amplify-button
             >
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-size="small"
               data-variation="link"
-              style="font-weight: normal"
               type="button"
               @click.prevent="onSkipClicked"
             >
diff --git a/packages/vue/src/components/federated-sign-in-button.vue b/packages/vue/src/components/federated-sign-in-button.vue
@@ -1,14 +1,20 @@
 <template>
   <amplify-button
-    class="amplify-field-group__control federated-sign-in-button"
+    class="
+      amplify-field-group__control
+      federated-sign-in-button
+      amplify-authenticator__font
+    "
     data-fullwidth="false"
-    style="font-weight: normal"
     type="button"
     @click="onClick"
   >
     <base-wrapper
-      class="amplify-flex federated-sign-in-button-row"
-      style="flex-direction: row; justify-content: center; align-items: center"
+      class="
+        amplify-flex
+        federated-sign-in-button-row
+        amplify-authenticator__sign-in-button-wrapper
+      "
     >
       <slot></slot>
     </base-wrapper>
diff --git a/packages/vue/src/components/federated-sign-in.vue b/packages/vue/src/components/federated-sign-in.vue
@@ -44,8 +44,11 @@ const signInWithGoogle = computed(() =>
 
 <template>
   <base-wrapper
-    class="amplify-flex federated-sign-in-container"
-    style="flex-direction: column; padding: 0 0 1rem 0"
+    class="
+      amplify-flex
+      federated-sign-in-container
+      amplify-authenticator__column amplify-authenticator__sign-in-base
+    "
     v-if="shouldShowFederatedSignIn"
   >
     <federated-sign-in-button v-if="includeAmazon" :provider="fp.Amazon">
@@ -60,7 +63,7 @@ const signInWithGoogle = computed(() =>
         ></path>
       </svg>
 
-      <p class="amplify-text" style="align-self: center">
+      <p class="amplify-text amplify-authenticator__federated-text">
         {{ signInWithAmazon }}
       </p>
     </federated-sign-in-button>
@@ -80,7 +83,7 @@ const signInWithGoogle = computed(() =>
           d="M747.4 535.7c-.4-68.2 30.5-119.6 92.9-157.5-34.9-50-87.7-77.5-157.3-82.8-65.9-5.2-138 38.4-164.4 38.4-27.9 0-91.7-36.6-141.9-36.6C273.1 298.8 163 379.8 163 544.6c0 48.7 8.9 99 26.7 150.8 23.8 68.2 109.6 235.3 199.1 232.6 46.8-1.1 79.9-33.2 140.8-33.2 59.1 0 89.7 33.2 141.9 33.2 90.3-1.3 167.9-153.2 190.5-221.6-121.1-57.1-114.6-167.2-114.6-170.7zm-105.1-305c50.7-60.2 46.1-115 44.6-134.7-44.8 2.6-96.6 30.5-126.1 64.8-32.5 36.8-51.6 82.3-47.5 133.6 48.4 3.7 92.6-21.2 129-63.7z"
         ></path>
       </svg>
-      <p class="amplify-text" style="align-self: center">
+      <p class="amplify-text amplify-authenticator__federated-text">
         {{ signInWithApple }}
       </p>
     </federated-sign-in-button>
@@ -97,7 +100,7 @@ const signInWithGoogle = computed(() =>
         ></path>
       </svg>
 
-      <p class="amplify-text" style="align-self: center">
+      <p class="amplify-text amplify-authenticator__federated-text">
         {{ signInWithFacebook }}
       </p>
     </federated-sign-in-button>
@@ -127,7 +130,7 @@ const signInWithGoogle = computed(() =>
           fill="#EB4335"
         ></path>
       </svg>
-      <p class="amplify-text" style="align-self: center">
+      <p class="amplify-text amplify-authenticator__federated-text">
         {{ signInWithGoogle }}
       </p>
     </federated-sign-in-button>
diff --git a/packages/vue/src/components/force-new-password.vue b/packages/vue/src/components/force-new-password.vue
@@ -76,31 +76,29 @@ function onBlur(e: Event) {
         @submit.prevent="onForceNewPasswordSubmit"
       >
         <base-field-set
-          class="amplify-flex"
-          style="flex-direction: column"
+          class="amplify-flex amplify-authenticator__column"
           :disabled="actorState.matches('forceNewPassword.pending')"
         >
           <slot name="header">
             <base-heading :level="3" class="amplify-heading">
               {{ changePasswordLabel }}
             </base-heading>
           </slot>
-          <base-wrapper class="amplify-flex" style="flex-direction: column">
+          <base-wrapper class="amplify-flex amplify-authenticator__column">
             <slot name="force-new-password-form-fields">
               <authenticator-force-new-password-form-fields />
             </slot>
           </base-wrapper>
 
-          <base-footer class="amplify-flex" style="flex-direction: column">
+          <base-footer class="amplify-flex amplify-authenticator__column">
             <base-alert data-ui-error v-if="actorState.context.remoteError">
               {{ translate(actorState.context.remoteError) }}
             </base-alert>
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-loading="false"
               data-variation="primary"
-              style="font-weight: normal"
               :disabled="actorState.matches('signUp.submit')"
               >{{
                 actorState.matches('forceNewPassword.pending')
@@ -109,11 +107,10 @@ function onBlur(e: Event) {
               }}</amplify-button
             >
             <amplify-button
-              class="amplify-field-group__control"
+              class="amplify-field-group__control amplify-authenticator__font"
               data-fullwidth="false"
               data-size="small"
               data-variation="link"
-              style="font-weight: normal"
               type="button"
               @click.prevent="onHaveAccountClicked"
             >
diff --git a/packages/vue/src/components/password-control.vue b/packages/vue/src/components/password-control.vue
@@ -53,8 +53,10 @@ export default {
 
 <template>
   <base-wrapper
-    class="amplify-flex amplify-field amplify-textfield amplify-passwordfield"
-    style="flex-direction: column"
+    class="
+      amplify-flex amplify-field amplify-textfield amplify-passwordfield
+      amplify-authenticator__column
+    "
   >
     <base-label
       class="amplify-label"
diff --git a/packages/vue/src/components/primitives/base-alert.vue b/packages/vue/src/components/primitives/base-alert.vue
@@ -10,12 +10,11 @@ function close() {
 <template>
   <div
     v-if="show"
-    class="amplify-flex amplify-alert"
+    class="amplify-flex amplify-alert amplify-authenticator__base"
     data-variation="error"
-    style="align-items: center; justify-content: space-between"
     role="alert"
   >
-    <div class="amplify-flex" style="align-items: center">
+    <div class="amplify-flex amplify-authenticator__icon-wrapper">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         class="amplify-icon"
diff --git a/packages/vue/src/components/primitives/base-two-tabs.vue b/packages/vue/src/components/primitives/base-two-tabs.vue
@@ -5,13 +5,12 @@
     tabindex="0"
     aria-orientation="horizontal"
     data-orientation="horizontal"
+    class="amplify-authenticator__tabs"
     role="tablist"
-    style="outline: none"
   >
     <base-wrapper
-      class="amplify-flex amplify-tabs"
+      class="amplify-flex amplify-tabs amplify-authenticator__tabs-wrapper"
       data-indicator-position="top"
-      style="gap: 0px; justify-content: center"
     >
       <slot></slot>
     </base-wrapper>
diff --git a/packages/vue/src/components/reset-password.vue b/packages/vue/src/components/reset-password.vue
diff --git a/packages/vue/src/components/setup-totp.vue b/packages/vue/src/components/setup-totp.vue
diff --git a/packages/vue/src/components/sign-in.vue b/packages/vue/src/components/sign-in.vue
diff --git a/packages/vue/src/components/sign-up.vue b/packages/vue/src/components/sign-up.vue
diff --git a/packages/vue/src/components/verify-user.vue b/packages/vue/src/components/verify-user.vue
diff --git a/packages/vue/src/styles.css b/packages/vue/src/styles.css

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@aws-amplify/ui-vue": patch
 +---
++
 +Remove inline styling from vue authenticator
Original file line number	Diff line number	Diff line change
`@@ -37,8 +37,8 @@ const randomPhone = Math.floor(Math.random() * 999999);`
`37`	`37`	`<base-wrapper`
`38`	`38`	`class="`
`39`	`39`	`amplify-flex amplify-field amplify-textfield amplify-phonenumberfield`
	`40`	`+ amplify-authenticator__column`
`40`	`41`	`"`
`41`		`- style="flex-direction: column"`
`42`	`42`	`>`
`43`	`43`	`<base-label`
`44`	`44`	`:for="'amplify-field-' + random"`
`@@ -57,8 +57,8 @@ const randomPhone = Math.floor(Math.random() * 999999);`
`57`	`57`	`amplify-field`
`58`	`58`	`amplify-selectfield`
`59`	`59`	`amplify-countrycodeselect`
	`60`	`+ amplify-authenticator__column`
`60`	`61`	`"`
`61`		`- style="flex-direction: column"`
`62`	`62`	`v-if="type === 'tel'"`
`63`	`63`	`>`
`64`	`64`	`<base-label`
`@@ -80,8 +80,11 @@ const randomPhone = Math.floor(Math.random() * 999999);`
`80`	`80`	`>`
`81`	`81`	`</base-select>`
`82`	`82`	`<base-wrapper`
`83`		`- class="amplify-flex amplify-select__icon-wrapper"`
`84`		`- style="align-items: center; justify-content: center"`
	`83`	`+ class="`
	`84`	`+ amplify-flex`
	`85`	`+ amplify-select__icon-wrapper`
	`86`	`+ amplify-authenticator__icon-wrapper`
	`87`	`+ "`
`85`	`88`	`>`
`86`	`89`	`<svg`
`87`	`90`	`xmlns="http://www.w3.org/2000/svg"`