Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(deps): update dependency @aws-amplify/ui-react to version 6.x 🌟 (major) - autoclosed #1501

Closed
wants to merge 1 commit into from
Closed

fix(deps): update dependency @aws-amplify/ui-react to version 6.x 🌟 (major) - autoclosed #1501

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Feb 4, 2024 •
edited
Loading

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@aws-amplify/ui-react (source) ^5.0.4 -> ^6.0.0 age adoption passing confidence
aws-amplify (source) ^5.3.3 -> ^6.0.0 age adoption passing confidence

Release Notes

aws-amplify/amplify-ui (@​aws-amplify/ui-react)

v6.1.5

Compare Source

Patch Changes

  • #​5034 1d9c5c862 Thanks @​hbuchel! - fix(web/react-native/ui): use translated strings for VerifyUser screen and use censorContactMethod util

    ui/Angular/React/Vue/ReactNative: adds a censorContactMethod() utility to the ui package and refactors the VerifyUser screen in Angular, React, Vue, and ReactNative packages to use this utility.

    Vue: Fixes an issue where translated strings were not being properly used for the VerifyUser screen. Additionally, removes duplicate "verify" id that was on multiple elements.

  • #​5003 32702d9c9 Thanks @​hbuchel! - fix(ui/react): add missing color token for CheckboxField label

    The CheckboxField label color (and disabled color) can now be themed correctly via:

    label: {
  color: { value: '{colors.purple.80}' },
  _disabled: {
    color: { value: '{colors.purple.60}' },
  },
},

  • Updated dependencies [1d9c5c862, 4eae32e91, 32702d9c9]:

v6.1.4

Compare Source

Patch Changes

v6.1.3

Compare Source

Patch Changes

v6.1.2

Compare Source

Patch Changes

v6.1.1

Compare Source

Patch Changes

v6.1.0

Compare Source

Minor Changes

v6.0.7

Compare Source

Patch Changes

v6.0.6

Compare Source

Patch Changes

v6.0.5

Compare Source

Patch Changes

v6.0.4

Compare Source

Patch Changes

v6.0.3

Compare Source

Patch Changes

v6.0.2

Compare Source

Patch Changes

v6.0.1

Compare Source

Patch Changes

v6.0.0

Compare Source

Major Changes
  • Authenticator Breaking Changes

The initialState property now accepts forgotPassword in place of resetPassword:

- <Authenticator initialState="resetPassword" />
+ <Authenticator initialState="forgotPassword" />

The user object provided after an end user has been authenticated has been updated to reflect the AuthUser interface available from aws-amplify/auth:

- interface AmplifyUser {
-   challengeName?: ChallengeName;
-   attributes?: CognitpAttributes;
-   username: string;
- }
+ interface AuthUser  {
+   username: string;
+   userId: string;
+   signInDetails?: CognitoAuthSignInDetails;
+ }

AuthUser can be imported from aws-amplify/auth:

import { AuthUser } from 'aws-amplify/auth';

User attributes are now available by directly calling fetchUserAttribues:

import { fetchUserAttributes } from 'aws-amplify/auth';

The function signatures of the services interface have been updated to align with the shape of the underlying aws-amplify/auth APIs used by the Authenticator and provide improved typescript support:

interface AuthenticatorProps {
  services?: {
-    getCurrentUser: () => Promise<any>,
+    getCurrentUser: () => Promise<AuthUser>,

-    handleSignIn: ({ username, password, }: { username: string;password: string; }) => Promise<any>,
+    handleSignIn: (input: SignInInput) => Promise<SignInOutput>,

-    handleSignUp: (formData: any) => Promise<ISignUpResult>,
+    handleSignUp: (input: SignUpInput) => Promise<SignUpOutput>,

-    handleConfirmSignIn: ({ user, code, mfaType, }: { user: any; code: string; mfaType: ChallengeName; }) =>Promise<any>),
+    handleConfirmSignIn: (input: ConfirmSignInInput) => Promise<ConfirmSignInOutput>,

-    handleConfirmSignUp: ({ username, code, }: { username: string; code: string; }) => Promise<any>,
+    handleConfirmSignUp: (input: ConfirmSignUpInput) => Promise<ConfirmSignUpOutput>,

-    handleForgotPasswordSubmit: ({ username, code, password, }: { username: string; code: string; password:string; }) => Promise<string>),
+    handleForgotPasswordSubmit: (input: ConfirmResetPasswordInput) => Promise<void>,

-    handleForgotPassword: (formData: any) => Promise<any>,
+    handleForgotPassword: (input: ResetPasswordInput) => Promise<ResetPasswordOutput>,
  }
}

The input and return type interfaces are available as imports from aws-amplify/auth:

import { ConfirmSignInInput } from 'aws-amplify';

  • #​4452 de87be6d3 Thanks @​dbanksdesign! - BREAKING:

    • Removing stylistic data-attributes from React primitives
    • Update SwitchField classnames to be BEM
    • Removing remnants of "countryCode"

  • #​4509 55d1f4940 Thanks @​dbanksdesign! - breaking: refactoring Tabs component to remove Radix dependency and allow more composability and customization.

    - import { Tabs, TabItem } from '@&#8203;aws-amplify/ui-react'
+ import { Tabs } from '@&#8203;aws-amplify/ui-react'

- <Tabs>
-  <TabItem title="Tab 1">
-    Tab 1 Content
-  </TabItem>

+ <Tabs.Container defaultValue="Tab 1">
+  <Tabs.List>
+    <Tabs.Item value="Tab 1">Tab 1</Tabs.Item>
+  </Tabs.List>
+  <Tabs.Panel value="Tab 1">
+    Tab 1 Content
+  </Tabs.Panel>
+ </Tabs.Container>

    You can also use the Tabs in a uncomposed way too:

    <Tabs
  defaultValue={'Tab 1'}
  items={[
    { label: 'Tab 1', value: 'Tab 1', content: 'Tab content #&#8203;1' },
    { label: 'Tab 2', value: 'Tab 2', content: 'Tab content #&#8203;2' },
    { label: 'Tab 3', value: 'Tab 3', content: 'Tab content #&#8203;3' },
  ]}
/>

    Some notable differences:

    • Instead of providing a defaultIndex or currentIndex you provide a defaultValue or value. Each Tabs.Item and Tabs.Panel should have a value that matches with the corresponding element.
    • onChange becomes onValueChange
    • You should supply a defaultValue or value or else there will be no default selected tab. Previously the Tabs component would default to the first tab.

    There are also more design tokens and better CSS classes for easier customization.

  • #​4474 27783d65a Thanks @​dbanksdesign! - breaking: updating classnames for better BEM syntax

    • amplify-loader__percentage-text -> amplify-loader__label
    • amplify-menu-content-wrapper -> amplify-menu__wrapper
    • amplify-menu-trigger -> amplify-menu__trigger
    • amplify-menu-content -> amplify-menu__content
    • amplify-menu-content__item -> amplify-menu__content__item
    • amplify-pagination__item-button -> amplify-pagination__item
    • amplify-pagination__item-current -> amplify-pagination__item--current
    • amplify-pagination__item-ellipsis -> amplify-pagination__item--ellipsis
    • amplify-rating-icon-container -> amplify-rating__item
    • amplify-rating-icon -> amplify-rating__icon
    • amplify-rating-icon-filled -> amplify-rating__icon--filled
    • amplify-rating-icon-empty -> amplify-rating__icon--empty
    • amplify-select__icon-wrapper -> amplify-select__icon

  • #​4476 59c042c17 Thanks @​dbanksdesign! - breaking: renaming Expander to Accordion and removing Radix dependency. The Accordion component is now built with <details> and <summary> elements to handle showing/hiding content.

    <Accordion.Container>
  <Accordion.Item value="item-1">
    <Accordion.Trigger>
      Click me first!
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      Now when you click the second item, this item will automatically
      collapse.
    </Accordion.Content>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.Trigger>
      Then click me!
      <Accordion.Icon />
    </Accordion.Trigger>
    <Accordion.Content>
      Notice how only one item can be open at a time for the single Accordion
      type.
    </Accordion.Content>
  </Accordion.Item>
</Accordion.Container>

    The Accordion can be controlled or uncontrolled (with a default value)

  • Major version bump for all Amplify UI packages due to uprade of peerDependency aws-amplify to v6

  • #​4635 91372387c Thanks @​dbanksdesign! - breaking(theme): removing brand namespace from the theme tokens

    - tokens.colors.brand.primary[10]
+ tokens.colors.primary[10]
    const theme = createTheme({
  tokens: {
    colors: {
-       brand: {
        primary: {
          //...
        }
-       }
    }
  }
})

    We also added the ability to easily set the entire range of primary and secondary colors at the theme level

    const theme = createTheme({
  primaryColor: 'red',
  secondaryColor: 'green',
});
Minor Changes

  • #​4445 7b55f4f78 Thanks @​dbanksdesign! - feat: allow themes to have arbitrary tokens

  • #​4578 27be6ccf5 Thanks @​dbanksdesign! - feat: add CSS layers support and CSS file splitting. The default style import '@​aws-amplify/ui-react/styles.css' remains unchanged so these features are opt-in.
    We are now exposing each different component CSS file if you want fine-grained control over what CSS is loaded. Additionally, we will have a CSS reset and a base CSS file.
    If you only wanted the button CSS you could do this:

    import '@&#8203;aws-amplify/ui-react/styles/reset.css';
import '@&#8203;aws-amplify/ui-react/styles/base.css';
import '@&#8203;aws-amplify/ui-react/styles/button.css';

    You can also use the main 'styles.css' import with the new reset file too.

    To use CSS layers, replace '.css' with '.layer.css' for any CSS import.

    - import '@&#8203;aws-amplify/ui-react/styles.css'
+ import '@&#8203;aws-amplify/ui-react/styles.layer.css'
Patch Changes

v5.3.3

Compare Source

Patch Changes

v5.3.2

Compare Source

Patch Changes

  • #​4649 1dbe3f46c Thanks @​dbanksdesign! - fix(storage): fixing drop handler for file extensions

    Previously, adding a file extension for an acceptedFileTypes when a customer would drop a file it would show as rejected even if it was a valid file type. This fixes that issue.

v5.3.1

Compare Source

Patch Changes

v5.3.0

Compare Source

Minor Changes

  • #​4348 276968530 Thanks @​hbuchel! - feat(react/ui): add new Fieldset Primitive

    Usage:

    <Fieldset legend="Legend test">
   // Fieldset content/form controls
</Fieldset>

  • #​4359 ec495a6f6 Thanks @​dbanksdesign! - feat(react): DropZone component

    export default function DefaultDropZoneExample() {
  const [files, setFiles] = React.useState([]);
  return (
    <>
      <DropZone
        onDropComplete={({ files }) => {
          setFiles(files);
        }}
      >
        Drag images here
      </DropZone>
      {files.map((file) => (
        <Text key={file.name}>{file.name}</Text>
      ))}
    </>
  );
}
Patch Changes

v5.2.0

Compare Source

Minor Changes

  • #​4268 f8c5b77e4 Thanks @​dbanksdesign! - feat(react): Add IconsProvider to customize icons globally for all Amplify UI components

    Components that use icons:

    • Alert
    • Checkbox
    • Expander
    • Field
    • Menu
    • Pagination
    • PasswordField
    • Rating
    • SearchField
    • Select
    • StepperField
    • StorageManager

    Wrap your application with the <IconsProvider> (or whatever part of your app you want to customize the icons).

    <IconsProvider icons={{
  alert: {
    info: <MdInfo />
  }
}}>
  {/* ... */}
</IconProvider>

    Works well with the react-icons package!

Patch Changes

v5.1.1

Compare Source

Patch Changes

v5.1.0

Compare Source

Minor Changes

  • #​4288 30624bd4f Thanks @​dbanksdesign! - New component: Breadcrumbs!

    A composable component for displaying breadcrumb navigation

    <Breadcrumbs
  items={[
    {
      href: '/',
      label: 'Home',
    },
    {
      href: '/category',
      label: 'Category',
    },
    {
      href: '/category/type',
      label: 'Type',
    },
  ]}
/>
    <Breadcrumbs.Container>
  {breadcrumbs.map(({ href, label }, idx) => {
    const isCurrent = breadcrumbs.length - 1 === idx;
    return (
      <Breadcrumbs.Item>
        <Breadcrumbs.Link isCurrent={isCurrent} href={href}>
          {label}
        </Breadcrumbs.Link>
        {isCurrent ? null : <Breadcrumbs.Separator>/</Breadcrumbs.Separator>}
      </Breadcrumbs.Item>
    );
  })}
</Breadcrumbs.Container>
Patch Changes

v5.0.7

Compare Source

Patch Changes

v5.0.6

Compare Source

Patch Changes

v5.0.5

Compare Source

Patch Changes
aws-amplify/amplify-js (aws-amplify)

v6.0.18: 2024-02-27 Amplify JS release - aws-amplify@6.0.18

Compare Source

What's Changed

Full Changelog: https://github.com/aws-amplify/amplify-js/compare/aws-amplify@6.0.17...aws-amplify@6.0.18

v6.0.17: 2024-02-19 Amplify JS release - aws-amplify@6.0.17

Compare Source

What's Changed

New Contributors

Full Changelog: https://github.com/aws-amplify/amplify-js/compare/aws-amplify@6.0.16...aws-amplify@6.0.17

v6.0.16: 2024-02-09 Amplify JS release - aws-amplify@6.0.16

Compare Source

What's Changed

Full Changelog: https://github.com/aws-amplify/amplify-js/compare/aws-amplify@6.0.15...aws-amplify@6.0.16

v6.0.15: 2024-02-06 Amplify JS release - aws-amplify@6.0.15

Compare Source

What's Changed

Configuration

📅 Schedule: Branch creation - "before 3am on the first day of the month" in timezone America/New_York, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

  • If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

@cypress-app-bot
Copy link

See the guidelines for reviewing dependency updates for info on how to review dependency update PRs.

@cypress Cypress
Copy link

cypress bot commented Feb 4, 2024 •
edited
Loading

1 failed test on run #6349 ↗︎

1 392 2 0 Flakiness 0

Details:

fix(deps): update @aws-amplify/ui-react to 6.1.5 🌟
Project: cypress-realworld-app Commit: cd3a930e23
Status: Failed Duration: 09:21 💡
Started: Mar 1, 2024 8:03 AM Ended: Mar 1, 2024 8:12 AM
Failed  cypress/tests/ui-auth-providers/cognito.spec.ts • 1 failed test • Component

View Output

Test Artifacts
An uncaught error was detected outside of a test Test Replay Screenshots

Review all test suite changes for PR #1501 ↗︎

@renovate renovate bot force-pushed the renovate/major-aws-amplify branch from 9c00947 to cd3a930 Compare March 1, 2024 07:58
@renovate renovate bot changed the title fix(deps): update dependency @aws-amplify/ui-react to version 6.x 🌟 (major) fix(deps): update dependency @aws-amplify/ui-react to version 6.x 🌟 (major) - autoclosed Mar 4, 2024
@renovate renovate bot closed this Mar 4, 2024
@renovate renovate bot deleted the renovate/major-aws-amplify branch March 4, 2024 14:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@cypress-app-bot