Merge pull request #1482 from dequelabs/release-v6.4.0

chore(cauldron): Release 6.4.0

.github/CODEOWNERS

@@ -3,5 +3,8 @@
 # Request a review from cauldron codeowners on all PRs
 * @dequelabs/cauldron-codeowners
 
+# Request a review from either design team or codeowner for screenshots
+/e2e/screenshots/*.png @dequelabs/cauldron-codeowners @dequelabs/cauldron-design
+
 # Request a review from cauldron team on docs PRs
 /docs/ @dequelabs/cauldron

.github/workflows/tests.yml

@@ -23,6 +23,31 @@ jobs:
           NODE_ENV=production yarn --cwd packages/react build
       - run: yarn test
 
+  screenshots:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/actions/dependencies
+        with:
+          root: true
+          packages-react: true
+          packages-styles: true
+      - name: Build packages
+        run: |
+          NODE_ENV=production yarn --cwd packages/react build
+          NODE_ENV=production yarn --cwd packages/styles build
+      - name: Screenshot testing
+        run: |
+          yarn screenshots:docker
+          yarn screenshots
+      - name: Screenshot test results
+        uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: screenshot-test-results
+          path: ./e2e/test-results
+          retention-days: 14
+
   a11y:
     runs-on: ubuntu-latest
     steps:

.github/workflows/update-browserslist-db.yml

@@ -0,0 +1,34 @@
+name: Update Browserslist Database
+
+on:
+  schedule:
+    # run on the 1st of every month
+    - cron: '15 3 1 * *'
+  workflow_call:
+
+jobs:
+
+  update-browserlist-db:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Update Browserlist Database
+        run: |
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          npx update-browserslist-db@latest
+          cd packages/react && npx update-browserslist-db@latest
+          cd ../styles && npx update-browserslist-db@latest
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@v6
+        with:
+          add-paths: |
+            yarn.lock
+            packages/*/yarn.lock
+          commit-message: 'chore: update browserlist database'
+          branch: update-browserlist-database
+          base: develop
+          title: 'chore: update browserlist database'
+          body: |
+            This patch updates any outdated browserlist databases.
+            This PR was opened automatically by a robot :robot: :tada:

.gitignore

@@ -4,4 +4,7 @@ coverage
 packages/react/lib
 .DS_Store
 yarn-error.log
-.vscode/
+.vscode/
+
+playwright/.cache
+e2e/test-results

CHANGELOG.md

@@ -2,6 +2,22 @@
 
 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.4.0](https://github.com/dequelabs/cauldron/compare/v6.3.2...v6.4.0) (2024-05-16)
+
+
+### Features
+
+* **react:** deprecate individual tooltip props for IconButton replacing with tooltipProps ([#1465](https://github.com/dequelabs/cauldron/issues/1465)) ([b5ed8b0](https://github.com/dequelabs/cauldron/commit/b5ed8b0dbe520c34ca46dd775194ee56e3d7a960))
+* **react:** support use of custom classNames with Toast component ([#1447](https://github.com/dequelabs/cauldron/issues/1447)) ([ea1aa6d](https://github.com/dequelabs/cauldron/commit/ea1aa6dc54e79d0c09817b7cff744802f52b196b))
+* **styles:** adjust button thin height to minimally be set to 24px ([#1420](https://github.com/dequelabs/cauldron/issues/1420)) ([8ee7748](https://github.com/dequelabs/cauldron/commit/8ee7748b840a11b845524bca9244165c96b154b6))
+* **styles:** allow arbitrary heading levels to be styled consistently for TwoColumnPanel headers ([#1454](https://github.com/dequelabs/cauldron/issues/1454)) ([3ee3378](https://github.com/dequelabs/cauldron/commit/3ee3378c33a4d027c6574b176208280b510cb312))
+
+
+### Bug Fixes
+
+* **react:** fix BreadcrumbLink type interface to correctly allow for polymorphic anchor components ([#1441](https://github.com/dequelabs/cauldron/issues/1441)) ([fd12436](https://github.com/dequelabs/cauldron/commit/fd12436069a6cfa025ce91c66892b23654262309))
+* **styles:** fix issue with text overflow leading to timeline details to be misaligned ([#1479](https://github.com/dequelabs/cauldron/issues/1479)) ([6b5e676](https://github.com/dequelabs/cauldron/commit/6b5e67668c07c32346f7b2647d8ecfbc2601f410))
+
 ### [6.3.2](https://github.com/dequelabs/cauldron/compare/v6.3.1...v6.3.2) (2024-04-03)
 
 

CONTRIBUTING.md

@@ -173,7 +173,7 @@ The testing methodology should account for both testing the interface of a compo
 
 Cauldron uses [Jest](https://jestjs.io/) as its test runner to run unit tests along with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/).
 
-> [!IMPORTANT]   
+> [!IMPORTANT]  
 > We are currently in the process of migrating existing tests away from Enzyme to React Testing Library. New tests should **not** be written in Enzyme.
 
 ### Accessibility Testing

docs/components/CopyToClipboardButton.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react';
+import React, { useRef, useEffect, useState, useMemo } from 'react';
 import { IconButton, Toast } from '@deque/cauldron-react';
 
 interface CopyToClipboardButtonProps
@@ -27,6 +27,38 @@ function copyTextToClipboard(text: string) {
   return copied;
 }
 
+// Note: eventually we want to natively handle multiple toasts, but for now we will limit the copy toast notification
+// to only display a single notification to prevent weird focus issues
+const notificationsMap = new Map<Symbol, React.ComponentProps<Toast>>();
+function CopyNotificationToast(
+  props: React.ComponentProps<Toast>
+): JSX.Element {
+  const { show, onDismiss } = props;
+  const id = useMemo(() => Symbol('toast'), []);
+  const [deferredShow, setDeferredShow] = useState(false);
+
+  useEffect(() => {
+    if (show) {
+      Array.from(notificationsMap.values()).forEach(({ onDismiss }) => {
+        // force any open toasts to dismiss themselves
+        onDismiss();
+      });
+      notificationsMap.set(id, props);
+      // toast sets show via set timeout, so this matches the behavior to avoid a race condition
+      setTimeout(() => setDeferredShow(show));
+    } else {
+      notificationsMap.delete(id);
+      setDeferredShow(false);
+    }
+
+    return () => {
+      notificationsMap.delete(id);
+    };
+  }, [show]);
+
+  return <Toast {...props} show={deferredShow} />;
+}
+
 export default function CopyToClipboardButton({
   value,
   label = 'copy to clipboard',
@@ -69,14 +101,14 @@ export default function CopyToClipboardButton({
         onClick={handleClick}
         label={accessibleName}
       />
-      <Toast
+      <CopyNotificationToast
         toastRef={toastRef}
         show={showToast}
         type="info"
         onDismiss={handleDismiss}
       >
         Example copied to clipboard!
-      </Toast>
+      </CopyNotificationToast>
     </>
   );
 }

docs/mdx-components.tsx

@@ -39,7 +39,10 @@ function Heading({ level, children, ...props }: HeadingProps) {
   );
 }
 
-function Link({ href, ...props }: React.LinkHTMLAttributes<HTMLLinkElement>) {
+function Link({
+  href,
+  ...props
+}: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   const external = href.indexOf('://') > 0 || href.indexOf('//') === 0;
   return external ? (
     <CauldronLink href={href} {...props} />

docs/pages/components/Breadcrumb.mdx

@@ -58,7 +58,7 @@ import {
 
 <ComponentProps
   children={true}
-  refType="HTMLLinkElement"
+  refType="HTMLAnchorElement"
 />
 
 ### BreadcrumbItem

docs/pages/components/IconButton.mdx

@@ -39,36 +39,30 @@ Error buttons are used to indicate potentially dangerous actions.
 <IconButton variant="error" icon="pencil" label="Edit" disabled />
 ```
 
-### Tooltip Placement
+### Tooltip Customization
 
-Tooltip placement has a default value of `auto`, but can be fixed to a certain position if needed.
+The default tooltip can be modified by setting the relevant props configuration from [Tooltip](./Tooltip). This includes all props except for `children` and `target`.
 
 ```jsx example
-<IconButton icon="trash" label="Delete" tooltipPlacement="bottom" />
-```
-
-### Tooltip Variant
-
-The tooltip style can also be customized.
-
-```jsx example
-<IconButton icon="info-circle" label="More Information" tooltipVariant="info" />
+<IconButton 
+  icon="trash"
+  label="Delete" 
+  tooltipProps={{ placement: 'bottom', variant: 'info' }} 
+/>
 ```
 
 ### Offscreen Text
 
 If there are multiple icon buttons with the same label, the visible label text can be combined with `Offscreen` to provide additional context to users using assistive technology (AT).
 
 ```jsx example
-<div class="users">
-  <div>
-    User: Jason 
-    <IconButton icon="trash" label={<>Delete User <Offscreen>Jason</Offscreen></>} />
-  </div>
-  <div>
-    User: Harris 
-    <IconButton icon="trash" label={<>Delete User <Offscreen>Harris</Offscreen></>} />
-  </div>
+<div>
+  User: Jason 
+  <IconButton icon="trash" label={<>Delete User <Offscreen>Jason</Offscreen></>} />
+</div>
+<div>
+  User: Harris 
+  <IconButton icon="trash" label={<>Delete User <Offscreen>Harris</Offscreen></>} />
 </div>
 ```
 
@@ -112,23 +106,31 @@ If there are multiple icon buttons with the same label, the visible label text c
       defaultValue: 'button',
       description: 'Component to render the IconButton as.'
     },
+    {
+      name: 'tooltipProps',
+      type: 'object',
+      description: 'Props to pass and configure the displayed tooltip.'
+    },
     {
       name: 'tooltipPlacement',
       type: 'string',
+      deprecated: true,
       defaultValue: 'auto',
-      description: 'The position of the tooltip relative to its target element.'
+      description: 'Deprecated, use "tooltipProps.placement" instead.'
     },
     {
       name: 'tooltipVariant',
       type: ['info', 'text', 'big'],
+      deprecated: true,
       defaultValue: 'text',
-      description: 'The style of tooltip to display.'
+      description: 'Deprecated, use "tooltipProps.variant" instead.'
     },
     {
       name: 'tooltipPortal',
       type: ['React.Ref', 'HTMLElement'],
+      deprecated: true,
       defaultValue: 'document.body',
-      description: 'The parent element to place the Tooltip in.'
+      description: 'Deprecated, use "tooltipProps.portal" instead.'
     },
     {
       name: 'large',

docs/pages/components/Toast.mdx

@@ -141,6 +141,7 @@ function NonDismissibleToastExample() {
 
 <ComponentProps
   children={true}
+  className={true}
   props={[
     {
       name: 'type',

docs/pages/components/TwoColumnPanel.mdx

@@ -32,6 +32,10 @@ import {
 
 `TwoColumnPanel` takes in a set of columns, `ColumnLeft` and `ColumnRight` with the left column containing the list of items to choose from and the right column intended to be the currently selected item. It is expected that accessible names are provided for both of the left/right columns via `aria-label` or `aria-labelledby`.
 
+<Note>
+  The heading levels provided in the below examples are the typical heading levels used for `TwoColumnPanel`. The appropriate heading levels will need to be set within context of the content of which `TwoColumnPanel` is placed.
+</Note>
+
 ```jsx example
 function TwoColumnPanelExample() {
   const [selected, setSelected] = useState(1);
@@ -69,7 +73,9 @@ function TwoColumnPanelExample() {
   return (
     <TwoColumnPanel>
       <ColumnLeft aria-labelledby="sidebar">
-        <ColumnHeader id="sidebar">Items</ColumnHeader>
+        <ColumnHeader id="sidebar">
+          <h2>Items</h2>
+        </ColumnHeader>
         <nav aria-labelledby="sidebar">
           <ul>
             {items.map(item => (
@@ -152,7 +158,9 @@ function TwoColumnPanelGroupedItemsExample() {
   return (
     <TwoColumnPanel>
       <ColumnLeft aria-labelledby="group-heading">
-        <ColumnHeader id="group-heading">Grouped Items</ColumnHeader>
+        <ColumnHeader id="group-heading">
+          <h2>Grouped Items</h2>
+        </ColumnHeader>
         <ColumnList>
           <ColumnGroupHeader>
             <h3>Optional group heading</h3>

e2e/Dockerfile

@@ -0,0 +1,20 @@
+ARG playwright_version=1.44.0
+FROM mcr.microsoft.com/playwright:v$playwright_version-jammy
+
+WORKDIR /app
+COPY ./yarn.lock ./
+COPY ./tsconfig.json ./
+COPY ./e2e ./e2e
+COPY ./packages ./packages
+COPY ./playwright ./playwright
+COPY ./playwright-ct.config.ts ./playwright-ct.config.ts
+RUN yarn add --prefix \
+    playwright@$playwright_version \
+    @playwright/test@$playwright_version \
+    @playwright/experimental-ct-react17@$playwright_version \
+    react@^17 \
+    react-dom@^17 \
+    @fontsource/roboto@^4.5.1 \
+    && rm -rf playwright/.cache
+
+ENTRYPOINT ["/app/e2e/entrypoint.sh"]

e2e/entrypoint.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+/app/node_modules/.bin/playwright test -c playwright-ct.config.ts "$@"