themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.78k stars 396 forks source link

Customization of button content in Dropdown #1271

Open victorfunes opened 5 months ago

victorfunes commented 5 months ago

Steps to reproduce

Using the dropdown theme, we customize the dropdown to expand to use all the available size in the form, but we cannot (or we don't know how to) customize the content of the button to justify between and place the arrow in the right of the button and the text in the left.

image

This is our current themes definition: (we are using the default)

import { theme as FlowbiteDefaultTheme, FlowbiteDropdownTheme } from "flowbite-react";

enum EnumFlowbiteDropdownThemes {
  default = "default",
  underline = "underline",
}

const FlowbiteDefaultDropdownTheme = FlowbiteDefaultTheme.dropdown;

export const FlowbiteDropdownThemes: Record<EnumFlowbiteDropdownThemes, RecursivePartial<FlowbiteDropdownTheme>> = {
  default: {
    floating: {
      base: twMerge(FlowbiteDefaultDropdownTheme.floating.base, "rounded-lg px-0"),
      target: twMerge(
        FlowbiteDefaultDropdownTheme.floating.target,
        "w-full border disabled:cursor-not-allowed disabled:opacity-50 bg-gray-50 border-gray-300 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500",
      ),
    },
  },
  underline: {
    inlineWrapper: "flex items-center w-full focus:ring-transparent",
  },
};

Current behavior

The text and the icon are placed in the middle of the button.

Expected behavior

We would like to have the possibility to configure it, or at least to have it with justify-between as default instead of centered.

Context

We want to keep visual consistency across the different components and follow our Figma designs.