flowbite-react icon indicating copy to clipboard operation
flowbite-react copied to clipboard

Customization of button content in Dropdown

Open victorfunes opened this issue 1 year ago • 0 comments

  • [X] I have searched the Issues to see if this bug has already been reported
  • [X] I have tested the latest version

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.

victorfunes avatar Feb 14 '24 18:02 victorfunes