feat(button): adopt v11 styles

- forward focus and blur events
- provide button role for custom elements using 'as'

BREAKING CHANGE: danger-tertiary and danger-ghost props were renamed to danger--tertiary and danger--ghost
BREAKING CHANGE: buttons now have a larger minimum width
This commit is contained in:
Enrico Sacchetti 2023-01-28 21:08:55 -05:00
commit a1302baa44
No known key found for this signature in database
GPG key ID: 3374B89ECA60D796
7 changed files with 70 additions and 63 deletions

View file

@ -453,7 +453,7 @@
"name": "kind",
"kind": "let",
"description": "Specify the kind of button",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger-tertiary\" | \"danger-ghost\"",
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"danger\" | \"danger--tertiary\" | \"danger--ghost\"",
"value": "\"primary\"",
"isFunction": false,
"isFunctionDeclaration": false,
@ -651,7 +651,9 @@
"type": "forwarded",
"name": "mouseleave",
"element": "ButtonSkeleton"
}
},
{ "type": "forwarded", "name": "focus", "element": "ButtonSkeleton" },
{ "type": "forwarded", "name": "blur", "element": "ButtonSkeleton" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "button | a | div" },

View file

@ -30,7 +30,7 @@
## Danger tertiary button
<Button kind="danger-tertiary">Danger tertiary button</Button>
<Button kind="danger--tertiary">Danger tertiary button</Button>
## Danger tertiary, icon-only button
@ -40,11 +40,11 @@
</div>
</InlineNotification>
<Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan} />
<Button kind="danger--tertiary"iconDescription="Delete" icon={TrashCan} />
## Danger ghost button
<Button kind="danger-ghost">Danger ghost button</Button>
<Button kind="danger--ghost">Danger ghost button</Button>
## Button with icon