Merge flattened css into main branch (#1772)

* flatten angular css (#1739)

* flatten angular css

* add existence checks

* remove commented code

Co-authored-by: Jacob Logan <[email protected]>

* flatten css to 010 specificity (#1742)

* flatten css to 010 specificity

* update styling based on PR feedback

* add comments in code and additional instruction to the ui contributing page

* move styling to more consistant block

* Update packages/ui/CONTRIBUTING.md

Co-authored-by: Scott Rees <[email protected]>

* Update packages/ui/CONTRIBUTING.md

Co-authored-by: Scott Rees <[email protected]>

* Update packages/ui/CONTRIBUTING.md

Co-authored-by: Scott Rees <[email protected]>

* Update packages/ui/src/theme/css/component/loader.scss

Co-authored-by: Scott Rees <[email protected]>

Co-authored-by: Jacob Logan <[email protected]>
Co-authored-by: Scott Rees <[email protected]>

* update react code to use the flattened css selectors (#1741)

* update react code to use the flattened css selectors

* add ComponentClasses type and separate logic in classNameModifier

* updates based on PR feedback

Co-authored-by: Jacob Logan <[email protected]>

* use flattened css in vue (#1740)

* use flattened css in vue

* Update federated-sign-in.vue

* fix type, update button disabled attr, update header classes

* move augmented class attribute to overwrite the passed in class

Co-authored-by: Jacob Logan <[email protected]>

* updating tests

* update vue disabled type

* update togglebutton styling

* Create new-years-itch.md

* Update packages/angular/projects/ui-angular/src/lib/primitives/button/button.component.ts

* Update packages/angular/projects/ui-angular/src/lib/primitives/button/button.component.ts

* Update packages/react/src/primitives/shared/utils.ts

* correct checkbox checked and disabled classes

* remove linear height variable from loader styling

* pass through isDisabled on view and update button disabled styles

* add amplify-heading--{level} classes to react authenticator

* update divider label

* adding tests to check that correct classes are added

* update togglebutton styling to use flattened css for all states

* remove extra code

* add unit tests for primitive classes

Co-authored-by: Jacob Logan <[email protected]>
Co-authored-by: Scott Rees <[email protected]>

Author: 3 people

.changeset/new-years-itch.md

@@ -0,0 +1,8 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui-angular": patch
+"@aws-amplify/ui": patch
+"@aws-amplify/ui-vue": patch
+---
+
+Refactor of styling to flatten css selectors across angular, react, and vue

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/confirm-reset-password/amplify-confirm-reset-password.component.html

@@ -6,7 +6,7 @@
     [disabled]="authenticator.isPending"
   >
     <amplify-slot name="confirm-reset-password-header" [context]="context">
-      <h3 class="amplify-heading">{{ headerText }}</h3>
+      <h3 class="amplify-heading amplify-heading--3">{{ headerText }}</h3>
     </amplify-slot>
 
     <amplify-base-form-fields

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/confirm-sign-in/confirm-sign-in.component.html

@@ -6,7 +6,7 @@
     [disabled]="authenticator.isPending"
   >
     <amplify-slot name="confirm-sign-in-header" [context]="context">
-      <h3 class="amplify-heading">{{ headerText }}</h3>
+      <h3 class="amplify-heading amplify-heading--3">{{ headerText }}</h3>
     </amplify-slot>
     <amplify-base-form-fields route="confirmSignIn"></amplify-base-form-fields>
 

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/confirm-sign-up/confirm-sign-up.component.html

@@ -7,7 +7,10 @@
       [disabled]="context.isPending"
     >
       <amplify-slot name="confirm-sign-up-header" [context]="context">
-        <h3 class="amplify-heading" style="font-size: 1.5rem">
+        <h3
+          class="amplify-heading amplify-heading--3"
+          style="font-size: 1.5rem"
+        >
           {{ confirmSignUpHeading }}
         </h3>
       </amplify-slot>

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/confirm-verify-user/amplify-confirm-verify-user.component.html

@@ -6,7 +6,7 @@
     [disabled]="authenticator.isPending"
   >
     <amplify-slot name="confirm-verify-user-header" [context]="context">
-      <h3 class="amplify-heading">{{ this.headerText }}</h3>
+      <h3 class="amplify-heading amplify-heading--3">{{ this.headerText }}</h3>
     </amplify-slot>
     <amplify-base-form-fields
       route="confirmVerifyUser"

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/federated-sign-in/federated-sign-in.component.html

@@ -102,9 +102,8 @@
     </p>
   </amplify-federated-sign-in-button>
 
-
   <hr
-    class="amplify-divider amplify-divider--label"
+    class="amplify-divider amplify-divider--label amplify-divider--small"
     aria-orientation="horizontal"
     data-size="small"
     data-label="or"

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/force-new-password/force-new-password.component.html

@@ -6,7 +6,7 @@
     [disabled]="authenticator.isPending"
   >
     <amplify-slot name="force-new-password-header" [context]="context">
-      <h3 class="amplify-heading">{{ this.headerText }}</h3>
+      <h3 class="amplify-heading amplify-heading--3">{{ this.headerText }}</h3>
     </amplify-slot>
 
     <amplify-slot name="force-new-form-fields" [context]="context">

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/form-field/form-field.component.html

@@ -36,7 +36,7 @@
   ></amplify-text-field>
   <div data-amplify-sign-up-errors *ngIf="errors?.length > 0">
     <div
-      class="amplify-text"
+      class="amplify-text amplify-text--error"
       data-variation="error"
       *ngFor="let error of errors"
     >

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/reset-password/reset-password.component.html

@@ -10,7 +10,7 @@
       name="reset-password-header"
       [context]="context"
     >
-      <h3 class="amplify-heading">{{ this.headerText }}</h3>
+      <h3 class="amplify-heading amplify-heading--3">{{ this.headerText }}</h3>
     </amplify-slot>
 
     <amplify-base-form-fields route="resetPassword"></amplify-base-form-fields>

packages/angular/projects/ui-angular/src/lib/components/authenticator/components/setup-totp/setup-totp.component.html

@@ -6,7 +6,7 @@
     [disabled]="authenticator.isPending"
   >
     <amplify-slot name="setup-totp-header" [context]="context">
-      <h3 class="amplify-heading">{{ this.headerText }}</h3>
+      <h3 class="amplify-heading amplify-heading--3">{{ this.headerText }}</h3>
     </amplify-slot>
     <p *ngIf="!qrCodeSource">Loading...</p>
     <img