feat: Disable inline style prop for components

[LinKCoding]

Overview

Added a custom ESLint rule gamut/no-inline-style to eslint-plugin-gamut to disallow inline style props on JSX elements. This rule encourages the use of styled components, CSS classes, or design system utilities instead of inline styles.

Changes:

• Created no-inline-style rule with full test coverage in eslint-plugin-gamut
• Updated .eslintrc.js to use the custom rule (set to 'error' level)
• Added rule to recommended configuration
• Disabled rule for gamut-illustrations package where inline styles are acceptable
• Added ESLint disable comments to existing components that require inline styles (Card, Rotation, ExpandInCollapseOut, FocusTrap, Popover, VidstackPlayer, SelectDropdown components)
• Created comprehensive ESLint rules documentation page in Storybook (Meta/ESLint Rules)
• Added ESLint rules link to Meta section table of contents

PR Checklist

• Related to designs:
• Related to JIRA ticket: GMT-231
• 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. Check the ESLint documentation:

   • Open the Preview, or run Storybook locally, and navigate to Meta → ESLint Rules
   • Verify all four rules are documented with examples

2. Verify the rule catches inline styles locally:

   • Try adding something like: <div style={{ padding: 0 }} /> to any component in the gamut package
   • You should see an ESLint error about inline styles

3. Check that components with disable comments still work:

   • Open one of: Card/index.tsx, Animation/Rotation.tsx, Animation/ExpandInCollapseOut.tsx, FocusTrap/index.tsx, Popover/Popover.tsx, Video/lib/VidstackPlayer.tsx, or Form/SelectDropdown/elements/controls.tsx
   • Verify no ESLint errors are shown despite the style props
   • Go to their respective stories and see that the component works just fine

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 95f3c4e

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

---

☁️ Nx Cloud last updated this comment at 2025-11-24 20:02:45 UTC

[dreamwasp]

perfection

[dreamwasp]

I think we should tone this down a little - The use of inline styles is discouraged

[dreamwasp]

love love love these

[dreamwasp]

loveee this

[codecademydev]

📬 Published Alpha Packages:

eslint-plugin-gamut@2.3.3-alpha.41f8b9.0
@codecademy/gamut@67.3.4-alpha.41f8b9.0
@codecademy/gamut-kit@0.6.565-alpha.41f8b9.0
@codecademy/styleguide@78.3.4-alpha.41f8b9.0

[github-actions]

🚀 Styleguide deploy preview ready!

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