54 lines
1.6 KiB
JSON
54 lines
1.6 KiB
JSON
{
|
|
"id": "circle-action-button",
|
|
"name": "CircleActionButton",
|
|
"kind": "primitive",
|
|
"status": "draft-stable",
|
|
"summary": "Icon-only circular action control for close, add, edit, refresh, search, copy, drag-adjacent actions, and toolbar icon actions.",
|
|
"sourceRefs": [
|
|
{
|
|
"project": "nodedc_launcher",
|
|
"file": "src/shared/ui/Button.tsx",
|
|
"exports": ["IconButton"]
|
|
},
|
|
{
|
|
"project": "nodedc_launcher",
|
|
"file": "src/styles/globals.css",
|
|
"classes": ["admin-circle-action", "admin-panel-close", "services-admin-table__edit"]
|
|
},
|
|
{
|
|
"project": "nodedc_taskmanager",
|
|
"file": "plane-src/apps/web/styles/globals.css",
|
|
"classes": ["nodedc-external-icon-button", "nodedc-toolbar-icon-button"]
|
|
}
|
|
],
|
|
"anatomy": [
|
|
"button element",
|
|
"single centered icon",
|
|
"aria-label/title",
|
|
"optional solid active/primary variant"
|
|
],
|
|
"geometry": {
|
|
"size": "tokens.size.controlRing",
|
|
"shape": "circle",
|
|
"insetToHostEdge": "tokens.size.controlInset when anchored in a rounded container"
|
|
},
|
|
"variants": {
|
|
"ghost": {
|
|
"background": "transparent",
|
|
"border": "soft white alpha only if needed",
|
|
"hover": "white alpha surface"
|
|
},
|
|
"solid": {
|
|
"background": "rgba(247, 248, 244, 0.96)",
|
|
"color": "onAccentRgb"
|
|
}
|
|
},
|
|
"rules": [
|
|
"Do not replace with text pill when action is clear by icon.",
|
|
"Close button starts transparent with only soft circular boundary.",
|
|
"Hover may add subtle surface fill.",
|
|
"All icon-only admin actions share the same diameter."
|
|
]
|
|
}
|
|
|