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
Mono	front PR

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

View your CI Pipeline Execution ↗ for commit e7a0f1a

☁️ Nx Cloud last updated this comment at 2026-07-07 13:56:55 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

Codecov Report

❌ Patch coverage is 95.79832% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.38%. Comparing base (d123672) to head (e7a0f1a).
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...src/Form/SelectDropdown/hooks/useSelectHandlers.ts	87.50%	5 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3371      +/-   ##
==========================================
- Coverage   90.55%   90.38%   -0.17%     
==========================================
  Files         398      274     -124     
  Lines        6586     5702     -884     
  Branches     2105     1898     -207     
==========================================
- Hits         5964     5154     -810     
+ Misses        613      539      -74     
  Partials        9        9

Flag	Coverage Δ
main	`?`
pull-request	`90.38% <95.79%> (?)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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 ?? '');
+      }


…gmt-292

aresnik11 · 2026-06-23T14:48:55Z

+```tsx
+<FormGroup htmlFor="country" isSoloField label="Country" error={errors.country}>
+  <SelectDropdown
+    name="country"


this needs to be id. name doesnt match them up. its id on the control matches htmlFor on the label, or you can pass htmlFor on the control and it becomes id downstream (kinda weird imo)

aresnik11

This is so cool! Still playing around/testing in SB but here's some initial thoughts.

Also didn't know where to put this but just wanted to double check that this styling is correct (shadow and line placement)

aresnik11 · 2026-06-23T21:04:25Z

+  /** When true, renders CreatableSelect instead of ReactSelect */
+  isCreatable?: boolean;
+  /** Customises the "Add" row label */
+  formatCreateLabel?: (inputValue: string) => React.ReactNode;
+  /** Controls visibility of the "Add" row */
+  isValidNewOption?: (
+    inputValue: string,
+    value: OptionsType<OptionStrict>,
+    options: OptionsType<OptionStrict>
+  ) => boolean;


can this be DRYed up with the props above? seeing the same thing twice

aresnik11 · 2026-06-23T21:25:10Z

+    mode: 'Creatable multi',
+    uncontrolled: (
+      <>
+        Omit <Code>value</Code>; use <Code>onCreateOption</Code> for option


nit that can be ticketed for later - using Code with other text looks a little funny, its too high up

aresnik11 · 2026-06-24T20:20:15Z

+- `FormGroup` `htmlFor` must match control `id` (not `name`). Alternatively, pass `htmlFor` directly on SelectDropdown and it becomes `id` downstream.
 - Pass `name` on SelectDropdown (required for forms).
- Pass `aria-label` (required for forms); it must match the FormGroupLabel `htmlFor` / `name`.
+- Pass `aria-label` (required for forms); it must match the FormGroupLabel `htmlFor`.


is this true? isnt this not needed bc of the form group label?

yeah this is an overstatement, i'll fix

…gmt-292

aresnik11

should this read "enter at least 3 characters" as well? currently just saying no results

aresnik11 · 2026-06-25T13:45:51Z

+
+- `FormGroup` `htmlFor` must match control `id` (not `name`). Alternatively, pass `htmlFor` directly on SelectDropdown and it becomes `id` downstream.
+- Pass `name` on SelectDropdown (required for forms).
+- Pass `aria-label` (required for forms); it must match the FormGroupLabel `htmlFor`.


is this true? i thought it just uses the form group label?

Co-authored-by: Amy Resnik <aresnik@codecademy.com>

…gmt-292

codecademydev · 2026-07-07T13:57:53Z

📬 Published Alpha Packages:

Package	Version	npm	Diff
`@codecademy/gamut`	`72.2.4-alpha.628984.0`	npm	diff
`@codecademy/gamut-icons`	`9.57.11-alpha.628984.0`	npm	diff
`@codecademy/gamut-illustrations`	`0.58.16-alpha.628984.0`	npm	diff
`@codecademy/gamut-kit`	`3.0.8-alpha.628984.0`	npm	diff
`@codecademy/gamut-patterns`	`0.10.35-alpha.628984.0`	npm	diff
`@codecademy/gamut-styles`	`20.0.3-alpha.628984.0`	npm	diff
`@codecademy/gamut-tests`	`6.0.6-alpha.628984.0`	npm	diff
`@codecademy/variance`	`0.26.2-alpha.628984.0`	npm	diff
`eslint-plugin-gamut`	`2.4.4-alpha.628984.0`	npm	diff

github-actions · 2026-07-07T13:59:48Z

🚀 Styleguide deploy preview ready!

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

LinKCoding

Just looked over some skills and the new docs
but looks really good :D

LinKCoding · 2026-07-07T13:57:21Z

+
+## Options
+
+`options` accepts plain strings or option objects. `value` is always a string and references an option's `value`.


more accurate to say options accepts an array of plain strings or option objects.

LinKCoding · 2026-07-07T13:58:22Z

+
+`options` accepts plain strings or option objects. `value` is always a string and references an option's `value`.
+
+| Field          | Required | Notes                                                                |


I think some context could help, maybe something like, the table below shows the keys and values of an options object.
Though the "Notes" could be updated, or adding a dedicated column for type of value.

LinKCoding · 2026-07-07T13:58:58Z

+
+## Controlled vs uncontrolled
+
+SelectDropdown does **not** accept `defaultValue`.


Suggested change

SelectDropdown does **not** accept `defaultValue`.

`SelectDropdown` does **not** accept `defaultValue`.

LinKCoding · 2026-07-07T14:00:17Z

+
+## When to use SelectDropdown vs Select
+
+Use `Select` for standard single-select forms with minimal bundle cost. Use `SelectDropdown` when designs specify the styled dropdown menu, search, multi-select tags, creatable options, icons, groups, or abbreviations. SelectDropdown has a larger JavaScript dependency (react-select).


Suggested change

Use `Select` for standard single-select forms with minimal bundle cost. Use `SelectDropdown` when designs specify the styled dropdown menu, search, multi-select tags, creatable options, icons, groups, or abbreviations. SelectDropdown has a larger JavaScript dependency (react-select).

Use `Select` for standard single-select forms with minimal bundle cost. Use `SelectDropdown` when designs specify the styled dropdown menu, search, multi-select tags, creatable options, icons, groups, or abbreviations. `SelectDropdown` has a larger JavaScript dependency (react-select).

LinKCoding · 2026-07-07T14:24:57Z

+  {
+    key: 'mode',
+    name: 'Mode',
+    size: 'md' as const,


could bump the size on this, the "Create single" and "Create multi" get cut off a bit and leads into a scroll:

LinKCoding · 2026-07-07T14:31:03Z

+      },
+    },
+  },
+  render: () => <CreatableMultiUncontrolledStoryRender />,


same note here re: exposing the code

LinKCoding · 2026-07-07T14:31:11Z

+      },
+    },
+  },
+  render: () => <CreatableMultiStoryRender />,


same note here re: exposing the code

LinKCoding · 2026-07-07T14:31:35Z

+};
+
+export const CreatableWithValidation: Story = {
+  render: () => <CreatableWithValidationStoryRender />,


same note here re: exposing the code

LinKCoding · 2026-07-07T14:46:14Z

+<Canvas of={SelectDropdownStories.MultipleSelectControlled} />

-#### Small size with independent widths
+`onChange` receives option objects (`{ label, value }`), not `event.target.value`. The second argument is react-select action metadata — use `meta.action === 'create-option'` in creatable mode.


I think this could be more clear with an example, and I think it pairs really well with the validation example you had with the skills

that or maybe provide rationale for when/why you might to check for this 2nd argument

LinKCoding · 2026-07-07T14:48:46Z

+Gate which inputs can be created with `isValidNewOption` — return `false` to hide the **Add** row. Use `validationMessage` to replace the default "No options" text with contextual feedback, and mirror the same message in `FormGroup`'s `error` prop so it's surfaced below the field.

-## Accessibility
+Because react-select clears the input on blur, persist validation state via `onInputChange`: validate on `input-change`, and re-validate from the last typed value on `input-blur` so the `FormGroup` error isn't lost when the input clears.


Nit: I think omitting react-select here is ok

Something like: Because the default behavior is to clear the input on blur, use onInputChange to ...

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

dreamwasp and others added 11 commits June 12, 2026 16:23

tweak props + co-pilot

878a06f

Merge branch 'main' into cass-gmt-292

d99285b

as

f2e6db1

tweak

7064061

SelectDropdown skill

a4b27b8

Merge branch 'main' into cass-gmt-292

9000ba8

update skills

c8f2d09

refactor skills + stories

5252f6a

Merge branch 'main' into cass-gmt-292

5d1cbda

Merge branch 'main' into cass-gmt-292

cf1756a

Merge branch 'cass-gmt-292' of github.com:Codecademy/gamut into cass-…

82628dd

…gmt-292

dreamwasp marked this pull request as ready for review June 23, 2026 13:57

dreamwasp requested a review from a team as a code owner June 23, 2026 13:57

aresnik11 reviewed Jun 23, 2026

View reviewed changes

amy edits

20f8b22

dreamwasp requested a review from aresnik11 June 24, 2026 18:36

Merge branch 'main' into cass-gmt-292

53e75eb

aresnik11 reviewed Jun 24, 2026

View reviewed changes

dreamwasp added 2 commits June 25, 2026 08:21

change placeholde text color

fc9bead

Merge branch 'cass-gmt-292' of github.com:Codecademy/gamut into cass-…

721362e

…gmt-292

aresnik11 reviewed Jun 25, 2026

View reviewed changes

dreamwasp and others added 7 commits June 29, 2026 10:12

Update packages/gamut/src/Form/SelectDropdown/styles.ts

7c6722a

Co-authored-by: Amy Resnik <aresnik@codecademy.com>

merge main

e7cc7ac

Merge branch 'cass-gmt-292' of github.com:Codecademy/gamut into cass-…

d0c8703

…gmt-292

fix syntax

f010705

fix linting errors

bc91ff5

reorgnize

331c8ac

fix errors

8e8a130

dreamwasp requested a review from aresnik11 July 6, 2026 15:56

dreamwasp and others added 2 commits July 7, 2026 09:06

Merge branch 'main' into cass-gmt-292

53f4001

amy fix

e7a0f1a

LinKCoding reviewed Jul 7, 2026

View reviewed changes


		## Options

		`options` accepts plain strings or option objects. `value` is always a string and references an option's `value`.


		`options` accepts plain strings or option objects. `value` is always a string and references an option's `value`.

		\| Field \| Required \| Notes \|


		## Controlled vs uncontrolled

		SelectDropdown does not accept `defaultValue`.

	SelectDropdown does not accept `defaultValue`.
	`SelectDropdown` does not accept `defaultValue`.


		## When to use SelectDropdown vs Select

		Use `Select` for standard single-select forms with minimal bundle cost. Use `SelectDropdown` when designs specify the styled dropdown menu, search, multi-select tags, creatable options, icons, groups, or abbreviations. SelectDropdown has a larger JavaScript dependency (react-select).

Uh oh!

Conversation

dreamwasp commented Jun 12, 2026 • edited 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!

Codecov Report

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!

Choose a reason for hiding this comment

Uh oh!

aresnik11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

aresnik11 Jun 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aresnik11 Jun 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aresnik11 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Jul 7, 2026

Uh oh!

github-actions Bot commented Jul 7, 2026

Uh oh!

LinKCoding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

dreamwasp commented Jun 12, 2026 •

edited

Loading

nx-cloud Bot commented Jun 12, 2026 •

edited

Loading

codecov Bot commented Jun 12, 2026 •

edited

Loading

aresnik11 Jun 23, 2026 •

edited

Loading

aresnik11 Jun 24, 2026 •

edited

Loading