themesberg / themesberg/flowbite-react

Customization of button content in Dropdown

Open
#1,271 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2.1k
Forks
506
PR merge metrics
No merged PRs in 30d

Description

  • I have searched the Issues to see if this bug has already been reported
  • 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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Dropdown theme definition shown in the issue, especially floating.target and inlineWrapper, and inspect how their classes control the button layout. Done means the text and arrow can be aligned with space between them, either through configuration or as the default, while preserving the existing dropdown themes.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, tailwindcss, typescript
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.