Docs release pr 2023 09 20

.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'

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
+}

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
 

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`
 

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)\\"

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\\",

docs/package.json

@@ -23,8 +23,8 @@
     "test:links": "node --require esbuild-register ./scripts/link-checker-puppeteer.ts"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "5.3.0",
-    "@aws-amplify/ui-react-storage": "2.3.0",
+    "@aws-amplify/ui-react": "5.3.1",
+    "@aws-amplify/ui-react-storage": "2.3.1",
     "@cucumber/gherkin": "^19.0.3",
     "@cucumber/messages": "^16.0.1",
     "@docsearch/react": "3",

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"

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>
   );
 };

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>
   );

docs/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>
+);

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>
+);

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';

docs/src/pages/[platform]/components/selectfield/react.mdx

@@ -21,6 +21,8 @@ import {
   SelectFieldThemeExample,
   SelectFieldStylePropsExample,
   SelectFieldIconProviderExample,
+  SelectFieldMultipleStateExample,
+  SelectFieldSelectSizeExample,
 } from './examples';
 
 ## Demo
@@ -175,6 +177,40 @@ A disabled field will not be focusable or mutable, and it will not be submitted
   </ExampleCode>
 </Example>
 
+### Multiple selections
+
+Use the `isMultiple` prop to specify that multiple options can be selected at once.
+* For Mac: Hold down the command button to select multiple options
+* For Windows: Hold down the control button to select multiple options
+
+<Example>
+  <SelectFieldMultipleStateExample />
+
+  <ExampleCode>
+
+```jsx file=./examples/SelectFieldMultipleStateExample.tsx
+
+```
+
+  </ExampleCode>
+</Example>
+
+### Select size
+
+ Use the `selectSize` prop to set the number of visible options in a drop-down list. If the value of the `selectSize` attribute is greater than 1, but lower than the total number of options in the list, the browser will add a scroll bar to indicate that there are more options to view.
+
+<Example>
+  <SelectFieldSelectSizeExample />
+
+  <ExampleCode>
+
+```jsx file=./examples/SelectFieldSelectSizeExample.tsx
+
+```
+
+  </ExampleCode>
+</Example>
+
 ### Validation error
 
 Use the `hasError` and `errorMessage` props to mark a SelectField as having a validation error.