added new isMultiple and selectSize props (#4414)

* added new isMultiple and selectSize props * package-lock.json file removed * reset yarn.lock and package.json * Update docs/src/pages/[platform]/components/selectfield/react.mdx Co-authored-by: Heather Buchel <[email protected]> * Update docs/src/pages/[platform]/components/selectfield/react.mdx Co-authored-by: Heather Buchel <[email protected]> * Update docs/src/pages/[platform]/components/selectfield/react.mdx Co-authored-by: Heather Buchel <[email protected]> * Update docs/src/pages/[platform]/components/selectfield/react.mdx Co-authored-by: Heather Buchel <[email protected]> * testing in progress * added padding tokens * 2 snapshots updated * updated react tests * updated docs tests * added default values for isMultiple and selectSize * Update packages/react/src/primitives/Select/Select.tsx Co-authored-by: Heather Buchel <[email protected]> * test option background color change * Add disabled tokens/css, update demo * combine [multiple][size] check and use class * update snapshots * Update packages/ui/src/theme/tokens/components/select.ts * Create brave-timers-dream.md added new isMultiple and selectSize props * Update .changeset/brave-timers-dream.md Co-authored-by: Heather Buchel <[email protected]> * Create breezy-rabbits-change.md Added new isMultiple and selectSize props for the SelectField component * removed one extra file from .changeset * updated .changeset folder --------- Co-authored-by: Heather Buchel <[email protected]> Co-authored-by: Ioana Brooks <[email protected]> Co-authored-by: Heather Buchel <[email protected]>
aws-amplify · Sep 14, 2023 · d570694 · d570694
1 parent f7fbe97
commit d570694
Show file tree

Hide file tree

Showing 19 changed files with 393 additions and 31 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/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/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';
diff --git a/docs/src/pages/[platform]/components/selectfield/react.mdx b/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.

diff --git a/docs/src/pages/[platform]/components/selectfield/useSelectFieldProps.tsx b/docs/src/pages/[platform]/components/selectfield/useSelectFieldProps.tsx
@@ -33,6 +33,12 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
   const [variation, setVariation] = React.useState<
     SelectFieldProps['variation']
   >(initialValues.variation);
+  const [isMultiple, setIsMultiple] = React.useState<
+    SelectFieldProps['isMultiple']
+  >(initialValues.isMultiple);
+  const [selectSize, setSelectSize] = React.useState<
+    SelectFieldProps['selectSize']
+  >(initialValues.selectSize);
 
   React.useEffect(() => {
     demoState.set(SelectField.displayName, {
@@ -44,6 +50,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       labelHidden,
       size,
       variation,
+      isMultiple,
+      selectSize,
     });
   }, [
     descriptiveText,
@@ -54,6 +62,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
     labelHidden,
     size,
     variation,
+    isMultiple,
+    selectSize,
   ]);
 
   return React.useMemo(
@@ -66,6 +76,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       size,
       variation,
       isDisabled,
+      isMultiple,
+      selectSize,
       setDescriptiveText,
       setErrorMessage,
       setHasError,
@@ -74,6 +86,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       setLabelHidden,
       setSize,
       setVariation,
+      setIsMultiple,
+      setSelectSize,
     }),
     [
       descriptiveText,
@@ -84,6 +98,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       size,
       variation,
       isDisabled,
+      isMultiple,
+      selectSize,
       setDescriptiveText,
       setErrorMessage,
       setHasError,
@@ -92,6 +108,8 @@ export const useSelectFieldProps: UseSelectFieldProps = (initialValues) => {
       setLabelHidden,
       setSize,
       setVariation,
+      setIsMultiple,
+      setSelectSize,
     ]
   );
 };