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 aws-amplify to v6 (major) #230

Closed
wants to merge 1 commit into from
Closed

fix(deps): update aws-amplify to v6 (major) #230

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Oct 9, 2024 •
edited by github-actions bot
Loading

This PR contains the following updates:

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

Release Notes

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

v6.5.3

Compare Source

Patch Changes

v6.5.2

Compare Source

Patch Changes

v6.5.1

Compare Source

Patch Changes

v6.5.0

Compare Source

Minor Changes

  • #​5812 0ddeea9d4 Thanks @​dbanksdesign! - feat(theming) add custom component style rendering

    const customComponentTheme = defineComponentTheme({
  name: 'custom-component',
  theme(tokens) {
    return {
      color: tokens.colors.red[10]
    }
  }
});

export function CustomComponent() {
  return (
    <>
      <View className={customComponentTheme.className()}>
      </View>
      // This will create a style tag with only the styles in the component theme
      // the styles are scoped to the global theme
      <ComponentStyle theme={theme} componentThemes=[customComponentTheme] />
    </>
  )
}
Patch Changes

v6.4.0

Compare Source

Minor Changes
Patch Changes

v6.3.1

Compare Source

Patch Changes

v6.3.0

Compare Source

Minor Changes

  • #​5767 afffa89cb Thanks @​thaddmt! - feat(textarea): add autoresizing to textarea

    export const AutoresizeTextareaExample = () => {
  const [value, setValue] = React.useState('');

  return (
    <TextAreaField
      autoResize
      label="Comments"
      value={value}
      onChange={(e) => {
        setValue(e.target.value);
      }}
    />
  );
};

  • #​5767 afffa89cb Thanks @​thaddmt! - feat(scrollview): add autoScroll prop

    <ScrollView autoScroll="smooth">{/* ... */}</ScrollView>

  • #​5767 afffa89cb Thanks @​thaddmt! - feat(primitives): add Avatar primitive

    {
  /* Avatar with image */
}
<Avatar src="/cats/5.jpg" />;
{
  /* Avatar with default placeholder icon */
}
<Avatar />;
{
  /* Avatar with initials */
}
<Avatar>DB</Avatar>;
{
  /* Avatar with custom icon */
}
<Avatar>
  <FiSmile style={{ width: '60%', height: '60%' }} />
</Avatar>;
Patch Changes

v6.2.2

Compare Source

Patch Changes

v6.2.1

Compare Source

Patch Changes

v6.2.0

Compare Source

Minor Changes

  • #​5170 d73bd9cc8 Thanks @​dbanksdesign! - feat(ui): experimental component theming

    This feature lets you fully style and theme built-in components even if there is no design token available. For example, previously you could not add a box shadow or gradient background to the built-in Button component unless you wrote plain CSS. Now you can style every CSS property for all the built-in components with type-safety!

    This also lets you define your own components and style them in the same type-safe way with zero runtime computation.

defineComponentTheme()
import { defineComponentTheme } from '@&#8203;aws-amplify/ui-react/server';

export const buttonTheme = defineComponentTheme({
  // because 'button' is a built-in component, we get type-safety and hints
  // based on the theme shape of our button
  name: 'button',
  theme: (tokens) => {
    return {
      textAlign: 'center',
      padding: tokens.space.xl,
      _modifiers: {
        primary: {
          backgroundColor: tokens.colors.primary[20],
        },
      },
    };
  },
});
createTheme()

The theme object passed to createTheme now has an optional components array which is an array of component themes.

export const theme = createTheme({
  name: 'my-theme',
  components: [buttonTheme, customComponentTheme],
});
React Server Component support for theming

You no longer need to use the <ThemeProvider> and rely on React context to theme Amplify UI (you still can though!). There is a new import path for RSC-compliant code: '@​aws-amplify/ui-react/server' which you can use to import createTheme and defineComponentTheme as well as a new React Server Component: <ThemeStyle /> which will inject the styles of your theme into the page.

import { ThemeStyle, createTheme } from '@&#8203;aws-amplify/ui-react/server';

const theme = createTheme({
  //...
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div {...theme.containerProps({ colorMode: 'system' })}>
      {children}
      <ThemeStyle theme={theme} />
    </div>
  );
}
Patch Changes

v6.1.14

Compare Source

Patch Changes

  • #​5389 a0248855b Thanks @​dbanksdesign! - fix(authenticator): fixing visual inconsistencies

    • Removing any style props from buttons on authenticator to fix font weight inconsistencies
    • Moved the in the Authenticator to be in the same location in the DOM in each view
    • Made the link buttons consistent across Authenticator views

    Fixes #​5156

  • #​5399 98135dfac Thanks @​timngyn! - fix(authenticator): Check first radio button from unverified user attributes so that default value is selected

v6.1.13

Compare Source

Patch Changes

v6.1.12

Compare Source

Patch Changes

v6.1.11

Compare Source

Patch Changes

v6.1.10

Compare Source

Patch Changes

v6.1.9

Compare Source

Patch Changes

  • #​5193 de2402842 Thanks @​calebpollman! - chore(aws-amplify): point amplify to 6.2.0

  • #​5186 9ce5f9d88 Thanks @​calebpollman! - feat(@​aws-amplify/ui-react-storage): Add handling for aws-amplify/storage improvements:

    Update StorageManager to support differing usages of path prop - existing: accessLevel prop provided with or without optional path prop - additive: no accessLevel prop provided with required path as either a string or a callback provided the current identityId

    Migrate from accessLevel to path as a string:

      <StorageManager
-   accessLevel="guest"
+   path="public/"
    maxFileCount={1}
  />

    Migrate from accessLevel to path as a callback:

      <StorageManager
-   accessLevel="private"
-   path="images/"
+   path={({ identityId }) => `private/${identityId}/images/`}
    maxFileCount={1}
  />

    Update StorageImage to support path prop

    Migrate from imagKey and accessLevel to path:

      <StorageImage
-   imgKey="cat.jpeg"
-   accessLevel="public"
+   path="public/cat.jpeg"
  />

  • Updated dependencies [de2402842, 9ce5f9d88]:

v6.1.8

Compare Source

Patch Changes

  • #​5167 18da6aede Thanks @​esauerbo! - fix(Menu): Fix ability to disable menu component

    This fixes a bug where the Menu component was not respecting the isDisabled prop.

v6.1.7

Compare Source

Patch Changes

v6.1.6

Compare Source

Patch Changes

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
aws-amplify/amplify-js (aws-amplify)

v6.6.4

Compare Source

v6.6.3: 2024-09-30 Amplify JS release - [email protected]

Compare Source

What's Changed

New Contributors

Full Changelog: https://github.com/aws-amplify/amplify-js/compare/[email protected]@6.6.3

v6.6.2: 2024-09-16 Amplify JS release - [email protected]

Compare Source

What's Changed

Full Changelog: https://github.com/aws-amplify/amplify-js/compare/[email protected]@6.6.2

v6.6.1: 2024-09-16 Amplify JS release - [email protected]

Compare Source

What's Changed

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, 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 was generated by Mend Renovate. View the repository job log.

Thanks for the PR!

Deployments, as required, will be available below:

Please create PRs in draft mode. Mark as ready to enable:

After merge, new images are deployed in:

@renovate renovate bot enabled auto-merge (squash) October 9, 2024 23:51
@renovate renovate bot force-pushed the renovate/major-aws-amplify branch from 925bd2c to 1afe254 Compare October 10, 2024 00:26
@renovate renovate bot force-pushed the renovate/major-aws-amplify branch from 1afe254 to 93f7f94 Compare October 10, 2024 04:32
auto-merge was automatically disabled October 16, 2024 23:08

Pull request was closed

@renovate Renovate
Copy link
Contributor Author

renovate bot commented Oct 16, 2024

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 6.x releases. But if you manually upgrade to 6.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.

@renovate renovate bot deleted the renovate/major-aws-amplify branch October 16, 2024 23:12
@DerekRoberts DerekRoberts mentioned this pull request Feb 19, 2025
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@jazzgrewal jazzgrewal Awaiting requested review from jazzgrewal jazzgrewal is a code owner

@RMCampos RMCampos Awaiting requested review from RMCampos

@DerekRoberts DerekRoberts Awaiting requested review from DerekRoberts DerekRoberts is a code owner

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
@DerekRoberts