[DS-433] TagGroup api update (#524)

.changeset/lemon-starfishes-trade.md

@@ -0,0 +1,5 @@
+---
+"@hopper-ui/components": patch
+---
+
+Updated TagGroup's API. Removed TagList since it's now used internally. Added label, description and errorMessage props instead of being used as slots.

apps/docs/content/components/collections/TagGroup.mdx

@@ -1,7 +1,7 @@
 ---
 title: TagGroup
 description: The TagGroup is a dynamic UI component that encapsulates a collection of tags.
-             Each tag, representing a label, category, keyword, or filter, is designed to be used within a TagList for groupings.
+             Each tag represents a label, category, keyword, or filter, and can be used for various groupings
 category: "collections"
 links:
     source: https://github.com/gsoft-inc/wl-hopper/blob/main/packages/components/src/tag/src/TagGroup.tsx
@@ -34,19 +34,19 @@ links:
 
 A `TagGroup` uses the following components.
 
-<ComposedComponents components={["Avatar", "Badge", "ErrorMessage", "HelperMessage", "Icon", "IconList", "Label", "Text"]}/>
+<ComposedComponents components={["Avatar", "Badge", "Icon", "IconList", "Text"]}/>
 
 ## Usage
 
 ### Label
 
-A tag group can contain a label to provide more context to the user.
+A tag group can use the `label` prop to provide more context to the user.
 
 <Example src="tag/docs/tagGroup/label" />
 
 ### Description
 
-A tag group can contain a description to provide more information to the user.
+A tag group can use a `description` prop to provide more information to the user.
 
 <Example src="tag/docs/tagGroup/description" />
 
@@ -111,7 +111,7 @@ A tag can vary in style using the `variant` prop.
 
 Using the `renderEmptyState` prop, you can customize the empty state message when there are no tags.
 
-<Example src="tag/docs/tagList/empty" />
+<Example src="tag/docs/tagGroup/empty" />
 
 ### Invalid
 
@@ -176,10 +176,6 @@ A tag can be rendered as a react router link when using the `href` prop and sett
 
 <PropTable component="TagGroup" />
 
-### TagList
-
-<PropTable component="TagList" />
-
 ### Tag
 
 <PropTable component="Tag" />
@@ -190,10 +186,6 @@ A tag can be rendered as a react router link when using the `href` prop and sett
 
 <MigrateGuide src="tag/docs/migration-notes-tag-group" />
 
-### TagList
-
-<MigrateGuide src="tag/docs/migration-notes-tag-list" />
-
 ### Tag
 
 <MigrateGuide src="tag/docs/migration-notes-tag" />

apps/docs/examples/Preview.ts

@@ -191,8 +191,8 @@ export const Previews: Record<string, Preview> = {
     "tag/docs/tag/variants": {
         component: lazy(() => import("@/../../packages/components/src/tag/docs/tag/variants.tsx"))
     },
-    "tag/docs/tagList/empty": {
-        component: lazy(() => import("@/../../packages/components/src/tag/docs/tagList/empty.tsx"))
+    "tag/docs/tagGroup/empty": {
+        component: lazy(() => import("@/../../packages/components/src/tag/docs/tagGroup/empty.tsx"))
     },
     "tag/docs/tag/invalid": {
         component: lazy(() => import("@/../../packages/components/src/tag/docs/tag/invalid.tsx"))

packages/components/src/Form/tests/chromatic/Form.stories.tsx

@@ -5,15 +5,13 @@ import {
     ComboBox,
     ComboBoxItem,
     Inline,
-    Label,
     Radio,
     RadioGroup,
     Select,
     SelectItem,
     Stack,
     Tag,
     TagGroup,
-    TagList,
     TextArea,
     TextField
 } from "@hopper-ui/components";
@@ -67,12 +65,9 @@ const Template = () => {
                 <ComboBoxItem id="cat">Cat</ComboBoxItem>
                 <ComboBoxItem id="frog">Frog</ComboBoxItem>
             </ComboBox>
-            <TagGroup selectionMode="single">
-                <Label>Choose a place</Label>
-                <TagList>
-                    <Tag id="1">Canada</Tag>
-                    <Tag id="2">US</Tag>
-                </TagList>
+            <TagGroup selectionMode="single" label="Choose a place">
+                <Tag id="1">Canada</Tag>
+                <Tag id="2">US</Tag>
             </TagGroup>
             <Button>Submit</Button>
         </>);