Search code, repositories, users, issues, pull requests...

bb8906d

Patch Changes

#857 cf1a15a69 Thanks @reesscot! - ForwardRef support - Rating
#859 62765e70b Thanks @reesscot! - ForwardRef support for StepperField
#877 3774e9aac Thanks @dbanksdesign! - Add back in dangerouslySetInnerHTML for theme. Not using this was causing hydration issues in NextJS
#866 473f1db6c Thanks @dbanksdesign! - Making size prop on slider field work like other fields and adding disabled styling.
#832 f81aa5917 Thanks @reesscot! - ForwardRef support for PasswordField, FieldGroup, & FieldGroupIconButton primitives.
#850 9d7907ec4 Thanks @dbanksdesign! - Updating radio styles to be consistent with checkbox field.
#840 5522af055 Thanks @ericclemmons! - Pass props from withAuthenticator to Component
#860 b0985f662 Thanks @reesscot! - ForwardRef support - SwitchField
#862 6c4039590 Thanks @hvergara! - Add DataStore.observeQuery support
#854 81c7d5525 Thanks @dbanksdesign! - Updating quiet variation of stepper field
#842 97ca4e48f Thanks @zchenwei! - ForwardRef support for Alert, ButtonGroup, Expander & ExpanderItem
#870 8b6b0088a Thanks @hvergara! - ForwardRef support for Table/TableBody/TableHeader/TableFoot/TableCell
#878 5c4935411 Thanks @dbanksdesign! - Updating text colors for better contrast
#841 8e36aa4ac Thanks @reesscot! - Update PasswordField to support showPasswordButton ref
#831 d2cda9c70 Thanks @zchenwei! - ForwardRef support for FieldClearButton and FieldGroupIconButton.
#851 8d84116bb Thanks @reesscot! - ForwardRef support for SearchField
#873 2a486da75 Thanks @reesscot! - ForwardRef support - Menu & Pagination primitives
#839 e0aafe759 Thanks @reesscot! - ForwardRef for PhoneNumberField
Updated dependencies [473f1db6c, e77e47fe5, 9d7907ec4, 81c7d5525, 97ca4e48f, 5c4935411, c41c6fad1]:
- @aws-amplify/[email protected]

Assets 2

24 Nov 22:46

bb8906d

Patch Changes

Updated dependencies [473f1db6c, e77e47fe5, 9d7907ec4, 81c7d5525, 97ca4e48f, 5c4935411, c41c6fad1]:
- @aws-amplify/[email protected]

Assets 2

22 Nov 20:50

0ddd44c

Patch Changes

#829 9fd90d45b Thanks @wlee221! - Fix redirect from signIn to confirmSignUp

Assets 2

22 Nov 20:50

0ddd44c

Patch Changes

Updated dependencies [9fd90d45b]:
- @aws-amplify/[email protected]

Assets 2

22 Nov 20:50

0ddd44c

Minor Changes

#785 c3a5e175a Thanks @hvergara! - Move hooks to internal module

Patch Changes

#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

0ddd44c

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

d45ab37

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.

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

d45ab37

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.

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

d45ab37

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.

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

d45ab37

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.