Merge pull request #1725 from dequelabs/release-v6.9.0

chore(cauldron): Release 6.9.0

CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.
 
+## [6.9.0](https://github.com/dequelabs/cauldron/compare/v6.8.0...v6.9.0) (2024-10-16)
+
+
+### Features
+
+* **ClickOutsideListener:** refactor and allow for ref targets ([#1687](https://github.com/dequelabs/cauldron/issues/1687)) ([8f770f3](https://github.com/dequelabs/cauldron/commit/8f770f32e46104312a50bc26d81f8c53e0a6c036))
+* **icon:** added `broken-image` icon ([#1700](https://github.com/dequelabs/cauldron/issues/1700)) ([d64ab15](https://github.com/dequelabs/cauldron/commit/d64ab15b841b12bd15c427b722e71ad9eede0f2e))
+* **react,styles:** add BottomSheet component ([#1694](https://github.com/dequelabs/cauldron/issues/1694)) ([5a2f12d](https://github.com/dequelabs/cauldron/commit/5a2f12d4e47970e809238328a9d8df1afe26ba3c))
+* **react,styles:** add Drawer component ([#1646](https://github.com/dequelabs/cauldron/issues/1646)) ([4be82cb](https://github.com/dequelabs/cauldron/commit/4be82cb3f7943c67330aef2f2d47215d83e5f294))
+* **styles:** synced Link component ([#1675](https://github.com/dequelabs/cauldron/issues/1675)) ([8ff3885](https://github.com/dequelabs/cauldron/commit/8ff3885e5a1b06dbf41a80e728da85cf6b77f9b8))
+* **styles:** synced TextField component with designs ([#1696](https://github.com/dequelabs/cauldron/issues/1696)) ([1971a3b](https://github.com/dequelabs/cauldron/commit/1971a3b448aa8a26369ec4bd1f4974433af547e2))
+
+
+### Bug Fixes
+
+* **docker:** use the default value of playwright_version ARG declared before the first FROM ([#1704](https://github.com/dequelabs/cauldron/issues/1704)) ([fbd45e8](https://github.com/dequelabs/cauldron/commit/fbd45e8c95c596139647e766c49da18c499c8dbb))
+* **Notice:** allow className to be passed into Notice component ([#1702](https://github.com/dequelabs/cauldron/issues/1702)) ([cb86dd3](https://github.com/dequelabs/cauldron/commit/cb86dd32fc28fbb024d4c3007d5d2697eec7bf69))
+* **react:** fix incorrect icon size for IconButton[large] ([#1655](https://github.com/dequelabs/cauldron/issues/1655)) ([b2cf09f](https://github.com/dequelabs/cauldron/commit/b2cf09f331c845f2e15bb98484930501581ee73a))
+* **styles:** fix content alignment for button containing icons ([#1713](https://github.com/dequelabs/cauldron/issues/1713)) ([683a8c9](https://github.com/dequelabs/cauldron/commit/683a8c93875a545b9eaf9e6e1f2f84d87aa172bd))
+* **styles:** fix spacing between title and content for notice component ([#1722](https://github.com/dequelabs/cauldron/issues/1722)) ([906a352](https://github.com/dequelabs/cauldron/commit/906a3520067fb15cf2959f64773fbb2778c4d7f0))
+* **styles:** spacing between icon and text within badge ([#1724](https://github.com/dequelabs/cauldron/issues/1724)) ([62992eb](https://github.com/dequelabs/cauldron/commit/62992eb193649088e1ee4020e92a54b77b746793))
+
 ## [6.8.0](https://github.com/dequelabs/cauldron/compare/v6.7.0...v6.8.0) (2024-10-08)
 
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cauldron",
   "private": true,
-  "version": "6.8.0",
+  "version": "6.9.0",
   "license": "MPL-2.0",
   "scripts": {
     "clean": "rimraf dist docs/dist",
@@ -80,7 +80,7 @@
     "css-minimizer-webpack-plugin": "^7.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-ssr-friendly": "^1.3.0",
     "express": "^4.20.0",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",

packages/react/yarn.lock

@@ -5370,9 +5370,9 @@ rimraf@^3.0.0:
     glob "^7.1.3"
 
 rollup@^2.23.0:
-  version "2.79.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
-  integrity sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==
+  version "2.79.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.2.tgz#f150e4a5db4b121a21a747d762f701e5e9f49090"
+  integrity sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==
   optionalDependencies:
     fsevents "~2.3.2"
 

packages/styles/badge.css

@@ -38,6 +38,6 @@
   font-weight: var(--font-weight-medium);
 }
 
-.Badge .Icon {
+.Badge > .Icon {
   margin: 0 var(--space-half) 0 -4px;
 }

packages/styles/button.css

@@ -8,6 +8,7 @@
   --button-background-color-secondary-disabled: var(--gray-30);
   --button-outline-color-secondary: var(--gray-90);
   --button-background-color-secondary-active: var(--gray-30);
+  --button-border-color-secondary: var(--gray-40);
 
   --button-background-color-error: var(--error);
   --button-background-color-error-disabled: #db6379;
@@ -43,6 +44,7 @@
   grid-auto-flow: column;
   align-items: center;
   justify-items: center;
+  justify-content: center;
   gap: var(--space-smallest);
 }
 
@@ -126,7 +128,7 @@ button.Link {
 .Button--tertiary {
   background-color: var(--button-background-color-secondary);
   color: var(--button-text-color-dark);
-  border: 1px solid var(--field-border-color);
+  border: 1px solid var(--button-border-color-secondary);
 }
 
 .Button--tertiary:is(:not(:hover, :focus), [disabled], [aria-disabled='true']) {

packages/styles/combobox.css

@@ -35,7 +35,7 @@
   );
   --text-field-wrapper-border-hover-color: var(
     --combobox-input-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --combobox-input-border-focus-glow-color,
@@ -78,7 +78,7 @@
   );
   --text-field-wrapper-border-hover-color: var(
     --combobox-input-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --combobox-input-border-focus-glow-color,

packages/styles/forms.css

@@ -11,6 +11,7 @@
   --field-border-color-error-hover: #c42f41;
   --field-border-color-error-focus-glow: rgba(217, 50, 81, 0.7);
   --field-border-color-disabled: rgba(204, 204, 204, 0.25);
+  --field-border-radius: 4px;
   --field-background-color-disabled: var(--light-workspace-color);
   --field-placeholder-color: var(--gray-50);
   --field-required-text-color: var(--gray-60);
@@ -38,7 +39,7 @@
   --field-background-color: var(--accent-medium);
   --field-content-color: var(--white);
   --field-border-color: #74818b;
-  --field-border-color-hover: var(--accent-info-light);
+  --field-border-color-hover: var(--accent-light);
   --field-border-color-focus: var(--accent-info);
   --field-border-color-focus-hover: var(--accent-info-light);
   --field-border-color-focus-glow: var(--accent-info);
@@ -73,7 +74,6 @@ textarea,
 [role='spinbutton'] {
   width: 100%;
   border: 1px solid var(--field-border-color);
-  border-bottom: 1px solid var(--field-border-color-underline);
   margin-bottom: var(--space-half);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   background-color: var(--field-background-color);
@@ -342,6 +342,7 @@ textarea.Field--has-error:focus:hover,
   font-size: var(--field-font-size);
   color: var(--field-content-color);
   min-width: min(var(--input-min-width), 100%);
+  border-radius: var(--field-border-radius);
 }
 
 .Field__text-input[disabled],
@@ -358,6 +359,7 @@ textarea.Field--has-error:focus:hover,
   padding: var(--space-half);
   max-width: 500px;
   color: var(--field-content-color);
+  border-radius: var(--field-border-radius);
 }
 
 .Field__textarea[disabled],

packages/styles/notice.css

@@ -32,7 +32,7 @@
 .Notice {
   display: grid;
   grid-template-columns: auto 1fr;
-  gap: var(--space-small);
+  gap: 0 var(--space-small);
   padding: var(--space-large);
   align-items: start;
   border-radius: 4px;

packages/styles/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-styles",
-  "version": "6.8.0",
+  "version": "6.9.0",
   "license": "MPL-2.0",
   "description": "deque cauldron pattern library styles",
   "repository": "https://github.com/dequelabs/cauldron",

packages/styles/search-field.css

@@ -13,7 +13,7 @@
   );
   --text-field-wrapper-border-hover-color: var(
     --search-field-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --search-field-border-focus-glow-color,
@@ -56,7 +56,7 @@
   );
   --text-field-wrapper-border-hover-color: var(
     --search-field-border-hover-color,
-    var(--field-border-color-focus-hover)
+    var(--field-border-color-hover)
   );
   --text-field-wrapper-border-focus-glow-color: var(
     --search-field-border-focus-glow-color,
@@ -92,3 +92,8 @@
 .SearchField input::-webkit-search-cancel-button {
   margin-left: var(--space-smallest);
 }
+
+.SearchField input {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}

packages/styles/select.css

@@ -38,6 +38,7 @@
   padding: var(--space-three-quarters) var(--space-smallest);
   padding-right: var(--space-large);
   border: 1px solid var(--field-border-color);
+  border-radius: var(--field-border-radius);
   font-family: Roboto;
   font-weight: normal;
   font-style: normal;

packages/styles/text-field-wrapper.css

@@ -2,9 +2,7 @@
   --text-field-wrapper-border-color: var(--field-border-color);
   --text-field-wrapper-background-color: var(--field-background-color);
   --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
-  --text-field-wrapper-border-hover-color: var(
-    --field-border-color-focus-hover
-  );
+  --text-field-wrapper-border-hover-color: var(--field-border-color-hover);
   --text-field-wrapper-border-focus-glow-color: var(
     --field-border-color-focus-glow
   );
@@ -23,9 +21,7 @@
   --text-field-wrapper-border-color: var(--field-border-color);
   --text-field-wrapper-background-color: var(--field-background-color);
   --text-field-wrapper-border-focus-color: var(--field-border-color-focus);
-  --text-field-wrapper-border-hover-color: var(
-    --field-border-color-focus-hover
-  );
+  --text-field-wrapper-border-hover-color: var(--field-border-color-hover);
   --text-field-wrapper-border-focus-glow-color: var(
     --field-border-color-focus-glow
   );
@@ -51,7 +47,7 @@
   display: flex;
   align-items: center;
   border: 1px solid var(--text-field-wrapper-border-color);
-  border-bottom: 1px solid var(--field-border-color-underline);
+  border-radius: var(--field-border-radius);
   margin-bottom: var(--space-half);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
   background-color: var(--text-field-wrapper-background-color);
@@ -71,6 +67,7 @@
 }
 
 .TextFieldWrapper input {
+  border-radius: var(--field-border-radius);
   font-size: var(--text-field-wrapper-font-size);
   color: var(--text-field-wrapper-font-color);
 }

playwright-ct.config.ts

@@ -32,11 +32,5 @@ export default defineConfig({
       name: 'chromium',
       use: { ...devices['Desktop Chrome'] }
     }
-  ],
-  expect: {
-    toHaveScreenshot: {
-      maxDiffPixels: 0,
-      threshold: 0
-    }
-  }
+  ]
 });