From 88119c21c8aafc8f55671bc5bc87287a583bbf9d Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Wed, 15 Apr 2026 09:51:41 +0200 Subject: [PATCH] docs-ui: use matching casing for changelog component badges Change changelog badge labels from spaced title case (e.g. "Button Link") to PascalCase (e.g. "ButtonLink") so they match the actual component names and are searchable. Hook slugs starting with `use-` display as camelCase (e.g. "useTable"). Signed-off-by: Johan Persson --- docs-ui/src/components/Changelog/utils.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/docs-ui/src/components/Changelog/utils.tsx b/docs-ui/src/components/Changelog/utils.tsx index f39aa7bba5..278072f37f 100644 --- a/docs-ui/src/components/Changelog/utils.tsx +++ b/docs-ui/src/components/Changelog/utils.tsx @@ -41,10 +41,20 @@ export const BreakingBadge = () => Breaking; // Utility Functions export const toTitleCase = (kebabCase: string): string => { + // Hook slugs (e.g. "use-table") display as camelCase (e.g. "useTable") + if (/^use-[A-Za-z]/.test(kebabCase)) { + const [first, ...rest] = kebabCase.split('-'); + return ( + first + + rest + .map(word => word.charAt(0).toLocaleUpperCase('en-US') + word.slice(1)) + .join('') + ); + } return kebabCase .split('-') .map(word => word.charAt(0).toLocaleUpperCase('en-US') + word.slice(1)) - .join(' '); + .join(''); }; export const groupByVersion = (