Skip to content

Different heights of buttons in Button.Group when text is rendered in more than one line due to lack of space #855

@victorfunes

Description

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

Steps to reproduce

  1. Define a Button.group with different number and length of words and shrink the space available for all the component

Current behavior

Now each button has a different height depending on the words of each button:

image

Expected behavior

All the buttons should have the same height.

Context

I was checking responsive design for mobile devices, and I have seen this strange behaviour.

        <Button.Group>
          <Button size="sm" color="light" onPointerDown={filterLastYear}>
            <span className={internalFilterDate === FilterDate.LAST_YEAR ? selectedButtonClassname : undefined}>
              Last year
            </span>
          </Button>
          <Button size="sm" color="light" onPointerDown={filterLastMonth}>
            <span className={internalFilterDate === FilterDate.LAST_MONTH ? selectedButtonClassname : undefined}>
              Last 30 days
            </span>
          </Button>
          <Button size="sm" color="light" onPointerDown={filterLastWeek}>
            <span className={internalFilterDate === FilterDate.LAST_WEEK ? selectedButtonClassname : undefined}>
              Last 7 days
            </span>
          </Button>
          <Button size="sm" color="light" onPointerDown={filterAlways}>
            <span className={internalFilterDate === FilterDate.ALWAYS ? selectedButtonClassname : undefined}>
              Always
            </span>
          </Button>
        </Button.Group>

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions