Merge pull request #1634 from dequelabs/release-v6.6.0

chore(cauldron): Release 6.6.0

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.6.0](https://github.com/dequelabs/cauldron/compare/v6.5.0...v6.6.0) (2024-08-13)
+
+
+### Features
+
+* **react:** add CopyButton component ([#1603](https://github.com/dequelabs/cauldron/issues/1603)) ([c570ece](https://github.com/dequelabs/cauldron/commit/c570eceb5fa743ffff7ff75ea907652aa6968a42))
+* **react:** add indeterminate support to checkbox ([#1621](https://github.com/dequelabs/cauldron/issues/1621)) ([c49bfd2](https://github.com/dequelabs/cauldron/commit/c49bfd2bb0e8f48574a7e3d81f2e324aa43df949)), closes [#479](https://github.com/dequelabs/cauldron/issues/479) [#479](https://github.com/dequelabs/cauldron/issues/479)
+* **styles,react:** added size prop to tag and synced with designs ([#1602](https://github.com/dequelabs/cauldron/issues/1602)) ([946b10d](https://github.com/dequelabs/cauldron/commit/946b10da549e65374f2e9623506f732e57b7ab0d))
+
 ## [6.5.0](https://github.com/dequelabs/cauldron/compare/v6.4.2...v6.5.0) (2024-08-07)
 
 

docs/components/ComponentProps.tsx

@@ -52,7 +52,7 @@ function TableProps({ children, className, refType, props }: Props) {
             <TableCell>
               children{' '}
               {(children as Record<string, unknown>)?.required && (
-                <Tag>Required</Tag>
+                <Tag size="small">Required</Tag>
               )}
             </TableCell>
             <TableCell>
@@ -81,8 +81,8 @@ function TableProps({ children, className, refType, props }: Props) {
           ) => (
             <TableRow key={name}>
               <TableCell>
-                {name} {required && <Tag>Required</Tag>}{' '}
-                {deprecated && <Tag>deprecated</Tag>}
+                {name} {required && <Tag size="small">Required</Tag>}{' '}
+                {deprecated && <Tag size="small">deprecated</Tag>}
               </TableCell>
               <TableCell>
                 {Array.isArray(type) ? type.join(' | ') : type}
@@ -124,7 +124,7 @@ function DescriptionListProps({
               <DescriptionDetails>
                 children{' '}
                 {(children as Record<string, unknown>)?.required && (
-                  <Tag>Required</Tag>
+                  <Tag size="small">Required</Tag>
                 )}
               </DescriptionDetails>
             </DescriptionListItem>
@@ -173,8 +173,8 @@ function DescriptionListProps({
               <DescriptionListItem>
                 <DescriptionTerm>Name</DescriptionTerm>
                 <DescriptionDetails>
-                  {name} {required && <Tag>Required</Tag>}{' '}
-                  {deprecated && <Tag>deprecated</Tag>}
+                  {name} {required && <Tag size="small">Required</Tag>}{' '}
+                  {deprecated && <Tag size="small">deprecated</Tag>}
                 </DescriptionDetails>
               </DescriptionListItem>
               <DescriptionListItem>

docs/components/Example.tsx

@@ -1,22 +1,43 @@
-import React from 'react';
-import { Code } from '@deque/cauldron-react';
-import CopyToClipboardButton from './CopyToClipboardButton';
+import React, { useEffect, useState, useRef } from 'react';
+import { Code, CopyButton } from '@deque/cauldron-react';
 import './example.css';
 
 interface ExampleProps extends React.HTMLAttributes<HTMLDivElement> {
   raw: string;
 }
 
 export default function Example({ children, raw, ...props }: ExampleProps) {
+  const label = 'copy code example to clipboard';
+  const [accessibleName, setAccessibleName] = useState(label);
+  const ref = useRef<HTMLButtonElement>();
+
+  useEffect(() => {
+    // We don't know what context this button will be included in, so providing
+    // a minimal accessible name of "example, x of y"
+    const elements = Array.from(
+      document.querySelectorAll('[data-copy-example]')
+    );
+    const index = elements.findIndex((element) => element === ref.current);
+    if (index !== -1 && elements.length) {
+      setAccessibleName(`${label}, ${index + 1} of ${elements.length}`);
+    }
+  }, [raw]);
+
   return (
     <section className="Component__example" {...props}>
       {children}
       <div className="Component__example__code">
         <Code children={raw} scrollable />
-        <CopyToClipboardButton
-          label="copy code example to clipboard"
+        <CopyButton
+          ref={ref}
+          data-copy-example
           value={raw}
-        />
+          notificationLabel="copied"
+          hideVisibleLabel
+          thin
+        >
+          {accessibleName}
+        </CopyButton>
       </div>
     </section>
   );

docs/components/example.css

@@ -41,6 +41,7 @@ body.cauldron--theme-dark {
   display: flex;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
+  align-items: flex-start;
 }
 
 .Component__example__code pre.Code {

docs/pages/components/Checkbox.mdx

@@ -72,6 +72,35 @@ import { Checkbox } from '@deque/cauldron-react'
 </FieldWrap>
 ```
 
+### Indeterminate Checkbox
+
+```jsx example
+<FieldWrap>
+  <Checkbox
+    indeterminate
+    id="checkbox-indeterminate"
+    label="Indeterminate Checkbox"
+    name="indeterminate-checkbox"
+    value="1"
+  />
+</FieldWrap>
+```
+
+### Indeterminate Disabled Checkbox
+
+```jsx example
+<FieldWrap>
+  <Checkbox
+    indeterminate
+    disabled
+    id="checkbox-indeterminate-disabled"
+    label="Indeterminate Disabled Checkbox"
+    name="indeterminate-disabled-checkbox"
+    value="1"
+  />
+</FieldWrap>
+```
+
 ### Error Checkbox
 
 ```jsx example
@@ -253,6 +282,12 @@ import { Checkbox } from '@deque/cauldron-react'
       description: 'If the checkbox should be disabled.',
       defaultValue: 'false'
     },
+    {
+      name: 'indeterminate',
+      type: 'boolean',
+      description: 'If the checkbox should be indeterminate.',
+      defaultValue: 'false'
+    },
     {
       name: 'error',
       type: 'string',
@@ -268,4 +303,4 @@ import { Checkbox } from '@deque/cauldron-react'
 
 ## Related Components
 
-- [FieldWrap](./FieldWrap)
+- [FieldWrap](./FieldWrap)

docs/pages/components/CopyButton.mdx

@@ -0,0 +1,99 @@
+---
+title: CopyButton
+description: An interactive component that copies the provided value to the user's clipboard when clicked.
+source: https://github.com/dequelabs/cauldron/tree/develop/packages/react/src/components/CopyButton/index.tsx
+---
+
+import { CopyButton } from '@deque/cauldron-react'
+
+```js
+import { CopyButton } from '@deque/cauldron-react'
+```
+
+## Examples
+
+### Default
+
+```jsx example
+<CopyButton value="text to copy" />
+```
+
+### Label
+
+Both the accessible name and the notification label can be customized.
+
+```jsx example
+<CopyButton 
+  value="body { color: green; }"
+  notificationLabel="CSS Selector Copied!"
+>
+  Copy CSS Selector
+</CopyButton>
+```
+
+### Hide Visible Label
+
+When space is limited, the visible label of the button can be optionally hidden, with the label show on hover or focus with a tooltip.
+
+```jsx example
+<CopyButton 
+  value="text to copy" 
+  hideVisibleLabel
+/>
+```
+
+### Variants
+
+`CopyButton` is an extension of `Button` and limited variants are available to be used:
+
+```jsx example
+<CopyButton variant="primary" value="text to copy" />
+<CopyButton variant="secondary" value="text to copy" thin />
+```
+
+## Props
+
+Unless otherwise noted, prop types are inherited from [Button](./Button).
+
+<ComponentProps
+  children={{
+    type: 'ContentNode',
+    description: 'The accessible name of the button. Defaults to "Copy".'
+  }}
+  refType="HTMLButtonElement"
+  props={[
+    {
+      name: 'value',
+      required: true,
+      description: 'The text to copy upon activation of the button.'
+    },
+    {
+      name: 'variant',
+      type: ['primary', 'secondary', 'tertiary'],
+      defaultValue: 'tertiary',
+      description: 'Visual style of the button.'
+    },
+    {
+      name: 'notificationLabel',
+      type: 'ContentNode',
+      defaultValue: '"Copied"',
+      description: 'The status notification that appears after the text has been copied.'
+    },
+    {
+      name: 'tooltipPlacement',
+      type: 'string',
+      defaultValue: 'auto',
+      description: 'The placement of the tooltip relative to the button.'
+    },
+    {
+      name: 'onCopy',
+      type: 'function',
+      description: 'Callback function invoked with the value of the copied text after the text has been copied.'
+    }
+
+  ]}
+/>
+
+## Related Components
+
+- [Button](./Button)