feat(SelectDropdown): `isCreateable` support, removes SearchIcon, styling fixes by dreamwasp · Pull Request #3371 · Codecademy/gamut

dreamwasp · 2026-06-12T19:59:02Z

Overview

Adds isCreatable support to SelectDropdown for single + multi-select, letting users type and add options not already in the list. Also removes the SearchIcon from searchable dropdowns (replaced with arrow). I also added a SelectDropdown agent skill (referenced in the form skill), made some styling fixes, and rearranged Storybook documentation to have a better flow.

PR Checklist

Related to designs: See Gamut Figma under Forms
Related to JIRA ticket: GMT-292
Version plan added/updated (or not needed)
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Go to the SelectDropdown story and look over the docs
Confirm the flow looks good + makes sense
Test isCreateable section, esp the FormValidation story
Check it with VO, and do a lil check that themes looks good.

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

nx-cloud · 2026-06-12T20:00:28Z

View your CI Pipeline Execution ↗ for commit cd2dc5a

☁️ Nx Cloud last updated this comment at 2026-06-12 20:26:51 UTC

codecov · 2026-06-12T20:02:40Z

❌ 2 Tests Failed:

Tests completed	Failed	Passed	Skipped
1161	2	1159	0

View the top 2 failed test(s) by shortest run time

SelectDropdown isCreatable forwards onInputChange to the consumer when the input blurs

Stack Traces | 0.039s run time

Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "", {"action": "input-blur", "prevInputValue": "pur"}

Number of calls: 0
    at Object.<anonymous> (.../Form/__tests__/SelectDropdown.test.tsx:613:29)

SelectDropdown isCreatable clears the typed text when the input blurs

Stack Traces | 0.048s run time

Error: expect(element).toHaveValue()

Expected the element to have value:

Received:
  pur
    at Object.<anonymous> (.../Form/__tests__/SelectDropdown.test.tsx:594:24)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

codecov · 2026-06-12T20:02:41Z

❌ 2 Tests Failed:

Tests completed	Failed	Passed	Skipped
1166	2	1164	0

View the top 2 failed test(s) by shortest run time

SelectDropdown isCreatable clears the typed text when the input blurs

Stack Traces | 0.042s run time

Error: expect(element).toHaveValue()

Expected the element to have value:

Received:
  pur
    at Object.<anonymous> (.../Form/__tests__/SelectDropdown.test.tsx:594:24)

SelectDropdown isCreatable forwards onInputChange to the consumer when the input blurs

Stack Traces | 0.043s run time

Error: expect(jest.fn()).toHaveBeenCalledWith(...expected)

Expected: "", {"action": "input-blur", "prevInputValue": "pur"}

Number of calls: 0
    at Object.<anonymous> (.../Form/__tests__/SelectDropdown.test.tsx:613:29)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

Copilot

Pull request overview

Adds “creatable” support to the Gamut SelectDropdown (single + multi), updates dropdown indicator icon behavior (removes the search icon), and reorganizes/expands Styleguide documentation and examples to cover controlled/uncontrolled + creatable patterns.

Changes:

Implement isCreatable support (including formatCreateLabel, isValidNewOption, onCreateOption, and validationMessage) and route rendering through react-select/creatable.
Update dropdown visuals/behavior (remove searchable SearchIcon indicator, tweak menu/option styling).
Expand and reorder Storybook docs/stories (new creatable stories + new docs tables) and add corresponding unit tests.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/styleguide/src/lib/Atoms/FormInputs/SelectDropdown/SelectDropdown.stories.tsx	Reorders stories and adds new creatable examples (single, multi, validation).
packages/styleguide/src/lib/Atoms/FormInputs/SelectDropdown/SelectDropdown.mdx	Restructures docs and adds creatable + controlled/uncontrolled guidance and tables.
packages/styleguide/src/lib/Atoms/FormInputs/SelectDropdown/creatablePropsTable.tsx	Adds a props table documenting creatable-specific API surface.
packages/styleguide/src/lib/Atoms/FormInputs/SelectDropdown/controlledModeTable.tsx	Adds a table clarifying controlled vs uncontrolled patterns across modes.
packages/gamut/src/Form/SelectDropdown/types/styles.ts	Extends option-state typing to support creatable “Add” row metadata.
packages/gamut/src/Form/SelectDropdown/types/component-props.ts	Adds new creatable-related props and a TS constraint tying `isCreatable` to `isSearchable`.
packages/gamut/src/Form/SelectDropdown/styles.ts	Styling updates for menu shadow/no-options text and creatable “Add” row styling.
packages/gamut/src/Form/SelectDropdown/SelectDropdown.tsx	Wires new creatable props into the SelectDropdown implementation and forwards new callbacks.
packages/gamut/src/Form/SelectDropdown/elements/options.tsx	Avoids rendering selection checkmark on the creatable “Add” row.
packages/gamut/src/Form/SelectDropdown/elements/controls.tsx	Removes SearchIcon indicator selection logic; always uses chevron indicator.
packages/gamut/src/Form/SelectDropdown/elements/containers.tsx	Switches underlying implementation to `CreatableSelect` when `isCreatable` is set.
packages/gamut/src/Form/SelectDropdown/elements/constants.ts	Removes SearchIcon and searchable indicator variants.
packages/gamut/src/Form/tests/SelectDropdown.test.tsx	Adds/extends tests for creatable behavior and `validationMessage`.
packages/gamut/agent-tools/skills/gamut-select-dropdown/SKILL.md	Adds a SelectDropdown-specific agent skill documenting patterns/pitfalls.
packages/gamut/agent-tools/skills/gamut-forms/SKILL.md	Links forms skill to the new SelectDropdown skill for dropdown-specific guidance.

+      if (actionMeta.action === 'create-option') {
+        onCreateOption?.(actionMeta.option?.value ?? '');
+      }


codecademydev · 2026-06-12T20:27:39Z

📬 Published Alpha Packages:

Package	Version	npm	Diff
`@codecademy/gamut`	`71.0.1-alpha.69ab4c.0`	npm	diff
`@codecademy/gamut-icons`	`9.57.8-alpha.69ab4c.0`	npm	diff
`@codecademy/gamut-illustrations`	`0.58.14-alpha.69ab4c.0`	npm	diff
`@codecademy/gamut-kit`	`2.0.1-alpha.69ab4c.0`	npm	diff
`@codecademy/gamut-patterns`	`0.10.33-alpha.69ab4c.0`	npm	diff
`@codecademy/gamut-styles`	`20.0.1-alpha.69ab4c.0`	npm	diff
`@codecademy/gamut-tests`	`6.0.4-alpha.69ab4c.0`	npm	diff
`@codecademy/variance`	`0.26.2-alpha.69ab4c.0`	npm	diff
`eslint-plugin-gamut`	`2.4.4-alpha.69ab4c.0`	npm	diff

github-actions · 2026-06-12T20:29:42Z

🚀 Styleguide deploy preview ready!

Preview URL: https://6a2c6c300b2903e22b8bc831--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/6a2c6c300b2903e22b8bc831

dreamwasp added 4 commits June 5, 2026 15:39

feat(SelectDropdown):isCreatable

c8563bf

tweaks

8d86bc8

refactor prop table

cabad9d

write SelectDropdown skill

2ab39ce

dreamwasp requested a review from Copilot June 12, 2026 19:59

Merge branch 'main' into cass-gmt-292

cd2dc5a

Copilot started reviewing on behalf of dreamwasp June 12, 2026 19:59 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

tweak props + co-pilot

878a06f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(SelectDropdown): `isCreateable` support, removes SearchIcon, styling fixes#3371

feat(SelectDropdown): `isCreateable` support, removes SearchIcon, styling fixes#3371
dreamwasp wants to merge 6 commits into
mainfrom
cass-gmt-292

dreamwasp commented Jun 12, 2026 •

edited by atlassian Bot

Loading

Uh oh!

nx-cloud Bot commented Jun 12, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Jun 12, 2026

Uh oh!

codecov Bot commented Jun 12, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

codecademydev commented Jun 12, 2026

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

dreamwasp commented Jun 12, 2026 • edited by atlassian Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jun 12, 2026

❌ 2 Tests Failed:

Uh oh!

codecov Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 2 Tests Failed:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

codecademydev commented Jun 12, 2026

Uh oh!

github-actions Bot commented Jun 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dreamwasp commented Jun 12, 2026 •

edited by atlassian Bot

Loading

nx-cloud Bot commented Jun 12, 2026 •

edited

Loading

codecov Bot commented Jun 12, 2026 •

edited

Loading