Skip to content
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

Merged
merged 15 commits into from
Dec 19, 2024

Conversation

leopuleo
Copy link
Contributor

@leopuleo leopuleo commented Dec 2, 2024

Changes

This pull request adds the Tag and IconButton 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:

  • Remove the iconSize prop from the Button component.
  • Add the IconButton to several other components, such as Tag, Card, Select, Alert, and Toast.
  • Remove deprecated props from the @webiny/ui/Button component; some (i.e. flat or small) 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:

  • Make the component interactable by providing an onClick callback.
  • Make the component dismissible by providing an onDismiss callback.
  • Customise the "dismiss" icon via dismissIconElement and dismissIconLabel props.

Icon

The Icon component should be used internally whenever an icon is displayed. Sometimes, we want to set the Icon fill colour to the parent for more granular control. For this reason, the default colour prop is inherit.

@leopuleo leopuleo requested a review from adrians5j December 2, 2024 10:56
@leopuleo leopuleo self-assigned this Dec 2, 2024
@leopuleo leopuleo changed the title feat(admin-ui): Tag component feat(admin-ui): Tag + Icon Button components Dec 18, 2024
Copy link
Member

@adrians5j adrians5j left a 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",
Copy link
Member

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?

@leopuleo leopuleo merged commit 8b3a8a0 into feat/new-admin-ui Dec 19, 2024
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants