Edit Contextual Help

Name

Also known as (comma separated)

Brief definition Assistance relevant to the current screen or task.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "label", "type": "text", "label": "Trigger label", "default": "What's a workspace?" }, { "id": "helpText", "type": "text", "label": "Help text", "default": "A workspace groups projects, people and billing under one shared account." }, { "id": "expanded", "type": "toggle", "label": "Expanded by default", "default": false }, { "id": "variant", "type": "select", "label": "Style", "default": "tooltip", "options": [ "tooltip", "inline", "callout" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"contextual-help contextual-help--{{variant}}\" style=\"--accent:{{accent}}\">\n <button type=\"button\" class=\"contextual-help__trigger\" aria-expanded=\"{{expanded}}\" aria-describedby=\"ch-help-text\">\n <span>{{label}}</span>\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M8 7v4.5M8 4.6v.1\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\"/></svg>\n </button>\n <div id=\"ch-help-text\" class=\"contextual-help__panel\"{{#unless expanded}} hidden{{/unless}}>{{helpText}}</div>\n</div>\n<style>\n.contextual-help { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 320px; }\n.contextual-help__trigger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; padding: 4px 0; font: 600 14px system-ui, sans-serif; color: var(--accent); cursor: pointer; }\n.contextual-help__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }\n.contextual-help__panel { margin-top: 8px; font-size: 13.5px; color: #241430cc; }\n.contextual-help--tooltip .contextual-help__panel { background: #241430; color: #FAF7F2; padding: 10px 12px; border-radius: 8px; position: relative; }\n.contextual-help--inline .contextual-help__panel { padding-left: 21px; border-left: 2px solid var(--accent); }\n.contextual-help--callout .contextual-help__panel { background: var(--accent); color: #241430; padding: 12px 14px; border-radius: 10px; }\n</style>", "tailwind": "<div class=\"contextual-help-tw contextual-help-tw--{{variant}} font-sans text-[#241430] max-w-xs\" style=\"--accent:{{accent}}\">\n <button type=\"button\" class=\"inline-flex items-center gap-1.5 bg-transparent border-0 py-1 font-semibold text-sm cursor-pointer\" style=\"color:{{accent}}\" aria-expanded=\"{{expanded}}\" aria-describedby=\"ch-help-text-tw\">\n <span>{{label}}</span>\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" stroke-width=\"1.3\"/><path d=\"M8 7v4.5M8 4.6v.1\" stroke=\"currentColor\" stroke-width=\"1.3\" stroke-linecap=\"round\"/></svg>\n </button>\n <div id=\"ch-help-text-tw\" class=\"mt-2 text-[13.5px] text-[#241430]/80\"{{#unless expanded}} hidden{{/unless}}>{{helpText}}</div>\n</div>\n<style>\n.contextual-help-tw--tooltip #ch-help-text-tw { background: #241430; color: #FAF7F2; padding: 10px 12px; border-radius: 8px; }\n.contextual-help-tw--inline #ch-help-text-tw { padding-left: 21px; border-left: 2px solid #241430; }\n.contextual-help-tw--callout #ch-help-text-tw { background: #24143022; padding: 12px 14px; border-radius: 10px; }\n</style>", "react": "import { useState } from \"react\";\n\nexport function ContextualHelp({\n label = \"{{label}}\",\n helpText = \"{{helpText}}\",\n expanded: initialExpanded = {{expanded}},\n variant = \"{{variant}}\",\n accent = \"{{accent}}\",\n}) {\n const [expanded, setExpanded] = useState(initialExpanded);\n const panelStyle = {\n tooltip: { background: \"#241430\", color: \"#FAF7F2\", padding: \"10px 12px\", borderRadius: 8 },\n inline: { paddingLeft: 21, borderLeft: \"2px solid \" + accent },\n callout: { background: accent, color: \"#241430\", padding: \"12px 14px\", borderRadius: 10 },\n }[variant] ?? {};\n return (\n <div style={{ fontFamily: \"system-ui, sans-serif\", fontSize: 16, lineHeight: 1.5, color: \"#241430\", maxWidth: 320 }}>\n <button type=\"button\" aria-expanded={expanded} aria-describedby=\"ch-help-text-react\" onClick={() => setExpanded((e) => !e)}\n style={{ display: \"inline-flex\", alignItems: \"center\", gap: 6, background: \"transparent\", border: \"none\", padding: \"4px 0\", font: \"600 14px system-ui, sans-serif\", color: accent, cursor: \"pointer\" }}>\n <span>{label}</span>\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"7\" stroke=\"currentColor\" strokeWidth=\"1.3\" /><path d=\"M8 7v4.5M8 4.6v.1\" stroke=\"currentColor\" strokeWidth=\"1.3\" strokeLinecap=\"round\" /></svg>\n </button>\n {expanded && (\n <div id=\"ch-help-text-react\" style={{ marginTop: 8, fontSize: 13.5, ...panelStyle }}>{helpText}</div>\n )}\n </div>\n );\n}" }