-
Notifications
You must be signed in to change notification settings - Fork 617
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(admin-ui): Tag + Icon Button components #4423
Conversation
# Conflicts: # packages/ui/package.json # yarn.lock
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome man, a bunch of good stuff in here.
Thanks!
@@ -5,7 +5,7 @@ import { cn, cva, VariantProps, makeDecoratable } from "~/utils"; | |||
const buttonVariants = cva( | |||
[ | |||
"border-transparent rounded font-sans inline-flex items-center justify-center whitespace-nowrap ring-offset-background transition-colors", | |||
"disabled:pointer-events-none", | |||
"disabled:cursor-not-allowed", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I love the not allowed cursor.. but do we need to remove pointer-events-none here? Wouldn't the user still be able to click on the button now?
Changes
This pull request adds the
Tag
andIconButton
components to the@webiny/admin-ui
package.IconButton
This component is used when we want to show a simple button with an Icon.
In this PR, we are also:
iconSize
prop from theButton
component.IconButton
to several other components, such asTag
,Card
,Select
,Alert
, andToast
.@webiny/ui/Button
component; some (i.e.flat
orsmall
) were passed to the new@webiny/admin-ui/Button
component, causing console warnings.Tag
A visual element used to display brief, contextual information or status. The developers can:
onClick
callback.onDismiss
callback.dismissIconElement
anddismissIconLabel
props.Icon
The
Icon
component should be used internally whenever an icon is displayed. Sometimes, we want to set theIcon
fill colour to the parent for more granular control. For this reason, the default colour prop isinherit
.