Releases · aws-amplify/amplify-ui

#812 e8f998316 Thanks @hvergara! - Use Text primitive for Button loading text
#781 4c0a44248 Thanks @hvergara! - Restore component catalog nested properties
#800 c8ce9445f Thanks @hvergara! - Add backgroundImage style property
#811 63b484714 Thanks @hvergara! - Add missing displayName properties
Updated dependencies [9fd90d45b]:
- @aws-amplify/[email protected]

Assets 2

22 Nov 20:50

github-actions

@aws-amplify/[email protected]

0ddd44c

@aws-amplify/[email protected]

Patch Changes

#807 de979b521 Thanks @ericclemmons! - Remove @angular/* peerDependencies at ^11.2.4
Updated dependencies [9fd90d45b]:
- @aws-amplify/[email protected]

Assets 2

18 Nov 22:01

github-actions

@aws-amplify/[email protected]

d45ab37

@aws-amplify/[email protected]

Major Changes

Amplify UI Primitive Components

Amplify UI is building primitive components like badges, cards, alerts, etc. These primitive components will first be available on React with the goal of adding support for more frameworks in the future. We hope these primitives will empower developers to build applications faster. We plan on building out more connected components like the Authenticator and we need primitive components like buttons and inputs to be shared across them. Exposing these primitive components allows developers to create and theme applications end-to-end using the same components everywhere.

See: RFC: Amplify UI Primitive Components

Goals

Flexible – Primitives can be integrated into as many applications as possible.
Customizable – Primitives can be composed and styled using a theme, CSS, a CSS-in-JS framework, or un-styled.
Accessible – Primitives follow WCAG and WAI-ARIA guidelines to make building accessible applications easy.

Implementation

Added 37 new React primitive components such as Button, TextField, Alert that are the building blocks to create consistency across connected components.
Added Theming API to allow global and component-override theming. Theme structure uses design tokens including borderWidth, colors, fonts, fontSizes, fontWeights, LineHeights, opacities and breakpoints.
Documentation: https://ui.docs.amplify.aws/components

Zero-Configuration Authenticator for Angular, React, & Vue

The Authenticator has been updated based on customer feedback & real-world use-cases to deliver an improved out-of-the-box experience & greater customization.

See: RFC: Authenticator@next

Goals

Zero-config – The Authenticator automatically infers Amplify CLI & Admin UI settings to work out-of-the-box.

Run `amplify pull` with the latest CLI whenever your backend changes, and the Authenticator automatically reflects the correct login mechanism, social providers, & more.

Native – The Authenticator is implemented in its respective framework (e.g. Angular, React, Vue) for consistency & familiarity.

Stable – Existing & upcoming Authenticator behavior is captured & tested to reduce & prevent regressions.

[Authenticator behavior](https://github.com/aws-amplify/amplify-ui/tree/main/packages/e2e/features/ui/components/authenticator) is tested as [E2E tests](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#e2e-testing) on every PR.

Interoperable – Work with password managers, autofill, existing styles, & other common features.

Customizable – More ways to customize the UI & behavior without losing the benefits of the Authenticator.

Customers have access to the same functionality that the `Authenticator` uses internally to even build a 100% custom Authenticator, without sacrificing any of the logic.

Reproducible – Authentication is complex. The Authenticator is is developed & tested against a myriad of Amplify backends, example apps, and specifications.

Check out our environments and examples for more.

Learn more by visiting the Authenticator Documentation.

Minor Changes

#626 f84e9949b Thanks @ericclemmons! - ## Zero Configuration

As of @aws-amplify/[email protected], aws-exports.js includes your backend configuration for the Authenticator to automatically infer loginMechanisms and socialProviders.

Before (React)
```
export default withAuthenticator(App, {
  loginMechanisms: ['email'],
  socialProviders: ['amazon', 'apple', 'facebook', 'google'],
});
```
After (React)
```
export default withAuthenticator(App);
```
Sign in with Apple

The Authenticator supports apple as one of many socialProviders. See: https://docs.amplify.aws/lib/auth/social/q/platform/js/
#650 e76c5ac17 Thanks @ericclemmons! - ## signUpAttributes

The Sign Up form will include most of https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html by default with zero-config.

Any verification mechanisms (e.g. email, phone_number) will always be required.

#717 edea9ffaa Thanks @dbanksdesign! - Adding card variations

<Card>
  Default card
</Card>

<Card variation="outlined">
  Outlined card
</Card>

<Card variation="elevated">
  Elevated card
</Card>

#627 bd3e09a09 Thanks @wlee221! - This implements AuthenticatorService that can be used internally and externally to access common Authenticator context and helpers.

Usage:

app.component.ts

export class AppComponent {
  constructor(public authenticator: AuthenticatorService) {}
}

app.component.html

<!-- example of "reset password" button -->
<button (click)="authenticator.toResetPassword()">Reset password</button>

<!-- example of "sign up" submit button -->
<button (click)="authenticator.submitForm()">Sign Up</button>

<!-- disabling the submit button if submission is in progress -->
<button
  (click)="authenticator.submitForm()"
  [disabled]="authenticator.isPending"
>
  Sign Up
</button>

#653 70552a4cc Thanks @reesscot! - Icon size now matches parent font-size. Allows customers to more easily use icons alongsize Headings, Buttons, etc.

Example:
```
<Button gap="0.1rem" size="small">
    <IconSave /> Save
</Button>
```

Patch Changes

#552 bba3242af Thanks @ericclemmons! - @aws-amplify/ui-react supports validation & re-use & customization of Authenticator.SignUp.FormFields via components & services:

<Authenticator
  components={{
    SignUp: {
      FormFields() {
        const { validationErrors } = useAuthenticator();
        return (
          <>
            <TextField
              label="Preferred Username"
              labelHidden={true}
              name="preferred_username"
              placeholder="Preferred Username"
            />
            <Authenticator.SignUp.FormFields />
            <CheckboxField
              errorMessage={validationErrors.acknowledgement}
              hasError={!!validationErrors.acknowledgement}
              label="I agree with the Terms & Conditions"
              name="acknowledgement"
              value="yes"
            />
          </>
        );
      },
    },
  }}
  services={{
    async validateCustomSignUp(formData) {
      if (!formData.acknowledgement) {
        return {
          acknowledgement: 'You must agree to the Terms & Conditions',
        };
      }
    },
  }}
/>

#709 3cc1c15d7 Thanks @dbanksdesign! - Building icons from Figma source now.
#727 2b2ae8469 Thanks @dbanksdesign! - * Divider component has more theming options for the border style, color, and width.
- Fixing vertical divider
- Improving Divider docs
#615 b46597cef Thanks @reesscot! - Apply box-sizing: border-box styling to all Amplify theme children
#612 beb9b49b5 Thanks @reesscot! - Menu primitive

New primitive which enables customers to create aaccessible, interactive menu for selecting actions within an application.
Dropdown menu is collision-aware and will automatically change location based on available space.
```
import { Divider, Menu, MenuItem } from '@aws-amplify/ui-react';

export const BasicExample = ()...
```

Assets 2

18 Nov 22:01

github-actions

@aws-amplify/[email protected]

d45ab37

@aws-amplify/[email protected]

Major Changes

Zero-Configuration Authenticator for Angular, React, & Vue

The Authenticator has been updated based on customer feedback & real-world use-cases to deliver an improved out-of-the-box experience & greater customization.

See: RFC: Authenticator@next

Goals

Zero-config – The Authenticator automatically infers Amplify CLI & Admin UI settings to work out-of-the-box.

Run `amplify pull` with the latest CLI whenever your backend changes, and the Authenticator automatically reflects the correct login mechanism, social providers, & more.

Native – The Authenticator is implemented in its respective framework (e.g. Angular, React, Vue) for consistency & familiarity.

Stable – Existing & upcoming Authenticator behavior is captured & tested to reduce & prevent regressions.

[Authenticator behavior](https://github.com/aws-amplify/amplify-ui/tree/main/packages/e2e/features/ui/components/authenticator) is tested as [E2E tests](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#e2e-testing) on every PR.

Interoperable – Work with password managers, autofill, existing styles, & other common features.

Customizable – More ways to customize the UI & behavior without losing the benefits of the Authenticator.

Customers have access to the same functionality that the `Authenticator` uses internally to even build a 100% custom Authenticator, without sacrificing any of the logic.

Reproducible – Authentication is complex. The Authenticator is is developed & tested against a myriad of Amplify backends, example apps, and specifications.

Check out our environments and examples for more.

Learn more by visiting the Authenticator Documentation.

Minor Changes

#626 f84e9949b Thanks @ericclemmons! - ## Zero Configuration

As of @aws-amplify/[email protected], aws-exports.js includes your backend configuration for the Authenticator to automatically infer loginMechanisms and socialProviders.

Before (React)
```
export default withAuthenticator(App, {
  loginMechanisms: ['email'],
  socialProviders: ['amazon', 'apple', 'facebook', 'google'],
});
```
After (React)
```
export default withAuthenticator(App);
```
Sign in with Apple

The Authenticator supports apple as one of many socialProviders. See: https://docs.amplify.aws/lib/auth/social/q/platform/js/

#627 bd3e09a09 Thanks @wlee221! - This implements AuthenticatorService that can be used internally and externally to access common Authenticator context and helpers.

Usage:

app.component.ts

export class AppComponent {
  constructor(public authenticator: AuthenticatorService) {}
}

app.component.html

<!-- example of "reset password" button -->
<button (click)="authenticator.toResetPassword()">Reset password</button>

<!-- example of "sign up" submit button -->
<button (click)="authenticator.submitForm()">Sign Up</button>

<!-- disabling the submit button if submission is in progress -->
<button
  (click)="authenticator.submitForm()"
  [disabled]="authenticator.isPending"
>
  Sign Up
</button>

Patch Changes

#695 d5009572c Thanks @ericclemmons! - ## Header & Footer Slots
- Add Header slot above the Authenticator
- Add Footer slot below the Authenticator
- Add Sign In Header slot above the Sign In form
- Add Sign In Footer slot below the Sign In form
- Add Sign Up Header slot above the Sign Up form
- Add Sign Up Footer slot below the Sign Up form
Updated dependencies [bba3242af, f84e9949b, e76c5ac17, 81169c66e, 3cc1c15d7, 2b2ae8469, b46597cef, edea9ffaa, bd3e09a09, 70552a4cc, beb9b49b5, 5257a3109, 3ead9c629]:
- @aws-amplify/[email protected]

Assets 2

18 Nov 22:01

github-actions

@aws-amplify/[email protected]

d45ab37

@aws-amplify/[email protected]

Major Changes

Amplify UI Primitive Components

See: RFC: Amplify UI Primitive Components

Goals

Implementation

Added 37 new React primitive components such as Button, TextField, Alert that are the building blocks to create consistency across connected components.
Added Theming API to allow global and component-override theming. Theme structure uses design tokens including borderWidth, colors, fonts, fontSizes, fontWeights, LineHeights, opacities and breakpoints.
Documentation: https://ui.docs.amplify.aws/components

Zero-Configuration Authenticator for Angular, React, & Vue

The Authenticator has been updated based on customer feedback & real-world use-cases to deliver an improved out-of-the-box experience & greater customization.

See: RFC: Authenticator@next

Goals

Zero-config – The Authenticator automatically infers Amplify CLI & Admin UI settings to work out-of-the-box.

Run `amplify pull` with the latest CLI whenever your backend changes, and the Authenticator automatically reflects the correct login mechanism, social providers, & more.

Native – The Authenticator is implemented in its respective framework (e.g. Angular, React, Vue) for consistency & familiarity.

Stable – Existing & upcoming Authenticator behavior is captured & tested to reduce & prevent regressions.

[Authenticator behavior](https://github.com/aws-amplify/amplify-ui/tree/main/packages/e2e/features/ui/components/authenticator) is tested as [E2E tests](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#e2e-testing) on every PR.

Interoperable – Work with password managers, autofill, existing styles, & other common features.

Customizable – More ways to customize the UI & behavior without losing the benefits of the Authenticator.

Customers have access to the same functionality that the `Authenticator` uses internally to even build a 100% custom Authenticator, without sacrificing any of the logic.

Reproducible – Authentication is complex. The Authenticator is is developed & tested against a myriad of Amplify backends, example apps, and specifications.

Check out our environments and examples for more.

Learn more by visiting the Authenticator Documentation.

Minor Changes

#626 f84e9949b Thanks @ericclemmons! - ## Zero Configuration

As of @aws-amplify/[email protected], aws-exports.js includes your backend configuration for the Authenticator to automatically infer loginMechanisms and socialProviders.

Before (React)
```
export default withAuthenticator(App, {
  loginMechanisms: ['email'],
  socialProviders: ['amazon', 'apple', 'facebook', 'google'],
});
```
After (React)
```
export default withAuthenticator(App);
```
Sign in with Apple

The Authenticator supports apple as one of many socialProviders. See: https://docs.amplify.aws/lib/auth/social/q/platform/js/
#650 e76c5ac17 Thanks @ericclemmons! - ## signUpAttributes

The Sign Up form will include most of https://docs.aws.amazon.com/cognito/latest/developerguide/user-pool-settings-attributes.html by default with zero-config.

Any verification mechanisms (e.g. email, phone_number) will always be required.
#698 5482edcbb Thanks @reesscot! - Add forwardRef support to Button & View
#716 e155ef0be Thanks @reesscot! - Remove AmplifyProvider custom components feature

#717 edea9ffaa Thanks @dbanksdesign! - Adding card variations

<Card>
  Default card
</Card>

<Card variation="outlined">
  Outlined card
</Card>

<Card variation="elevated">
  Elevated card
</Card>

#653 70552a4cc Thanks @reesscot! - Icon size now matches parent font-size. Allows customers to more easily use icons alongsize Headings, Buttons, etc.

Example:
```
<Button gap="0.1rem" size="small">
    <IconSave /> Save
</Button>
```

#582 3143deff1 Thanks @ericclemmons! - AmplifyProvider accepts a partial list of primitives as components:

const App = () => {
  const {
    components: { Heading },
  } = useAmplify();

  return <Heading>Howdy</Heading>;
};

<AmplifyProvider
  components={{
    Heading({ children }) {
      return <h1>{children}</h1>;
    },
  }}
>
  <App />
</AmplifyProvider>;

Patch Changes

#737 8f0301f0b Thanks @reesscot! - ForwardRef support - CountryCode, SelectField, and SliderField

#552 bba3242af Thanks @ericclemmons! - @aws-amplify/ui-react supports validation & re-use & customization of Authenticator.SignUp.FormFields via components & services:

<Authenticator
  components={{
    SignUp: {
      FormFields() {
        const { validationErrors } = useAuthenticator();
        return (
          <>
            <TextField
              label="Preferred Username"
              labelHidden={true}
              name="preferred_username"
              placeholder="Preferred Username"
            />
            <Authenticator.SignUp.FormFields />
            <CheckboxField
              errorMessage={validationErrors.acknowledgement}
              hasError={!!validationErrors.acknowledgement}
              label="I agree with the Terms & Conditions"
              name="acknowledgement"
              value="yes"
            />
          </>
        );
      },
    },
  }}
  services={{
    async validateCustomSignUp(formData) {
      if (!formData.acknowledgement) {
        return {
          acknowledgement: 'You must agree to the Terms & Conditions',
        };
      }
    },
  }}
/>

#617 77fa42da5 Thanks @hvergara! - Fix primitives catalog generator
#720 84a86b4ef Thanks @reesscot! - ForwardRef support - Flex and Grid
#761 a82e422f3 Thanks @reesscot! - ForwardRef support for TextField
#709 3cc1c15d7 Thanks @dbanksdesign! - Building icons from Figma source now.
[#618](https://github.com/aws-amplify/amplify-ui/...

Assets 2

18 Nov 22:01

github-actions

@aws-amplify/[email protected]

d45ab37

@aws-amplify/[email protected]

Major Changes

See: RFC: Amplify UI Primitive Components

Goals

Implementation

Added 37 new React primitive components such as Button, TextField, Alert that are the building blocks to create consistency across connected components.
Added Theming API to allow global and component-override theming. Theme structure uses design tokens including borderWidth, colors, fonts, fontSizes, fontWeights, LineHeights, opacities and breakpoints.
Documentation: https://ui.docs.amplify.aws/components

Zero-Configuration Authenticator for Angular, React, & Vue

The Authenticator has been updated based on customer feedback & real-world use-cases to deliver an improved out-of-the-box experience & greater customization.

See: RFC: Authenticator@next

Goals

Zero-config – The Authenticator automatically infers Amplify CLI & Admin UI settings to work out-of-the-box.

Run `amplify pull` with the latest CLI whenever your backend changes, and the Authenticator automatically reflects the correct login mechanism, social providers, & more.

Native – The Authenticator is implemented in its respective framework (e.g. Angular, React, Vue) for consistency & familiarity.

Stable – Existing & upcoming Authenticator behavior is captured & tested to reduce & prevent regressions.

[Authenticator behavior](https://github.com/aws-amplify/amplify-ui/tree/main/packages/e2e/features/ui/components/authenticator) is tested as [E2E tests](https://github.com/aws-amplify/amplify-ui/blob/main/CONTRIBUTING.md#e2e-testing) on every PR.

Interoperable – Work with password managers, autofill, existing styles, & other common features.

Customizable – More ways to customize the UI & behavior without losing the benefits of the Authenticator.

Customers have access to the same functionality that the `Authenticator` uses internally to even build a 100% custom Authenticator, without sacrificing any of the logic.

Reproducible – Authentication is complex. The Authenticator is is developed & tested against a myriad of Amplify backends, example apps, and specifications.

Check out our environments and examples for more.

Learn more by visiting the Authenticator Documentation.

Minor Changes

#626 f84e9949b Thanks @ericclemmons! - ## Zero Configuration

As of @aws-amplify/[email protected], aws-exports.js includes your backend configuration for the Authenticator to automatically infer loginMechanisms and socialProviders.

Before (React)
```
export default withAuthenticator(App, {
  loginMechanisms: ['email'],
  socialProviders: ['amazon', 'apple', 'facebook', 'google'],
});
```
After (React)
```
export default withAuthenticator(App);
```
Sign in with Apple

The Authenticator supports apple as one of many socialProviders. See: https://docs.amplify.aws/lib/auth/social/q/platform/js/
#610 1fc955c4e Thanks @wlee221! - Add sign-up-form-field slot and component

#627 bd3e09a09 Thanks @wlee221! - This implements AuthenticatorService that can be used internally and externally to access common Authenticator context and helpers.

Usage:

app.component.ts

export class AppComponent {
  constructor(public authenticator: AuthenticatorService) {}
}

app.component.html

<!-- example of "reset password" button -->
<button (click)="authenticator.toResetPassword()">Reset password</button>

<!-- example of "sign up" submit button -->
<button (click)="authenticator.submitForm()">Sign Up</button>

<!-- disabling the submit button if submission is in progress -->
<button
  (click)="authenticator.submitForm()"
  [disabled]="authenticator.isPending"
>
  Sign Up
</button>

#628 ef1e0f000 Thanks @wlee221! - Add and expose amplify-checkbox
#628 ef1e0f000 Thanks @wlee221! - Add services prop and custom-sign-up example. See documentation for usage notes.

Patch Changes

#695 d5009572c Thanks @ericclemmons! - ## Header & Footer Slots
- Add Header slot above the Authenticator
- Add Footer slot below the Authenticator
- Add Sign In Header slot above the Sign In form
- Add Sign In Footer slot below the Sign In form
- Add Sign Up Header slot above the Sign Up form
- Add Sign Up Footer slot below the Sign Up form
Updated dependencies [bba3242af, f84e9949b, e76c5ac17, 81169c66e, 3cc1c15d7, 2b2ae8469, b46597cef, edea9ffaa, bd3e09a09, 70552a4cc, beb9b49b5, 5257a3109, 3ead9c629]:
- @aws-amplify/[email protected]

Assets 2

Releases: aws-amplify/amplify-ui

@aws-amplify/[email protected]

Patch Changes

@aws-amplify/[email protected]

Patch Changes

@aws-amplify/[email protected]

Patch Changes

@aws-amplify/[email protected]

Minor Changes

Patch Changes

@aws-amplify/[email protected]

Patch Changes

@aws-amplify/[email protected]

Major Changes

Amplify UI Primitive Components

Goals

Implementation

Zero-Configuration Authenticator for Angular, React, & Vue

Goals

Minor Changes

Before (React)

After (React)

Sign in with Apple

Patch Changes

@aws-amplify/[email protected]

Major Changes

Zero-Configuration Authenticator for Angular, React, & Vue

Goals

Minor Changes

Before (React)

After (React)

Sign in with Apple

Patch Changes

@aws-amplify/[email protected]

Major Changes

Amplify UI Primitive Components

Goals

Implementation

Zero-Configuration Authenticator for Angular, React, & Vue

Goals

Minor Changes

Before (React)

After (React)

Sign in with Apple

Patch Changes

@aws-amplify/[email protected]

Major Changes

Goals

Implementation

Zero-Configuration Authenticator for Angular, React, & Vue

Goals

Minor Changes

Before (React)

After (React)

Sign in with Apple

Patch Changes