[aresnik11]

Overview

System props (m, p, bg, display, gap, …) were missing from the Storybook props tables of most components that accept them. This PR brings them back and shows them in a way that doesn't bury a component's own props.

Why they were missing

Docgen (react-docgen-typescript) was reading the root tsconfig, which has strict on and so includes strictFunctionTypes. Under that setting, variance.compose(...) fails to type-check. Docgen doesn't report the error. It drops the composed props, so a component built on composed system props showed only its own props. packages/gamut/tsconfig.json already sets strictFunctionTypes: false, so main.ts now points docgen at that file.

Making them readable

Once the props came back, a component like Text had dozens of system props in the same table as its own handful. Docgen also showed their types as raw Scale<...> and csstype unions, which don't help anyone choose a value. Two changes deal with that.

argTypes enhancer (packages/.storybook/systemProps.ts, registered in preview.ts as argTypesEnhancers):

• Grouping: puts each system prop into a category based on the system.* group it comes from: Spacing, Flex & Grid, Layout, Positioning, Typography, Color, Background, Border, Shadow, List. Some groups overlap (space contains margin and padding, and flex and grid item props are also in layout), so the first group in the list wins.
• Type column: shows the Core theme tokens a prop accepts instead of the raw docgen type. Up to 12 tokens are listed inline. For larger scales such as colors, the summary reads theme.colors and the full list goes in the type detail. Props without a theme scale show CSS value.
• Controls: gives token props a select control with the tokens as options. Other props get a text control.
• Description: fills in an empty description with the CSS properties the prop sets, including the logical-property names when they differ. For example, mx shows margin-left, margin-right (logical: margin-inline-start, margin-inline-end).
• Precedence: anything a story sets in its own argTypes (control, options, description, category) wins over the enhancer.
• Own props: it only changes props that look like real system props from their docgen type (Scale<...>, or csstype's (string & {}) union where two groups both define the prop). A component that declares its own prop with a system prop name, like a numeric zIndex, keeps its own entry.
• Ordering: sorts entries so the categories appear in the same order on every component.

Docs page (packages/.storybook/components/Elements/DocsPage.tsx, set as parameters.docs.page):

• Same as Storybook's default autodocs page (Title, Subtitle, Description, Primary, Controls, Stories), with two changes.
• When a component has system props, the props table splits into a "Props" tab (the component's own props) and a "System props" tab. These use Gamut Tabs. A component without system props gets the usual single table with no tabs.
• Stories is rendered with includePrimary={false}, so the primary story isn't repeated under the Stories heading.

Known limitations

• Core tokens only. Token lists come from coreTheme. Other themes may define more or fewer tokens for the same scale, so the props table and select options always reflect Core.
• Order can shift. Storybook runs its own argTypes inference after every enhancer in preview.ts, and that moves any prop with a story arg to the front. A story that sets a system prop arg (width or height on Shimmer, for example) shows that prop's section first. I couldn't find a clean way to fix this from an enhancer, and the comment on enhanceSystemProps says so.
• Type detection matches text. The check for real system props works by matching text in the docgen type. A docgen or csstype upgrade that changes those strings would stop the enhancer from applying. The cause would be easy to find, because the props would go back to their raw types.
• Copied docs page. DocsPage copies Storybook's default page, so it won't pick up changes Storybook makes to the default in later versions.

PR Checklist

• Related to designs:
• Related to JIRA ticket: [ABC-123]
• Changeset added (or empty changeset if no release)
• 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
• Package previews from this PR are passing end-to-end tests in all relevant consuming repositories

Testing Instructions

1. Run yarn start:storybook.
2. Open the Docs page for Typography/Text. The props table has "Props" and "System props" tabs. "Props" lists only Text's own props (as, variant, truncate, …).
3. Open "System props":
   • Props are grouped under category headings in the order Spacing, Flex & Grid, Layout, and so on.
   • fontSize lists its tokens inline in the Type column and has a select control.
   • color shows theme.colors with the full token list in the detail.
   • width shows CSS value and has a text control.
   • Descriptions name the CSS properties, for example mx → margin-left, margin-right (logical: …).
4. Change a few system prop controls (mt, bg, fontSize) and check that the primary story updates.
5. Open the Docs page for a component without system props. It shows a single props table with no tabs.
6. On any Docs page with more than one story, check that the primary story appears only at the top and not again under Stories.
7. Switch the theme toolbar to Percipio and back. The tabs and tables render correctly in both.

🤖 Generated with Claude Code

[codecov]

⚠️ JUnit XML file not found

The CLI was unable to find any JUnit XML files to upload.
For more help, visit our troubleshooting guide.

[pkg-pr-new]

Open in StackBlitz

@skillsoft/eslint-plugin-gamut

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/eslint-plugin-gamut@49

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/eslint-plugin-gamut@49.tgz

@skillsoft/gamut

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@49

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut@49.tgz

@skillsoft/gamut-agent-tools

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-agent-tools@49

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-agent-tools@49.tgz

@skillsoft/gamut-icons

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-icons@49

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-icons@49.tgz

@skillsoft/gamut-illustrations

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-illustrations@49

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-illustrations@49.tgz

@skillsoft/gamut-patterns

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-patterns@49

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-patterns@49.tgz

@skillsoft/gamut-styles

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-styles@49

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-styles@49.tgz

@skillsoft/gamut-tests

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-tests@49

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/gamut-tests@49.tgz

@skillsoft/variance

npm i https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/variance@49

yarn add https://pkg.pr.new/Codecademy/skillsoft-gamut/@skillsoft/variance@49.tgz

commit: 79f8d5d