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

Added “data-variant” attribute to components #407

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

fabioserembe
Copy link

Hello everyone!!!

I posted this PR that adds the data-variant attribute to Flux (free) components.
This PR solves the [#393] discussion that I had started a couple of days ago..

The problem

I found myself in a situation where I had to apply a style to buttons (selectable via the data-flux-button attribute), but this style was being applied globally without distinction of the button variant.

So the idea was to add, where possible, a data-variant attribute that could come in handy in case you want to apply a certain style only to certain variants and not to all of them.

Video example

data-variant.example.mov

Code

<flux:button variant="primary" class="teal">Primary</flux:button>
<flux:button variant="outline" class="teal">Outline</flux:button>

[data-flux-button][data-variant="primary"].teal { @apply !bg-teal-500 !text-white hover:!bg-teal-400; }
[data-flux-button][data-variant="outline"].teal { @apply !bg-transparent !border-teal-500 !text-teal-500 hover:!border-teal-400; }

I'm excited to hear your thoughts!! What do you think? Can it be useful?

Thank you so much for the incredible work you do!!!

Regards,
Fabio

…at property to <a> and <button> tag;

- Added "data-variant" attribute to Flux free component, when possible;
@seabasss
Copy link

I was just going to suggest this! Excellent!

@nicolaslefresne
Copy link

Very very useful change, thank you, can't wait to see it implemented!

@helderneves91
Copy link

Would be very happy with this new feature. To be consistent, it could have the badge color names.

@fabio-algomera
Copy link

Would be very happy with this new feature. To be consistent, it could have the badge color names.

Theoretically, this approach should be taken with all components that have a variant. Also in Pro version.

@helderneves91
Copy link

@calebporzio have you thought about this?

In a project I have a button that opens a modal with reports.
Would be awesome if the button is red if we don't have reports and green if we have reports.

UX would be greatly improved.

@nicolaslefresne
Copy link

In my understanding it would also be the only way to easily add a layer of color customization to the buttons?
I love the style of flux components, but I really would like to add a twist of color on primary ones. Having access to data-variant would allow to set specific colors for them.

@joffreypersia
Copy link

Please @calebporzio can you consider adding attribute variant to the DOM so we can customize the colors more granularly ?

@edwinvdpol
Copy link

edwinvdpol commented Dec 3, 2024

Can't we use TailwindCSS 4.0 when it's stable to customize the color scheme via theme variables?

What if the CSS classes are named for example text-flux-100 or text-primary-100 (based on variant, or other unique 'identifier' other than zinc), you could do something like below in Tailwind CSS v4 to overwrite the color(s):

@theme {
  --color-primary-100: oklch(0.99 0 0);
  --color-primary-200: oklch(0.98 0.04 113.22);
  --color-primary-300: oklch(0.94 0.11 115.03);
  ...
}

Or, use CSS variables / arbitrary values instead.

@joffreypersia
Copy link

I hope it will be merged soon :)

@nicolaslefresne
Copy link

I don't think it will get merged, from what I can understand from @calebporzio posts, a theme feature is on its way, this will probably solve the issues this PR is fixing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants