ww-button/AI.json at main · weweb-assets/ww-button · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
{
    "metadata": {
        "name": "ww-button",
        "description": "A configurable button element supporting styling, icons, and form submission. Inherits text properties.",
        "keywords": [
            "button",
            "submit",
            "cta",
            "action"
        ],
        "features": [
            "Submit and regular button types",
            "Left and right icon slots",
            "Disabled state",
            "Focus, blur, keydown, keyup events",
            "Form integration with submit type",
            "Custom background color"
        ],
        "inherit": [
            "ww-text"
        ]
    },
    "properties": [
        {
            "name": "buttonType",
            "description": "Button type: regular or form submit",
            "type": "string",
            "options": [
                "button",
                "submit"
            ],
            "defaultValue": "button"
        },
        {
            "name": "disabled",
            "description": "Whether the button is disabled",
            "type": "boolean",
            "defaultValue": false
        },
        {
            "name": "hasLeftIcon",
            "description": "Set to true to show a left icon. REQUIRED for the icon to render (the icon only shows when this is true); enabling it auto-creates a child ww-icon element in the leftIcon slot.",
            "type": "boolean"
        },
        {
            "name": "hasRightIcon",
            "description": "Set to true to show a right icon. REQUIRED for the icon to render (the icon only shows when this is true); enabling it auto-creates a child ww-icon element in the rightIcon slot.",
            "type": "boolean"
        }
    ],
    "states": [
        {
            "name": "focus",
            "description": "Button has focus"
        },
        {
            "name": "disabled",
            "description": "Button is disabled"
        },
        {
            "name": "active",
            "description": "Button is active/pressed"
        }
    ],
    "events": [
        {
            "name": "focus",
            "description": "Triggered when the button receives focus"
        },
        {
            "name": "blur",
            "description": "Triggered when the button loses focus"
        },
        {
            "name": "keydown",
            "description": "Triggered on key down while focused"
        },
        {
            "name": "keyup",
            "description": "Triggered on key up while focused"
        }
    ],
    "actions": [],
    "slots": [
        {
            "name": "leftIcon",
            "description": "Child ww-icon element displayed on the left side of the button text. Holds a full ww-icon element (its own uid, style and size), NOT an icon-name string. The icon renders only when hasLeftIcon is true (setting hasLeftIcon to true auto-creates this child). Configure the icon by editing this child ww-icon; never write an icon name string into content.default.leftIcon via editElement (it breaks the icon).",
            "type": "object"
        },
        {
            "name": "rightIcon",
            "description": "Child ww-icon element displayed on the right side of the button text. Holds a full ww-icon element (its own uid, style and size), NOT an icon-name string. The icon renders only when hasRightIcon is true (setting hasRightIcon to true auto-creates this child). Configure the icon by editing this child ww-icon; never write an icon name string into content.default.rightIcon via editElement (it breaks the icon).",
            "type": "object"
        }
    ],
    "variables": [],
    "specifications": [
        "Inherits text properties from ww-text element",
        "Submit type buttons should be used inside a ww-form-container",
        "For form submission workflows, trigger them on the form container, not the submit button",
        "You need to set margin values in icons to create spacing between the icon and text",
        "Never forget the 'text' prop in the contents. The button will not display without it!"
    ],
    "examples": []
}