Skip to content

Releases: aws-amplify/amplify-ui

@aws-amplify/[email protected]

14 Nov 16:55
2587610

Choose a tag to compare

Major Changes

Patch Changes

  • #2877 ab8942c54 Thanks @ErikCH! - BREAKING: When overriding Auth.signUp, update the override function call to include the autoSignIn option set to enabled. This is now required.

     async handleSignUp(formData) {
      let { username, password, attributes } = formData;
      // custom username
      username = username.toLowerCase();
      attributes.email = attributes.email.toLowerCase();
      return Auth.signUp({
        username,
        password,
        attributes,
    +   autoSignIn: {
    +     enabled: true
    +   }
      });
    }
    

@aws-amplify/[email protected]

14 Nov 16:55
2587610

Choose a tag to compare

Major Changes

  • #2828 82903f7bb Thanks @calebpollman! - feat(next-release): render Authenticator field labels

  • #2735 fa3135add Thanks @wlee221! - Breaking: We replaced following legacy Authenticator texts:

    • Send Code in reset password screen is replaced by Send code.
    • Forgot your password? with the trailing space is replaced by Forgot your password.

    If you were using I18n to translate those keys, please update your translations accordingly to match the new strings.

Patch Changes

  • #2877 ab8942c54 Thanks @ErikCH! - BREAKING: When overriding Auth.signUp, update the override function call to include the autoSignIn option set to enabled. This is now required.

     async handleSignUp(formData) {
      let { username, password, attributes } = formData;
      // custom username
      username = username.toLowerCase();
      attributes.email = attributes.email.toLowerCase();
      return Auth.signUp({
        username,
        password,
        attributes,
    +   autoSignIn: {
    +     enabled: true
    +   }
      });
    }
    
  • Updated dependencies [ab8942c54, 82903f7bb, d90b148c0]:

@aws-amplify/[email protected]

14 Nov 16:55
2587610

Choose a tag to compare

Major Changes

  • #2556 54794d44c Thanks @reesscot! - BREAKING CHANGE: isMultiline prop removed from TextField. Replace any TextField components
    using the isMultiline prop with the TextAreaField component.

    - <TextField
    -  isMultiline
    + <TextAreaField
  • #2636 d71836994 Thanks @dbanksdesign! - BREAKING CHANGE: No longer splitting out Flex and Base style props on Field primitives.
    Instead, removing all style props to be applied to the wrapper element, the rest will be applied to the input element.
    Adding inputStyles prop where developers can send style props to the input element (or textarea, select)
    For TextAreaField, destructuring the resize style prop because it makes sense to apply that to the textarea element.

    - <TextField
    -   backgroundColor="red"
    + <TextField
    +   inputStyles={{backgroundColor: "red"}}
  • #2786 20a3c6103 Thanks @reesscot! - BREAKING CHANGE: remove legacy exports @aws-amplify/ui-react/legacy and @aws-amplify/ui-angular/legacy.

  • #2703 5ec150f4e Thanks @calebpollman! - Remove useAuthenticator internal variables _state and _send (See #2685)

  • #2772 4a22217e0 Thanks @zchenwei! - BREAKING CHANGE(react): bump up React minimum support version to 16.14.0 and update JSX transform

  • #2828 82903f7bb Thanks @calebpollman! - feat(next-release): render Authenticator field labels

  • #2558 d90b148c0 Thanks @reesscot! - chore: upgrade radix to 1.0

    Fixes error messages during npm install related to React 18. See Migration guide for more information:
    https://ui.docs.amplify.aws/react/getting-started/migration

  • #2735 fa3135add Thanks @wlee221! - Breaking: We replaced following legacy Authenticator texts:

    • Forgot your password? with the trailing space is replaced by Forgot your password.

    If you were using I18n to translate those keys, please update your translations accordingly to match the new strings.

Minor Changes

Patch Changes

  • #2877 ab8942c54 Thanks @ErikCH! - BREAKING: When overriding Auth.signUp, update the override function call to include the autoSignIn option set to enabled. This is now required.

     async handleSignUp(formData) {
      let { username, password, attributes } = formData;
      // custom username
      username = username.toLowerCase();
      attributes.email = attributes.email.toLowerCase();
      return Auth.signUp({
        username,
        password,
        attributes,
    +   autoSignIn: {
    +     enabled: true
    +   }
      });
    }
    
  • #2827 74e01fc7a Thanks @wlee221! - deps(react): pin radix dependencies

  • Updated dependencies [ab8942c54, 5ec150f4e, 4a22217e0, 82903f7bb, d90b148c0]:

@aws-amplify/[email protected]

14 Nov 16:55
2587610

Choose a tag to compare

Major Changes

Patch Changes

@aws-amplify/[email protected]

14 Nov 16:55
2587610

Choose a tag to compare

Major Changes

Patch Changes

@aws-amplify/[email protected]

14 Nov 16:55
2587610

Choose a tag to compare

Major Changes

  • #2786 20a3c6103 Thanks @reesscot! - BREAKING CHANGE: remove legacy exports @aws-amplify/ui-react/legacy and @aws-amplify/ui-angular/legacy.

  • #2580 468ad185a Thanks @wlee221! - BREAKING: Migrate Angular compiler to IVY, and drop support for View Engine. Please migrate to Angular 12+, and make sure you did not disable ivy in your tsconfig.json:

    {
      ...,
      "angularCompilerOption": {
        // REMOVE this line if you have it in your tsconfig.json
        "enableIvy": false
      }
    }

    Note: View Engine has already been deprecated in v12, and fully removed in v13.

  • #2580 468ad185a Thanks @wlee221! - BREAKING: Bump minimum supported Angular version to v12. If your application is on Angular 11 or before, please migrate to Angular 12+ as per official guide.

    Note: Going forward, @aws-amplify/ui-angular will have the same version support as Angular's official LTS support window. This means all major versions will be supported for 18 months, until we bump the minimum required version to the next one.

  • #2735 fa3135add Thanks @wlee221! - Breaking: We replaced following legacy Authenticator texts:

    • Confirmation Code in confirm sign up screen is replaced by Enter your Code
    • Send Code in reset password screen is replaced by Send code.
    • Send Code in confirm reset password screen is replaced by Submit
    • Forgot your password? with the trailing space is replaced by Forgot your password.

    If you were using I18n to translate those keys, please update your translations accordingly to match the new strings.

Patch Changes

  • #2877 ab8942c54 Thanks @ErikCH! - BREAKING: When overriding Auth.signUp, update the override function call to include the autoSignIn option set to enabled. This is now required.

     async handleSignUp(formData) {
      let { username, password, attributes } = formData;
      // custom username
      username = username.toLowerCase();
      attributes.email = attributes.email.toLowerCase();
      return Auth.signUp({
        username,
        password,
        attributes,
    +   autoSignIn: {
    +     enabled: true
    +   }
      });
    }
    
  • Updated dependencies [ab8942c54, 82903f7bb, d90b148c0]:

@aws-amplify/[email protected]

08 Nov 23:59
a400c5a

Choose a tag to compare

Minor Changes

  • #2708 702a35738 Thanks @zchenwei! - feat: add Autocomplete primitive

    Example

    // Uncontrolled component
    import { Autocomplete } from '@aws-amplify/ui-react';
    import * as React from 'react';
    
    const options = [
      { id: 'apple', label: 'apple' },
      { id: 'banana', label: 'banana' },
      { id: 'cherry', label: 'cherry' },
      { id: 'grape', label: 'grape' },
      { id: 'kiwis', label: 'kiwis' },
      { id: 'lemon', label: 'lemon' },
      { id: 'mango', label: 'mango' },
      { id: 'orange', label: 'orange' },
      { id: 'strawberry', label: 'strawberry' },
    ];
    
    export const AutocompleteUncontrolledExample = () => {
      return <Autocomplete label="Uncontrolled autocomplete" options={options} />;
    };
    // Controlled component
    import { Autocomplete } from '@aws-amplify/ui-react';
    import * as React from 'react';
    
    const options = [
      { id: 'apple', label: 'apple' },
      { id: 'banana', label: 'banana' },
      { id: 'cherry', label: 'cherry' },
      { id: 'grape', label: 'grape' },
      { id: 'kiwis', label: 'kiwis' },
      { id: 'lemon', label: 'lemon' },
      { id: 'mango', label: 'mango' },
      { id: 'orange', label: 'orange' },
      { id: 'strawberry', label: 'strawberry' },
    ];
    
    export const AutocompleteControlledExample = () => {
      const [value, setValue] = React.useState('');
    
      const onChange = (event) => {
        setValue(event.target.value);
      };
    
      // Set up onSelect
      const onSelect = (option) => {
        const { label } = option;
        setValue(label);
      };
    
      // Set up onClear
      const onClear = () => {
        setValue('');
      };
    
      return (
        <Autocomplete
          label="Controlled autocomplete"
          options={options}
          value={value}
          onChange={onChange}
          onClear={onClear}
          onSelect={onSelect}
        />
      );
    };

Patch Changes

@aws-amplify/[email protected]

08 Nov 23:59
a400c5a

Choose a tag to compare

Patch Changes

@aws-amplify/[email protected]

08 Nov 23:59
a400c5a

Choose a tag to compare

Minor Changes

  • #2708 702a35738 Thanks @zchenwei! - feat: add Autocomplete primitive

    Example

    // Uncontrolled component
    import { Autocomplete } from '@aws-amplify/ui-react';
    import * as React from 'react';
    
    const options = [
      { id: 'apple', label: 'apple' },
      { id: 'banana', label: 'banana' },
      { id: 'cherry', label: 'cherry' },
      { id: 'grape', label: 'grape' },
      { id: 'kiwis', label: 'kiwis' },
      { id: 'lemon', label: 'lemon' },
      { id: 'mango', label: 'mango' },
      { id: 'orange', label: 'orange' },
      { id: 'strawberry', label: 'strawberry' },
    ];
    
    export const AutocompleteUncontrolledExample = () => {
      return <Autocomplete label="Uncontrolled autocomplete" options={options} />;
    };
    // Controlled component
    import { Autocomplete } from '@aws-amplify/ui-react';
    import * as React from 'react';
    
    const options = [
      { id: 'apple', label: 'apple' },
      { id: 'banana', label: 'banana' },
      { id: 'cherry', label: 'cherry' },
      { id: 'grape', label: 'grape' },
      { id: 'kiwis', label: 'kiwis' },
      { id: 'lemon', label: 'lemon' },
      { id: 'mango', label: 'mango' },
      { id: 'orange', label: 'orange' },
      { id: 'strawberry', label: 'strawberry' },
    ];
    
    export const AutocompleteControlledExample = () => {
      const [value, setValue] = React.useState('');
    
      const onChange = (event) => {
        setValue(event.target.value);
      };
    
      // Set up onSelect
      const onSelect = (option) => {
        const { label } = option;
        setValue(label);
      };
    
      // Set up onClear
      const onClear = () => {
        setValue('');
      };
    
      return (
        <Autocomplete
          label="Controlled autocomplete"
          options={options}
          value={value}
          onChange={onChange}
          onClear={onClear}
          onSelect={onSelect}
        />
      );
    };

Patch Changes

@aws-amplify/[email protected]

08 Nov 23:59
a400c5a

Choose a tag to compare

Patch Changes