` element set to `aria-hidden={true}` so that the content is not repeated for screenreaders.
+
+This enables Fieldset to have a legend as the suggested way to accessibly label a fieldset.
diff --git a/docs/src/pages/[platform]/components/fieldset/useFieldsetProps.ts b/docs/src/pages/[platform]/components/fieldset/useFieldsetProps.ts
new file mode 100644
index 00000000000..6ec1214e47b
--- /dev/null
+++ b/docs/src/pages/[platform]/components/fieldset/useFieldsetProps.ts
@@ -0,0 +1,59 @@
+import { demoState } from '@/utils/demoState';
+import { Fieldset, FieldsetProps } from '@aws-amplify/ui-react';
+import * as React from 'react';
+
+import { FieldsetPropControlsProps } from './FieldsetPropControls';
+
+interface UseFieldsetProps {
+ (initialValues: FieldsetProps): FieldsetPropControlsProps;
+}
+
+export const useFieldsetProps: UseFieldsetProps = (initialValues) => {
+ const [direction, setDirection] = React.useState
(
+ initialValues.direction
+ );
+ const [isDisabled, setIsDisabled] = React.useState<
+ FieldsetProps['isDisabled']
+ >(initialValues.isDisabled);
+ const [legend, setLegend] = React.useState(
+ initialValues.legend
+ );
+ const [legendHidden, setLegendHidden] = React.useState<
+ FieldsetProps['legendHidden']
+ >(initialValues.legendHidden);
+ const [size, setSize] = React.useState(
+ initialValues.size
+ );
+ const [variation, setVariation] = React.useState(
+ initialValues.variation
+ );
+
+ React.useEffect(() => {
+ demoState.set(Fieldset.displayName, {
+ direction,
+ isDisabled,
+ legend,
+ legendHidden,
+ size,
+ variation,
+ });
+ }, [direction, isDisabled, legend, legendHidden, size, variation]);
+
+ return React.useMemo(
+ () => ({
+ direction,
+ isDisabled,
+ legend,
+ legendHidden,
+ size,
+ variation,
+ setDirection,
+ setIsDisabled,
+ setLegend,
+ setLegendHidden,
+ setSize,
+ setVariation,
+ }),
+ [direction, isDisabled, legend, legendHidden, size, variation]
+ );
+};
diff --git a/docs/src/pages/[platform]/components/input/index.page.mdx b/docs/src/pages/[platform]/components/input/index.page.mdx
index 0d308fce42e..572dce89633 100644
--- a/docs/src/pages/[platform]/components/input/index.page.mdx
+++ b/docs/src/pages/[platform]/components/input/index.page.mdx
@@ -1,7 +1,7 @@
---
title: Input
description: Input allows users to enter text content.
-# themeSource: packages/ui/src/theme/tokens/components/input.ts
+themeSource: packages/ui/src/theme/tokens/components/input.ts
reactSource: packages/react/src/primitives/Input/Input.tsx
mdnUrl: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
htmlElement: input
diff --git a/docs/src/pages/[platform]/components/input/react.mdx b/docs/src/pages/[platform]/components/input/react.mdx
index 046941bc5eb..320a0926890 100644
--- a/docs/src/pages/[platform]/components/input/react.mdx
+++ b/docs/src/pages/[platform]/components/input/react.mdx
@@ -178,7 +178,7 @@ Input primitive comes styled for text input only (type `text`, `date`, `number`,
## Styling
-{/*
+
@@ -190,7 +190,7 @@ Input primitive comes styled for text input only (type `text`, `date`, `number`,
- */}
+
### Global styling
diff --git a/docs/src/pages/[platform]/components/message/index.page.mdx b/docs/src/pages/[platform]/components/message/index.page.mdx
index 02f01be08e4..bd75804cad0 100644
--- a/docs/src/pages/[platform]/components/message/index.page.mdx
+++ b/docs/src/pages/[platform]/components/message/index.page.mdx
@@ -1,8 +1,8 @@
---
title: Message
description: A Message can be used to display feedback to the user.
-# themeSource: packages/ui/src/theme/tokens/components/message.ts
-# reactSource: packages/react/src/primitives/Message/Message.tsx
+themeSource: packages/ui/src/theme/tokens/components/message.ts
+reactSource: packages/react/src/primitives/Message/Message.tsx
mdnUrl: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
htmlElement: div
supportedFrameworks: react
diff --git a/docs/src/pages/[platform]/components/message/react.mdx b/docs/src/pages/[platform]/components/message/react.mdx
index 70b9ddbef38..95d1ecfdcc1 100644
--- a/docs/src/pages/[platform]/components/message/react.mdx
+++ b/docs/src/pages/[platform]/components/message/react.mdx
@@ -77,7 +77,7 @@ Message accepts the `variation` prop which allows for different background and b
### Dismissable
-Messages can be dismissed by setting `isDismissible={true}`. Additional dismiss behavior can be added by passing a function to the `onDismiss` prop. By default, we provide accessible button text that is hidden visually with [VisuallyHidden](./visuallyhidden); you can override this label by using the `dismissButtonLabel` prop.
+Messages can be dismissed by setting `isDismissible={true}`. Additional dismiss behavior can be added by passing a function to the `onDismiss` prop. By default, we provide accessible button text that is hidden visually with [VisuallyHidden](./visuallyhidden); you can override this label by using the `dismissLabel` prop.
For more control over the appearance and functionality of the dismiss button, consider [using Message as a composable component](#composable).
@@ -93,17 +93,19 @@ For more control over the appearance and functionality of the dismiss button, co
## Styling
-### Theme
+
+
+
+
+
-
-
-
- ```jsx file=./examples/MessageThemeExample.tsx
+ ```tsx file=./examples/MessageThemeExample.tsx
```
-
-
+
+
+
### Target classes
diff --git a/docs/src/styles/index.scss b/docs/src/styles/index.scss
index b20dc900d54..45b29ed01ff 100644
--- a/docs/src/styles/index.scss
+++ b/docs/src/styles/index.scss
@@ -30,6 +30,7 @@
@import './primitives/collectionStyles.css';
@import './primitives/dividerStyles.css';
@import './primitives/expanderStyles.css';
+@import './primitives/fieldsetStyles.css';
@import './primitives/flexStyles.css';
@import './primitives/headingStyles.css';
@import './primitives/iconStyles.css';
diff --git a/docs/src/styles/primitives/fieldsetStyles.css b/docs/src/styles/primitives/fieldsetStyles.css
new file mode 100644
index 00000000000..fa925035c59
--- /dev/null
+++ b/docs/src/styles/primitives/fieldsetStyles.css
@@ -0,0 +1,4 @@
+.purple-fieldset {
+ background-color: var(--amplify-colors-purple-10);
+ border-color: var(--amplify-colors-purple-60);
+}
diff --git a/examples/angular/package.json b/examples/angular/package.json
index 7e746ea4eb8..08f83ba5264 100644
--- a/examples/angular/package.json
+++ b/examples/angular/package.json
@@ -20,7 +20,7 @@
"@angular/platform-browser": "^14.3.0",
"@angular/platform-browser-dynamic": "^14.3.0",
"@angular/router": "^14.3.0",
- "@aws-amplify/ui-angular": "^4.0.7",
+ "@aws-amplify/ui-angular": "^4.0.8",
"aws-amplify": "latest",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
diff --git a/examples/next/package.json b/examples/next/package.json
index cdcf7c43285..4f6a4a9122c 100644
--- a/examples/next/package.json
+++ b/examples/next/package.json
@@ -10,10 +10,10 @@
"lint": "next lint"
},
"dependencies": {
- "@aws-amplify/ui-react": "^5.2.0",
- "@aws-amplify/ui-react-liveness": "^2.0.5",
- "@aws-amplify/ui-react-storage": "^2.2.0",
- "@aws-amplify/ui-react-notifications": "^1.0.11",
+ "@aws-amplify/ui-react": "^5.3.0",
+ "@aws-amplify/ui-react-liveness": "^2.0.6",
+ "@aws-amplify/ui-react-storage": "^2.3.0",
+ "@aws-amplify/ui-react-notifications": "^1.0.12",
"@aws-amplify/ui-react-geo": "^1.0.2",
"@aws-sdk/credential-providers": "^3.370.0",
"aws-amplify": "latest",
diff --git a/examples/vue/package.json b/examples/vue/package.json
index 838615161ff..2ec0594fd05 100644
--- a/examples/vue/package.json
+++ b/examples/vue/package.json
@@ -10,7 +10,7 @@
"start": "vite preview --port 3000"
},
"dependencies": {
- "@aws-amplify/ui-vue": "^3.1.26",
+ "@aws-amplify/ui-vue": "^3.1.27",
"aws-amplify": "latest",
"vue": "^3.0.5",
"vue-router": "4"
diff --git a/packages/angular/projects/ui-angular/CHANGELOG.md b/packages/angular/projects/ui-angular/CHANGELOG.md
index de1dbd2ed58..b5bffcca13b 100644
--- a/packages/angular/projects/ui-angular/CHANGELOG.md
+++ b/packages/angular/projects/ui-angular/CHANGELOG.md
@@ -1,5 +1,12 @@
# @aws-amplify/ui-angular
+## 4.0.8
+
+### Patch Changes
+
+- Updated dependencies [[`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18), [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689), [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53), [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26), [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066), [`64fba0fd2`](https://github.com/aws-amplify/amplify-ui/commit/64fba0fd2ec4a0c5061b461f527c8a45235eee13)]:
+ - @aws-amplify/ui@5.8.0
+
## 4.0.7
### Patch Changes
diff --git a/packages/angular/projects/ui-angular/package.json b/packages/angular/projects/ui-angular/package.json
index be76683906f..811c00202bd 100644
--- a/packages/angular/projects/ui-angular/package.json
+++ b/packages/angular/projects/ui-angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@aws-amplify/ui-angular",
- "version": "4.0.7",
+ "version": "4.0.8",
"scripts": {
"build": "yarn --cwd ../../ build",
"dev": "yarn --cwd ../../ dev",
@@ -19,7 +19,7 @@
"aws-amplify": "^5.0.1"
},
"dependencies": {
- "@aws-amplify/ui": "5.7.2",
+ "@aws-amplify/ui": "5.8.0",
"classnames": "2.3.1",
"nanoid": "3.1.31",
"qrcode": "1.5.0",
diff --git a/packages/angular/projects/ui-angular/src/version.ts b/packages/angular/projects/ui-angular/src/version.ts
index 353ac268e1f..d92c42eb3fa 100644
--- a/packages/angular/projects/ui-angular/src/version.ts
+++ b/packages/angular/projects/ui-angular/src/version.ts
@@ -1 +1 @@
-export const VERSION = '4.0.7';
+export const VERSION = '4.0.8';
diff --git a/packages/e2e/features/ui/components/liveness/disable-start-screen.feature b/packages/e2e/features/ui/components/liveness/disable-start-screen.feature
index 7a9a468c482..e27051c3fcd 100644
--- a/packages/e2e/features/ui/components/liveness/disable-start-screen.feature
+++ b/packages/e2e/features/ui/components/liveness/disable-start-screen.feature
@@ -13,6 +13,6 @@ Feature: Disable Start Screen
Scenario: See camera module and instructions
Then I see "liveness-detector" element
Then I see "connecting"
- Then I see "Face didn't fill oval within time limit."
+ Then I see "Face didn't fit inside oval in time limit."
Then I click the "Try again" button
Then I see "Loading"
diff --git a/packages/e2e/features/ui/components/liveness/liveness-detector.feature b/packages/e2e/features/ui/components/liveness/liveness-detector.feature
index 394ac07d2c2..1939c9a2c2c 100644
--- a/packages/e2e/features/ui/components/liveness/liveness-detector.feature
+++ b/packages/e2e/features/ui/components/liveness/liveness-detector.feature
@@ -24,6 +24,6 @@ Feature: Liveness Detector
Then I see "liveness-detector" element
Then I see "connecting"
Then I see "Move closer"
- Then I see "Face didn't fill oval within time limit."
+ Then I see "Face didn't fit inside oval in time limit."
Then I click the "Try again" button
Then I see the "Begin check" button
diff --git a/packages/e2e/features/ui/components/liveness/start-screen.feature b/packages/e2e/features/ui/components/liveness/start-screen.feature
index 08480ee088a..c3b0719d3bb 100644
--- a/packages/e2e/features/ui/components/liveness/start-screen.feature
+++ b/packages/e2e/features/ui/components/liveness/start-screen.feature
@@ -25,4 +25,4 @@ Feature: Liveness Start Screen
Then I see "Make sure your face is not covered with sunglasses or a mask."
Then I see "Move to a well-lit place that is not in direct sunlight."
Then I see "Maximize your screen's brightness."
- Then I see "When an oval appears, fill the oval with your face within 7 seconds."
+ Then I see "When an oval appears, follow the instructions to fit your face in it."
diff --git a/packages/e2e/features/ui/components/liveness/with-credential-provider.feature b/packages/e2e/features/ui/components/liveness/with-credential-provider.feature
index ab3b9a82195..6793f854712 100644
--- a/packages/e2e/features/ui/components/liveness/with-credential-provider.feature
+++ b/packages/e2e/features/ui/components/liveness/with-credential-provider.feature
@@ -17,6 +17,6 @@ Liveness component supports using a custom credential provider.
Then I see "liveness-detector" element
Then I see "connecting"
Then I see "Move closer"
- Then I see "Face didn't fill oval within time limit."
+ Then I see "Face didn't fit inside oval in time limit."
Then I click the "Try again" button
Then I see the "Begin check" button
diff --git a/packages/e2e/package.json b/packages/e2e/package.json
index 59fd2ebe362..3bcac07c3f0 100644
--- a/packages/e2e/package.json
+++ b/packages/e2e/package.json
@@ -30,7 +30,7 @@
]
},
"devDependencies": {
- "@aws-amplify/ui": "^5.7.2",
+ "@aws-amplify/ui": "^5.8.0",
"@badeball/cypress-cucumber-preprocessor": "^16.0.3",
"@bahmutov/cypress-esbuild-preprocessor": "~2.2.0",
"@cucumber/cucumber": "^9.3.0",
diff --git a/packages/react-core-notifications/CHANGELOG.md b/packages/react-core-notifications/CHANGELOG.md
index 4e5f5e71062..a9ac6cd7a7f 100644
--- a/packages/react-core-notifications/CHANGELOG.md
+++ b/packages/react-core-notifications/CHANGELOG.md
@@ -1,5 +1,13 @@
# @aws-amplify/ui-react-core-notifications
+## 1.0.9
+
+### Patch Changes
+
+- Updated dependencies [[`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18), [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689), [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53), [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26), [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066), [`5bc0c8a32`](https://github.com/aws-amplify/amplify-ui/commit/5bc0c8a32d1552313df496f96b96738637d0b157), [`64fba0fd2`](https://github.com/aws-amplify/amplify-ui/commit/64fba0fd2ec4a0c5061b461f527c8a45235eee13)]:
+ - @aws-amplify/ui@5.8.0
+ - @aws-amplify/ui-react-core@2.1.32
+
## 1.0.8
### Patch Changes
diff --git a/packages/react-core-notifications/package.json b/packages/react-core-notifications/package.json
index eaf8aa65adc..a802454a04a 100644
--- a/packages/react-core-notifications/package.json
+++ b/packages/react-core-notifications/package.json
@@ -1,6 +1,6 @@
{
"name": "@aws-amplify/ui-react-core-notifications",
- "version": "1.0.8",
+ "version": "1.0.9",
"main": "dist/index.js",
"module": "dist/esm/index.mjs",
"exports": {
@@ -36,8 +36,8 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
- "@aws-amplify/ui": "5.7.2",
- "@aws-amplify/ui-react-core": "2.1.31"
+ "@aws-amplify/ui": "5.8.0",
+ "@aws-amplify/ui-react-core": "2.1.32"
},
"peerDependencies": {
"aws-amplify": "^5.0.1",
diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md
index f93b21f8025..7d70a6a6982 100644
--- a/packages/react-core/CHANGELOG.md
+++ b/packages/react-core/CHANGELOG.md
@@ -1,5 +1,14 @@
# @aws-amplify/ui-react-core
+## 2.1.32
+
+### Patch Changes
+
+- [#4381](https://github.com/aws-amplify/amplify-ui/pull/4381) [`5bc0c8a32`](https://github.com/aws-amplify/amplify-ui/commit/5bc0c8a32d1552313df496f96b96738637d0b157) Thanks [@calebpollman](https://github.com/calebpollman)! - chore(ui-react-core): add named returned values to createContextUtilities
+
+- Updated dependencies [[`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18), [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689), [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53), [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26), [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066), [`64fba0fd2`](https://github.com/aws-amplify/amplify-ui/commit/64fba0fd2ec4a0c5061b461f527c8a45235eee13)]:
+ - @aws-amplify/ui@5.8.0
+
## 2.1.31
### Patch Changes
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
index d0d43503f0a..38e956eec4f 100644
--- a/packages/react-core/package.json
+++ b/packages/react-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@aws-amplify/ui-react-core",
- "version": "2.1.31",
+ "version": "2.1.32",
"main": "dist/index.js",
"module": "dist/esm/index.mjs",
"react-native": "dist/index.js",
@@ -31,7 +31,7 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
- "@aws-amplify/ui": "5.7.2",
+ "@aws-amplify/ui": "5.8.0",
"@xstate/react": "3.0.1",
"lodash": "4.17.21",
"xstate": "^4.33.6"
diff --git a/packages/react-liveness/CHANGELOG.md b/packages/react-liveness/CHANGELOG.md
index 9404e788bf7..faae33b0a0a 100644
--- a/packages/react-liveness/CHANGELOG.md
+++ b/packages/react-liveness/CHANGELOG.md
@@ -1,5 +1,15 @@
# @aws-amplify/ui-react-liveness
+## 2.0.6
+
+### Patch Changes
+
+- [#4392](https://github.com/aws-amplify/amplify-ui/pull/4392) [`60f21e0ab`](https://github.com/aws-amplify/amplify-ui/commit/60f21e0ab7761467268cd46ac8ee1e9752df33af) Thanks [@thaddmt](https://github.com/thaddmt)! - chore(liveness): update start screen text to remove 7 seconds
+
+- Updated dependencies [[`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18), [`265f0b482`](https://github.com/aws-amplify/amplify-ui/commit/265f0b48249c89b004a40a1a06abc0c3551f45f7), [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689), [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53), [`5b6c9bfe4`](https://github.com/aws-amplify/amplify-ui/commit/5b6c9bfe4ef1c0727270bffacb5f9e8045a8325d), [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26), [`9471ea53a`](https://github.com/aws-amplify/amplify-ui/commit/9471ea53a2414879d197adb5f52c8dcb3e0df946), [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066), [`64fba0fd2`](https://github.com/aws-amplify/amplify-ui/commit/64fba0fd2ec4a0c5061b461f527c8a45235eee13)]:
+ - @aws-amplify/ui-react@5.3.0
+ - @aws-amplify/ui@5.8.0
+
## 2.0.5
### Patch Changes
diff --git a/packages/react-liveness/package.json b/packages/react-liveness/package.json
index bc8eea90a5b..5bb2669a924 100644
--- a/packages/react-liveness/package.json
+++ b/packages/react-liveness/package.json
@@ -1,6 +1,6 @@
{
"name": "@aws-amplify/ui-react-liveness",
- "version": "2.0.5",
+ "version": "2.0.6",
"main": "dist/index.js",
"module": "dist/esm/index.mjs",
"exports": {
@@ -48,9 +48,9 @@
"react-dom": ">= 16.14.0"
},
"dependencies": {
- "@aws-amplify/ui": "5.7.2",
- "@aws-amplify/ui-react": "5.2.0",
- "@aws-sdk/client-rekognitionstreaming": "3.398.0",
+ "@aws-amplify/ui": "5.8.0",
+ "@aws-amplify/ui-react": "5.3.0",
+ "@aws-sdk/client-rekognitionstreaming": "3.360.0",
"@tensorflow-models/blazeface": "0.0.7",
"@tensorflow/tfjs-backend-cpu": "3.11.0",
"@tensorflow/tfjs-backend-wasm": "3.11.0",
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/displayText.ts b/packages/react-liveness/src/components/FaceLivenessDetector/displayText.ts
index 7d80e9f32a2..6f2dfeefe1e 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/displayText.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/displayText.ts
@@ -49,7 +49,7 @@ export type StreamDisplayText = {
export const defaultErrorDisplayText = {
timeoutHeaderText: 'Time out',
timeoutMessageText:
- "Face didn't fill oval within time limit. Try again and completely fill oval with face within 7 seconds.",
+ "Face didn't fit inside oval in time limit. Try again and completely fill the oval with face in it.",
faceDistanceHeaderText: 'Forward movement detected',
faceDistanceMessageText: 'Avoid moving closer when connecting.',
multipleFacesHeaderText: 'Multiple faces detected',
@@ -88,7 +88,7 @@ export const defaultLivenessDisplayText: Required = {
tooFarAltText:
"Illustration of a person's face inside of an oval; there is a gap between the perimeter of the face and the boundaries of the oval.",
instructionListStepOneText:
- 'When an oval appears, fill the oval with your face within 7 seconds.',
+ 'When an oval appears, follow the instructions to fit your face in it.',
instructionListStepTwoText: "Maximize your screen's brightness.",
instructionListStepThreeText:
'Make sure your face is not covered with sunglasses or a mask.',
diff --git a/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts b/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts
index 5d7fcca3824..b9a2e6583f2 100644
--- a/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts
+++ b/packages/react-liveness/src/components/FaceLivenessDetector/service/machine/index.ts
@@ -48,7 +48,6 @@ import {
import { STATIC_VIDEO_CONSTRAINTS } from '../../StartLiveness/helpers';
export const MIN_FACE_MATCH_TIME = 500;
-const DEFAULT_FACE_FIT_TIMEOUT = 7000;
// timer metrics variables
let faceDetectedTimestamp: number;
@@ -675,13 +674,7 @@ export const livenessMachine = createMachine(
sendTimeoutAfterOvalMatchDelay: actions.send(
{ type: 'TIMEOUT' },
{
- delay: (context) => {
- return (
- context.serverSessionInformation?.Challenge
- ?.FaceMovementAndLightChallenge?.ChallengeConfig
- ?.OvalFitTimeout || DEFAULT_FACE_FIT_TIMEOUT
- );
- },
+ delay: 7000,
id: 'ovalMatchTimeout',
}
),
diff --git a/packages/react-liveness/src/version.ts b/packages/react-liveness/src/version.ts
index becdf4bbc3d..bf049c30482 100644
--- a/packages/react-liveness/src/version.ts
+++ b/packages/react-liveness/src/version.ts
@@ -1 +1 @@
-export const VERSION = '2.0.5';
+export const VERSION = '2.0.6';
diff --git a/packages/react-native/CHANGELOG.md b/packages/react-native/CHANGELOG.md
index 239a3a6e1c3..d178474e10b 100644
--- a/packages/react-native/CHANGELOG.md
+++ b/packages/react-native/CHANGELOG.md
@@ -1,5 +1,16 @@
# @aws-amplify/ui-react-native
+## 1.2.27
+
+### Patch Changes
+
+- [#4368](https://github.com/aws-amplify/amplify-ui/pull/4368) [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26) Thanks [@hbuchel](https://github.com/hbuchel)! - chore(ui): adds info, warning, and success border tokens. updates background color tokens for info, warning, success and error.
+
+- Updated dependencies [[`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18), [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689), [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53), [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26), [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066), [`5bc0c8a32`](https://github.com/aws-amplify/amplify-ui/commit/5bc0c8a32d1552313df496f96b96738637d0b157), [`64fba0fd2`](https://github.com/aws-amplify/amplify-ui/commit/64fba0fd2ec4a0c5061b461f527c8a45235eee13)]:
+ - @aws-amplify/ui@5.8.0
+ - @aws-amplify/ui-react-core@2.1.32
+ - @aws-amplify/ui-react-core-notifications@1.0.9
+
## 1.2.26
### Patch Changes
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
index f5e2304a28f..45414e806f3 100644
--- a/packages/react-native/package.json
+++ b/packages/react-native/package.json
@@ -1,6 +1,6 @@
{
"name": "@aws-amplify/ui-react-native",
- "version": "1.2.26",
+ "version": "1.2.27",
"main": "lib/index.js",
"module": "dist/index.js",
"react-native": "src/index.ts",
@@ -40,9 +40,9 @@
"rimraf": "^3.0.2"
},
"dependencies": {
- "@aws-amplify/ui": "5.7.2",
- "@aws-amplify/ui-react-core": "2.1.31",
- "@aws-amplify/ui-react-core-notifications": "1.0.8"
+ "@aws-amplify/ui": "5.8.0",
+ "@aws-amplify/ui-react-core": "2.1.32",
+ "@aws-amplify/ui-react-core-notifications": "1.0.9"
},
"peerDependencies": {
"aws-amplify": "^5.0.1",
diff --git a/packages/react-native/src/version.ts b/packages/react-native/src/version.ts
index 7eaaea902ad..ef3681800dc 100644
--- a/packages/react-native/src/version.ts
+++ b/packages/react-native/src/version.ts
@@ -1 +1 @@
-export const VERSION = '1.2.26';
+export const VERSION = '1.2.27';
diff --git a/packages/react-notifications/CHANGELOG.md b/packages/react-notifications/CHANGELOG.md
index d94eee79193..ed01259e2fc 100644
--- a/packages/react-notifications/CHANGELOG.md
+++ b/packages/react-notifications/CHANGELOG.md
@@ -1,5 +1,14 @@
# @aws-amplify/ui-react-notifications
+## 1.0.12
+
+### Patch Changes
+
+- Updated dependencies [[`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18), [`265f0b482`](https://github.com/aws-amplify/amplify-ui/commit/265f0b48249c89b004a40a1a06abc0c3551f45f7), [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689), [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53), [`5b6c9bfe4`](https://github.com/aws-amplify/amplify-ui/commit/5b6c9bfe4ef1c0727270bffacb5f9e8045a8325d), [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26), [`9471ea53a`](https://github.com/aws-amplify/amplify-ui/commit/9471ea53a2414879d197adb5f52c8dcb3e0df946), [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066), [`64fba0fd2`](https://github.com/aws-amplify/amplify-ui/commit/64fba0fd2ec4a0c5061b461f527c8a45235eee13)]:
+ - @aws-amplify/ui-react@5.3.0
+ - @aws-amplify/ui@5.8.0
+ - @aws-amplify/ui-react-core-notifications@1.0.9
+
## 1.0.11
### Patch Changes
diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json
index ba371c0d381..eedb8d0342b 100644
--- a/packages/react-notifications/package.json
+++ b/packages/react-notifications/package.json
@@ -1,6 +1,6 @@
{
"name": "@aws-amplify/ui-react-notifications",
- "version": "1.0.11",
+ "version": "1.0.12",
"main": "dist/index.js",
"module": "dist/esm/index.mjs",
"exports": {
@@ -40,9 +40,9 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
- "@aws-amplify/ui": "5.7.2",
- "@aws-amplify/ui-react": "5.2.0",
- "@aws-amplify/ui-react-core-notifications": "1.0.8",
+ "@aws-amplify/ui": "5.8.0",
+ "@aws-amplify/ui-react": "5.3.0",
+ "@aws-amplify/ui-react-core-notifications": "1.0.9",
"classnames": "2.3.1",
"tinycolor2": "1.4.2"
},
diff --git a/packages/react-storage/CHANGELOG.md b/packages/react-storage/CHANGELOG.md
index 15f5d38afbc..080f09027d5 100644
--- a/packages/react-storage/CHANGELOG.md
+++ b/packages/react-storage/CHANGELOG.md
@@ -1,5 +1,48 @@
# @aws-amplify/ui-react-storage
+## 2.3.0
+
+### Minor Changes
+
+- [#4359](https://github.com/aws-amplify/amplify-ui/pull/4359) [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - feat(react): DropZone component
+
+ ```jsx
+ export default function DefaultDropZoneExample() {
+ const [files, setFiles] = React.useState([]);
+ return (
+ <>
+ {
+ setFiles(files);
+ }}
+ >
+ Drag images here
+
+ {files.map((file) => (
+ {file.name}
+ ))}
+
+ );
+ }
+ ```
+
+- [#4367](https://github.com/aws-amplify/amplify-ui/pull/4367) [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53) Thanks [@ioanabrooks](https://github.com/ioanabrooks)! - feat(ui-react-storage): Added upload actions and option to upload files on click. Usage:
+
+ ```
+
+ ```
+
+### Patch Changes
+
+- Updated dependencies [[`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18), [`265f0b482`](https://github.com/aws-amplify/amplify-ui/commit/265f0b48249c89b004a40a1a06abc0c3551f45f7), [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689), [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53), [`5b6c9bfe4`](https://github.com/aws-amplify/amplify-ui/commit/5b6c9bfe4ef1c0727270bffacb5f9e8045a8325d), [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26), [`9471ea53a`](https://github.com/aws-amplify/amplify-ui/commit/9471ea53a2414879d197adb5f52c8dcb3e0df946), [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066), [`5bc0c8a32`](https://github.com/aws-amplify/amplify-ui/commit/5bc0c8a32d1552313df496f96b96738637d0b157), [`64fba0fd2`](https://github.com/aws-amplify/amplify-ui/commit/64fba0fd2ec4a0c5061b461f527c8a45235eee13)]:
+ - @aws-amplify/ui-react@5.3.0
+ - @aws-amplify/ui@5.8.0
+ - @aws-amplify/ui-react-core@2.1.32
+
## 2.2.0
### Minor Changes
diff --git a/packages/react-storage/package.json b/packages/react-storage/package.json
index 581fa4a8abd..ab1718c9cd5 100644
--- a/packages/react-storage/package.json
+++ b/packages/react-storage/package.json
@@ -1,6 +1,6 @@
{
"name": "@aws-amplify/ui-react-storage",
- "version": "2.2.0",
+ "version": "2.3.0",
"main": "dist/index.js",
"module": "dist/esm/index.mjs",
"exports": {
@@ -40,9 +40,9 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
- "@aws-amplify/ui": "5.7.2",
- "@aws-amplify/ui-react": "5.2.0",
- "@aws-amplify/ui-react-core": "2.1.31",
+ "@aws-amplify/ui": "5.8.0",
+ "@aws-amplify/ui-react": "5.3.0",
+ "@aws-amplify/ui-react-core": "2.1.32",
"classnames": "2.3.1",
"lodash": "4.17.21",
"tslib": "2.4.1"
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 2437aa1456d..a93e2c7c808 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -1,5 +1,82 @@
# @aws-amplify/ui-react
+## 5.3.0
+
+### Minor Changes
+
+- [#4348](https://github.com/aws-amplify/amplify-ui/pull/4348) [`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18) Thanks [@hbuchel](https://github.com/hbuchel)! - feat(react/ui): add new Fieldset Primitive
+
+ Usage:
+
+ ```
+
+ ```
+
+- [#4359](https://github.com/aws-amplify/amplify-ui/pull/4359) [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - feat(react): DropZone component
+
+ ```jsx
+ export default function DefaultDropZoneExample() {
+ const [files, setFiles] = React.useState([]);
+ return (
+ <>
+ {
+ setFiles(files);
+ }}
+ >
+ Drag images here
+
+ {files.map((file) => (
+ {file.name}
+ ))}
+
+ );
+ }
+ ```
+
+### Patch Changes
+
+- [#4372](https://github.com/aws-amplify/amplify-ui/pull/4372) [`265f0b482`](https://github.com/aws-amplify/amplify-ui/commit/265f0b48249c89b004a40a1a06abc0c3551f45f7) Thanks [@hbuchel](https://github.com/hbuchel)! - fix(react): ShowPasswordButton should have aria-hidden="true" on icon
+
+- [#4367](https://github.com/aws-amplify/amplify-ui/pull/4367) [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53) Thanks [@ioanabrooks](https://github.com/ioanabrooks)! - feat(ui-react-storage): Added upload actions and option to upload files on click. Usage:
+
+ ```
+
+ ```
+
+- [#4361](https://github.com/aws-amplify/amplify-ui/pull/4361) [`5b6c9bfe4`](https://github.com/aws-amplify/amplify-ui/commit/5b6c9bfe4ef1c0727270bffacb5f9e8045a8325d) Thanks [@hbuchel](https://github.com/hbuchel)! - feat(react): Add new Message primitive.
+
+ Usage:
+
+ ```
+ Content of the message.
+ ```
+
+- [#4368](https://github.com/aws-amplify/amplify-ui/pull/4368) [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26) Thanks [@hbuchel](https://github.com/hbuchel)! - chore(ui): adds info, warning, and success border tokens. updates background color tokens for info, warning, success and error.
+
+- [#4389](https://github.com/aws-amplify/amplify-ui/pull/4389) [`9471ea53a`](https://github.com/aws-amplify/amplify-ui/commit/9471ea53a2414879d197adb5f52c8dcb3e0df946) Thanks [@hbuchel](https://github.com/hbuchel)! - chore(react): update tests for disabled Fieldset
+
+- [#4384](https://github.com/aws-amplify/amplify-ui/pull/4384) [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066) Thanks [@reesscot](https://github.com/reesscot)! - feat: Input and Label primitives
+
+ ```jx
+ export const InputLabelExample = () => (
+ <>
+
+
+
+ );
+ ```
+
+- Updated dependencies [[`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18), [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689), [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53), [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26), [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066), [`5bc0c8a32`](https://github.com/aws-amplify/amplify-ui/commit/5bc0c8a32d1552313df496f96b96738637d0b157), [`64fba0fd2`](https://github.com/aws-amplify/amplify-ui/commit/64fba0fd2ec4a0c5061b461f527c8a45235eee13)]:
+ - @aws-amplify/ui@5.8.0
+ - @aws-amplify/ui-react-core@2.1.32
+
## 5.2.0
### Minor Changes
diff --git a/packages/react/__tests__/__snapshots__/exports.ts.snap b/packages/react/__tests__/__snapshots__/exports.ts.snap
index c9396cac39f..958a4f005b9 100644
--- a/packages/react/__tests__/__snapshots__/exports.ts.snap
+++ b/packages/react/__tests__/__snapshots__/exports.ts.snap
@@ -24,6 +24,7 @@ Array [
"ExpanderItem",
"FieldGroupIcon",
"FieldGroupIconButton",
+ "Fieldset",
"FileUploader",
"Flex",
"Grid",
@@ -4257,6 +4258,295 @@ Object {
},
},
},
+ "Fieldset": Object {
+ "properties": Object {
+ "alignContent": Object {
+ "type": "string",
+ },
+ "alignItems": Object {
+ "type": "string",
+ },
+ "alignSelf": Object {
+ "type": "string",
+ },
+ "area": Object {
+ "type": "string",
+ },
+ "ariaLabel": Object {
+ "type": "string",
+ },
+ "ariaValuetext": Object {
+ "type": "string",
+ },
+ "backgroundColor": Object {
+ "type": "string",
+ },
+ "backgroundImage": Object {
+ "type": "string",
+ },
+ "basis": Object {
+ "type": "string",
+ },
+ "border": Object {
+ "type": "string",
+ },
+ "borderColor": Object {
+ "type": "string",
+ },
+ "borderRadius": Object {
+ "type": "string",
+ },
+ "borderStyle": Object {
+ "type": "string",
+ },
+ "borderWidth": Object {
+ "type": "string",
+ },
+ "bottom": Object {
+ "type": "string",
+ },
+ "boxShadow": Object {
+ "type": "string",
+ },
+ "children": Object {
+ "type": "string",
+ },
+ "className": Object {
+ "type": "string",
+ },
+ "color": Object {
+ "type": "string",
+ },
+ "column": Object {
+ "type": "string",
+ },
+ "columnEnd": Object {
+ "type": "string",
+ },
+ "columnGap": Object {
+ "type": "string",
+ },
+ "columnSpan": Object {
+ "type": "string",
+ },
+ "columnStart": Object {
+ "type": "string",
+ },
+ "direction": Object {
+ "type": "string",
+ },
+ "display": Object {
+ "type": "string",
+ },
+ "flex": Object {
+ "type": "string",
+ },
+ "fontFamily": Object {
+ "type": "string",
+ },
+ "fontSize": Object {
+ "type": "string",
+ },
+ "fontStyle": Object {
+ "type": "string",
+ },
+ "fontWeight": Object {
+ "type": "string",
+ },
+ "form": Object {
+ "type": "string",
+ },
+ "gap": Object {
+ "type": "string",
+ },
+ "grow": Object {
+ "type": "string",
+ },
+ "height": Object {
+ "type": "string",
+ },
+ "id": Object {
+ "type": "string",
+ },
+ "inert": Object {
+ "type": "boolean",
+ },
+ "isDisabled": Object {
+ "type": "boolean",
+ },
+ "justifyContent": Object {
+ "type": "string",
+ },
+ "left": Object {
+ "type": "string",
+ },
+ "legend": Object {
+ "type": "string",
+ },
+ "legendHidden": Object {
+ "type": "boolean",
+ },
+ "letterSpacing": Object {
+ "type": "string",
+ },
+ "lineHeight": Object {
+ "type": "string",
+ },
+ "margin": Object {
+ "type": "string",
+ },
+ "marginBlock": Object {
+ "type": "string",
+ },
+ "marginBlockEnd": Object {
+ "type": "string",
+ },
+ "marginBlockStart": Object {
+ "type": "string",
+ },
+ "marginBottom": Object {
+ "type": "string",
+ },
+ "marginInline": Object {
+ "type": "string",
+ },
+ "marginInlineEnd": Object {
+ "type": "string",
+ },
+ "marginInlineStart": Object {
+ "type": "string",
+ },
+ "marginLeft": Object {
+ "type": "string",
+ },
+ "marginRight": Object {
+ "type": "string",
+ },
+ "marginTop": Object {
+ "type": "string",
+ },
+ "maxHeight": Object {
+ "type": "string",
+ },
+ "maxWidth": Object {
+ "type": "string",
+ },
+ "minHeight": Object {
+ "type": "string",
+ },
+ "minWidth": Object {
+ "type": "string",
+ },
+ "name": Object {
+ "type": "string",
+ },
+ "opacity": Object {
+ "type": "string",
+ },
+ "order": Object {
+ "type": "string",
+ },
+ "overflow": Object {
+ "type": "string",
+ },
+ "padding": Object {
+ "type": "string",
+ },
+ "paddingBlock": Object {
+ "type": "string",
+ },
+ "paddingBlockEnd": Object {
+ "type": "string",
+ },
+ "paddingBlockStart": Object {
+ "type": "string",
+ },
+ "paddingBottom": Object {
+ "type": "string",
+ },
+ "paddingInline": Object {
+ "type": "string",
+ },
+ "paddingInlineEnd": Object {
+ "type": "string",
+ },
+ "paddingInlineStart": Object {
+ "type": "string",
+ },
+ "paddingLeft": Object {
+ "type": "string",
+ },
+ "paddingRight": Object {
+ "type": "string",
+ },
+ "paddingTop": Object {
+ "type": "string",
+ },
+ "position": Object {
+ "type": "string",
+ },
+ "right": Object {
+ "type": "string",
+ },
+ "role": Object {
+ "type": "string",
+ },
+ "row": Object {
+ "type": "string",
+ },
+ "rowEnd": Object {
+ "type": "string",
+ },
+ "rowGap": Object {
+ "type": "string",
+ },
+ "rowSpan": Object {
+ "type": "string",
+ },
+ "rowStart": Object {
+ "type": "string",
+ },
+ "shrink": Object {
+ "type": "string",
+ },
+ "size": Object {
+ "type": "string",
+ },
+ "testId": Object {
+ "type": "string",
+ },
+ "textAlign": Object {
+ "type": "string",
+ },
+ "textDecoration": Object {
+ "type": "string",
+ },
+ "textTransform": Object {
+ "type": "string",
+ },
+ "top": Object {
+ "type": "string",
+ },
+ "transform": Object {
+ "type": "string",
+ },
+ "transformOrigin": Object {
+ "type": "string",
+ },
+ "variation": Object {
+ "type": "string",
+ },
+ "whiteSpace": Object {
+ "type": "string",
+ },
+ "width": Object {
+ "type": "string",
+ },
+ "wrap": Object {
+ "type": "string",
+ },
+ },
+ },
"Flex": Object {
"properties": Object {
"alignContent": Object {
diff --git a/packages/react/package.json b/packages/react/package.json
index 8feb413a46a..a6614c5f019 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@aws-amplify/ui-react",
- "version": "5.2.0",
+ "version": "5.3.0",
"main": "dist/index.js",
"module": "dist/esm/index.mjs",
"exports": {
@@ -47,8 +47,8 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
- "@aws-amplify/ui": "5.7.2",
- "@aws-amplify/ui-react-core": "2.1.31",
+ "@aws-amplify/ui": "5.8.0",
+ "@aws-amplify/ui-react-core": "2.1.32",
"@radix-ui/react-accordion": "1.0.0",
"@radix-ui/react-direction": "1.0.0",
"@radix-ui/react-dropdown-menu": "1.0.0",
diff --git a/packages/react/src/primitives/Button/Button.tsx b/packages/react/src/primitives/Button/Button.tsx
index 58e29afc57c..4ddaae35477 100644
--- a/packages/react/src/primitives/Button/Button.tsx
+++ b/packages/react/src/primitives/Button/Button.tsx
@@ -9,6 +9,8 @@ import {
Primitive,
} from '../types';
import { ComponentClassNames } from '../shared/constants';
+
+import { useFieldset } from '../Fieldset/useFieldset';
import { Flex } from '../Flex';
import { Loader } from '../Loader';
import { View } from '../View';
@@ -40,6 +42,11 @@ const ButtonPrimitive: Primitive = (
? `${variation ?? 'outlined'}--${colorTheme}`
: undefined;
+ const { isFieldsetDisabled } = useFieldset();
+ const shouldBeDisabled = isFieldsetDisabled
+ ? isFieldsetDisabled
+ : isDisabled ?? isLoading ?? rest['disabled'];
+
const componentClasses = classNames(
ComponentClassNames.Button,
ComponentClassNames.FieldGroupControl,
@@ -49,7 +56,7 @@ const ButtonPrimitive: Primitive = (
classNameModifierByFlag(
ComponentClassNames.Button,
'disabled',
- isDisabled ?? isLoading ?? rest['disabled']
+ shouldBeDisabled
),
classNameModifierByFlag(ComponentClassNames.Button, 'loading', isLoading),
classNameModifierByFlag(
@@ -69,7 +76,7 @@ const ButtonPrimitive: Primitive = (
data-loading={isLoading}
data-size={size}
data-variation={variation}
- isDisabled={isDisabled ?? isLoading}
+ isDisabled={shouldBeDisabled}
type={type}
{...rest}
>
diff --git a/packages/react/src/primitives/Button/__tests__/Button.test.tsx b/packages/react/src/primitives/Button/__tests__/Button.test.tsx
index f75d30284f6..5ac42e0f0be 100644
--- a/packages/react/src/primitives/Button/__tests__/Button.test.tsx
+++ b/packages/react/src/primitives/Button/__tests__/Button.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from '../Button';
+import { Fieldset } from '../../Fieldset';
import { ButtonColorTheme } from '../../types';
import { ComponentClassNames } from '../../shared';
@@ -238,6 +239,20 @@ describe('Button test suite', () => {
expect(button).toBeDisabled();
});
+ it('should always be disabled if parent Fieldset isDisabled', async () => {
+ render(
+
+ );
+
+ const button = await screen.findByTestId('button');
+ const buttonDisabled = await screen.findByTestId('buttonWithDisabledProp');
+ expect(button).toHaveAttribute('disabled');
+ expect(buttonDisabled).toHaveAttribute('disabled');
+ });
+
it('should set loading state correctly if isLoading is set to true', async () => {
render();
diff --git a/packages/react/src/primitives/Checkbox/Checkbox.tsx b/packages/react/src/primitives/Checkbox/Checkbox.tsx
index bd60f6d31dc..efb91315414 100644
--- a/packages/react/src/primitives/Checkbox/Checkbox.tsx
+++ b/packages/react/src/primitives/Checkbox/Checkbox.tsx
@@ -16,6 +16,7 @@ import { ComponentClassNames } from '../shared/constants';
import { splitPrimitiveProps } from '../utils/splitPrimitiveProps';
import { classNameModifierByFlag } from '../shared/utils';
import { View } from '../View';
+import { useFieldset } from '../Fieldset/useFieldset';
const CheckboxPrimitive: Primitive = (
{
@@ -41,6 +42,8 @@ const CheckboxPrimitive: Primitive = (
const [focused, setFocused] = React.useState(false);
const icons = useIcons('checkbox');
+ const { isFieldsetDisabled } = useFieldset();
+ const shouldBeDisabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
const isControlled = controlledChecked !== undefined;
const [localChecked, setLocalChecked] = React.useState(() =>
@@ -93,7 +96,7 @@ const CheckboxPrimitive: Primitive = (
classNameModifierByFlag(
ComponentClassNames.CheckboxButton,
'disabled',
- isDisabled
+ shouldBeDisabled
),
classNameModifierByFlag(
ComponentClassNames.CheckboxButton,
@@ -116,7 +119,7 @@ const CheckboxPrimitive: Primitive = (
classNameModifierByFlag(
ComponentClassNames.CheckboxIcon,
'disabled',
- isDisabled
+ shouldBeDisabled
),
classNameModifierByFlag(
ComponentClassNames.CheckboxIcon,
@@ -127,7 +130,7 @@ const CheckboxPrimitive: Primitive = (
const iconProps = {
className: classNames(iconClasses),
'data-checked': localChecked,
- 'data-disabled': isDisabled,
+ 'data-disabled': shouldBeDisabled,
'data-testid': iconTestId,
};
@@ -154,11 +157,11 @@ const CheckboxPrimitive: Primitive = (
classNameModifierByFlag(
ComponentClassNames.Checkbox,
'disabled',
- isDisabled
+ shouldBeDisabled
),
className
)}
- data-disabled={isDisabled}
+ data-disabled={shouldBeDisabled}
data-label-position={labelPosition}
testId={testId}
{...styleProps}
@@ -169,7 +172,7 @@ const CheckboxPrimitive: Primitive = (
className={ComponentClassNames.CheckboxInput}
data-id={dataId}
defaultChecked={defaultChecked}
- isDisabled={isDisabled}
+ isDisabled={shouldBeDisabled}
onBlur={onBlur}
onChange={onChange}
onFocus={onFocus}
@@ -184,7 +187,7 @@ const CheckboxPrimitive: Primitive = (
className={classNames(ComponentClassNames.CheckboxLabel, {
[ComponentClassNames.VisuallyHidden]: labelHidden,
})}
- data-disabled={isDisabled}
+ data-disabled={shouldBeDisabled}
testId={labelTestId}
>
{label}
@@ -195,7 +198,7 @@ const CheckboxPrimitive: Primitive = (
as="span"
className={flexClasses}
data-checked={checked}
- data-disabled={isDisabled}
+ data-disabled={shouldBeDisabled}
data-focus={focused}
data-error={hasError}
testId={buttonTestId}
diff --git a/packages/react/src/primitives/Checkbox/__tests__/Checkbox.test.tsx b/packages/react/src/primitives/Checkbox/__tests__/Checkbox.test.tsx
index 649e5c5d234..14d6aa251d6 100644
--- a/packages/react/src/primitives/Checkbox/__tests__/Checkbox.test.tsx
+++ b/packages/react/src/primitives/Checkbox/__tests__/Checkbox.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Checkbox } from '../Checkbox';
+import { Fieldset } from '../../Fieldset';
import { CheckboxProps } from '../../types/checkbox';
import { PrimitiveProps } from '../../types/view';
import { ComponentClassNames } from '../../shared/constants';
@@ -78,6 +79,30 @@ describe('Checkbox', () => {
);
});
+ it('should always be disabled if parent Fieldset isDisabled', async () => {
+ render(
+
+ );
+
+ const checkbox = await screen.findByTestId('checkbox');
+ const checkboxDisabled = await screen.findByTestId(
+ 'checkboxWithDisabledProp'
+ );
+ expect(checkbox).toHaveClass(
+ `${ComponentClassNames['Checkbox']}--disabled`
+ );
+ expect(checkboxDisabled).toHaveClass(
+ `${ComponentClassNames['Checkbox']}--disabled`
+ );
+ });
+
it('should render basic props correctly', async () => {
render(getCheckbox({ ...basicProps }));
@@ -127,6 +152,28 @@ describe('Checkbox', () => {
expect(input).toBeChecked();
});
+ it('should be disabled if parent Fieldset isDisabled and checkbox isDisabled={false}', async () => {
+ render(
+
+ );
+
+ const input = await screen.findByRole('checkbox');
+ expect(input).toHaveAttribute('disabled');
+ });
+
+ it('should be disabled if parent Fieldset isDisabled and checkbox isDisabled is not defined', async () => {
+ render(
+
+ );
+
+ const input = await screen.findByRole('checkbox');
+ expect(input).toHaveAttribute('disabled');
+ });
+
it('should be disabled if isDisabled is set to true', async () => {
render(getCheckbox({ ...basicProps, isDisabled: true }));
diff --git a/packages/react/src/primitives/Fieldset/Fieldset.tsx b/packages/react/src/primitives/Fieldset/Fieldset.tsx
new file mode 100644
index 00000000000..a53f00ff6d4
--- /dev/null
+++ b/packages/react/src/primitives/Fieldset/Fieldset.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+import { ComponentClassNames } from '../shared/constants';
+import { classNameModifier } from '../shared/utils';
+
+import { Flex } from '../Flex';
+import { View } from '../View';
+import { VisuallyHidden } from '../VisuallyHidden';
+
+import {
+ FieldsetProps,
+ BaseFieldsetProps,
+ ForwardRefPrimitive,
+ Primitive,
+} from '../types';
+import { FieldsetContext, useFieldset } from './useFieldset';
+
+const FieldsetPrimitive: Primitive = (
+ {
+ children,
+ className,
+ isDisabled,
+ legend,
+ legendHidden,
+ size,
+ testId,
+ variation = 'outlined',
+ ...rest
+ },
+ ref
+) => {
+ const { isFieldsetDisabled } = useFieldset();
+
+ // Fieldsets that are nested within a disabled Fieldset should
+ // also be disabled.
+ const shouldBeDisabled = isFieldsetDisabled ? isFieldsetDisabled : isDisabled;
+ const value = React.useMemo(
+ () => ({
+ isFieldsetDisabled: shouldBeDisabled,
+ }),
+ [shouldBeDisabled]
+ );
+
+ const fieldsetClasses = classNames(
+ ComponentClassNames.Fieldset,
+ classNameModifier(ComponentClassNames.Fieldset, variation),
+ classNameModifier(ComponentClassNames.Fieldset, size),
+ className
+ );
+
+ const legendClasses = classNames(
+ ComponentClassNames.FieldsetLegend,
+ classNameModifier(ComponentClassNames.FieldsetLegend, size),
+ className,
+ {
+ [ComponentClassNames.VisuallyHidden]: legendHidden,
+ }
+ );
+
+ return (
+
+
+ {legend}
+
+ {legend}
+
+
+ {children}
+
+
+ );
+};
+
+/**
+ * [📖 Docs](https://ui.docs.amplify.aws/react/components/fieldset)
+ */
+export const Fieldset: ForwardRefPrimitive =
+ React.forwardRef(FieldsetPrimitive);
+
+Fieldset.displayName = 'Fieldset';
diff --git a/packages/react/src/primitives/Fieldset/__tests__/Fieldset.test.tsx b/packages/react/src/primitives/Fieldset/__tests__/Fieldset.test.tsx
new file mode 100644
index 00000000000..f731d4c6f02
--- /dev/null
+++ b/packages/react/src/primitives/Fieldset/__tests__/Fieldset.test.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { Fieldset } from '../Fieldset';
+
+import { ComponentClassNames } from '../../shared';
+
+describe('Fieldset', () => {
+ it('should render Fieldset variations', async () => {
+ render(
+
+
+
+
+ );
+ const outlined = await screen.findByTestId('outlined');
+ const plain = await screen.findByTestId('plain');
+
+ expect(outlined.classList).toContain(
+ `${ComponentClassNames.Fieldset}--outlined`
+ );
+ expect(plain.classList).toContain(`${ComponentClassNames.Fieldset}--plain`);
+ });
+
+ it('should forward ref to fieldset DOM element', async () => {
+ const ref = React.createRef();
+ const fieldsetText = 'fieldset content';
+ const testId = 'fieldsetWithRef';
+
+ render(
+
+ );
+
+ await screen.findByTestId(testId);
+ expect(ref.current?.nodeName).toBe('FIELDSET');
+ expect(ref.current?.innerHTML).toContain(fieldsetText);
+ });
+
+ it('should render classname and custom classname', async () => {
+ const testId = 'customClassFieldset';
+ const className = 'test-class';
+ render();
+
+ const fieldset = await screen.findByTestId(testId);
+ expect(fieldset).toHaveClass(ComponentClassNames.Fieldset, className);
+ });
+
+ it('should render fieldset sizes', async () => {
+ render(
+
+
+
+
+ );
+
+ const small = await screen.findByTestId('small');
+ const large = await screen.findByTestId('large');
+
+ expect(small.classList).toContain(`${ComponentClassNames.Fieldset}--small`);
+ expect(large.classList).toContain(`${ComponentClassNames.Fieldset}--large`);
+ });
+
+ it('should add the disabled attribute when isDisabled prop is used', async () => {
+ render(
+
+ );
+
+ const disabled = await screen.findByTestId('disabled');
+
+ expect(disabled).toHaveAttribute('disabled');
+ });
+
+ it('should disable child Fieldset when parent isDisabled', async () => {
+ render(
+
+ );
+
+ const nestedFieldset = await screen.findByTestId('nestedFieldset');
+
+ expect(nestedFieldset).toHaveAttribute('disabled');
+ });
+});
diff --git a/packages/react/src/primitives/Fieldset/index.ts b/packages/react/src/primitives/Fieldset/index.ts
new file mode 100644
index 00000000000..11ba0bc187c
--- /dev/null
+++ b/packages/react/src/primitives/Fieldset/index.ts
@@ -0,0 +1,2 @@
+export { Fieldset } from './Fieldset';
+export { useFieldset } from './useFieldset';
diff --git a/packages/react/src/primitives/Fieldset/useFieldset.ts b/packages/react/src/primitives/Fieldset/useFieldset.ts
new file mode 100644
index 00000000000..2218efa2d4b
--- /dev/null
+++ b/packages/react/src/primitives/Fieldset/useFieldset.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+interface FieldsetContextType {
+ isFieldsetDisabled?: boolean;
+}
+
+export const FieldsetContext = React.createContext({
+ isFieldsetDisabled: false,
+});
+/**
+ * @description Fieldsets in HTML can be disabled, which disables all child
+ * fieldsets and input controls. `useFieldset` passes the disabled state down
+ * via context.
+ */
+export const useFieldset = (): FieldsetContextType =>
+ React.useContext(FieldsetContext);
diff --git a/packages/react/src/primitives/Input/Input.tsx b/packages/react/src/primitives/Input/Input.tsx
index 4743ffa39c2..cff8f3dade9 100644
--- a/packages/react/src/primitives/Input/Input.tsx
+++ b/packages/react/src/primitives/Input/Input.tsx
@@ -10,6 +10,7 @@ import {
Primitive,
} from '../types';
import { View } from '../View';
+import { useFieldset } from '../Fieldset/useFieldset';
const InputPrimitive: Primitive = (
{
@@ -39,6 +40,7 @@ const InputPrimitive: Primitive = (
classNameModifier(ComponentClassNames.Input, size),
className
);
+ const { isFieldsetDisabled } = useFieldset();
return (
= (
data-variation={variation}
defaultChecked={defaultChecked}
defaultValue={defaultValue}
- isDisabled={isDisabled}
+ isDisabled={isFieldsetDisabled ? isFieldsetDisabled : isDisabled}
id={id}
readOnly={isReadOnly}
ref={ref}
diff --git a/packages/react/src/primitives/Input/__tests__/Input.test.tsx b/packages/react/src/primitives/Input/__tests__/Input.test.tsx
index 5e0793968db..3dfe283b82a 100644
--- a/packages/react/src/primitives/Input/__tests__/Input.test.tsx
+++ b/packages/react/src/primitives/Input/__tests__/Input.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Input } from '../Input';
+import { Fieldset } from '../../Fieldset';
import { ComponentClassNames } from '../../shared';
describe('Input component', () => {
@@ -85,6 +86,20 @@ describe('Input component', () => {
expect(input).toHaveAttribute('required');
});
+ it('should always be disabled if parent Fieldset isDisabled', async () => {
+ render(
+
+ );
+
+ const input = await screen.findByTestId('input');
+ const inputDisabled = await screen.findByTestId('inputWithDisabledProp');
+ expect(input).toHaveAttribute('disabled');
+ expect(inputDisabled).toHaveAttribute('disabled');
+ });
+
it('should set size and variation data attributes', async () => {
render();
diff --git a/packages/react/src/primitives/Radio/Radio.tsx b/packages/react/src/primitives/Radio/Radio.tsx
index b607a48fa26..4b81f607ded 100644
--- a/packages/react/src/primitives/Radio/Radio.tsx
+++ b/packages/react/src/primitives/Radio/Radio.tsx
@@ -13,6 +13,7 @@ import {
} from '../types';
import { Text } from '../Text';
import { useRadioGroupContext } from '../RadioGroupField/context';
+import { useFieldset } from '../Fieldset/useFieldset';
export const RadioPrimitive: Primitive = (
{
@@ -47,9 +48,11 @@ export const RadioPrimitive: Primitive = (
size,
labelPosition: groupLabelPosition,
} = useRadioGroupContext();
+ const { isFieldsetDisabled } = useFieldset();
- const shouldBeDisabled =
- isGroupDisabled || isDisabled || (isReadOnly && defaultValue !== value);
+ const shouldBeDisabled = isFieldsetDisabled
+ ? isFieldsetDisabled
+ : isGroupDisabled || isDisabled || (isReadOnly && defaultValue !== value);
// for controlled component
const checked =
diff --git a/packages/react/src/primitives/Radio/__tests__/Radio.test.tsx b/packages/react/src/primitives/Radio/__tests__/Radio.test.tsx
index 1265c5d5b33..53eeb2f1415 100644
--- a/packages/react/src/primitives/Radio/__tests__/Radio.test.tsx
+++ b/packages/react/src/primitives/Radio/__tests__/Radio.test.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
import { render, screen } from '@testing-library/react';
import { Radio } from '../Radio';
+import { Fieldset } from '../../Fieldset';
import { RadioGroupField } from '../../RadioGroupField';
import { View } from '../../View';
import { ComponentClassNames } from '../../shared';
@@ -56,6 +57,36 @@ describe('RadioField test suite', () => {
expect(radioLabel).toHaveAttribute('data-disabled', 'true');
});
+ it('should always be disabled if parent Fieldset isDisabled and radio isDisabled is not defined', async () => {
+ render(
+
+ );
+
+ const radio = await screen.findByRole('radio');
+ expect(radio).toHaveAttribute('disabled');
+
+ const radioLabel = await screen.findByText('test');
+ expect(radioLabel).toHaveAttribute('data-disabled', 'true');
+ });
+
+ it('should always be disabled if parent Fieldset isDisabled and radio isDisabled={false}', async () => {
+ render(
+
+ );
+
+ const radio = await screen.findByRole('radio');
+ expect(radio).toHaveAttribute('disabled');
+
+ const radioLabel = await screen.findByText('test');
+ expect(radioLabel).toHaveAttribute('data-disabled', 'true');
+ });
+
it('should have no default labelPosition', async () => {
render(
diff --git a/packages/react/src/primitives/Select/Select.tsx b/packages/react/src/primitives/Select/Select.tsx
index 91b267de757..720fd78d33f 100644
--- a/packages/react/src/primitives/Select/Select.tsx
+++ b/packages/react/src/primitives/Select/Select.tsx
@@ -8,6 +8,7 @@ import { IconExpandMore, useIcons } from '../Icon';
import { ForwardRefPrimitive, Primitive } from '../types';
import { BaseSelectProps, SelectProps } from '../types/select';
import { View } from '../View';
+import { useFieldset } from '../Fieldset/useFieldset';
const SelectPrimitive: Primitive = (
{
@@ -41,6 +42,7 @@ const SelectPrimitive: Primitive = (
className
);
const icons = useIcons('select');
+ const { isFieldsetDisabled } = useFieldset();
return (
@@ -54,7 +56,7 @@ const SelectPrimitive: Primitive = (
? DEFAULT_PLACEHOLDER_VALUE
: defaultValue
}
- isDisabled={isDisabled}
+ isDisabled={isFieldsetDisabled ? isFieldsetDisabled : isDisabled}
required={isRequired}
data-size={size}
data-variation={variation}
diff --git a/packages/react/src/primitives/Select/__tests__/Select.test.tsx b/packages/react/src/primitives/Select/__tests__/Select.test.tsx
index c99d9c90e59..42c8de13dfe 100644
--- a/packages/react/src/primitives/Select/__tests__/Select.test.tsx
+++ b/packages/react/src/primitives/Select/__tests__/Select.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Select } from '../Select';
+import { Fieldset } from '../../Fieldset';
import { IconExpandMore } from '../../Icon/internal';
import { ComponentClassNames } from '../../shared';
@@ -125,6 +126,28 @@ describe('Select primitive test suite', () => {
expect(select).toBeRequired();
});
+ it('should always be disabled if parent Fieldset isDisabled', async () => {
+ render(
+
+ );
+
+ const select = await screen.findByTestId('select');
+ const selectDisabled = await screen.findByTestId('selectWithDisabledProp');
+ expect(select).toHaveAttribute('disabled');
+ expect(selectDisabled).toHaveAttribute('disabled');
+ });
+
it('should render placeholder correctly if it is set', async () => {
render(
diff --git a/packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx b/packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx
index 75fbdd210ee..f5875fe5c96 100644
--- a/packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx
+++ b/packages/react/src/primitives/SwitchField/__tests__/SwitchField.test.tsx
@@ -6,6 +6,7 @@ import { AUTO_GENERATED_ID_PREFIX } from '../../utils/useStableId';
import { ComponentClassNames } from '../../shared';
import { ComponentPropsToStylePropsMap } from '../../types';
import { SwitchField } from '../SwitchField';
+import { Fieldset } from '../../Fieldset';
describe('Switch Field', () => {
const label = 'My switch label';
@@ -133,6 +134,25 @@ describe('Switch Field', () => {
expect(field).toHaveProperty('disabled', true);
});
+ it('should always be disabled if parent Fieldset isDisabled and SliderField isDisabled={false}', async () => {
+ const { container } = render(
+
+ );
+ const field = container.getElementsByTagName('input')[0];
+ expect(field).toHaveProperty('disabled', true);
+ });
+ it('should always be disabled if parent Fieldset isDisabled and SliderField isDisabled is not defined', async () => {
+ const { container } = render(
+
+ );
+ const field = container.getElementsByTagName('input')[0];
+ expect(field).toHaveProperty('disabled', true);
+ });
+
it('should set the input to checked with the isChecked prop', () => {
const { container } = render();
diff --git a/packages/react/src/primitives/TextArea/TextArea.tsx b/packages/react/src/primitives/TextArea/TextArea.tsx
index bb7e7345ca4..cb69456e5fe 100644
--- a/packages/react/src/primitives/TextArea/TextArea.tsx
+++ b/packages/react/src/primitives/TextArea/TextArea.tsx
@@ -6,10 +6,12 @@ import { ComponentClassNames } from '../shared';
import { ForwardRefPrimitive, Primitive } from '../types/view';
import { BaseTextAreaProps, TextAreaProps } from '../types/textArea';
import { View } from '../View';
+import { useFieldset } from '../Fieldset/useFieldset';
const TextAreaPrimitive: Primitive = (
{
className,
+ isDisabled,
isReadOnly,
isRequired,
size,
@@ -27,6 +29,7 @@ const TextAreaPrimitive: Primitive = (
classNameModifierByFlag(ComponentClassNames.Textarea, 'error', hasError),
className
);
+ const { isFieldsetDisabled } = useFieldset();
return (
= (
className={componentClasses}
data-size={size}
data-variation={variation}
+ disabled={isFieldsetDisabled ? isFieldsetDisabled : isDisabled}
readOnly={isReadOnly}
ref={ref}
required={isRequired}
diff --git a/packages/react/src/primitives/TextArea/__tests__/TextArea.test.tsx b/packages/react/src/primitives/TextArea/__tests__/TextArea.test.tsx
index 0361d732674..3085ee19c4d 100644
--- a/packages/react/src/primitives/TextArea/__tests__/TextArea.test.tsx
+++ b/packages/react/src/primitives/TextArea/__tests__/TextArea.test.tsx
@@ -3,6 +3,7 @@ import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { TextArea } from '../TextArea';
+import { Fieldset } from '../../Fieldset';
import { ComponentClassNames } from '../../shared';
describe('TextArea component', () => {
@@ -46,6 +47,22 @@ describe('TextArea component', () => {
expect(textarea).toHaveAttribute('required', '');
});
+ it('should always be disabled if parent Fieldset isDisabled', async () => {
+ render(
+
+ );
+
+ const textarea = await screen.findByTestId('textarea');
+ const textareaDisabled = await screen.findByTestId(
+ 'textareaWithDisabledProp'
+ );
+ expect(textarea).toHaveAttribute('disabled');
+ expect(textareaDisabled).toHaveAttribute('disabled');
+ });
+
it('should set size and variation data attributes', async () => {
render();
diff --git a/packages/react/src/primitives/components.ts b/packages/react/src/primitives/components.ts
index f08b0685adf..a1bdfb97e83 100644
--- a/packages/react/src/primitives/components.ts
+++ b/packages/react/src/primitives/components.ts
@@ -11,6 +11,7 @@ export { Divider } from './Divider';
export { DropZone, DropZoneProps } from './DropZone';
export { Expander, ExpanderItem } from './Expander';
export { FieldGroupIcon, FieldGroupIconButton } from './FieldGroupIcon';
+export { Fieldset } from './Fieldset';
export { Flex } from './Flex';
export { Grid } from './Grid';
export { Heading } from './Heading';
diff --git a/packages/react/src/primitives/shared/constants.ts b/packages/react/src/primitives/shared/constants.ts
index 65c6b330678..bbe6f470857 100644
--- a/packages/react/src/primitives/shared/constants.ts
+++ b/packages/react/src/primitives/shared/constants.ts
@@ -243,6 +243,9 @@ export const ComponentClassObject: ComponentClassNameItems = {
FieldErrorMessage: { className: ComponentClassName.FieldErrorMessage },
FieldGroup: { className: ComponentClassName.FieldGroup },
FieldGroupControl: { className: ComponentClassName.FieldGroupControl },
+ FieldGroupFieldWrapper: {
+ className: ComponentClassName.FieldGroupFieldWrapper,
+ },
FieldGroupOuterEnd: { className: ComponentClassName.FieldGroupOuterEnd },
FieldGroupOuterStart: { className: ComponentClassName.FieldGroupOuterStart },
FieldGroupInnerEnd: { className: ComponentClassName.FieldGroupInnerEnd },
@@ -256,8 +259,15 @@ export const ComponentClassObject: ComponentClassNameItems = {
className: ComponentClassName.FieldGroupHasInnerStart,
},
FieldShowPassword: { className: ComponentClassName.FieldShowPassword },
- FieldGroupFieldWrapper: {
- className: ComponentClassName.FieldGroupFieldWrapper,
+ Fieldset: {
+ className: ComponentClassName.Fieldset,
+ components: ['Fieldset'],
+ description: 'Top level element that wraps the Fieldset primitive',
+ },
+ FieldsetLegend: {
+ className: ComponentClassName.FieldsetLegend,
+ components: ['Fieldset'],
+ description: 'Visual label for the Fieldset primitive',
},
FileUploaderDropZone: {
className: ComponentClassName.FileUploaderDropZone,
@@ -877,6 +887,8 @@ export const ComponentClassNames: ComponentClassNamesType = {
ComponentClassObject.FieldGroupHasInnerStart.className,
FieldShowPassword: ComponentClassObject.FieldShowPassword.className,
FieldGroupFieldWrapper: ComponentClassObject.FieldGroupFieldWrapper.className,
+ Fieldset: ComponentClassObject.Fieldset.className,
+ FieldsetLegend: ComponentClassObject.FieldsetLegend.className,
FileUploaderDropZone: ComponentClassObject.FileUploaderDropZone.className,
FileUploaderDropZoneIcon:
ComponentClassObject.FileUploaderDropZoneIcon.className,
diff --git a/packages/react/src/primitives/shared/types.ts b/packages/react/src/primitives/shared/types.ts
index 45220811f2d..9ead459602f 100644
--- a/packages/react/src/primitives/shared/types.ts
+++ b/packages/react/src/primitives/shared/types.ts
@@ -15,6 +15,7 @@ type ComponentNameKey =
| 'Divider'
| 'DropZone'
| 'Expander'
+ | 'Fieldset'
| 'FileUploader'
| 'Flex'
| 'Grid'
@@ -114,6 +115,8 @@ type ComponentClassNameKey =
| 'FieldGroupHasInnerStart'
| 'FieldShowPassword'
| 'FieldGroupFieldWrapper'
+ | 'Fieldset'
+ | 'FieldsetLegend'
| 'FileUploaderDropZone'
| 'FileUploaderDropZoneIcon'
| 'FileUploaderDropZoneText'
diff --git a/packages/react/src/primitives/types/fieldset.ts b/packages/react/src/primitives/types/fieldset.ts
new file mode 100644
index 00000000000..11b5f4ac04e
--- /dev/null
+++ b/packages/react/src/primitives/types/fieldset.ts
@@ -0,0 +1,58 @@
+import * as React from 'react';
+
+import { Sizes } from './base';
+import { BaseViewProps } from './view';
+import { FlexContainerStyleProps } from './flex';
+import { ElementType, PrimitiveProps } from './view';
+
+/** @deprecated For internal use only */
+export interface BaseFieldsetProps
+ extends BaseViewProps,
+ FlexContainerStyleProps {
+ /**
+ * @description
+ * Legend is the label for the Fieldset.
+ */
+ legend: React.ReactNode;
+
+ /**
+ * @description
+ * Visually hides the legend while making it still accessible to screenreaders.
+ */
+ legendHidden?: boolean;
+
+ /**
+ * @description
+ * Adds plain or outlined variation to the Fieldset
+ */
+ variation?: 'outlined' | 'plain';
+
+ /**
+ * @description
+ * Changes the size of the Fieldset
+ */
+ size?: Sizes;
+
+ /**
+ * @description
+ * Determines whether the Fieldset should be disabled.
+ * @default
+ * false
+ */
+ isDisabled?: boolean;
+
+ /**
+ * @description
+ * Name of the Fieldset.
+ */
+ name?: string;
+
+ /**
+ * @description
+ * Form to associate the Fieldset with
+ */
+ form?: string;
+}
+
+export type FieldsetProps =
+ PrimitiveProps;
diff --git a/packages/react/src/primitives/types/index.ts b/packages/react/src/primitives/types/index.ts
index 9fdf40594e6..8de1e672241 100644
--- a/packages/react/src/primitives/types/index.ts
+++ b/packages/react/src/primitives/types/index.ts
@@ -14,6 +14,7 @@ export * from './expander';
export * from './field';
export * from './fieldGroup';
export * from './fieldGroupIcon';
+export * from './fieldset';
export * from './flex';
export * from './heading';
export * from './highlightMatch';
diff --git a/packages/react/src/version.ts b/packages/react/src/version.ts
index 52ba2c39c52..1c1586937a9 100644
--- a/packages/react/src/version.ts
+++ b/packages/react/src/version.ts
@@ -1 +1 @@
-export const VERSION = '5.2.0';
+export const VERSION = '5.3.0';
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index 946c3da72bb..73c23992df7 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,68 @@
# @aws-amplify/ui
+## 5.8.0
+
+### Minor Changes
+
+- [#4348](https://github.com/aws-amplify/amplify-ui/pull/4348) [`276968530`](https://github.com/aws-amplify/amplify-ui/commit/276968530ba1049cfa4a9fd1efe8bd870b3e4b18) Thanks [@hbuchel](https://github.com/hbuchel)! - feat(react/ui): add new Fieldset Primitive
+
+ Usage:
+
+ ```
+
+ ```
+
+- [#4359](https://github.com/aws-amplify/amplify-ui/pull/4359) [`ec495a6f6`](https://github.com/aws-amplify/amplify-ui/commit/ec495a6f638c53970edd8706a0eeb5f95d142689) Thanks [@dbanksdesign](https://github.com/dbanksdesign)! - feat(react): DropZone component
+
+ ```jsx
+ export default function DefaultDropZoneExample() {
+ const [files, setFiles] = React.useState([]);
+ return (
+ <>
+ {
+ setFiles(files);
+ }}
+ >
+ Drag images here
+
+ {files.map((file) => (
+ {file.name}
+ ))}
+
+ );
+ }
+ ```
+
+### Patch Changes
+
+- [#4367](https://github.com/aws-amplify/amplify-ui/pull/4367) [`e1fc61119`](https://github.com/aws-amplify/amplify-ui/commit/e1fc61119224a92a4648d1d1673177647b1a8e53) Thanks [@ioanabrooks](https://github.com/ioanabrooks)! - feat(ui-react-storage): Added upload actions and option to upload files on click. Usage:
+
+ ```
+
+ ```
+
+- [#4368](https://github.com/aws-amplify/amplify-ui/pull/4368) [`14e402b6e`](https://github.com/aws-amplify/amplify-ui/commit/14e402b6eedab6bdef5cec21b0b084f230b0ce26) Thanks [@hbuchel](https://github.com/hbuchel)! - chore(ui): adds info, warning, and success border tokens. updates background color tokens for info, warning, success and error.
+
+- [#4384](https://github.com/aws-amplify/amplify-ui/pull/4384) [`2407ac294`](https://github.com/aws-amplify/amplify-ui/commit/2407ac294270214bd20c414349d2423ab14b8066) Thanks [@reesscot](https://github.com/reesscot)! - feat: Input and Label primitives
+
+ ```jx
+ export const InputLabelExample = () => (
+ <>
+
+
+
+ );
+ ```
+
+- [#4376](https://github.com/aws-amplify/amplify-ui/pull/4376) [`64fba0fd2`](https://github.com/aws-amplify/amplify-ui/commit/64fba0fd2ec4a0c5061b461f527c8a45235eee13) Thanks [@thaddmt](https://github.com/thaddmt)! - chore(authenticator): add additional types for form fields
+
## 5.7.2
### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 190539ccdc2..41dc1a0f9b0 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
{
"name": "@aws-amplify/ui",
- "version": "5.7.2",
+ "version": "5.8.0",
"main": "dist/index.js",
"module": "dist/esm/index.mjs",
"exports": {
diff --git a/packages/ui/src/theme/__tests__/defaultTheme.test.ts b/packages/ui/src/theme/__tests__/defaultTheme.test.ts
index f678cf63a9e..cd08367b1b6 100644
--- a/packages/ui/src/theme/__tests__/defaultTheme.test.ts
+++ b/packages/ui/src/theme/__tests__/defaultTheme.test.ts
@@ -678,6 +678,24 @@ describe('@aws-amplify/ui', () => {
--amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
--amplify-components-fieldmessages-description-font-style: italic;
--amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
+ --amplify-components-fieldset-background-color: transparent;
+ --amplify-components-fieldset-border-radius: var(--amplify-radii-xs);
+ --amplify-components-fieldset-flex-direction: column;
+ --amplify-components-fieldset-gap: var(--amplify-components-field-gap);
+ --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary);
+ --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size);
+ --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold);
+ --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium);
+ --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size);
+ --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size);
+ --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium);
+ --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40);
+ --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small);
+ --amplify-components-fieldset-outlined-border-style: solid;
+ --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small);
+ --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
+ --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
+ --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
--amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
--amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
--amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
diff --git a/packages/ui/src/theme/__tests__/overrides.test.ts b/packages/ui/src/theme/__tests__/overrides.test.ts
index 7c097c3e631..129ab079556 100644
--- a/packages/ui/src/theme/__tests__/overrides.test.ts
+++ b/packages/ui/src/theme/__tests__/overrides.test.ts
@@ -712,6 +712,24 @@ describe('@aws-amplify/ui', () => {
--amplify-components-fieldmessages-description-color: var(--amplify-colors-font-secondary);
--amplify-components-fieldmessages-description-font-style: italic;
--amplify-components-fieldmessages-description-font-size: var(--amplify-font-sizes-small);
+ --amplify-components-fieldset-background-color: transparent;
+ --amplify-components-fieldset-border-radius: var(--amplify-radii-xs);
+ --amplify-components-fieldset-flex-direction: column;
+ --amplify-components-fieldset-gap: var(--amplify-components-field-gap);
+ --amplify-components-fieldset-legend-color: var(--amplify-colors-font-primary);
+ --amplify-components-fieldset-legend-font-size: var(--amplify-components-field-font-size);
+ --amplify-components-fieldset-legend-font-weight: var(--amplify-font-weights-bold);
+ --amplify-components-fieldset-legend-line-height: var(--amplify-line-heights-medium);
+ --amplify-components-fieldset-legend-small-font-size: var(--amplify-components-field-small-font-size);
+ --amplify-components-fieldset-legend-large-font-size: var(--amplify-components-field-large-font-size);
+ --amplify-components-fieldset-outlined-padding: var(--amplify-space-medium);
+ --amplify-components-fieldset-outlined-border-color: var(--amplify-colors-neutral-40);
+ --amplify-components-fieldset-outlined-border-width: var(--amplify-border-widths-small);
+ --amplify-components-fieldset-outlined-border-style: solid;
+ --amplify-components-fieldset-outlined-small-padding: var(--amplify-space-small);
+ --amplify-components-fieldset-outlined-large-padding: var(--amplify-space-large);
+ --amplify-components-fieldset-small-gap: var(--amplify-components-field-small-gap);
+ --amplify-components-fieldset-large-gap: var(--amplify-components-field-large-gap);
--amplify-components-fileuploader-dropzone-background-color: var(--amplify-colors-background-primary);
--amplify-components-fileuploader-dropzone-border-radius: var(--amplify-radii-small);
--amplify-components-fileuploader-dropzone-border-color: var(--amplify-colors-border-primary);
diff --git a/packages/ui/src/theme/css/component/fieldset.scss b/packages/ui/src/theme/css/component/fieldset.scss
new file mode 100644
index 00000000000..9b9bb2f5f16
--- /dev/null
+++ b/packages/ui/src/theme/css/component/fieldset.scss
@@ -0,0 +1,39 @@
+.amplify-fieldset {
+ background-color: var(--amplify-components-fieldset-background-color);
+ border-radius: var(--amplify-components-fieldset-border-radius);
+ flex-direction: var(--amplify-components-fieldset-flex-direction);
+ gap: var(--amplify-components-fieldset-gap);
+ /* Sizes */
+ &--small {
+ gap: var(--amplify-components-fieldset-small-gap);
+ }
+ &--large {
+ gap: var(--amplify-components-fieldset-large-gap);
+ }
+ /* Variations */
+ &--outlined {
+ border: var(--amplify-components-fieldset-outlined-border-width)
+ var(--amplify-components-fieldset-outlined-border-style)
+ var(--amplify-components-fieldset-outlined-border-color);
+ padding: var(--amplify-components-fieldset-outlined-padding);
+ &.amplify-fieldset--small {
+ padding: var(--amplify-components-fieldset-outlined-small-padding);
+ }
+ &.amplify-fieldset--large {
+ padding: var(--amplify-components-fieldset-outlined-large-padding);
+ }
+ }
+}
+
+.amplify-fieldset__legend {
+ color: var(--amplify-components-fieldset-legend-color);
+ font-weight: var(--amplify-components-fieldset-legend-font-weight);
+ line-height: var(--amplify-components-fieldset-legend-line-height);
+ font-size: var(--amplify-components-fieldset-legend-font-size);
+ &--small {
+ font-size: var(--amplify-components-fieldset-legend-small-font-size);
+ }
+ &--large {
+ font-size: var(--amplify-components-fieldset-legend-large-font-size);
+ }
+}
diff --git a/packages/ui/src/theme/css/styles.scss b/packages/ui/src/theme/css/styles.scss
index 317e6b0b6fa..b7e741aed0b 100644
--- a/packages/ui/src/theme/css/styles.scss
+++ b/packages/ui/src/theme/css/styles.scss
@@ -93,6 +93,7 @@ select {
@import './component/expander.scss';
@import './component/field.scss';
@import './component/fieldGroup.scss';
+@import './component/fieldset.scss';
@import './component/liveness.scss';
@import './component/fileUploader.scss';
@import './component/menu.scss';
diff --git a/packages/ui/src/theme/tokens/components/fieldset.ts b/packages/ui/src/theme/tokens/components/fieldset.ts
new file mode 100644
index 00000000000..3482f856817
--- /dev/null
+++ b/packages/ui/src/theme/tokens/components/fieldset.ts
@@ -0,0 +1,69 @@
+import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
+
+export type FieldsetSizeTokens