@meistrari/tela-build 1.36.0 → 1.37.0

package/components/tela/status/status.mdx

@@ -9,8 +9,9 @@ A status component that displays different workflow and task statuses with appro
 
 ## Rules
 
-- **Always** use `<TelaStatus />` for any status indicator (workflow status, event status, health state, etc.). Never build a custom status with icons + color classes.
 - `text-success` and `text-error` are reserved for `<TelaStatus />` — never apply them to regular text content.
+- **Always** use `<TelaStatus />` for any status indicator (workflow status, event status, health state, etc.). Never build a custom status with icons + color classes.
+- **NEVER** use the `config` prop. It exists as an escape hatch for domain-specific variants in consuming apps (hex colors, localized labels, etc.). Always prefer an existing `variant` — if none fits, extend the built-in variant list instead of passing `config`. One-off `config` objects defeat the design system.
 
 ## Examples
 

package/components/tela/status/status.vue

@@ -13,6 +13,7 @@ type StatusConfig = {
 
 const props = withDefaults(defineProps<{
     variant?: TelaStatusVariant
+    config?: StatusConfig
     label?: string
     isIconAnimated?: boolean
     isIconHidden?: boolean
@@ -293,6 +294,9 @@ const variantConfig: Record<TelaStatusVariant, StatusConfig> = {
 }
 
 const currentStatus = computed<StatusConfig>(() => {
+    if (props.config)
+        return props.config
+
     const variant = props.variant ?? 'running'
 
     return variantConfig[variant] ?? variantConfig.running
@@ -334,7 +338,7 @@ function measureContentWidth() {
 }
 
 watch(
-    () => [props.variant, statusLabel.value, props.isIconHidden],
+    () => [props.variant, props.config, statusLabel.value, props.isIconHidden],
     measureContentWidth,
     { immediate: true },
 )
@@ -358,7 +362,7 @@ const shineClass = computed(() => {
     ]
 })
 
-const isShineVisible = computed(() => ['running', 'executing', 'processing', 'verifying', 'initializing', 'reviewing'].includes(props.variant))
+const isShineVisible = computed(() => !props.config && ['running', 'executing', 'processing', 'verifying', 'initializing', 'reviewing'].includes(props.variant))
 
 function iconVariants() {
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.36.0",
+  "version": "1.37.0",
   "type": "module",
   "files": [
     "app.config.ts",