Merge branch 'main' into chore/clear-sb-styles

aws-amplify · Jan 11, 2025 · 679ce58 · 679ce58
2 parents 8b23779 + f575deb
commit 679ce58
Show file tree

Hide file tree

Showing 331 changed files with 7,159 additions and 4,257 deletions.
diff --git a/.changeset/blue-ladybugs-grab.md b/.changeset/blue-ladybugs-grab.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": patch
+---
+
+feat(i18n): add Chinese translations for password fields in zh.ts
diff --git a/.github/workflows/receive-fork-review.yml b/.github/workflows/receive-fork-review.yml
@@ -26,7 +26,7 @@ jobs:
           echo ${{ github.event.pull_request.base.sha }} > ./commit/base_sha
           echo ${{ github.event.review.commit_id }} > ./commit/commit_id
           echo ${{ github.event.pull_request.number }} > ./commit/pr_number
-      - uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2 https://github.com/actions/upload-artifact/commit/0b7f8abb1508181956e8e162db84b466c27e18ce
+      - uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.5.0 https://github.com/actions/upload-artifact/commit/65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08
         with:
           name: commit
           path: commit/
diff --git a/.github/workflows/reusable-build-system-test-react-native.yml b/.github/workflows/reusable-build-system-test-react-native.yml
@@ -16,10 +16,10 @@ jobs:
       fail-fast: false
       matrix:
         framework: [react-native]
-        framework-version:
-          [
+        framework-version: [
             # uncomment to enable
-            # { formatted: latest, value: latest },
+            { formatted: latest, value: latest },
+            { formatted: 076, value: 0.76 },
             { formatted: 075, value: 0.75 },
             { formatted: 074, value: 0.74 },
             { formatted: 073, value: 0.73 },
@@ -37,6 +37,9 @@ jobs:
         exclude:
           - build-tool: expo
             platform: ios
+          - build-tool: expo
+            platform: android
+            framework-version: { formatted: '076', value: '0.76' }
           - build-tool: expo
             platform: android
             framework-version: { formatted: '075', value: '0.75' }
@@ -53,8 +56,8 @@ jobs:
             platform: android
             framework-version: { formatted: '071', value: '0.71' }
         include:
-          # Expo makes you specify a version of the SDK that supports that a particular version of React Native 
-          # https://stackoverflow.com/questions/63463373/create-an-expo-project-with-a-specific-version 
+          # Expo makes you specify a version of the SDK that supports a specific version of React Native
+          # https://stackoverflow.com/questions/63463373/create-an-expo-project-with-a-specific-version
           - framework: react-native
             framework-version: { formatted: 070, value: '0.70' }
             build-tool: expo
@@ -103,6 +106,14 @@ jobs:
             pkg-manager: npm
             node-version: 20
             logfile: test.log
+          - framework: react-native
+            framework-version: { formatted: 076, value: '0.76' }
+            build-tool: expo
+            build-tool-version: 52
+            platform: android
+            pkg-manager: npm
+            node-version: 20
+            logfile: test.log
 
     env:
       MEGA_APP_NAME: rn${{ matrix.framework-version.formatted }}${{ matrix.build-tool }}${{ matrix.build-tool-version }}${{ matrix.platform }}ui${{ inputs.dist-tag }}

diff --git a/.github/workflows/reusable-build-system-test.yml b/.github/workflows/reusable-build-system-test.yml
@@ -28,7 +28,9 @@ jobs:
       fail-fast: false
       matrix:
         framework: [react]
-        framework-version: [latest]
+        # temporarily pointing all react tests to v18
+        # framework-version: [latest]
+        framework-version: [18]
         build-tool: [next, vite]
         build-tool-version: [latest]
         pkg-manager: [npm]
@@ -166,7 +168,7 @@ jobs:
           TAGS: '@${{ matrix.framework }}'
 
       - name: Upload videos and screenshots
-        uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2 https://github.com/actions/upload-artifact/commit/0b7f8abb1508181956e8e162db84b466c27e18ce
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.5.0 https://github.com/actions/upload-artifact/commit/65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08
         if: ${{ failure() && steps.e2e.outcome != 'success' }}
         with:
           name: canary-cypress-error-${{ env.MEGA_APP_NAME }}

diff --git a/.github/workflows/reusable-e2e.yml b/.github/workflows/reusable-e2e.yml
@@ -331,7 +331,7 @@ jobs:
           VALID_PASSWORD: ${{ secrets.VALID_PASSWORD }}
 
       - name: Upload failure screenshots and errors
-        uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2 https://github.com/actions/upload-artifact/commit/0b7f8abb1508181956e8e162db84b466c27e18ce
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.5.0 https://github.com/actions/upload-artifact/commit/65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08
         if: ${{ failure() && steps.e2e.outcome != 'success' }}
         with:
           name: e2e-cypress-error-${{ matrix.package }}
@@ -481,7 +481,7 @@ jobs:
           VALID_PASSWORD: ${{ secrets.VALID_PASSWORD }}
 
       - name: Upload failure screenshots and errors
-        uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2 https://github.com/actions/upload-artifact/commit/0b7f8abb1508181956e8e162db84b466c27e18ce
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.5.0 https://github.com/actions/upload-artifact/commit/65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08
         if: ${{ failure() && steps.e2e-ios.outcome != 'success' }}
         with:
           name: e2e-detox-error-react-native-ios
@@ -622,7 +622,7 @@ jobs:
           adb -s emulator-$EMULATOR2_PORT emu kill
 
       - name: Upload failure screenshots and errors
-        uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2 https://github.com/actions/upload-artifact/commit/0b7f8abb1508181956e8e162db84b466c27e18ce
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.5.0 https://github.com/actions/upload-artifact/commit/65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08
         if: ${{ failure() && steps.e2e-android.outcome != 'success' }}
         with:
           name: e2e-detox-error-react-native-android
@@ -736,7 +736,7 @@ jobs:
         run: yarn docs test:links
 
       - name: Upload failure screenshots and errors
-        uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2 https://github.com/actions/upload-artifact/commit/0b7f8abb1508181956e8e162db84b466c27e18ce
+        uses: actions/upload-artifact@65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08 # v4.5.0 https://github.com/actions/upload-artifact/commit/65c4c4a1ddee5b72f698fdd19549f0f0fb45cf08
         if: ${{ failure() && steps.e2e.outcome != 'success' }}
         with:
           name: docs-e2e-cypress-error

diff --git a/build-system-tests/scripts/mega-app-install.sh b/build-system-tests/scripts/mega-app-install.sh
@@ -105,7 +105,8 @@ if [ "$PKG_MANAGER" == 'yarn' ]; then
     yarn add $DEPENDENCIES
 else
     if [[ "$FRAMEWORK" == "react-native" ]]; then
-        DEPENDENCIES="$TAGGED_UI_FRAMEWORK @aws-amplify/react-native aws-amplify react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill"
+        # react-native-safe-area-context v5.0.0+ does not support RN 0.74 and lower
+        DEPENDENCIES="$TAGGED_UI_FRAMEWORK @aws-amplify/react-native aws-amplify react-native-safe-area-context@^4.2.5 @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values react-native-url-polyfill"
         echo "npm install $DEPENDENCIES"
         npm install $DEPENDENCIES
         if [[ "$BUILD_TOOL" == "expo" ]]; then
@@ -115,7 +116,7 @@ else
                 npx expo install react-native@~0.75.0
             fi
             echo "npx expo install --fix"
-            npx expo install --fix # fix the dependencies that are incompatible with the installed expo versio
+            npx expo install --fix # fix the dependencies that are incompatible with the installed expo version
         fi
     else
         install_dependencies_with_retries npm "$DEPENDENCIES"

diff --git a/docs/__tests__/__snapshots__/props-table.test.ts.snap b/docs/__tests__/__snapshots__/props-table.test.ts.snap
@@ -8095,6 +8095,13 @@ exports[`Props Table 1`] = `
                         "category": "BaseComponentProps",
                         "isOptional": true
                     },
+                    "endColor": {
+                        "name": "endColor",
+                        "type": "StyleToken<Property.Color> | undefined",
+                        "description": "This property will change the animation end color of the placeholder component",
+                        "category": "BasePlaceholderProps",
+                        "isOptional": true
+                    },
                     "isLoaded": {
                         "name": "isLoaded",
                         "type": "boolean | undefined",
@@ -8109,6 +8116,13 @@ exports[`Props Table 1`] = `
                         "category": "BasePlaceholderProps",
                         "isOptional": true
                     },
+                    "startColor": {
+                        "name": "startColor",
+                        "type": "StyleToken<Property.Color> | undefined",
+                        "description": "This property will change the animation start color of the placeholder component",
+                        "category": "BasePlaceholderProps",
+                        "isOptional": true
+                    },
                     "isDisabled": {
                         "name": "isDisabled",
                         "type": "boolean | undefined",

diff --git a/docs/__tests__/__snapshots__/sitemap.test.ts.snap b/docs/__tests__/__snapshots__/sitemap.test.ts.snap
@@ -110,6 +110,7 @@ exports[`Sitemap Snapshot 1`] = `
 /react/connected-components/liveness/troubleshooting, 
 /react/connected-components/storage, 
 /react/connected-components/storage/fileuploader, 
+/react/connected-components/storage/storage-browser, 
 /react/connected-components/storage/storageimage, 
 /react/getting-started/accessibility, 
 /react/getting-started/figma, 

diff --git a/docs/package.json b/docs/package.json
@@ -23,7 +23,8 @@
     "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "6.7.0",
+    "@aws-amplify/ui-react": "6.8.1",
+    "@aws-amplify/ui-react-storage": "3.6.1",
     "@docsearch/react": "3",
     "@mdx-js/loader": "^2.1.0",
     "@mdx-js/mdx": "^2.1.0",
@@ -33,7 +34,7 @@
     "gray-matter": "^4.0.3",
     "lodash": "^4.17.21",
     "mdx-prism": "^0.3.3",
-    "next": "^14.2.10",
+    "next": "^14.2.21",
     "next-plugin-preval": "^1.2.1",
     "prism-react-renderer": "1.2.1",
     "raw-loader": "^4.0.2",

diff --git a/docs/src/components/ComponentsMetadata.ts b/docs/src/components/ComponentsMetadata.ts
@@ -135,6 +135,11 @@ export const ComponentsMetadata: ComponentClassNameItems = {
     components: ['AIConversation'],
     description: 'Class applied to the form element',
   },
+  AIConversationFormError: {
+    className: ComponentClassName.AIConversationFormError,
+    components: ['AIConversation'],
+    description: 'Class applied to the error message of the form',
+  },
   AIConversationFormAttach: {
     className: ComponentClassName.AIConversationFormAttach,
     components: ['AIConversation'],

diff --git a/docs/src/components/ExpoSnack.tsx b/docs/src/components/ExpoSnack.tsx
@@ -35,7 +35,7 @@ const defaultOptions: SnackOptions = {
     '@aws-amplify/rtn-web-browser',
     '@aws-amplify/ui-react-native',
     '[email protected]',
-    'react-native-safe-area-context',
+    'react-native-safe-area-context@^4.2.5',
     '@react-native-community/netinfo',
     '@react-native-async-storage/async-storage',
     'react-native-get-random-values',

diff --git a/docs/src/data/frameworks.ts b/docs/src/data/frameworks.ts
@@ -54,7 +54,7 @@ export const AMPLIFY_5_UI_VERSIONS: Record<string, number> = {
 
 // React Native requires direct installation of dependencies with native modules
 export const REACT_NATIVE_DEPENDENCIES =
-  '@aws-amplify/react-native react-native-safe-area-context @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values';
+  '@aws-amplify/react-native react-native-safe-area-context@^4.2.5 @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values';
 
 export const FRAMEWORK_INSTALL_SCRIPTS = {
   react: 'npm i @aws-amplify/ui-react aws-amplify',

diff --git a/docs/src/data/links.tsx b/docs/src/data/links.tsx
@@ -204,6 +204,13 @@ export const connectedComponents: ComponentNavItem[] = [
     body: "Amplify UI Storage components allow you to store files in the cloud using Amplify's Storage category",
     platforms: ['react'],
   },
+  {
+    href: '/connected-components/storage/storage-browser',
+    label: 'Storage Browser',
+    body: 'The StorageBrowser provides users a simple interface for interacting with data stored in Amazon S3.',
+    platforms: ['react'],
+    tertiary: true,
+  },
   {
     href: '/connected-components/storage/storageimage',
     label: 'Storage Image',

diff --git a/docs/src/pages/[platform]/components/placeholder/PlaceholderControls.tsx b/docs/src/pages/[platform]/components/placeholder/PlaceholderControls.tsx
@@ -4,9 +4,16 @@ import {
   PlaceholderProps,
   SelectField,
   SwitchField,
+  TextField,
 } from '@aws-amplify/ui-react';
 
 export interface PlaceholderPropControlsProps extends PlaceholderProps {
+  setStartColor: (
+    value: React.SetStateAction<PlaceholderProps['startColor']>
+  ) => void;
+  setEndColor: (
+    value: React.SetStateAction<PlaceholderProps['endColor']>
+  ) => void;
   setSize: (value: React.SetStateAction<PlaceholderProps['size']>) => void;
   setIsLoaded: (
     value: React.SetStateAction<PlaceholderProps['isLoaded']>
@@ -18,13 +25,35 @@ interface PlaceholderPropControlsInterface {
 }
 
 export const PlaceholderControls: PlaceholderPropControlsInterface = ({
+  startColor,
+  setStartColor,
+  endColor,
+  setEndColor,
   size,
   setSize,
   isLoaded,
   setIsLoaded,
 }) => {
   return (
     <Flex direction="column">
+      <TextField
+        placeholder="Set start color"
+        name="startColor"
+        value={startColor as string}
+        onChange={(event: any) => {
+          setStartColor(event.target.value);
+        }}
+        label="startColor"
+      />
+      <TextField
+        placeholder="Set end color"
+        name="endColor"
+        value={endColor as string}
+        onChange={(event: any) => {
+          setEndColor(event.target.value);
+        }}
+        label="endColor"
+      />
       <SelectField
         value={size}
         onChange={(e) =>

diff --git a/docs/src/pages/[platform]/components/placeholder/demo.tsx b/docs/src/pages/[platform]/components/placeholder/demo.tsx
@@ -9,6 +9,8 @@ import { demoState } from '@/utils/demoState';
 const propsToCode = (props: PlaceholderProps) => {
   return (
     '<Placeholder' +
+    (props.startColor ? ` startColor="${props.startColor}"` : '') +
+    (props.endColor ? ` endColor="${props.endColor}"` : '') +
     (props.size ? ` size="${props.size}"` : '') +
     (props.isLoaded ? ` isLoaded={${props.isLoaded}}` : '') +
     ' />'
@@ -28,8 +30,10 @@ export const PlaceholderDemo = () => {
       propControls={<PlaceholderControls {...placeholderProps} />}
     >
       <Placeholder
-        isLoaded={placeholderProps.isLoaded}
+        startColor={placeholderProps.startColor}
+        endColor={placeholderProps.endColor}
         size={placeholderProps.size}
+        isLoaded={placeholderProps.isLoaded}
       />
     </Demo>
   );

diff --git a/docs/src/pages/[platform]/components/placeholder/examples/PlaceholderColorExample.tsx b/docs/src/pages/[platform]/components/placeholder/examples/PlaceholderColorExample.tsx
@@ -0,0 +1,11 @@
+import { Placeholder, useTheme } from '@aws-amplify/ui-react';
+
+export const PlaceholderColorExample = () => {
+  const { tokens } = useTheme();
+  return (
+    <Placeholder
+      startColor={tokens.colors.neutral[80]}
+      endColor={tokens.colors.teal[40]}
+    />
+  );
+};
diff --git a/docs/src/pages/[platform]/components/placeholder/examples/index.ts b/docs/src/pages/[platform]/components/placeholder/examples/index.ts
@@ -1,5 +1,6 @@
 export { DefaultPlaceholderExample } from './DefaultPlaceholderExample';
 export { PlaceholderIsLoadedExample } from './PlaceholderIsLoadedExample';
 export { PlaceholderSizeExample } from './PlaceholderSizeExample';
+export { PlaceholderColorExample } from './PlaceholderColorExample';
 export { PlaceholderStylePropsExample } from './PlaceholderStylePropsExample';
 export { PlaceholderThemeExample } from './PlaceholderThemeExample';
diff --git a/docs/src/pages/[platform]/components/placeholder/react.mdx b/docs/src/pages/[platform]/components/placeholder/react.mdx
@@ -4,6 +4,7 @@ import { Placeholder } from '@aws-amplify/ui-react';
 import { PlaceholderDemo } from './demo';
 import {
   DefaultPlaceholderExample,
+  PlaceholderColorExample,
   PlaceholderIsLoadedExample,
   PlaceholderSizeExample,
   PlaceholderStylePropsExample,
@@ -59,6 +60,18 @@ Use the `size` prop to change the Placeholder size. Available options are `small
   </ExampleCode>
 </Example>
 
+### Colors
+
+Pass `startColor` and `endColor` props to color your own Placeholder.
+
+<Example>
+  <PlaceholderColorExample />
+  <ExampleCode>
+    ```jsx file=./examples/PlaceholderColorExample.tsx
+    ```
+  </ExampleCode>
+</Example>
+
 ## Customization
 
 <ThemeExample component="Placeholder">