From 5cfcb5756051d09578f78fb60b49b4ef073504ae Mon Sep 17 00:00:00 2001 From: Volodymyr Chornonoh Date: Wed, 8 Nov 2023 10:58:10 +0200 Subject: [PATCH 1/3] feat(react): sync alert modals with uxpin --- .../__tests__/src/components/Alert/index.js | 9 ++++ packages/react/src/components/Alert/index.tsx | 3 +- packages/styles/alert.css | 45 ++++++++++++++----- 3 files changed, 46 insertions(+), 11 deletions(-) diff --git a/packages/react/__tests__/src/components/Alert/index.js b/packages/react/__tests__/src/components/Alert/index.js index 5205bff9d..b280163fd 100644 --- a/packages/react/__tests__/src/components/Alert/index.js +++ b/packages/react/__tests__/src/components/Alert/index.js @@ -27,3 +27,12 @@ test('should return no axe violations', async () => { ); expect(await axe(alert.html())).toHaveNoViolations(); }); + +test('should return no axe violations warning variant', async () => { + const alert = mount( + + Hello! + + ); + expect(await axe(alert.html())).toHaveNoViolations(); +}); diff --git a/packages/react/src/components/Alert/index.tsx b/packages/react/src/components/Alert/index.tsx index 05b06f2bf..46b280605 100644 --- a/packages/react/src/components/Alert/index.tsx +++ b/packages/react/src/components/Alert/index.tsx @@ -18,13 +18,14 @@ const Alert = ({ - + {typeof heading === 'object' && 'text' in heading ? heading.text : heading} diff --git a/packages/styles/alert.css b/packages/styles/alert.css index 660c88cfe..f6caf2bc0 100644 --- a/packages/styles/alert.css +++ b/packages/styles/alert.css @@ -1,22 +1,29 @@ :root { - --alert-warning-background-color: #d93251; - --alert-warning-header-text-color: #fff; + --alert-default-color: #3c7aae; + --alert-warning-color: #d93251; + + --alert-default-color-dark: #6cdaf2; + --alert-warning-color-dark: #fe6d6b; } .Alert .Dialog__header .Icon { padding-right: var(--space-smallest); } -.Alert__warning .Dialog__inner { - border: 3px solid var(--alert-warning-background-color); +.Alert__default .Dialog__header .Icon { + color: var(--alert-default-color); } -.Alert__warning .Dialog__header { - background-color: var(--alert-warning-background-color); +.Alert__default .Dialog__inner { + border: 3px solid var(--alert-default-color); } -.Alert__warning .Dialog__heading { - color: var(--alert-warning-header-text-color); +.Alert__warning .Dialog__header .Icon { + color: var(--alert-warning-color); +} + +.Alert__warning .Dialog__inner { + border: 3px solid var(--alert-warning-color); } .Alert .Dialog__footer { @@ -25,8 +32,26 @@ display: flex; justify-content: center; background-color: transparent; + padding: 0 var(--space-large) var(--space-large); +} + +.cauldron--theme-dark .Alert__default .Dialog__header .Icon { + color: var(--alert-default-color-dark); } -.Alert__warning .Dialog__heading:focus { - border-bottom-color: var(--alert-warning-header-text-color); +.cauldron--theme-dark .Alert__default .Dialog__inner { + border: 3px solid var(--alert-default-color-dark); +} + +.cauldron--theme-dark .Alert__warning .Dialog__header .Icon { + color: var(--alert-warning-color-dark); +} + +.cauldron--theme-dark .Alert__warning .Dialog__inner { + border: 3px solid var(--alert-warning-color-dark); +} + +.cauldron--theme-dark .Alert .Dialog__footer { + border-top: none; + background: transparent; } From 5e2246189d32c042a5f5c0d80c31fd2fdb36c801 Mon Sep 17 00:00:00 2001 From: Volodymyr Chornonoh Date: Thu, 9 Nov 2023 12:16:14 +0200 Subject: [PATCH 2/3] fix: review comments --- .../__tests__/src/components/Alert/index.js | 10 ++-- packages/react/src/components/Alert/index.tsx | 1 - packages/styles/alert.css | 49 ++++++++----------- packages/styles/dialog.css | 8 +-- 4 files changed, 30 insertions(+), 38 deletions(-) diff --git a/packages/react/__tests__/src/components/Alert/index.js b/packages/react/__tests__/src/components/Alert/index.js index b280163fd..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,7 @@ test('shows modal if passed a truthy "show" prop', () => { test('should return no axe violations', async () => { const alert = mount( - + Hello! ); @@ -30,7 +30,7 @@ test('should return no axe violations', async () => { test('should return no axe violations warning variant', async () => { const alert = mount( - + Hello! ); diff --git a/packages/react/src/components/Alert/index.tsx b/packages/react/src/components/Alert/index.tsx index 46b280605..2f67dfa1b 100644 --- a/packages/react/src/components/Alert/index.tsx +++ b/packages/react/src/components/Alert/index.tsx @@ -18,7 +18,6 @@ const Alert = ({ Date: Thu, 9 Nov 2023 14:59:07 +0000 Subject: [PATCH 3/3] chore(cauldron): Release 5.11.0 --- CHANGELOG.md | 12 ++++++++++++ package.json | 2 +- packages/react/package.json | 2 +- packages/styles/package.json | 2 +- 4 files changed, 15 insertions(+), 3 deletions(-) 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 b7ee537a4..f67876566 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/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/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",