[Feature request] [Documentation]: 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.