circuit-ui icon indicating copy to clipboard operation
circuit-ui copied to clipboard

SelectorGroup options should all have the same height

Open robinmetral opened this issue 3 years ago • 2 comments

Describe the bug

If an option in a SelectorGroup has a label that wraps on multiple lines, the options will have different heights.

Screenshot 2022-05-12 at 12 26 24

Steps to reproduce

  1. Go to the Storybook
  2. Make the label of one of the options longer
  3. See error

Expected behavior

All options should have the same height.

Specifications

n/a

Additional context

Fixed locally in an app using:

const StyledSelectorGroup = styled(SelectorGroup)`
  /* makes all option wrappers stretch */
  align-items: stretch;

  /* ...but the label div won't take up the entire height by default */
  label {
    height: 100%;
  }
`;

robinmetral avatar May 12 '22 11:05 robinmetral

I might be able to help, which file is it in?

jmoldyvan avatar May 13 '22 00:05 jmoldyvan

That's really cool @jmoldyvan! 🎉 We have a small glitch in our CLA bot at the moment, let us address it and I'll get back to you once we're ready to accept contributions again 🙂

robinmetral avatar May 13 '22 08:05 robinmetral