Adding descriptions to Tag related interfaces (#4053)

* Adding descriptions to Tag related interfaces

* Add description for ref

Author: LFDanLu

packages/@react-aria/tag/src/useTag.ts

@@ -23,16 +23,21 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 
 export interface TagAria {
+  /** Props for the tag visible label (if any). */
   labelProps: DOMAttributes,
+  /** Props for the tag cell element. */
   tagProps: DOMAttributes,
+  /** Props for the tag row element. */
   tagRowProps: DOMAttributes,
+  /** Props for the tag clear button. */
   clearButtonProps: AriaButtonProps
 }
 
 /**
  * Provides the behavior and accessibility implementation for a tag component.
  * @param props - Props to be applied to the tag.
  * @param state - State for the tag group, as returned by `useTagGroupState`.
+ * @param ref - A ref to a DOM element for the tag.
  */
 export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>, ref: RefObject<FocusableElement>): TagAria {
   let {

packages/@react-spectrum/tag/src/TagGroup.tsx

@@ -13,7 +13,7 @@
 import {ActionButton} from '@react-spectrum/button';
 import {AriaTagGroupProps, TagKeyboardDelegate, useTagGroup} from '@react-aria/tag';
 import {classNames, useDOMRef} from '@react-spectrum/utils';
-import {DOMRef, SpectrumHelpTextProps, SpectrumLabelableProps, StyleProps, Validation} from '@react-types/shared';
+import {DOMRef, SpectrumHelpTextProps, SpectrumLabelableProps, StyleProps} from '@react-types/shared';
 import {Field} from '@react-spectrum/label';
 import {FocusScope} from '@react-aria/focus';
 // @ts-ignore
@@ -28,7 +28,7 @@ import {useId, useLayoutEffect, useResizeObserver, useValueEffect} from '@react-
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useTagGroupState} from '@react-stately/tag';
 
-export interface SpectrumTagGroupProps<T> extends AriaTagGroupProps<T>, StyleProps, SpectrumLabelableProps, Validation, Omit<SpectrumHelpTextProps, 'showErrorIcon'> {
+export interface SpectrumTagGroupProps<T> extends AriaTagGroupProps<T>, StyleProps, SpectrumLabelableProps, Omit<SpectrumHelpTextProps, 'showErrorIcon'> {
   /** The label to display on the action button.  */
   actionLabel?: string,
   /** Handler that is called when the action button is pressed. */
@@ -70,7 +70,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
       let computeVisibleTagCount = () => {
         // Refs can be null at runtime.
         let currDomRef: HTMLDivElement | null = domRef.current;
-        let currContainerRef: HTMLDivElement | null = containerRef.current; 
+        let currContainerRef: HTMLDivElement | null = containerRef.current;
         let currTagsRef: HTMLDivElement | null = tagsRef.current;
         if (!currDomRef || !currContainerRef || !currTagsRef) {
           return;
@@ -113,7 +113,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
         }
         return {visibleTagCount: index, showCollapseButton: index < state.collection.size};
       };
-    
+
       setTagState(function *() {
         // Update to show all items.
         yield {visibleTagCount: state.collection.size, showCollapseButton: true};

packages/@react-types/tag/src/index.d.ts

@@ -23,8 +23,12 @@ export interface TagGroupProps<T> extends Omit<CollectionBase<T>, 'disabledKeys'
 }
 
 export interface TagProps<T> extends ItemProps<any> {
+  /** Whether the tag is focused. */
   isFocused: boolean,
+  /** Whether the tag is removable. */
   allowsRemoving?: boolean,
+  /** An object representing the tag. Contains all the relevant information that makes up the tag. */
   item: Node<T>,
+  /** Handler that is called when the user triggers the tag's remove button. */
   onRemove?: (key: Key) => void
 }