[Feature request]: Ensure an order of classes for each component

[arthurgeek]

Sorry if this is not the correct place to add a feature request.

Looking at the documentation, it's really hard to see which of the classes are part of the base component (they're the same in all variations) and which are specific to that variation. Take a look here: https://flowbite.com/docs/components/buttons/.

I'd like to propose that all classes that are part of the base component comes either first or last, making it much easier to understand what are the different classes.

[zoltanszogyenyi]

Hey @arthurgeek,

Can you give me an example of how you would like to see the first example of buttons?

Thanks.

[arthurgeek]

Sure!

Something like this:

<div class="flex flex-wrap">
  <button type="button" class="focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-white bg-blue-700 focus:ring-blue-300 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default</button>
  <button type="button" class="focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800">Light</button>
  <button type="button" class="focus:ring-4 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-white bg-gray-800 focus:ring-gray-300 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700">Dark</button>
</div>

So, base styles (styles that applies to all variants) first, followed by variant-specific after. Ideally, within the variant specific, you could also follow an order (eg: bg-related classes first, text-related, border-related. I have not done this for all classes in the example above, but hope it's clear enough). Then, all the dark classes follow soon after.

This makes it much easier, at a glance, to see which classes are different for each variant.

While we're talking about button and it's variants, any reason the disabled variant uses color-specific classes (eg: it replaces the bg-blue-700 to bg-blue-400 instead of using: opacity-50 (or any other number) class?

[zoltanszogyenyi]

It makes sense and it would definitely improve the readability of the components. If you feel like you're willing to invest your time into organizing the class orders in a particular way, I would be more than glad to approve your PR for that. Others could join in helping as well.

Before doing that, however, we should decide on the order of the classes. I recommend that we should start with the non-variant related classes (ie. bg-red-100 or text-gray-200), then follow up with the state variants (ie. hover, focus), and lastly use the dark version in the same order (dark with normal classes, then dark with state variants).

Does that make sense?

So for example the buttons would be something like:

<div class="flex flex-wrap">
  <button type="button" class="font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default</button>
  <button type="button" class="font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-gray-900 bg-white border border-gray-300 focus:ring-4 hover:bg-gray-100 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-800">Light</button>
  <button type="button" class="font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 mb-3 text-white bg-gray-800 focus:ring-4 focus:ring-gray-300 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-800 dark:border-gray-700">Dark</button>
</div>

It would be even more awesome if this would be somehow automated using a script. In fact, this would be a future-proof solution for all components. Not sure where to start, though.

Regarding your question about the disabled button, yes, it would be better to use the opacity. With the new TW v3.0 update, however, we could also just use bg-blue-700/50.

We've been looking into improving the code block from the documentation by also changing the primary color (which is blue) to one available from the color palette and later generating an RTL version of each component dynamically.

PS: I've moved this to Github Discussions for now until we decide on how exactly we will build the solution.

[arthurgeek]

The only way I can think of this being automated were if the classes were first declared using JavaScript and then combined using something like classnames.

I feel like doing something like this requires deep knowledge about the project, both from past and current decisions, and given the docs are the only place the components are declared today (correct me if I'm wrong, but I haven't seen anywhere else, although I haven't looked at Figma), I feel like the chance of doing something wrong if I'm not aware of those decisions is quite big.

[zoltanszogyenyi]

Someone from our Discord server also recommended using the Headwind plugin for VS code. This could actually work.

[zoltanszogyenyi]

@arthurgeek the classes have been reordered using the Headwind plugin. It should be easier to read now.

[arthurgeek]

@zoltanszogyenyi perfect! thanks :)

I wanted to see the VSCode option later this week, but you were faster. 🚀

[zoltanszogyenyi]

Just a small follow-up. RTL is now available in v2.1.0: https://github.com/themesberg/flowbite/releases/tag/v2.1.0!