mParticle · nastyastavitskaya · Dec 12, 2025 · Dec 16, 2025 · Dec 16, 2025 · Dec 16, 2025
diff --git a/.github/workflows/reusable-workflows.yml b/.github/workflows/reusable-workflows.yml
@@ -2,6 +2,7 @@ name: Reusable Workflows
 
 on:
   pull_request:
+    types: [opened, reopened, synchronize, edited]
 
 jobs:
   pr-title-check:

diff --git a/docs/components/Data Display/Avatar/Documentation.mdx b/docs/components/Data Display/Avatar/Documentation.mdx
@@ -6,18 +6,31 @@ import * as AvatarStories from '../../../../src/components/data-display/Avatar/A
 
 # Avatar
 
-#### Overview
+#### Shape
 
-The **Avatar** component is used to display a profile image, initials, or an icon, commonly for identification purposes.
+The default avatar is circular. Switch the `shape` prop to `square` when you need hard edges or when aligning with adjacent rectangular content.
 
-#### When to use
+<Canvas of={AvatarStories.ShapeExamples} />
 
-- To represent an account, organization, or workspace.
-- To represent a single user or as a placeholder when a user profile image isn’t available.
+#### Sizes
 
-#### Current Usage
+<Canvas of={AvatarStories.SizeExamples} />
 
-- **[Navigation](https://mparticle.github.io/aquarium/?path=/story/components-navigation-globalnavigation--primary)** – Avatar is used within the navigation sidebar to represent the selected workspace.
+#### Photo avatar
+
+<Canvas of={AvatarStories.TypePhoto} />
+
+#### Icon avatar
+
+<Canvas of={AvatarStories.TypeIcon} />
+
+#### Initial avatar
+
+<Canvas of={AvatarStories.TypeInitials} />
+
+#### Badge avatars
+
+<Canvas of={AvatarStories.WithBadge} />
 
 #### Related Links
 
@@ -26,7 +39,3 @@ The **Avatar** component is used to display a profile image, initials, or an ico
 | Eames | [Avatar Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=397-12044&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
 | AntD | [Avatar Component](https://ant.design/components/avatar) |
 
-
-
-
-<Canvas meta={AvatarStories.default} />
diff --git a/docs/components/Data Display/Badge/Documentation.mdx b/docs/components/Data Display/Badge/Documentation.mdx
@@ -12,23 +12,21 @@ import * as BadgeStories from '../../../../src/components/data-display/Badge/Bad
 
 The **Badge** component provides visual indicators for an item’s status, available in two styles: a **dot** and a \*\*status badge" with text.
 
-### [Dot Badge](https://mparticle.github.io/aquarium/?path=/story/components-data-display-badge--dot-badge)
+#### Status badge
 
-#### When to use
+Use status badges to indicate where an item sits in a process with a clear beginning and end. Pair the dot with concise labels so the current state is obvious without extra context.
 
-Use **Badge** when a status needs to be displayed next to an element in a compact form.
+<Canvas of={BadgeStories.StatusBadge} />
 
-#### Current Usages
+#### Dot badge
 
-- **[Navigation](https://mparticle.github.io/aquarium/?path=/story/components-navigation-globalnavigation--primary)** – Badge is used within the navigation sidebar for notification use cases.
+Use dot badges to surface the current status of an item without additional copy. Each dot maps to the core status tokens, including the paused state for work that is temporarily on hold.
 
 <Canvas of={BadgeStories.DotBadge} />
 
-#### Related Links
+#### Related links
 
 | Type  | Resource                                                                                                                                                          |
 | ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Eames | [Badge Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=399-0&node-type=canvas&t=B6HJWqqDsUOypZQj-0) |
 | AntD  | [Badge Component](https://ant.design/components/badge)                                                                                                            |
-
-<Canvas of={BadgeStories.StatusBadge} />
diff --git a/docs/components/Data Display/Popover/Documentation.mdx b/docs/components/Data Display/Popover/Documentation.mdx
@@ -1,6 +1,6 @@
 import { Meta, Canvas } from '@storybook/blocks'
 
-import * as PopoverStories from '../../../../src/components/data-display/Popover/Popover.stories'
+import PopoverStories, { Primary as PopoverPrimary } from '../../../../src/components/data-display/Popover/Popover.stories'
 
 <Meta of={PopoverStories} />
 
@@ -34,4 +34,4 @@ Use [Tooltip](https://mparticle.github.io/aquarium/?path=/story/components-data-
 | AntD | [Popover Component](https://ant.design/components/popover) |
 
 
-<Canvas meta={PopoverStories.default} />
+<Canvas of={PopoverPrimary} />
diff --git a/docs/components/Data Display/Segmented/Documentation.mdx b/docs/components/Data Display/Segmented/Documentation.mdx
@@ -4,12 +4,26 @@ import * as SegmentedStories from '../../../../src/components/data-display/Segme
 
 <Meta of={SegmentedStories} />
 
-{/* Documentation goes here */}
-
 # Segmented
 
-This is the documentation for the Segmenteds component
+#### Overview
+
+The **Segmented** component presents a compact set of mutually exclusive choices. Each option is easy to scan and the selected value is highlighted to confirm the current state.
+
+#### Small segmented control
+
+Use the small size when the control sits inside dense layouts such as tables or cards with limited space.
+
+<Canvas of={SegmentedStories.Small} />
+
+#### Large segmented control
+
+Use the large size for standalone toggles where the segment labels need more breathing room and legibility.
+
+<Canvas of={SegmentedStories.Large} />
 
-{/* Documentation goes here */}
+#### Related links
 
-<Canvas meta={SegmentedStories.default} />
+| Type | Resource |
+| ---- | -------- |
+| AntD | [Segmented Component](https://ant.design/components/segmented) |
diff --git a/docs/components/Data Entry/Checkbox/Documentation.mdx b/docs/components/Data Entry/Checkbox/Documentation.mdx
@@ -19,16 +19,38 @@ Use the **Checkbox** component when:
 - For binary options, especially when changes require saving.
 - For active agreements, such as accepting terms of service.
 
-When selecting a single option from a set of mutually exclusive choices, use **[Radio Buttons](https://mparticle.github.io/aquarium/?path=/story/components-data-entry-radio--primary)**.
+### Default checkbox
 
-Use **[switch](https://mparticle.github.io/aquarium/?path=/story/components-data-entry-switch--primary)** for cases like activation, filter controls, or subscriptions where there is a clear "on/off" state.
+Start with the standard checkbox for simple agree-or-disagree prompts.
 
-#### Related Links
+<Canvas of={CheckboxStories.Primary} />
 
-| Type  | Resource                                                                                                                                               |
-| ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Eames | [Checkbox Component](https://www.figma.com/design/veXnmignQnJz8StIq10VJ5/Eames-2.0---Foundations-%26-Components?node-id=388-11036&p=f&t=zURbLpG60aM6aJiH-0) |
-| AntD | [Checkbox Component](https://ant.design/components/checkbox) |
+### Checkbox states
 
+Reference this overview to show each visual state side by side—interactive default, checked, indeterminate, and disabled.
 
-<Canvas meta={CheckboxStories.default} />
+<Canvas of={CheckboxStories.StatesShowcase} />
+
+### Checkbox groups
+
+Group related choices with `Checkbox.Group` so selections stay in sync. Pair the group with a leading Checkbox to provide a “Select all” control when the pattern fits the use case.
+
+<Canvas of={CheckboxStories.GroupSelection} />
+
+### Disabled with tooltip
+
+Pair a disabled checkbox with a tooltip so users understand why the option is locked or how to gain access.
+
+<Canvas of={CheckboxStories.DisabledWithTooltip} />
+
+### Stacked checkbox list
+
+Use individual Checkbox components when you need richer labels and supporting text. Keep the layout vertically aligned to make scanning easy.
+
+<Canvas of={CheckboxStories.MultipleOptions} />
+
+### Long consent copy
+
+Pair a checkbox with structured rich text for legal agreements. Highlight the primary sentence and keep supporting copy visually secondary.
+
+<Canvas of={CheckboxStories.LongFormConsent} />
diff --git a/docs/components/General/Button/Documentation.mdx b/docs/components/General/Button/Documentation.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas } from '@storybook/blocks'
+import { Meta, Canvas, Story } from '@storybook/blocks'
 
 import * as ButtonStories from '../../../../src/components/general/Button/Button.stories'
 
@@ -8,82 +8,59 @@ import * as ButtonStories from '../../../../src/components/general/Button/Button
 
 # Button
 
-#### Overview
+### Overview
 
 The **Button** component is used to trigger actions or navigate the interface. It supports various styles, sizes, and states to fit different use cases.
 
-#### Key Features
+### Button Types
 
-- **Variants:** Includes primary, default, dashed, text, and link buttons for different use cases.
-- **Sizes:** Supports small, medium (default), and large sizes.
-- **States:** Disabled, loading, and hover states to indicate action availability.
-- **Icons:** Easily integrate icons for visual clarity and emphasis.
+- **Primary** – High-emphasis actions like submitting or saving workflows.
+- **Secondary** – Supportive tasks such as canceling or opening supplemental dialogs.
+- **Tertiary** – Lower-priority options that should sit behind primary/secondary CTAs.
+- **Text** – Quiet inline affordances that should blend into surrounding content.
+- **Link** – Navigation-style actions that resemble hyperlinks within layouts.
 
+<Canvas of={ButtonStories.TypesOverview} />
 
-### Button Variants and Use Cases
+<Story of={ButtonStories.LinkUsageNote} />
 
-#### Primary Button
+### Button sizes
 
-**Use Case**: For the main action on a page or section.
-- **Example:** Submitting a form, saving changes, or initiating a key process.
+Buttons ship in three heights to support different layouts. The default is `middle`, shown alongside the smaller and larger options below.
 
-**Examples**:
+<Canvas of={ButtonStories.SizeExamples} />
 
-- **With Icon**:
-<Canvas of={ButtonStories.PrimaryWithIcon} />
+### Buttons with icons
 
-- **Without Icon**:
-<Canvas of={ButtonStories.Primary} />
+The icon-enabled variants mirror the same hierarchy while reinforcing meaning with glyphs.
 
-#### Default Button
+<Canvas of={ButtonStories.IconTypesOverview} />
 
-**Use Case**: For secondary actions that complement the primary task.
-- **Example:** Canceling an action, opening a dialog, or performing less important tasks.
+#### Icon-only buttons
 
-**Examples**:
+Icon-only buttons provide compact controls for toolbars and quick actions where text isn’t necessary.
 
-- **With Icon**:
-<Canvas of={ButtonStories.DefaultWithIcon} />
-
-- **Without Icon**:
-<Canvas of={ButtonStories.Default} />
-
-#### Dashed Button
-
-**Use Case**: For tertiary actions in the visual hierarchy.
-
-**Examples**:
-
-- **With Icon**:
-<Canvas of={ButtonStories.DashedWithIcon} />
-
-- **Without Icon**:
-<Canvas of={ButtonStories.Dashed} />
+<Canvas of={ButtonStories.IconOnly} />
 
-#### Link Button
+### Loading state
 
-**Use Case**: Ideal for triggering an actions that don't require heavy visual emphasis.
-- **Example:** Viewing errors, navigating to documentation
-When navigating to a new URL or external page, always use [Typography.Link](https://mparticle.github.io/aquarium/?path=/story/components-general-typography-link--primary) instead of a Link Button.
+The loading variant keeps the user informed while an action finishes processing. Use concise labels that set expectations.
 
-**Examples**:
+<Canvas of={ButtonStories.Loading} />
 
-- **With Icon**:
-<Canvas of={ButtonStories.LinkWithIcon} />
+### Loading text button
 
-- **Without Icon**:
-<Canvas of={ButtonStories.Link} />
+Use the text treatment for subtle “load more” affordances that need to display progress without taking extra visual weight.
 
-#### Icon-Only Button
+<Canvas of={ButtonStories.LoadingText} />
 
-**Use Case**: For compact controls where only an icon is needed.
-- **Example:** Toolbar controls, close buttons, or quick actions.
+### Destructive action
 
-**Examples**:
-<Canvas of={ButtonStories.IconOnly} />
+Use the danger style to signal irreversible steps such as deletions. Pair it with clear language so users understand the impact.
 
+<Canvas of={ButtonStories.Danger} />
 
-#### Related Links
+### Related Links
 
 | Type  | Resource                                                                                                                                               |
 | ----- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |

diff --git a/docs/components/UX Patterns/StatisticsCard/Documentation.mdx b/docs/components/UX Patterns/StatisticsCard/Documentation.mdx
@@ -0,0 +1,23 @@
+import { Meta, Canvas } from '@storybook/blocks'
+
+import StatisticsCardStories, { ModelMetrics } from '../../../../src/components/UXPatterns/StatisticsCard/StatisticsCard.stories'
+
+<Meta of={StatisticsCardStories} />
+
+# Statistics Card
+
+A card component for displaying metric values with optional tooltips, commonly used for model metrics, performance indicators, or key statistics.
+
+## When to Use
+
+- Displaying model performance metrics (accuracy, precision, recall, AUC)
+- Showing key performance indicators (KPIs)
+- Presenting statistical data with contextual help
+- Creating metric dashboards or summary cards
+
+## Model Metrics Example
+
+A common pattern showing multiple metrics in a grid layout:
+
+<Canvas of={ModelMetrics} />
+
diff --git a/docs/components/UX Patterns/Steps/Documentation.mdx b/docs/components/UX Patterns/Steps/Documentation.mdx
@@ -0,0 +1,12 @@
+import { Meta, Canvas } from '@storybook/blocks'
+
+import StepsStories, { UXPatternExample } from '../../../../src/components/UXPatterns/Steps/Steps.stories'
+
+<Meta of={StepsStories} />
+
+# Steps Progress Indicator
+
+Steps help communicate the current state of multistep flows. The following UX pattern centers the vertical label placement version inside its container so it feels like a dashboard callout.
+
+<Canvas of={UXPatternExample} />
+
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,6 +2,7 @@ name: Reusable Workflows @@
     on:
       pull_request:
+        types: [opened, reopened, synchronize, edited]
     jobs:
       pr-title-check:
@@ Expand Down @@