Edit Transition

Name

Also known as (comma separated)

Brief definition Movement from one state to another.

Notes **Motion & Animation:** Animated change between two states.

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "fromState", "type": "text", "label": "From state", "default": "In review" }, { "id": "toState", "type": "text", "label": "To state", "default": "Approved" }, { "id": "type", "type": "select", "label": "Transition type", "default": "automatic", "options": [ "manual", "automatic", "conditional" ] }, { "id": "triggeredBy", "type": "text", "label": "Trigger", "default": "on approval" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"transition\" data-type=\"{{type}}\" style=\"--accent:{{accent}};\">\n <div class=\"transition__states\">\n <span class=\"transition__state transition__state--from\">{{fromState}}</span>\n <svg class=\"transition__arrow\" viewBox=\"0 0 44 16\" aria-hidden=\"true\"><path d=\"M0 8h34M28 2l8 6-8 6\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span class=\"transition__state transition__state--to\">{{toState}}</span>\n </div>\n <div class=\"transition__meta\">\n <span class=\"transition__type\">\n <svg class=\"transition__icon transition__icon--manual\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M7 11V4a1.5 1.5 0 013 0v5m0-4a1.5 1.5 0 013 0v4m0-2a1.5 1.5 0 013 0v4c0 3-2 6-6 6-3 0-4.5-1.5-6-4l-1.6-2.8a1.4 1.4 0 012.4-1.4L7 13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg class=\"transition__icon transition__icon--automatic\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M10 2l2 3.4 3.8-.8-.8 3.8L18.4 10l-3.4 2 .8 3.8-3.8-.8L10 18l-2-3.4-3.8.8.8-3.8L1.6 10l3.4-2-.8-3.8 3.8.8L10 2z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/><circle cx=\"10\" cy=\"10\" r=\"2.4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"/></svg>\n <svg class=\"transition__icon transition__icon--conditional\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M10 2l8 8-8 8-8-8 8-8z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linejoin=\"round\"/></svg>\n {{type}}\n </span>\n <span class=\"transition__trigger\">{{triggeredBy}}</span>\n </div>\n</div>\n<style>\n.transition { width: 320px; padding: 16px; background: #FAF7F2; color: #241430; font: 14px/1.4 system-ui, sans-serif; border-radius: 14px; box-shadow: 0 8px 24px rgba(36,20,48,.12); box-sizing: border-box; }\n.transition__states { display: flex; align-items: center; gap: 10px; }\n.transition__state { font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 8px; background: #24143008; }\n.transition__arrow { width: 44px; height: 16px; flex-shrink: 0; }\n.transition__meta { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; }\n.transition__type { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; text-transform: capitalize; background: var(--accent); color: #241430; }\n.transition__icon { width: 12px; height: 12px; display: none; }\n.transition[data-type=\"manual\"] .transition__icon--manual { display: block; }\n.transition[data-type=\"automatic\"] .transition__icon--automatic { display: block; }\n.transition[data-type=\"conditional\"] .transition__icon--conditional { display: block; }\n.transition__trigger { font-size: 12.5px; color: #241430b3; font-style: italic; }\n</style>", "tailwind": "<div class=\"txn-tw w-80 p-4 bg-[#FAF7F2] text-[#241430] font-sans text-sm rounded-2xl shadow-lg box-border\" data-type=\"{{type}}\" style=\"--accent:{{accent}};\">\n <div class=\"flex items-center gap-2.5\">\n <span class=\"font-bold text-sm px-2.5 py-1 rounded-lg bg-[#24143008]\">{{fromState}}</span>\n <svg class=\"w-11 h-4 flex-shrink-0\" viewBox=\"0 0 44 16\" aria-hidden=\"true\"><path d=\"M0 8h34M28 2l8 6-8 6\" fill=\"none\" stroke=\"{{accent}}\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <span class=\"font-bold text-sm px-2.5 py-1 rounded-lg bg-[#24143008]\">{{toState}}</span>\n </div>\n <div class=\"flex items-center justify-between gap-2 mt-3\">\n <span class=\"txn-tw__type inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full font-bold text-xs capitalize\" style=\"background:{{accent}};color:#241430;\">\n <svg class=\"txn-tw__icon txn-tw__icon--manual w-3 h-3\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M7 11V4a1.5 1.5 0 013 0v5m0-4a1.5 1.5 0 013 0v4m0-2a1.5 1.5 0 013 0v4c0 3-2 6-6 6-3 0-4.5-1.5-6-4l-1.6-2.8a1.4 1.4 0 012.4-1.4L7 13\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n <svg class=\"txn-tw__icon txn-tw__icon--automatic w-3 h-3\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M10 2l2 3.4 3.8-.8-.8 3.8L18.4 10l-3.4 2 .8 3.8-3.8-.8L10 18l-2-3.4-3.8.8.8-3.8L1.6 10l3.4-2-.8-3.8 3.8.8L10 2z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linejoin=\"round\"/><circle cx=\"10\" cy=\"10\" r=\"2.4\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.2\"/></svg>\n <svg class=\"txn-tw__icon txn-tw__icon--conditional w-3 h-3\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M10 2l8 8-8 8-8-8 8-8z\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linejoin=\"round\"/></svg>\n {{type}}\n </span>\n <span class=\"text-[12.5px] italic text-[#241430]/70\">{{triggeredBy}}</span>\n </div>\n</div>\n<style>\n.txn-tw__icon { display: none; }\n.txn-tw[data-type=\"manual\"] .txn-tw__icon--manual { display: block; }\n.txn-tw[data-type=\"automatic\"] .txn-tw__icon--automatic { display: block; }\n.txn-tw[data-type=\"conditional\"] .txn-tw__icon--conditional { display: block; }\n</style>", "react": "export function Transition({\n fromState = \"{{fromState}}\",\n toState = \"{{toState}}\",\n type = \"{{type}}\",\n triggeredBy = \"{{triggeredBy}}\",\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ width: 320, padding: 16, background: \"#FAF7F2\", color: \"#241430\", fontFamily: \"system-ui, sans-serif\",\n fontSize: 14, borderRadius: 14, boxShadow: \"0 8px 24px rgba(36,20,48,.12)\", boxSizing: \"border-box\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 10 }}>\n <span style={{ fontWeight: 700, fontSize: 14, padding: \"4px 10px\", borderRadius: 8, background: \"#24143008\" }}>{fromState}</span>\n <svg width=\"44\" height=\"16\" viewBox=\"0 0 44 16\" aria-hidden=\"true\" style={{ flexShrink: 0 }}>\n <path d=\"M0 8h34M28 2l8 6-8 6\" fill=\"none\" stroke={accent} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n </svg>\n <span style={{ fontWeight: 700, fontSize: 14, padding: \"4px 10px\", borderRadius: 8, background: \"#24143008\" }}>{toState}</span>\n </div>\n <div style={{ display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\", gap: 8, marginTop: 12 }}>\n <span style={{ display: \"inline-flex\", alignItems: \"center\", gap: 5, padding: \"3px 10px\", borderRadius: 999,\n fontWeight: 700, fontSize: 12, textTransform: \"capitalize\", background: accent, color: \"#241430\" }}>\n {type === \"manual\" && (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M7 11V4a1.5 1.5 0 013 0v5m0-4a1.5 1.5 0 013 0v4m0-2a1.5 1.5 0 013 0v4c0 3-2 6-6 6-3 0-4.5-1.5-6-4l-1.6-2.8a1.4 1.4 0 012.4-1.4L7 13\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.3\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>\n )}\n {type === \"automatic\" && (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M10 2l2 3.4 3.8-.8-.8 3.8L18.4 10l-3.4 2 .8 3.8-3.8-.8L10 18l-2-3.4-3.8.8.8-3.8L1.6 10l3.4-2-.8-3.8 3.8.8L10 2z\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.2\" strokeLinejoin=\"round\" /><circle cx=\"10\" cy=\"10\" r=\"2.4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.2\" /></svg>\n )}\n {type === \"conditional\" && (\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 20 20\" aria-hidden=\"true\"><path d=\"M10 2l8 8-8 8-8-8 8-8z\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.3\" strokeLinejoin=\"round\" /></svg>\n )}\n {type}\n </span>\n <span style={{ fontSize: 12.5, fontStyle: \"italic\", color: \"#241430b3\" }}>{triggeredBy}</span>\n </div>\n </div>\n );\n}" }