Merge branch 'main' into DocsTabsScrollMargin

aws-amplify · Sep 18, 2023 · c491f9b · c491f9b
2 parents 5c5dce5 + 6a5a4d7
commit c491f9b
Show file tree

Hide file tree

Showing 37 changed files with 591 additions and 87 deletions.
diff --git a/.changeset/breezy-rabbits-change.md b/.changeset/breezy-rabbits-change.md
@@ -0,0 +1,24 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+added new `isMultiple` and `selectSize` props for the `SelectField` component
+
+Example:
+
+```
+  <SelectField
+    label="Fruit"
+    descriptiveText="What's your favorite fruit?"
+    selectSize={3}
+    isMultiple={true}
+  >
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="orange">Orange</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="kiwi">Kiwi</option>
+    <option value="tangerine">Tangerine</option>
+  </SelectField>
+```
diff --git a/.changeset/cold-news-jump.md b/.changeset/cold-news-jump.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+---
+
+chore(liveness): remove predictions super class
diff --git a/.changeset/five-ghosts-hug.md b/.changeset/five-ghosts-hug.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": patch
+---
+
+fix(ui): remove error border from disabled and quiet primitive fields 
diff --git a/.changeset/loud-dodos-confess.md b/.changeset/loud-dodos-confess.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react-liveness": patch
+---
+
+fix(liveness): add missing liveness dependencies
diff --git a/.changeset/mean-vans-attend.md b/.changeset/mean-vans-attend.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(ui-react): update ButtonGroup to respect child props and allow optional children
diff --git a/.changeset/modern-melons-doubt.md b/.changeset/modern-melons-doubt.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(ui-react): use guaranteed value for BreadCrumbs key
diff --git a/.github/dependency-review/config.yml b/.github/dependency-review/config.yml
@@ -1,6 +1,7 @@
 allow-licenses:
   - '0BSD'
   - 'Apache-2.0'
+  - 'BlueOak-1.0.0'
   - 'BSL-1.0'
   - 'BSD-1-Clause'
   - 'BSD-2-Clause-FreeBSD'

diff --git a/build-system-tests/scripts/install-with-retries.sh b/build-system-tests/scripts/install-with-retries.sh
@@ -0,0 +1,26 @@
+#!/bin/bash
+
+# Runs `npm` or `yarn` install with retries
+# Takes 2 parameters: the package manager and the dependencies to be installed
+# Usage:  install_with_retries npm "$DEPENDENCIES" or  install_with_retries yarn "$DEPENDENCIES"
+install_with_retries() {
+    local retries=3
+    local attempt=1
+    while [ $attempt -le $retries ]; do
+        echo "Attempt $attempt/$retries"
+        echo "$1 install $2"
+        "$1" install $2
+        if [ $? -eq 0 ]; then
+            echo "$1 install successful."
+            break
+        fi
+        attempt=$((attempt + 1))
+        if [ $attempt -le $retries ]; then
+            echo "$1 install failed. Retrying in 5 seconds..."
+            sleep 5
+        else
+            echo "$1 install failed after $retries attempts."
+            exit 1
+        fi
+    done
+}
diff --git a/build-system-tests/scripts/mega-app-install.sh b/build-system-tests/scripts/mega-app-install.sh
@@ -10,6 +10,9 @@ FRAMEWORK_VERSION="latest"
 PKG_MANAGER="npm"
 PKG_MANAGER_VERSION="latest"
 
+# Import install function
+source "./scripts/install-with-retries.sh"
+
 # Options
 # e.g.
 # $ ./mega-app-install.sh --build-tool react --build-tool-version latest --language typescript --name react-latest-cra-latest-node-18-ts --framework cra --framework-version latest --pkg-manager npm --pkg-manager-version latest
@@ -122,8 +125,7 @@ else
     if [[ "$BUILD_TOOL" == 'cra' && "$LANGUAGE" == 'ts' ]]; then
         # If not testing the latest React, we need to download its types.
         # CRA is the only framework that we test React 16.
-        echo "npm install $DEP_TYPES"
-        npm install $DEP_TYPES
+        install_with_retries npm "$DEP_TYPES"
     fi
 
     if [[ "$BUILD_TOOL" == 'next' && "$BUILD_TOOL_VERSION" == '11' ]]; then
@@ -141,8 +143,7 @@ else
             npx expo install --fix # fix the dependencies that are incompatible with the installed expo versio
         fi
     else
-        echo "npm install $DEPENDENCIES"
-        npm install $DEPENDENCIES
+        install_with_retries npm "$DEPENDENCIES"
     fi
 fi
 

diff --git a/docs/README.md b/docs/README.md
@@ -21,7 +21,7 @@ Note: to set up local environment
 cp ./docs/.env.example ./docs/.env
 ```
 
-Then set values to the variables.
+Then set values to the variables in the `./docs/.env` file. The values don't matter for local testing. They only matter if you are actually trying to make the Search work.
 
 Note, if you're not using `nvm`, you'll need to set the environment variable: `export NODE_OPTIONS=--openssl-legacy-provider`
 

diff --git a/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap b/docs/__tests__/__snapshots__/cssvars-table.test.ts.snap
@@ -4506,6 +4506,38 @@ exports[`CSS Variables Table 1`] = `
         \\"variable\\": \\"--amplify-components-searchfield-color\\",
         \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\"
     },
+    {
+        \\"variable\\": \\"--amplify-components-select-background-color\\",
+        \\"value\\": \\"var(--amplify-colors-background-primary)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-color\\",
+        \\"value\\": \\"var(--amplify-components-fieldcontrol-color)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-disabled-background-color\\",
+        \\"value\\": \\"var(--amplify-colors-background-disabled)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-disabled-color\\",
+        \\"value\\": \\"var(--amplify-colors-font-disabled)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-option-padding-block\\",
+        \\"value\\": \\"var(--amplify-space-xs)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-option-padding-inline\\",
+        \\"value\\": \\"var(--amplify-space-small)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-padding-block\\",
+        \\"value\\": \\"var(--amplify-space-xs)\\"
+    },
+    {
+        \\"variable\\": \\"--amplify-components-select-expanded-padding-inline\\",
+        \\"value\\": \\"var(--amplify-space-small)\\"
+    },
     {
         \\"variable\\": \\"--amplify-components-select-icon-wrapper-align-items\\",
         \\"value\\": \\"center\\"
@@ -4552,12 +4584,16 @@ exports[`CSS Variables Table 1`] = `
     },
     {
         \\"variable\\": \\"--amplify-components-select-option-background-color\\",
-        \\"value\\": \\"var(--amplify-colors-background-primary)\\"
+        \\"value\\": \\"transparent\\"
     },
     {
         \\"variable\\": \\"--amplify-components-select-option-color\\",
         \\"value\\": \\"var(--amplify-colors-font-primary)\\"
     },
+    {
+        \\"variable\\": \\"--amplify-components-select-option-disabled-background-color\\",
+        \\"value\\": \\"transparent\\"
+    },
     {
         \\"variable\\": \\"--amplify-components-select-option-disabled-color\\",
         \\"value\\": \\"var(--amplify-colors-font-disabled)\\"

diff --git a/docs/__tests__/__snapshots__/props-table.test.ts.snap b/docs/__tests__/__snapshots__/props-table.test.ts.snap
@@ -9742,6 +9742,20 @@ exports[`Props Table 1`] = `
                         \\"category\\": \\"BaseSelectProps\\",
                         \\"isOptional\\": true
                     },
+                    \\"isMultiple\\": {
+                        \\"name\\": \\"isMultiple\\",
+                        \\"type\\": \\"boolean | undefined\\",
+                        \\"description\\": \\"A Boolean attribute indicating that multiple options can be selected at once\\",
+                        \\"category\\": \\"BaseSelectProps\\",
+                        \\"isOptional\\": true
+                    },
+                    \\"selectSize\\": {
+                        \\"name\\": \\"selectSize\\",
+                        \\"type\\": \\"number | undefined\\",
+                        \\"description\\": \\"Sets the number of visible options in a drop-down list\\",
+                        \\"category\\": \\"BaseSelectProps\\",
+                        \\"isOptional\\": true
+                    },
                     \\"isRequired\\": {
                         \\"name\\": \\"isRequired\\",
                         \\"type\\": \\"boolean | undefined\\",

diff --git a/docs/src/pages/[platform]/components/breadcrumbs/examples/BreadcrumbsStyleExample.tsx b/docs/src/pages/[platform]/components/breadcrumbs/examples/BreadcrumbsStyleExample.tsx
@@ -22,8 +22,8 @@ export default function BreadcrumbsStyleExample() {
       borderRadius="medium"
       padding="medium"
     >
-      {breadcrumbs.map(({ href, text, isCurrent }) => (
-        <Breadcrumbs.Item key={href}>
+      {breadcrumbs.map(({ href, text, isCurrent }, idx) => (
+        <Breadcrumbs.Item key={`${href}${idx}`}>
           <Breadcrumbs.Link
             fontWeight="bold"
             textDecoration="underline"

diff --git a/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx b/docs/src/pages/[platform]/components/selectfield/SelectFieldPropControls.tsx
@@ -29,6 +29,12 @@ export interface SelectFieldPropControlsProps extends SelectFieldProps {
   setVariation: (
     value: React.SetStateAction<SelectFieldProps['variation']>
   ) => void;
+  setIsMultiple: (
+    value: React.SetStateAction<SelectFieldProps['isMultiple']>
+  ) => void;
+  setSelectSize: (
+    value: React.SetStateAction<SelectFieldProps['selectSize']>
+  ) => void;
 }
 
 interface SelectFieldPropControlsInterface {
@@ -44,6 +50,8 @@ export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
   labelHidden,
   size,
   variation,
+  isMultiple,
+  selectSize,
   setDescriptiveText,
   setErrorMessage,
   setHasError,
@@ -52,6 +60,8 @@ export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
   setLabelHidden,
   setSize,
   setVariation,
+  setIsMultiple,
+  setSelectSize,
 }) => {
   return (
     <Flex direction="column">
@@ -114,6 +124,24 @@ export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
         }
       />
 
+      <SelectField
+        label="selectSize"
+        name="selectSize"
+        value={String(selectSize)}
+        onChange={(event) => {
+          setSelectSize(
+            parseInt(event.target.value) as SelectFieldProps['selectSize']
+          );
+        }}
+      >
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+        <option value="6">6</option>
+      </SelectField>
+
       <CheckboxField
         name="labelHidden"
         value="yes"
@@ -149,6 +177,18 @@ export const SelectFieldPropControls: SelectFieldPropControlsInterface = ({
         }}
         label="isDisabled"
       />
+
+      <CheckboxField
+        name="isMultiple"
+        value="yes"
+        checked={isMultiple}
+        onChange={(event) => {
+          setIsMultiple(
+            Boolean(event.target.checked) as SelectFieldProps['isMultiple']
+          );
+        }}
+        label="isMultiple"
+      />
     </Flex>
   );
 };
diff --git a/docs/src/pages/[platform]/components/selectfield/demo.tsx b/docs/src/pages/[platform]/components/selectfield/demo.tsx
@@ -33,10 +33,16 @@ const propsToCode = (selectFieldProps) => {
     (selectFieldProps.isDisabled
       ? `\n  isDisabled={${JSON.stringify(selectFieldProps.isDisabled)}}`
       : '') +
+    (selectFieldProps.isMultiple
+      ? `\n  isMultiple={${JSON.stringify(selectFieldProps.isMultiple)}}`
+      : '') +
     `\n>` +
-    `\n  <option value="apple">Apple</option>
-  <option value="banana">Banana</option>
-  <option value="orange">Orange</option>` +
+    `\n    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="orange" disabled>Orange</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="kiwi">Kiwi</option>
+    <option value="tangerine">Tangerine</option>` +
     `\n</SelectField>`
   );
 };
@@ -46,6 +52,7 @@ const defaultSelectFieldProps = {
   hasError: false,
   label: 'Fruit',
   labelHidden: false,
+  isMultiple: false,
 };
 
 export const SelectFieldDemo = () => {
@@ -70,10 +77,17 @@ export const SelectFieldDemo = () => {
         placeholder="Please select a fruit"
         size={selectFieldProps.size}
         variation={selectFieldProps.variation}
+        isMultiple={selectFieldProps.isMultiple}
+        selectSize={selectFieldProps.selectSize}
       >
         <option value="apple">Apple</option>
         <option value="banana">Banana</option>
-        <option value="orange">Orange</option>
+        <option value="orange" disabled>
+          Orange
+        </option>
+        <option value="pineapple">Pineapple</option>
+        <option value="kiwi">Kiwi</option>
+        <option value="tangerine">Tangerine</option>
       </SelectField>
     </Demo>
   );

diff --git a/.../src/pages/[platform]/components/selectfield/examples/SelectFieldMultipleStateExample.tsx b/.../src/pages/[platform]/components/selectfield/examples/SelectFieldMultipleStateExample.tsx
@@ -0,0 +1,16 @@
+import { SelectField } from '@aws-amplify/ui-react';
+
+export const SelectFieldMultipleStateExample = () => (
+  <SelectField
+    label="Fruit"
+    descriptiveText="What's your favorite fruit?"
+    isMultiple={true}
+  >
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="orange">Orange</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="kiwi">Kiwi</option>
+    <option value="tangerine">Tangerine</option>
+  </SelectField>
+);
diff --git a/docs/src/pages/[platform]/components/selectfield/examples/SelectFieldSelectSizeExample.tsx b/docs/src/pages/[platform]/components/selectfield/examples/SelectFieldSelectSizeExample.tsx
@@ -0,0 +1,16 @@
+import { SelectField } from '@aws-amplify/ui-react';
+
+export const SelectFieldSelectSizeExample = () => (
+  <SelectField
+    label="Fruit"
+    descriptiveText="What's your favorite fruit?"
+    selectSize={3}
+  >
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="orange">Orange</option>
+    <option value="pineapple">Pineapple</option>
+    <option value="kiwi">Kiwi</option>
+    <option value="tangerine">Tangerine</option>
+  </SelectField>
+);
diff --git a/docs/src/pages/[platform]/components/selectfield/examples/index.ts b/docs/src/pages/[platform]/components/selectfield/examples/index.ts
@@ -12,3 +12,5 @@ export { SelectFieldOptionsExample } from './SelectFieldOptionsExample';
 export { SelectFieldThemeExample } from './SelectFieldThemeExample';
 export { SelectFieldStylePropsExample } from './SelectFieldStylePropsExample';
 export { SelectFieldIconProviderExample } from './SelectFieldIconProviderExample';
+export { SelectFieldMultipleStateExample } from './SelectFieldMultipleStateExample';
+export { SelectFieldSelectSizeExample } from './SelectFieldSelectSizeExample';