docs: add deep controls add on

[aresnik11]

Overview

We've integrated the storybook-addon-deep-controls package into our Storybook setup to enhance the developer experience when working with complex, nested object props in our component stories. This addon transforms the way we interact with deeply nested properties by breaking them down into individual, user-friendly controls instead of requiring manual JSON editing.

How It Works

The addon automatically detects nested object properties in component args and creates individual controls for each primitive property within the nested structure. Instead of seeing a single JSON editor for complex objects, developers now see separate, typed controls for each nested property.

Key Technical Implementation:

1. Automatic Generation: The addon automatically splits any defined object args into multiple primitive controls for each deep primitive property passed into args. See Alert as an example.

2. Dot Notation: If you need/want to customize the argType beyond what is inferred automatically, you can access the nested properties using dot notation in argTypes, such as:

• 'tipProps.placement' for tooltip placement options
• 'infotip.emphasis' for infotip emphasis levels
• 'popoverProps.beak' for popover beak positioning

3. Type Safety: Stories that are customizing nested properties will have a TS error and will need to use TypeWithDeepControls<Meta<typeof Component>> instead of the standard Meta<typeof Component> to enable proper TypeScript support for deep controls.

PR Checklist

• Related to designs:
• Related to JIRA ticket: GM-1255
• 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

1. Go to all button stories
2. Confirm the size and icon controls work as expected
3. Go to Input story
4. Confirm icon control works as expected
5. Go to Select and SelectDropdown stories
6. Confirm value control works as expected
7. Go to Modal story
8. Confirm stories still work as expected
9. Go to the IconButton story
10. Confirm you see the new nested props! and now you can easily interact with tipProps
11. Repeat for nested props in FormGroup, Radio, Alert, Coachmark, Dialog, ConnectedFormGroup, GridForm
12. Check it with VO
13. Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 5e59224

Command	Status	Duration	Result
nx run-many --target=build --all	✅ Succeeded	2s	View ↗
nx run-many --target=verify --parallel=3 --all	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-10-17 20:20:05 UTC

[jakemhiller]

this
is
really
nice

[LinKCoding]

Looking good! 🔥🔥
I saw some things that could use some touch-ups, so left some thoughts/Qs.

[dreamwasp]

looks great to me - only nits are maybe some DRYing up can happen with infotip since its nested in a few places 🔥

[codecademydev]

📬Published Alpha Packages:

@codecademy/[email protected]

[codecademydev]

🚀 Styleguide deploy preview ready!

https://68f265101b76c68dafa569f2--gamut-preview.netlify.app

Deploy Logs

[LinKCoding]

Love the new docs!
Added some editorial stuff for consideration 🙏

[codecademydev]

📬 Published Alpha Packages:

@codecademy/[email protected]

[github-actions]

🚀 Styleguide deploy preview ready!

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