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