Skip to content

Update select option dropdown#111

Merged
jules-exel merged 4 commits intomainfrom
update-select
Apr 8, 2026
Merged

Update select option dropdown#111
jules-exel merged 4 commits intomainfrom
update-select

Conversation

@jules-exel
Copy link
Copy Markdown
Contributor

Summary

Replaces the native <select> element with a fully styled HeadlessUI Combobox, adding new props and fixing several edge cases.


What changed

stories/molecules/inputs/select/Select.tsx

  • Replaced native <select> with @headlessui/react Combobox (read-only mode) for full
    styling control with built-in accessibility
  • Dropdown width tracks the input via ResizeObserver so it always matches — even inside
    animated modals
  • Dropdown renders in a portal with z-[9999] to always appear above modal content
  • Chevron rotates 180° when open
  • Added optional description to ISimpleSelectOptions which renders inline next to the label in
    muted text

New props

Prop Type Default Description
dropdownMaxHeight number 240 Max height in px before the options list scrolls
placeholder string "Select" Placeholder when no option is selected

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 2, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
plenum-ui Ready Ready Preview, Comment Apr 8, 2026 1:15pm

Request Review

update proper message spacing
@jules-exel jules-exel marked this pull request as ready for review April 7, 2026 13:22
@jules-exel jules-exel requested a review from DerekAgility April 7, 2026 13:22
>
{({ selected }) => (
<div className="py-xxsm px-sm flex items-center gap-xsm">
<span>{option.label}</span>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should be using our own Typography here

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated

Comment on lines +169 to +170
<span className="text-neutral-500 font-normal">{option.description}</span>
) : null}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same Typography

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated


# The required yarn version to use this script
REQUIRED_YARN_VERSION="1.22.19"
REQUIRED_YARN_VERSION="1.22.22"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

was this added by mistake?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wasn't able to run locally without this set to that version. I wasn't sure if I should upload this here for future or if I just keep it locally.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Running storybook? Are you running yarn dev?

Copy link
Copy Markdown
Contributor Author

@jules-exel jules-exel Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep I do yarn run dev

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm interesting, let's merge this in and see what happens.

Copy link
Copy Markdown
Contributor

@DerekAgility DerekAgility left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work!

@jules-exel jules-exel merged commit b6cea75 into main Apr 8, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants