Fix doc generation for sentence-case component names

[jhoffmcd]

Background

This pull request addresses an issue with component documentation generation where component names containing spaces were not being properly converted to valid TypeScript type names, causing type reference errors in the generated documentation.

Solution

Added a toPascalCase utility function that converts component names with spaces into proper PascalCase format for TypeScript type names. The function splits the name by spaces, capitalizes the first letter of each word, and joins them together. Additionally, updated the kebabCasedName conversion to handle spaces by replacing them with hyphens.

This approach ensures that component names like "My Component" are converted to "MyComponentElementProps" for type references while maintaining "my-component" for kebab-case usage. The alternative would have been to restrict component names to not contain spaces, but this solution maintains flexibility in naming while ensuring valid TypeScript types.

🎩

• Component documentation now generates valid TypeScript type references for components with spaces in their names
• Kebab-case conversion properly handles spaces by converting them to hyphens

Checklist

• I have 🎩'd these changes
• I have updated relevant documentation

[jhoffmcd]

• Regenerate checkout docs with sentence-case fixes #4049
• Fix doc generation for sentence-case component names #4048 👈 (View in Graphite)
• 2026-01

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

We detected some changes in packages/*/package.json or packages/*/src, and there are no updates in the .changeset directory. If the changes are user-facing and should cause a version bump, run yarn changeset to track your changes and include them in the next release CHANGELOG. If you are making simple updates to repo configuration, examples, or documentation, you do not need to add a changeset.

[rennyG]

Hey @jhoffmcd! We want the names to display in sentence case in the docs. Would this change reverse that, or am I misreading?

cc. @mcvinci

[jhoffmcd]

I don't think so? See the follow up doc generation for this 2026-01 https://github.com/Shopify/ui-extensions/pull/4049/changes#diff-1b861b5affa29cc420f73eb83328a52dd4af6c51c03dcf85de0c6f8c49766ec5R204371-R204372

With this change, we are just applying the Pascal Case to type, and we leave the name(title) alone.

[jhoffmcd]

@rennyG let me know if that works for you. I have approvals to merge this PR but don't want to if you have reservations.

[jhoffmcd]

Accidentally merged :man-facepalming:

[mcvinci]

Hey @jhoffmcd! Thanks so much for putting this fix together. I did a quick test with generating some of the other shared docs like, admin UI, and all works as expected. ❤️

Would you mind cherrypicking this change to the 2026-04-rc and 2025-10 versions / branches as well? The sentence casing applies to versions 2025-10+.

[jhoffmcd]

Hey @mcvinci! I looked into cherry-picking this to both branches and found:

1. 2026-04-rc — already has this fix: https://github.com/Shopify/ui-extensions/blob/2026-04-rc/packages/ui-extensions/src/docs/shared/component-definitions.ts#L35-L40
2. 2025-10 — uses a different doc architecture where type references are hardcoded per-component in individual .doc.ts files rather than generated from the name string, so this bug doesn't apply there. For example:
   - Shared name is sentence-case: https://github.com/Shopify/ui-extensions/blob/2025-10/packages/ui-extensions/src/docs/shared/components/ChoiceList.ts#L4
   - But the type is hardcoded as 'ChoiceListElementProps': https://github.com/Shopify/ui-extensions/blob/2025-10/packages/ui-extensions/src/surfaces/checkout/components/ChoiceList/ChoiceList.doc.ts#L16

[mcvinci]

Hey @mcvinci! I looked into cherry-picking this to both branches and found:

1. 2026-04-rc — already has this fix: https://github.com/Shopify/ui-extensions/blob/2026-04-rc/packages/ui-extensions/src/docs/shared/component-definitions.ts#L35-L40
2. 2025-10 — uses a different doc architecture where type references are hardcoded per-component in individual .doc.ts files rather than generated from the name string, so this bug doesn't apply there. For example:
   • Shared name is sentence-case: https://github.com/Shopify/ui-extensions/blob/2025-10/packages/ui-extensions/src/docs/shared/components/ChoiceList.ts#L4
   • But the type is hardcoded as 'ChoiceListElementProps': https://github.com/Shopify/ui-extensions/blob/2025-10/packages/ui-extensions/src/surfaces/checkout/components/ChoiceList/ChoiceList.doc.ts#L16

Super appreciate you looking into this, @jhoffmcd! It looks like we're covered in those other impacted versions then, which is perfect! Thanks again for fixing this. ❤️