Merge branch 'develop' into tag-button-position

.eslintrc.js

@@ -33,20 +33,5 @@ module.exports = {
     react: {
       version: '16'
     }
-  },
-  overrides: [
-    {
-      files: '**/*/__tests__/**/*.js',
-      globals: {
-        jest: true,
-        test: true,
-        expect: true,
-        afterEach: true,
-        afterAll: true,
-        beforeEach: true,
-        beforeAll: true
-      }
-    },
-    { files: '*.js', rules: { '@typescript-eslint/no-var-requires': 'off' } }
-  ]
+  }
 };

.github/workflows/lint.yml

@@ -12,4 +12,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/dependencies
+        with:
+          root: true
+          packages-react: true
       - run: yarn lint
+      - name: typecheck
+        run: |
+          yarn --cwd packages/react build
+          yarn typecheck

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.3.0](https://github.com/dequelabs/cauldron/compare/v6.2.1...v6.3.0) (2024-03-14)
+
+
+### Features
+
+* **react,styles:** add SearchField and internal TextFieldWrapper components ([#1372](https://github.com/dequelabs/cauldron/issues/1372)) ([46b16a1](https://github.com/dequelabs/cauldron/commit/46b16a14b8ec5fc1480cefa5ba4dd2ad8c478cbc))
+* **react:** Add property to include trailing children for SearchField component ([#1385](https://github.com/dequelabs/cauldron/issues/1385)) ([88e97f1](https://github.com/dequelabs/cauldron/commit/88e97f1950a23b62fe5a4b2a7c3e9750e26fb397))
+* **react:** add ref support to Link ([#1357](https://github.com/dequelabs/cauldron/issues/1357)) ([5d92f1e](https://github.com/dequelabs/cauldron/commit/5d92f1e2b49f6a5ce814de4c996c285c79d4fab4))
+* **react:** Add TextEllipsis utility component ([#1354](https://github.com/dequelabs/cauldron/issues/1354)) ([3e6e4cd](https://github.com/dequelabs/cauldron/commit/3e6e4cd8aa661f3b81bcdddbd538f77706f23283))
+
+
+### Bug Fixes
+
+* **react:** ensure Tooltip cleans up association id after removal ([#1370](https://github.com/dequelabs/cauldron/issues/1370)) ([595b9fb](https://github.com/dequelabs/cauldron/commit/595b9fbc6d1a1dde87c0ff54d7c26c6f5e135241))
+
 ### [6.2.1](https://github.com/dequelabs/cauldron/compare/v6.2.0...v6.2.1) (2024-02-20)
 
 

docs/components/Spacing.css

@@ -6,6 +6,7 @@
 .cauldron--theme-dark {
   --spacing-list-name-color: var(--gray-20);
   --spacing-list-base-color: var(--gray-40);
+  --spacing-example-color: var(--accent-light);
 }
 
 .Spacing__example {

docs/pages/components/TextEllipsis.mdx

@@ -0,0 +1,83 @@
+---
+title: TextEllipsis
+description: A utility component to truncate long text and provide an alternative means of accessing hidden text
+source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/TextEllipsis/index.tsx
+---
+
+import { TextEllipsis, Link } from '@deque/cauldron-react'
+
+```js
+import { TextEllipsis } from '@deque/cauldron-react'
+```
+
+`TextEllipsis` is a utility component to provide an accessible means of preventing overflow for text that does not fit within a constrained area.
+
+<Note>
+  This component should be used sparingly and only when absolutely necessary. While this component addresses specific accessibility issues ([1.4.10 Reflow](https://www.w3.org/WAI/WCAG22/Understanding/reflow.html), [1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html)) that may arise from overflowing text, ellipsizing text can still present usability issues to users as additional interaction is needed to show the full text content.
+</Note>
+
+Some good examples of where it's appropriate to use this component:
+
+- Long URL links
+- Long user provided content or names
+- Links that point to a page that contains non-truncated text
+
+Truncation should **not** be used on headers, labels, error messages, or notifications.
+
+## Examples
+
+### One-line Ellipsis
+
+```jsx example
+<TextEllipsis>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TextEllipsis>
+```
+
+If your component is a Button, Link, or some other kind of interactive element with a `tabIndex`, you _must_ provide your component as a Polymorphic component using the `as` prop to avoid nesting interactive elements:
+
+```jsx example
+<TextEllipsis as={Link}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</TextEllipsis>
+```
+
+<Note>
+  When using the `as` property it is expected the element getting passed in is an interactive element. Passing an element that is not interactive will result in accessibility issues.
+</Note>
+
+### Multi-line Ellipsis
+
+```jsx example
+<TextEllipsis maxLines={2}>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+</TextEllipsis>
+```
+
+## Props
+
+<ComponentProps
+  children={{
+    required: true,
+    type: 'string'
+  }}
+  refType="HTMLElement"
+  props={[
+    {
+      name: 'maxLines',
+      type: 'number',
+      defaultValue: '1',
+      description: 'Sets the maximum number of display line before truncation.'
+    },
+    {
+      name: 'as',
+      type: ['React.ElementType', 'string'],
+      description: 'A component to render the TextEllipsis as.',
+    },
+    {
+      name: 'tooltipProps',
+      type: 'object',
+      description: 'Props to pass and configure the displayed tooltip.'
+    }
+  ]}
+/>
+
+## Related Components
+
+- [Tooltip](./Tooltip)

docs/pages/components/Tooltip.mdx

@@ -183,7 +183,7 @@ function BigTooltipExample() {
     },
     {
       name: 'association',
-      type: ['aria-labelledby', 'aria-describedby'],
+      type: ['aria-labelledby', 'aria-describedby', 'none'],
       description: 'Sets the aria relationship for the targeted element.',
       defaultValue: 'aria-describedby'
     },

docs/pages/components/TwoColumnPanel.mdx

@@ -152,9 +152,9 @@ function TwoColumnPanelGroupedItemsExample() {
   return (
     <TwoColumnPanel>
       <ColumnLeft aria-labelledby="group-heading">
-        <ColumnHeader>Grouped Items</ColumnHeader>
+        <ColumnHeader id="group-heading">Grouped Items</ColumnHeader>
         <ColumnList>
-          <ColumnGroupHeader id="group-heading">
+          <ColumnGroupHeader>
             <h3>Optional group heading</h3>
           </ColumnGroupHeader>
           <nav aria-labelledby="group-heading">

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cauldron",
   "private": true,
-  "version": "6.2.1",
+  "version": "6.3.0",
   "license": "MPL-2.0",
   "scripts": {
     "clean": "rimraf dist docs/dist",
@@ -15,6 +15,7 @@
     "dev:docs": "webpack-dev-server",
     "fmt": "prettier --write \"e2e/*.ts\" \"docs/**/*.{css,js}\" \"packages/react/**/*.{js,ts,tsx}\" \"packages/styles/*.css\" *.{js,json,md,ts}",
     "lint": "eslint . --quiet",
+    "typecheck": "yarn --cwd=packages/react tsc --noEmit --skipLibCheck",
     "prebuild": "yarn clean",
     "predev": "yarn clean",
     "test": "yarn --cwd=packages/react test",

packages/react/.eslintrc.js

@@ -3,12 +3,19 @@ module.exports = {
   plugins: ['ssr-friendly'],
   overrides: [
     {
-      files: ['__tests__/**/*', '**/*.test.[j|t]sx?', 'src/setupTests.ts'],
+      files: ['__tests__/**/*', '**/*/*.test.{j,t}sx', 'src/setupTests.ts'],
       rules: {
         'ssr-friendly/no-dom-globals-in-module-scope': 'off',
         'ssr-friendly/no-dom-globals-in-constructor': 'off',
         'ssr-friendly/no-dom-globals-in-react-cc-render': 'off',
-        'ssr-friendly/no-dom-globals-in-react-fc': 'off'
+        'ssr-friendly/no-dom-globals-in-react-fc': 'off',
+        'react/display-name': 'off'
+      }
+    },
+    {
+      files: ['*.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off'
       }
     }
   ]