چیپ نوع عملیات (ActionTypeChip)

معرفی

ActionTypeChip یک chip فشرده و color-coded برای نمایش نوع یک عملیات اجتماعی است — مستقل از اینکه موفق یا ناموفق بوده (که با ActionStatusKey در ActionTimeline مدل می‌شود).

هفت نوع canonical: like / comment / save / follow / unfollow / dm / share — هرکدام با:

• آیکون اختصاصی Lucide (Heart / MessageCircle / Bookmark / UserPlus / UserMinus / Send / Share2)
• token رنگ اختصاصی (--action-type-*) که هم در light و هم dark mode تنظیم شده

چه زمانی استفاده کنیم:

• لیست عملیات Booster (فید worker، صف اجرا، گزارش روزانه)
• ستون نوع عملیات در DataTable لاگ عملیات
• badge کوتاه روی ActionTimelineItem
• نمایش آمار «x تعامل» در داشبورد (<ActionTypeChip type="like" count={425} />)

چه زمانی استفاده نکنیم:

• نمایش وضعیت عملیات (موفق/ناموفق) — از ActionTimeline + ActionStatusKey استفاده کنید
• نمایش شدت (فوری/بالا/…) — از SeverityBadge استفاده کنید
• نمایش پلتفرم (اینستاگرام/توییتر) — از PlatformMark استفاده کنید
• وقتی دامنه شما عملیات غیر-اجتماعی (ایمپورت، بکاپ، …) است — از chip عمومی یا Badge استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

استفاده

'use client'
import { ActionTypeChip } from '@partodata/ui'

export function MyActivity() {
  return (
    <div className="flex gap-2">
      <ActionTypeChip type="like" />
      <ActionTypeChip type="comment" />
      <ActionTypeChip type="save" count={42} />
      <ActionTypeChip type="follow" variant="solid" />
      <ActionTypeChip type="dm" showLabel={false} />
    </div>
  )
}

چهار حالت بصری

• soft (پیش‌فرض) — پس‌زمینه tint + متن رنگی. کاربرد: فید، جدول، لیست — خوانا ولی نه پر سر و صدا.
• solid — پس‌زمینه کامل + متن با توکن اختصاصی هر رنگ (--action-type-*-on). کاربرد: تأکید روی یک عملیات خاص، call-to-action، chip یک‌عددی.
• outline — فقط border + متن. کاربرد: ردیف فشرده، جایی که نمی‌خواهید بار بصری اضافه شود.
• flat — فقط آیکون + متن رنگی، بدون chrome. کاربرد: inline در متن (مثلاً «12 پسند دریافت شد» با آیکون قلب کوچک).

چهار اندازه

• xs (ارتفاع 20px) — برای جدول‌های فشرده یا metadata در کارت‌های کوچک
• sm (ارتفاع 24px) — پیش‌فرض، مناسب اکثر موارد
• md (ارتفاع 28px) — برای header یا هدف‌گذاری بصری
• lg (ارتفاع 32px) — CTA یا نمایش برجسته

با شمارنده

با count={n} یک شمارنده کنار label اضافه می‌شود — مفید برای نمایش آمار جمع‌آوری‌شده («425 پسند»). ارقام عدد به‌صورت خودکار محلی‌سازی می‌شوند (425 → 425)؛ جداکننده هزارگان اضافه نمی‌شود.

همه هفت نوع canonical

• like (پسندیدن — پینک) • comment (نظر — آبی) • save (ذخیره — کهربایی) • follow (دنبال کردن — سبز) • unfollow (لغو دنبال — خاکستری) • dm (پیام مستقیم — بنفش) • share (اشتراک — سبز آبی)

حالت iconOnly (بدون برچسب)

با showLabel={false}، فقط آیکون رندر می‌شود و aria-label با برچسب محلی (locale-aware) تنظیم می‌شود. مناسب برای نمای‌های بسیار فشرده مثل ستون جدول، ActionTimeline marker، header فید.

راهنمای استفاده

Props

token ها

هر نوع از یک CSS variable استفاده می‌کند که در هر دو theme light و dark تنظیم شده:

هر رنگ یک توکن -on (رنگ متن روی پس‌زمینه‌ی کامل در solid) و یک توکن -text (رنگ متن AA-verified در soft/outline/flat) هم دارد؛ مقدارشان بین light و dark و بین رنگ‌ها متفاوت است (مثلاً --action-type-like-on در light سفید و در dark تقریباً مشکی است) — مقدار دقیق را از globals.css بخوانید، نه از این جدول.

برای استفاده مستقیم در Tailwind: text-action-type-like، bg-action-type-follow، … (از Tailwind config).

دسترسی‌پذیری

• هم chip سطح root یک <span> با data-slot="action-type-chip" است — در داخل هر container نیاز به wrapper aria نیست.
• در حالت showLabel={false}، aria-label با برچسب محلی (مثلاً «پسندیدن») ست می‌شود تا screen reader آن را announce کند.
• اگر label شما یک React node (نه رشته) است، حالت iconOnly aria-label ست نمی‌کند — مسئولیت aria با شماست.
• همه هفت رنگ در light و dark بررسی کنتراست‌ شده‌اند: در variantهای soft, outline, flat متن از تیر اختصاصی AA یعنی توکن --action-type-*-text می‌آید و در solid متن از توکن اختصاصی هر رنگ یعنی --action-type-*-on می‌آید (نه توکن عمومی --foreground-contrast — آن توکن در نسخه 2.6.7 به‌خاطر افت کنتراست روی برخی رنگ‌های میان‌روشنی در تم light حذف شد).
• آیکون‌ها aria-hidden="true" هستند — اطلاعات معنایی از label یا aria-label می‌آید، نه از آیکون.

کامپوننت‌های مرتبط

• ActionTimeline — برای نمایش فید زمانی عملیات؛ از ActionTypeChip داخل tag slot هر item استفاده کنید
• PlatformMark — نشان مشابه اما برای پلتفرم (اینستاگرام / توییتر / …)؛ این chip برای عملیات است
• SeverityBadge — برای شدت یا اولویت (urgent/high/medium/low) — متعامد با نوع
• Badge — badge عمومی بدون قید دامنه