chore: use default classNames

aws-amplify · Feb 17, 2025 · 74109a8 · 74109a8
1 parent af0f874
commit 74109a8
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 8 deletions.
diff --git a/...enticator/components/select-mfa-type/__snapshots__/select-mfa-type.component.spec.ts.snap b/...enticator/components/select-mfa-type/__snapshots__/select-mfa-type.component.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`SelectMfaTypeComponent renders as expected 1`] = `
     data-amplify-form=""
   >
     <fieldset
-      class="amplify-flex amplify-authenticator__column"
+      class="amplify-authenticator__column amplify-flex"
       data-amplify-fieldset=""
     >
       <amplify-slot

diff --git a/...rc/lib/components/authenticator/components/select-mfa-type/select-mfa-type.component.html b/...rc/lib/components/authenticator/components/select-mfa-type/select-mfa-type.component.html
@@ -4,15 +4,15 @@
     (input)="onInput($event)"
 >
     <fieldset
-        class="amplify-flex amplify-authenticator__column"
+        [class]="classNames(ComponentClassName.Flex, 'amplify-authenticator__column')"
         data-amplify-fieldset
         [disabled]="authenticator.isPending"
     >
         <amplify-slot
             name="select-mfa-type-header"
             [context]="context"
         >
-            <h3 class="amplify-heading amplify-heading--3">{{ headerText }}</h3>
+            <h3 [class]="classNames(ComponentClassName.Heading, 'amplify-heading--3')">{{ headerText }}</h3>
         </amplify-slot>
         <amplify-base-form-fields route="selectMfaType"></amplify-base-form-fields>
 

diff --git a/.../src/lib/components/authenticator/components/select-mfa-type/select-mfa-type.component.ts b/.../src/lib/components/authenticator/components/select-mfa-type/select-mfa-type.component.ts
@@ -21,6 +21,7 @@ export class SelectMfaTypeComponent implements OnInit {
   public headerText: string;
   public confirmText = getConfirmText();
   public backToSignInText = getBackToSignInText();
+
   public classNames = classNames;
   public ComponentClassName = ComponentClassName;
 

diff --git a/...nts/authenticator/components/setup-email/__snapshots__/setup-email.component.spec.ts.snap b/...nts/authenticator/components/setup-email/__snapshots__/setup-email.component.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`SetupEmailComponent renders as expected 1`] = `
     data-amplify-form=""
   >
     <fieldset
-      class="amplify-flex amplify-authenticator__column"
+      class="amplify-authenticator__column amplify-flex"
       data-amplify-fieldset=""
     >
       <amplify-slot

diff --git a/...ngular/src/lib/components/authenticator/components/setup-email/setup-email.component.html b/...ngular/src/lib/components/authenticator/components/setup-email/setup-email.component.html
@@ -4,15 +4,15 @@
     (input)="onInput($event)"
 >
     <fieldset
-        class="amplify-flex amplify-authenticator__column"
+        [class]="classNames(ComponentClassName.Flex, 'amplify-authenticator__column')"
         data-amplify-fieldset
         [disabled]="authenticator.isPending"
     >
         <amplify-slot
             name="select-mfa-type-header"
             [context]="context"
         >
-            <h3 class="amplify-heading amplify-heading--3">{{ headerText }}</h3>
+            <h3 [class]="classNames(ComponentClassName.Heading, 'amplify-heading--3')">{{ headerText }}</h3>
         </amplify-slot>
         <amplify-base-form-fields route="setupEmail"></amplify-base-form-fields>
 

diff --git a/...lar/src/lib/components/authenticator/components/setup-email/setup-email.component.spec.ts b/...lar/src/lib/components/authenticator/components/setup-email/setup-email.component.spec.ts
@@ -13,7 +13,7 @@ import { TextFieldComponent } from '../../../../primitives/text-field/text-field
 import { RadioGroupFieldComponent } from '../../../../primitives/radio-group-field/radio-group-field.component';
 
 const fieldLabel = 'Setup Email';
-const fieldInput = { name: 'email', value: 'jjarvisp@amazon.com' };
+const fieldInput = { name: 'email', value: 'user@example.com' };
 
 const mockContext: Partial<AuthActorContext> = {
   challengeName: 'MFA_SETUP',

diff --git a/...-angular/src/lib/components/authenticator/components/setup-email/setup-email.component.ts b/...-angular/src/lib/components/authenticator/components/setup-email/setup-email.component.ts
@@ -1,5 +1,10 @@
 import { Component } from '@angular/core';
-import { authenticatorTextUtil, getFormDataFromEvent } from '@aws-amplify/ui';
+import {
+  authenticatorTextUtil,
+  classNames,
+  ComponentClassName,
+  getFormDataFromEvent,
+} from '@aws-amplify/ui';
 
 const { getConfirmText, getBackToSignInText, getSetupEmailText } =
   authenticatorTextUtil;
@@ -14,6 +19,9 @@ export class SetupEmailComponent {
   public confirmText = getConfirmText();
   public backToSignInText = getBackToSignInText();
 
+  public classNames = classNames;
+  public ComponentClassName = ComponentClassName;
+
   constructor(public authenticator: AuthenticatorService) {}
 
   public get context(): AuthenticatorService['slotContext'] {