Add docs for contexts in React Aria Components (#4960)

Author: devongovett

packages/@react-aria/interactions/src/index.ts

@@ -37,7 +37,7 @@ export type {HoverProps, HoverResult} from './useHover';
 export type {InteractOutsideProps} from './useInteractOutside';
 export type {KeyboardProps, KeyboardResult} from './useKeyboard';
 export type {PressProps, PressHookProps, PressResult} from './usePress';
-export type {MoveEvents} from '@react-types/shared';
+export type {PressEvent, PressEvents, MoveStartEvent, MoveMoveEvent, MoveEndEvent, MoveEvents, HoverEvent, HoverEvents, FocusEvents, KeyboardEvents} from '@react-types/shared';
 export type {MoveResult} from './useMove';
 export type {LongPressProps, LongPressResult} from './useLongPress';
 export type {ScrollWheelProps} from './useScrollWheel';

packages/@react-aria/slider/src/useSlider.ts

@@ -13,7 +13,7 @@
 import {AriaSliderProps} from '@react-types/slider';
 import {clamp, mergeProps, useGlobalListeners} from '@react-aria/utils';
 import {DOMAttributes} from '@react-types/shared';
-import {getSliderThumbId, sliderIds} from './utils';
+import {getSliderThumbId, sliderData} from './utils';
 import React, {LabelHTMLAttributes, OutputHTMLAttributes, RefObject, useRef} from 'react';
 import {setInteractionModality, useMove} from '@react-aria/interactions';
 import {SliderState} from '@react-stately/slider';
@@ -54,7 +54,11 @@ export function useSlider<T extends number | number[]>(
   let isVertical = props.orientation === 'vertical';
 
   // Attach id of the label to the state so it can be accessed by useSliderThumb.
-  sliderIds.set(state, labelProps.id ?? fieldProps.id);
+  sliderData.set(state, {
+    id: labelProps.id ?? fieldProps.id,
+    'aria-describedby': props['aria-describedby'],
+    'aria-details': props['aria-details']
+  });
 
   let {direction} = useLocale();
 

packages/@react-aria/slider/src/useSliderThumb.ts

@@ -1,7 +1,7 @@
 import {AriaSliderThumbProps} from '@react-types/slider';
 import {clamp, focusWithoutScrolling, mergeProps, useFormReset, useGlobalListeners} from '@react-aria/utils';
 import {DOMAttributes} from '@react-types/shared';
-import {getSliderThumbId, sliderIds} from './utils';
+import {getSliderThumbId, sliderData} from './utils';
 import React, {ChangeEvent, InputHTMLAttributes, LabelHTMLAttributes, RefObject, useCallback, useEffect, useRef} from 'react';
 import {SliderState} from '@react-stately/slider';
 import {useFocusable} from '@react-aria/focus';
@@ -60,11 +60,11 @@ export function useSliderThumb(
   let {direction} = useLocale();
   let {addGlobalListener, removeGlobalListener} = useGlobalListeners();
 
-  let labelId = sliderIds.get(state);
+  let data = sliderData.get(state);
   const {labelProps, fieldProps} = useLabel({
     ...opts,
     id: getSliderThumbId(state, index),
-    'aria-labelledby': `${labelId} ${opts['aria-labelledby'] ?? ''}`.trim()
+    'aria-labelledby': `${data.id} ${opts['aria-labelledby'] ?? ''}`.trim()
   });
 
   const value = state.values[index];
@@ -247,6 +247,8 @@ export function useSliderThumb(
       'aria-required': isRequired || undefined,
       'aria-invalid': validationState === 'invalid' || undefined,
       'aria-errormessage': opts['aria-errormessage'],
+      'aria-describedby': [data['aria-describedby'], opts['aria-describedby']].filter(Boolean).join(' '),
+      'aria-details': [data['aria-details'], opts['aria-details']].filter(Boolean).join(' '),
       onChange: (e: ChangeEvent<HTMLInputElement>) => {
         state.setThumbValue(index, parseFloat(e.target.value));
       }

packages/@react-aria/slider/src/utils.ts

@@ -1,12 +1,18 @@
 import {SliderState} from '@react-stately/slider';
 
-export const sliderIds = new WeakMap<SliderState, string>();
+interface SliderData {
+  id: string,
+  'aria-describedby'?: string,
+  'aria-details'?: string
+}
+
+export const sliderData = new WeakMap<SliderState, SliderData>();
 
 export function getSliderThumbId(state: SliderState, index: number) {
-  let id = sliderIds.get(state);
-  if (!id) {
+  let data = sliderData.get(state);
+  if (!data) {
     throw new Error('Unknown slider state');
   }
 
-  return `${id}-${index}`;
+  return `${data.id}-${index}`;
 }

packages/@react-aria/tabs/docs/useTabList.mdx

@@ -236,7 +236,7 @@ function Example() {
           The Jurassic ranges from 200 million years to 145 million years ago.
         </Item>
         <Item key="cretaceous" title="Cretaceous">
-          The Cretaceous is the longest period of the Mesozoic, spanning from 145 million to 66 years ago.
+          The Cretaceous is the longest period of the Mesozoic, spanning from 145 million to 66 million years ago.
         </Item>
       </Tabs>
     </>

packages/@react-spectrum/tabs/docs/Tabs.mdx

@@ -271,7 +271,7 @@ function Example() {
   let tabs = [
     {name: 'Triassic', children: 'The Triassic ranges roughly from 252 million to 201 million years ago, preceding the Jurassic Period.'},
     {name: 'Jurassic', children: 'The Jurassic ranges from 200 million years to 145 million years ago.'},
-    {name: 'Cretaceous', children: 'The Cretaceous is the longest period of the Mesozoic, spanning from 145 million to 66 years ago.'}
+    {name: 'Cretaceous', children: 'The Cretaceous is the longest period of the Mesozoic, spanning from 145 million to 66 million years ago.'}
   ];
   type Tab = typeof tabs[0];
   let [timePeriod, setTimePeriod] = React.useState<React.Key>('Triassic');
@@ -310,7 +310,7 @@ function Example() {
   let tabs = [
     {name: 'Triassic', children: 'The Triassic ranges roughly from 252 million to 201 million years ago, preceding the Jurassic Period.'},
     {name: 'Jurassic', children: 'The Jurassic ranges from 200 million years to 145 million years ago.'},
-    {name: 'Cretaceous', children: 'The Cretaceous is the longest period of the Mesozoic, spanning from 145 million to 66 years ago.'}
+    {name: 'Cretaceous', children: 'The Cretaceous is the longest period of the Mesozoic, spanning from 145 million to 66 million years ago.'}
   ];
   type Tab = typeof tabs[0];
 

packages/dev/docs/src/ContextTable.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import clsx from 'clsx';
+import React from 'react';
+import styles from './docs.css';
+import tableStyles from '@adobe/spectrum-css-temp/components/table/vars.css';
+import {Type, TypeContext} from './types';
+import {TypeLink} from './TypeLink';
+import typographyStyles from '@adobe/spectrum-css-temp/components/typography/vars.css';
+
+export function ContextTable({components, docs}) {
+  return (
+    <table className={`${tableStyles['spectrum-Table']} ${styles.propTable}`}>
+      <thead>
+        <tr>
+          <td role="columnheader" className={tableStyles['spectrum-Table-headCell']}>Component</td>
+          <td role="columnheader" className={tableStyles['spectrum-Table-headCell']}>Context</td>
+          <td role="columnheader" className={tableStyles['spectrum-Table-headCell']}>Props</td>
+          <td role="columnheader" className={tableStyles['spectrum-Table-headCell']}>Ref</td>
+        </tr>
+      </thead>
+      <tbody className={tableStyles['spectrum-Table-body']}>
+        {components.map((comp, index) => (
+          <tr key={index} className={clsx(tableStyles['spectrum-Table-row'], styles.tableRow)}>
+            <td role="rowheader" className={clsx(tableStyles['spectrum-Table-cell'], styles.tableCell)} data-column="Component">
+              <code className={`${typographyStyles['spectrum-Code4']}`}>
+                <span className="token hljs-variable">{comp}</span>
+              </code>
+            </td>
+            <td role="rowheader" className={clsx(tableStyles['spectrum-Table-cell'], styles.tableCell)} data-column="Context">
+              <code className={`${typographyStyles['spectrum-Code4']}`}>
+                <span className="token hljs-variable">{`${comp}Context`}</span>
+              </code>
+            </td>
+            <td role="rowheader" className={clsx(tableStyles['spectrum-Table-cell'], styles.tableCell)} data-column="Props">
+              <TypeLink links={docs.links} type={docs.exports[comp].props} />
+            </td>
+            <td role="rowheader" className={clsx(tableStyles['spectrum-Table-cell'], styles.tableCell)} data-column="Ref">
+              <TypeContext.Provider value={docs.links}>
+                <code className={`${typographyStyles['spectrum-Code4']}`}>
+                  <Type type={docs.exports[comp].ref.typeParameters[0]} />
+                </code>
+              </TypeContext.Provider>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}

packages/dev/docs/src/PropTable.js

@@ -81,14 +81,14 @@ export function PropTable({component, links, style}) {
   return (
     <div style={style}>
       <TypeContext.Provider value={links}>
-        <InterfaceType properties={ungrouped} showRequired showDefault isComponent name={component.name} />
+        <InterfaceType properties={ungrouped} showRequired isComponent name={component.name} />
         {Object.keys(groups).map((group, i) => (
           <details key={i}>
             <summary className={typographyStyles['spectrum-Heading4']}>
               <ChevronRight size="S" />
               {group}
             </summary>
-            <InterfaceType properties={groups[group]} showRequired showDefault isComponent name={component.name} />
+            <InterfaceType properties={groups[group]} showRequired isComponent name={component.name} />
           </details>
         ))}
       </TypeContext.Provider>

packages/dev/docs/src/StateTable.js

@@ -24,7 +24,7 @@ export function StateTable({properties, showOptional}) {
   }
 
   return (
-    <table className={`${tableStyles['spectrum-Table']} ${tableStyles['spectrum-Table--quiet']} ${styles.propTable}`}>
+    <table className={`${tableStyles['spectrum-Table']} ${styles.propTable}`}>
       <thead>
         <tr>
           <td role="columnheader" className={tableStyles['spectrum-Table-headCell']}>Name</td>

packages/dev/docs/src/docs.css

@@ -506,6 +506,7 @@ footer li:last-child:after {
 
 .article pre {
   background: var(--spectrum-global-color-gray-75);
+  border: 1px solid var(--spectrum-gray-200);
   --code-padding: 18px;
   padding: var(--code-padding);
   border-radius: 4px;
@@ -515,6 +516,7 @@ footer li:last-child:after {
 
 .article pre:global(.example) {
   border-radius: 4px 4px 0 0;
+  border-bottom: none;
   margin-bottom: 0;
 }
 
@@ -526,6 +528,8 @@ footer li:last-child:after {
 
 .article pre + div > .example {
   border-radius: 0 0 4px 4px;
+  border: 1px solid var(--spectrum-gray-200);
+  border-top: none;
 }
 
 code {