diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5cdcf8761..6d36773ae 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,18 @@
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+## [5.11.0](https://github.com/dequelabs/cauldron/compare/v5.10.0...v5.11.0) (2023-11-09)
+
+
+### Features
+
+* **react:** sync alert modals with uxpin ([5cfcb57](https://github.com/dequelabs/cauldron/commit/5cfcb5756051d09578f78fb60b49b4ef073504ae))
+
+
+### Bug Fixes
+
+* review comments ([5e22461](https://github.com/dequelabs/cauldron/commit/5e2246189d32c042a5f5c0d80c31fd2fdb36c801))
+
## [5.10.0](https://github.com/dequelabs/cauldron/compare/v5.9.1...v5.10.0) (2023-11-07)
diff --git a/package.json b/package.json
index 7075633c5..b859c02c6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "cauldron",
"private": true,
- "version": "5.10.0",
+ "version": "5.11.0",
"license": "MPL-2.0",
"scripts": {
"clean": "rimraf dist docs/dist",
diff --git a/packages/react/__tests__/src/components/Alert/index.js b/packages/react/__tests__/src/components/Alert/index.js
index 5205bff9d..12e462878 100644
--- a/packages/react/__tests__/src/components/Alert/index.js
+++ b/packages/react/__tests__/src/components/Alert/index.js
@@ -6,14 +6,14 @@ import axe from '../../../axe';
const defaults = { show: false, heading: { text: 'hi' } };
test('returns null if passed a falsey "show" prop', () => {
- const alert = mount({'hello'});
+ const alert = mount(hello);
expect(alert.html()).toBe('');
});
test('shows modal if passed a truthy "show" prop', () => {
const alert = mount(
-
- {'hello'}
+
+ hello
);
expect(alert.find('.Alert').exists()).toBe(true);
@@ -21,7 +21,16 @@ test('shows modal if passed a truthy "show" prop', () => {
test('should return no axe violations', async () => {
const alert = mount(
-
+
+ Hello!
+
+ );
+ expect(await axe(alert.html())).toHaveNoViolations();
+});
+
+test('should return no axe violations warning variant', async () => {
+ const alert = mount(
+
Hello!
);
diff --git a/packages/react/package.json b/packages/react/package.json
index c394552a5..ce3253f88 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@deque/cauldron-react",
- "version": "5.10.0",
+ "version": "5.11.0",
"license": "MPL-2.0",
"description": "Fully accessible react components library for Deque Cauldron",
"homepage": "https://cauldron.dequelabs.com/",
diff --git a/packages/react/src/components/Alert/index.tsx b/packages/react/src/components/Alert/index.tsx
index 05b06f2bf..2f67dfa1b 100644
--- a/packages/react/src/components/Alert/index.tsx
+++ b/packages/react/src/components/Alert/index.tsx
@@ -24,7 +24,7 @@ const Alert = ({
heading={{
text: (
-
+
{typeof heading === 'object' && 'text' in heading
? heading.text
: heading}
diff --git a/packages/styles/alert.css b/packages/styles/alert.css
index 660c88cfe..7a7d217bb 100644
--- a/packages/styles/alert.css
+++ b/packages/styles/alert.css
@@ -1,22 +1,37 @@
:root {
--alert-warning-background-color: #d93251;
--alert-warning-header-text-color: #fff;
+
+ --alert-border-color: var(--accent-primary);
+ --alert-warning-border-color: var(--accent-error);
+
+ --alert-icon-color: var(--accent-primary);
+ --alert-warning-icon-color: var(--accent-error);
+}
+
+.cauldron--theme-dark {
+ --alert-border-color: var(--accent-info);
+ --alert-warning-border-color: var(--accent-danger);
+
+ --alert-icon-color: var(--accent-info);
+ --alert-warning-icon-color: var(--accent-danger);
}
.Alert .Dialog__header .Icon {
padding-right: var(--space-smallest);
+ color: var(--alert-icon-color);
}
-.Alert__warning .Dialog__inner {
- border: 3px solid var(--alert-warning-background-color);
+.Alert .Dialog__inner {
+ border: 3px solid var(--alert-border-color);
}
-.Alert__warning .Dialog__header {
- background-color: var(--alert-warning-background-color);
+.Alert__warning .Dialog__header .Icon {
+ color: var(--alert-warning-icon-color);
}
-.Alert__warning .Dialog__heading {
- color: var(--alert-warning-header-text-color);
+.Alert__warning .Dialog__inner {
+ border: 3px solid var(--alert-warning-border-color);
}
.Alert .Dialog__footer {
@@ -27,6 +42,7 @@
background-color: transparent;
}
-.Alert__warning .Dialog__heading:focus {
- border-bottom-color: var(--alert-warning-header-text-color);
+.cauldron--theme-dark .Alert .Dialog__footer {
+ border-top: none;
+ background: transparent;
}
diff --git a/packages/styles/dialog.css b/packages/styles/dialog.css
index e0935a42a..6e36c74c2 100644
--- a/packages/styles/dialog.css
+++ b/packages/styles/dialog.css
@@ -10,6 +10,10 @@
}
.cauldron--theme-dark {
+ --dialog-background-color: var(--accent-medium);
+ --dialog-border-color: var(--gray-20);
+ --dialog-header-background-color: var(--accent-dark);
+ --dialog-footer-background-color: var(--accent-dark);
--dialog-heading-text-color: #fff;
}
@@ -157,9 +161,8 @@
/* Dark Theme */
.cauldron--theme-dark .Dialog__inner {
- background-color: var(--accent-medium);
color: var(--white);
- border: 4px solid var(--gray-20);
+ border-width: 4px;
}
.cauldron--theme-dark .Dialog__header {
@@ -172,7 +175,6 @@
.cauldron--theme-dark .Dialog__header,
.cauldron--theme-dark .Dialog__footer {
- background-color: var(--accent-dark);
color: var(--gray-20);
}
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 1e5bad6f0..198470440 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
{
"name": "@deque/cauldron-styles",
- "version": "5.10.0",
+ "version": "5.11.0",
"license": "MPL-2.0",
"description": "deque cauldron pattern library styles",
"repository": "https://github.com/dequelabs/cauldron",