radix-ui · benoitgrelard · Jun 15, 2022 · Apr 12, 2022 · Apr 12, 2022 · Jun 2, 2022
diff --git a/components/DataAttributesTable.tsx b/components/DataAttributesTable.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Box, Text, Kbd, Code } from '@modulz/design-system';
+import { RegionTable } from './RegionTable';
+
+type KeyboardDef = {
+  attribute: string;
+  values: string;
+};
+
+export function DataAttributesTable({
+  data,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+}: {
+  data: KeyboardDef[];
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}) {
+  const hasAriaLabel = !!(ariaLabel || ariaLabelledBy);
+  return (
+    <RegionTable
+      css={{ width: '100%', textAlign: 'left', borderCollapse: 'collapse' }}
+      aria-label={hasAriaLabel ? ariaLabel : 'Keyboard Interactions'}
+      aria-labelledby={ariaLabelledBy}
+    >
+      <thead>
+        <tr>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '40%' }}>
+            <Text size="2" css={{ color: '$gray11' }}>
+              Data Attribute
+            </Text>
+          </Box>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '60%' }}>
+            <Text size="2" css={{ color: '$gray11' }}>
+              Values
+            </Text>
+          </Box>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map(({ attribute, values }, i) => (
+          <tr key={i}>
+            <Box
+              as="td"
+              css={{
+                borderBottom: '1px solid $gray6',
+                py: '$3',
+                pr: '$4',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              <Code>{attribute}</Code>
+            </Box>
+
+            <Box as="td" css={{ borderBottom: '1px solid $gray6', py: '$3' }}>
+              {Array.isArray(values) ? (
+                <Code css={{ bc: '$gray4', color: '$gray11' }}>
+                  {values.map(
+                    (value, index) => `"${value}" ${values.length !== index + 1 ? ' | ' : ''}`
+                  )}
+                </Code>
+              ) : (
+                <Text size="3" css={{ lineHeight: '25px' }}>
+                  {values}
+                </Text>
+              )}
+            </Box>
+          </tr>
+        ))}
+      </tbody>
+    </RegionTable>
+  );
+}
diff --git a/components/MDXComponents.tsx b/components/MDXComponents.tsx
@@ -14,6 +14,7 @@ import { HeroQuote } from './HeroQuote';
 import { Frontmatter } from 'types/frontmatter';
 import { ColorScale, ColorScaleGroup } from './Scale';
 import * as Demos from './demos';
+import { DataAttributesTable } from './DataAttributesTable';
 
 export const components = {
   ColorScale,
@@ -184,8 +185,9 @@ export const components = {
   Highlights,
   Kbd: DS.Kbd,
   Code: DS.Code,
+  DataAttributesTable: (props) => <DataAttributesTable {...props} />,
   PropsTable: (props) => (
-    <DS.Box css={{ mb: '$5' }}>
+    <DS.Box css={{ mb: '$2' }}>
       <PropsTable {...props} />
     </DS.Box>
   ),

diff --git a/components/PropsTable.tsx b/components/PropsTable.tsx
@@ -39,17 +39,17 @@ export function PropsTable({
     >
       <thead>
         <tr>
-          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4' }}>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '40%' }}>
             <Text size="2" css={{ color: '$gray11' }}>
               Prop
             </Text>
           </Box>
-          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4' }}>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '30%' }}>
             <Text size="2" css={{ color: '$gray11' }}>
               Type
             </Text>
           </Box>
-          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4' }}>
+          <Box as="th" css={{ borderBottom: '1px solid $gray6', py: '$3', pr: '$4', width: '30%' }}>
             <Text size="2" css={{ color: '$gray11' }}>
               Default
             </Text>

diff --git a/data/primitives/components/accordion/0.1.7.mdx b/data/primitives/components/accordion/0.1.7.mdx
@@ -219,6 +219,19 @@ Contains all the parts of a collapsible section.
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+    {
+      attribute: '[data-disabled]',
+      values: 'Present when disabled',
+    },
+  ]}
+/>
+
 ### Header
 
 Wraps an `Accordion.Trigger`. Use the `asChild` prop to update it to the appropriate heading level for your page.
@@ -236,6 +249,19 @@ Wraps an `Accordion.Trigger`. Use the `asChild` prop to update it to the appropr
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+    {
+      attribute: '[data-disabled]',
+      values: 'Present when disabled',
+    },
+  ]}
+/>
+
 ### Trigger
 
 Toggles the collapsed state of its associated item. It should be nested inside of an `Accordion.Header`.
@@ -253,6 +279,19 @@ Toggles the collapsed state of its associated item. It should be nested inside o
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+    {
+      attribute: '[data-disabled]',
+      values: 'Present when disabled',
+    },
+  ]}
+/>
+
 ### Content
 
 Contains the collapsible content for an item.
@@ -280,6 +319,19 @@ Contains the collapsible content for an item.
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+    {
+      attribute: '[data-disabled]',
+      values: 'Present when disabled',
+    },
+  ]}
+/>
+
 ## Examples
 
 ### Expanded by default

diff --git a/data/primitives/components/alert-dialog/0.1.8.mdx b/data/primitives/components/alert-dialog/0.1.8.mdx
@@ -150,6 +150,15 @@ A button that opens the dialog.
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+  ]}
+/>
+
 ### Portal
 
 When used, portals your overlay and content parts into the `body`.
@@ -205,6 +214,15 @@ A layer that covers the inert portion of the view when the dialog is open.
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+  ]}
+/>
+
 ### Content
 
 Contains content to be rendered when the dialog is open.
@@ -267,6 +285,15 @@ Contains content to be rendered when the dialog is open.
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+  ]}
+/>
+
 ### Cancel
 
 A button that closes the dialog. This button should be distinguished visually from `AlertDialog.Action` buttons.

diff --git a/data/primitives/components/checkbox/0.1.6.mdx b/data/primitives/components/checkbox/0.1.6.mdx
@@ -127,6 +127,19 @@ Contains all the parts of a checkbox. An `input` will also render when used with
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['checked', 'unchecked', 'indeterminate'],
+    },
+    {
+      attribute: '[data-disabled]',
+      values: 'Present when disabled',
+    },
+  ]}
+/>
+
 ### Indicator
 
 Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.
@@ -150,6 +163,19 @@ Renders when the checkbox is in a checked or indeterminate state. You can style
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['checked', 'unchecked', 'indeterminate'],
+    },
+    {
+      attribute: '[data-disabled]',
+      values: 'Present when disabled',
+    },
+  ]}
+/>
+
 ## Examples
 
 ### Indeterminate

diff --git a/data/primitives/components/collapsible/0.1.7.mdx b/data/primitives/components/collapsible/0.1.7.mdx
@@ -98,6 +98,19 @@ Contains all the parts of a collapsible.
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+    {
+      attribute: '[data-disabled]',
+      values: 'Present when disabled',
+    },
+  ]}
+/>
+
 ### Trigger
 
 The button that toggles the collapsible.
@@ -115,6 +128,19 @@ The button that toggles the collapsible.
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+    {
+      attribute: '[data-disabled]',
+      values: 'Present when disabled',
+    },
+  ]}
+/>
+
 ### Content
 
 The component that contains the collapsible content.
@@ -138,6 +164,19 @@ The component that contains the collapsible content.
   ]}
 />
 
+<DataAttributesTable
+  data={[
+    {
+      attribute: '[data-state]',
+      values: ['open', 'closed'],
+    },
+    {
+      attribute: '[data-disabled]',
+      values: 'Present when disabled',
+    },
+  ]}
+/>
+
 ## Examples
 
 ### Animating content size