Update useTagGroup and useTag returned prop names (adobe#4156)

* update taggroup api to better reflect roles

* change gridRowProps to rowProps

Author: reidbarber

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

@@ -26,9 +26,9 @@ export interface TagAria {
   /** Props for the tag visible label (if any). */
   labelProps: DOMAttributes,
   /** Props for the tag cell element. */
-  tagProps: DOMAttributes,
+  gridCellProps: DOMAttributes,
   /** Props for the tag row element. */
-  tagRowProps: DOMAttributes,
+  rowProps: DOMAttributes,
   /** Props for the tag clear button. */
   clearButtonProps: AriaButtonProps
 }
@@ -78,12 +78,12 @@ export function useTag<T>(props: TagProps<T>, state: TagGroupState<T>, ref: RefO
     labelProps: {
       id: labelId
     },
-    tagRowProps: {
+    rowProps: {
       ...rowProps,
       tabIndex: (isFocused || state.selectionManager.focusedKey == null) ? 0 : -1,
       onKeyDown: allowsRemoving ? onKeyDown : null
     },
-    tagProps: mergeProps(domProps, gridCellProps, {
+    gridCellProps: mergeProps(domProps, gridCellProps, {
       'aria-errormessage': props['aria-errormessage'],
       'aria-label': props['aria-label']
     })

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

@@ -23,7 +23,7 @@ import {useLocale} from '@react-aria/i18n';
 
 export interface TagGroupAria {
   /** Props for the tag grouping element. */
-  tagGroupProps: DOMAttributes,
+  gridProps: DOMAttributes,
   /** Props for the tag group's visible label (if any). */
   labelProps: DOMAttributes,
   /** Props for the tag group description element, if any. */
@@ -62,7 +62,7 @@ export function useTagGroup<T>(props: AriaTagGroupProps<T>, state: TagGroupState
   });
   let domProps = filterDOMProps(props);
   return {
-    tagGroupProps: mergeProps(gridProps, domProps, {
+    gridProps: mergeProps(gridProps, domProps, {
       role: state.collection.size ? 'grid' : null,
       'aria-atomic': false,
       'aria-relevant': 'additions',

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

@@ -41,7 +41,7 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
   let {hoverProps, isHovered} = useHover({});
   let {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});
   let ref = useRef();
-  let {clearButtonProps, labelProps, tagProps, tagRowProps} = useTag({
+  let {clearButtonProps, labelProps, gridCellProps, rowProps} = useTag({
     ...props,
     isFocused,
     allowsRemoving,
@@ -51,7 +51,7 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
 
   return (
     <div
-      {...mergeProps(tagRowProps, hoverProps, focusProps)}
+      {...mergeProps(rowProps, hoverProps, focusProps)}
       className={classNames(
           styles,
           'spectrum-Tags-item',
@@ -66,7 +66,7 @@ export function Tag<T>(props: SpectrumTagProps<T>) {
       ref={ref}>
       <div
         className={classNames(styles, 'spectrum-Tag-cell')}
-        {...tagProps}>
+        {...gridCellProps}>
         <SlotProvider
           slots={{
             icon: {UNSAFE_className: classNames(styles, 'spectrum-Tag-icon'), size: 'XS'},

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

@@ -62,7 +62,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
   ), [direction, isCollapsed, state.collection, tagState.visibleTagCount]) as TagKeyboardDelegate<T>;
   // Remove onAction from props so it doesn't make it into useGridList.
   delete props.onAction;
-  let {tagGroupProps, labelProps, descriptionProps, errorMessageProps} = useTagGroup({...props, keyboardDelegate}, state, tagsRef);
+  let {gridProps, labelProps, descriptionProps, errorMessageProps} = useTagGroup({...props, keyboardDelegate}, state, tagsRef);
   let actionsId = useId();
 
   let updateVisibleTagCount = useCallback(() => {
@@ -171,7 +171,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
           className={classNames(styles, 'spectrum-Tags-container')}>
           <div
             ref={tagsRef}
-            {...tagGroupProps}
+            {...gridProps}
             className={classNames(styles, 'spectrum-Tags')}>
             {visibleTags.map(item => (
               <Tag
@@ -191,7 +191,7 @@ function TagGroup<T extends object>(props: SpectrumTagGroupProps<T>, ref: DOMRef
                 role="group"
                 id={actionsId}
                 aria-label={stringFormatter.format('actions')}
-                aria-labelledby={`${tagGroupProps.id} ${actionsId}`}
+                aria-labelledby={`${gridProps.id} ${actionsId}`}
                 className={classNames(styles, 'spectrum-Tags-actions')}>
                 {tagState.showCollapseButton &&
                   <ActionButton