Migrate TagGroup component from useStyles to useDefinition

Split shared TagGroupDefinition into TagGroupDefinition (root) and
TagDefinition (tag sub-component). Tag's size prop now uses dataAttribute
with default in propDefs instead of manual data-size and default spreading.

Signed-off-by: Johan Persson <johanopersson@gmail.com>

packages/ui/report.api.md

@@ -2434,25 +2434,47 @@ export const TagGroup: <T extends object>(
 
 // @public
 export const TagGroupDefinition: {
+  readonly styles: {
+    readonly [key: string]: string;
+  };
   readonly classNames: {
-    readonly group: 'bui-TagGroup';
+    readonly root: 'bui-TagGroup';
     readonly list: 'bui-TagList';
-    readonly tag: 'bui-Tag';
-    readonly tagIcon: 'bui-TagIcon';
-    readonly tagRemoveButton: 'bui-TagRemoveButton';
+  };
+  readonly propDefs: {
+    readonly items: {};
+    readonly children: {};
+    readonly renderEmptyState: {};
+    readonly className: {};
   };
 };
 
 // @public
-export interface TagGroupProps<T>
-  extends Omit<TagGroupProps_2, 'children'>,
-    Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'> {}
+export type TagGroupOwnProps<T = object> = {
+  items?: TagListProps<T>['items'];
+  children?: TagListProps<T>['children'];
+  renderEmptyState?: TagListProps<T>['renderEmptyState'];
+  className?: string;
+};
 
 // @public
-export interface TagProps extends TagProps_2 {
+export interface TagGroupProps<T>
+  extends TagGroupOwnProps<T>,
+    Omit<TagGroupProps_2, 'children' | keyof TagGroupOwnProps> {}
+
+// @public
+export type TagOwnProps = {
   icon?: React.ReactNode;
   size?: 'small' | 'medium';
-}
+  href?: TagProps_2['href'];
+  children?: TagProps_2['children'];
+  className?: string;
+};
+
+// @public
+export interface TagProps
+  extends TagOwnProps,
+    Omit<TagProps_2, keyof TagOwnProps> {}
 
 // @public (undocumented)
 const Text_2: {

packages/ui/src/components/TagGroup/TagGroup.tsx

@@ -21,13 +21,11 @@ import {
   Tag as ReactAriaTag,
   Button as ReactAriaButton,
 } from 'react-aria-components';
-import { forwardRef, type PropsWithRef, type ReactNode, type Ref } from 'react';
+import { forwardRef, type ReactNode } from 'react';
 import { RiCloseCircleLine } from '@remixicon/react';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles';
-import { TagGroupDefinition } from './definition';
+import { useDefinition } from '../../hooks/useDefinition';
+import { TagGroupDefinition, TagDefinition } from './definition';
 import { createRoutingRegistration } from '../InternalLinkProvider';
-import styles from './TagGroup.module.css';
 
 const { RoutingProvider, useRoutingRegistrationEffect } =
   createRoutingRegistration();
@@ -38,17 +36,14 @@ const { RoutingProvider, useRoutingRegistrationEffect } =
  * @public
  */
 export const TagGroup = <T extends object>(props: TagGroupProps<T>) => {
-  const { classNames, cleanedProps } = useStyles(TagGroupDefinition, props);
-  const { items, children, renderEmptyState, ...rest } = cleanedProps;
+  const { ownProps, restProps } = useDefinition(TagGroupDefinition, props);
+  const { classes, items, children, renderEmptyState } = ownProps;
 
   return (
     <RoutingProvider>
-      <ReactAriaTagGroup
-        className={clsx(classNames.group, styles[classNames.group])}
-        {...rest}
-      >
+      <ReactAriaTagGroup className={classes.root} {...restProps}>
         <ReactAriaTagList
-          className={clsx(classNames.list, styles[classNames.list])}
+          className={classes.list}
           items={items}
           renderEmptyState={renderEmptyState}
         >
@@ -64,50 +59,36 @@ export const TagGroup = <T extends object>(props: TagGroupProps<T>) => {
  *
  * @public
  */
-export const Tag = forwardRef(
-  (props: PropsWithRef<TagProps>, ref: Ref<HTMLDivElement>) => {
-    const { classNames, cleanedProps } = useStyles(TagGroupDefinition, {
-      size: 'small',
-      ...props,
-    });
-    const { children, className, icon, size, href, ...rest } = cleanedProps;
-    const textValue = typeof children === 'string' ? children : undefined;
+export const Tag = forwardRef<HTMLDivElement, TagProps>((props, ref) => {
+  const { ownProps, restProps, dataAttributes } = useDefinition(
+    TagDefinition,
+    props,
+  );
+  const { classes, children, icon, href } = ownProps;
+  const textValue = typeof children === 'string' ? children : undefined;
 
-    useRoutingRegistrationEffect(href);
+  useRoutingRegistrationEffect(href);
 
-    return (
-      <ReactAriaTag
-        ref={ref}
-        textValue={textValue}
-        className={clsx(classNames.tag, styles[classNames.tag], className)}
-        data-size={size}
-        href={href}
-        {...rest}
-      >
-        {({ allowsRemoving }) => (
-          <>
-            {icon && (
-              <span
-                className={clsx(classNames.tagIcon, styles[classNames.tagIcon])}
-              >
-                {icon}
-              </span>
-            )}
-            {children as ReactNode}
-            {allowsRemoving && (
-              <ReactAriaButton
-                className={clsx(
-                  classNames.tagRemoveButton,
-                  styles[classNames.tagRemoveButton],
-                )}
-                slot="remove"
-              >
-                <RiCloseCircleLine size={16} />
-              </ReactAriaButton>
-            )}
-          </>
-        )}
-      </ReactAriaTag>
-    );
-  },
-);
+  return (
+    <ReactAriaTag
+      ref={ref}
+      textValue={textValue}
+      className={classes.root}
+      href={href}
+      {...dataAttributes}
+      {...restProps}
+    >
+      {({ allowsRemoving }) => (
+        <>
+          {icon && <span className={classes.icon}>{icon}</span>}
+          {children as ReactNode}
+          {allowsRemoving && (
+            <ReactAriaButton className={classes.removeButton} slot="remove">
+              <RiCloseCircleLine size={16} />
+            </ReactAriaButton>
+          )}
+        </>
+      )}
+    </ReactAriaTag>
+  );
+});

packages/ui/src/components/TagGroup/definition.ts

@@ -14,18 +14,41 @@
  * limitations under the License.
  */
 
-import type { ComponentDefinition } from '../../types';
+import { defineComponent } from '../../hooks/useDefinition';
+import type { TagGroupOwnProps, TagOwnProps } from './types';
+import styles from './TagGroup.module.css';
 
 /**
  * Component definition for TagGroup
  * @public
  */
-export const TagGroupDefinition = {
+export const TagGroupDefinition = defineComponent<TagGroupOwnProps>()({
+  styles,
   classNames: {
-    group: 'bui-TagGroup',
+    root: 'bui-TagGroup',
     list: 'bui-TagList',
-    tag: 'bui-Tag',
-    tagIcon: 'bui-TagIcon',
-    tagRemoveButton: 'bui-TagRemoveButton',
   },
-} as const satisfies ComponentDefinition;
+  propDefs: {
+    items: {},
+    children: {},
+    renderEmptyState: {},
+    className: {},
+  },
+});
+
+/** @internal */
+export const TagDefinition = defineComponent<TagOwnProps>()({
+  styles,
+  classNames: {
+    root: 'bui-Tag',
+    icon: 'bui-TagIcon',
+    removeButton: 'bui-TagRemoveButton',
+  },
+  propDefs: {
+    icon: {},
+    size: { dataAttribute: true, default: 'small' },
+    href: {},
+    children: {},
+    className: {},
+  },
+});

packages/ui/src/components/TagGroup/index.ts

@@ -15,5 +15,10 @@
  */
 
 export { TagGroup, Tag } from './TagGroup';
-export type { TagGroupProps, TagProps } from './types';
+export type {
+  TagGroupProps,
+  TagGroupOwnProps,
+  TagProps,
+  TagOwnProps,
+} from './types';
 export { TagGroupDefinition } from './definition';

packages/ui/src/components/TagGroup/types.ts

@@ -20,28 +20,51 @@ import type {
   TagProps as ReactAriaTagProps,
 } from 'react-aria-components';
 
+/**
+ * Own props for the TagGroup component.
+ *
+ * @public
+ */
+export type TagGroupOwnProps<T = object> = {
+  items?: ReactAriaTagListProps<T>['items'];
+  children?: ReactAriaTagListProps<T>['children'];
+  renderEmptyState?: ReactAriaTagListProps<T>['renderEmptyState'];
+  className?: string;
+};
+
 /**
  * Props for the TagGroup component.
  *
  * @public
  */
 export interface TagGroupProps<T>
-  extends Omit<ReactAriaTagGroupProps, 'children'>,
-    Pick<ReactAriaTagListProps<T>, 'items' | 'children' | 'renderEmptyState'> {}
+  extends TagGroupOwnProps<T>,
+    Omit<ReactAriaTagGroupProps, 'children' | keyof TagGroupOwnProps> {}
+
+/**
+ * Own props for the Tag component.
+ *
+ * @public
+ */
+export type TagOwnProps = {
+  /**
+   * The icon to display in the chip.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The size of the chip.
+   */
+  size?: 'small' | 'medium';
+  href?: ReactAriaTagProps['href'];
+  children?: ReactAriaTagProps['children'];
+  className?: string;
+};
 
 /**
  * Props for the Tag component.
  *
  * @public
  */
-export interface TagProps extends ReactAriaTagProps {
-  /**
-   * The icon to display in the chip.
-   */
-  icon?: React.ReactNode;
-
-  /**
-   * The size of the chip.
-   */
-  size?: 'small' | 'medium';
-}
+export interface TagProps
+  extends TagOwnProps,
+    Omit<ReactAriaTagProps, keyof TagOwnProps> {}