chore(deps): bump @aws-amplify/ui-react from 6.1.12 to 6.2.0

[dependabot]

Bumps @aws-amplify/ui-react from 6.1.12 to 6.2.0.

Release notes

Sourced from @​aws-amplify/ui-react's releases.

@​aws-amplify/ui-react@​6.2.0

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 '@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 '@aws-amplify/ui-react/server';

... (truncated)

Changelog

Sourced from @​aws-amplify/ui-react's changelog.

6.2.0

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 '@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 '@aws-amplify/ui-react/server';

... (truncated)

Commits

• 927870b Version Packages (#5522)
• d73bd9c feat(ui): component theming (#5170)
• e52db7b fix(ui-react): Whitespace in Tab IDs (#5378)
• 29f11a5 fix(aria-describedby): associated inline error messages with a specific field...
• b484617 Version Packages (#5419)
• 98135df fix(authenticator): Check first radio button from unverified user attributes ...
• a024885 fix(authenticator): fixing visual inconsistencies (#5389)
• 8b4703e chore(react-composition): migrate elements utilities to ui-react-core (#5382)
• d02d3c6 Version Packages (#5362)
• 0483dd8 fix(ui & ui-react): Resolves ratings height discrepancy in edge case (#5321)
• Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)