feat: CodeGroup component - #166
Conversation
ENG-5509 Code Block + Code Group
Move the codeGroup component into the OSS components package repository. Check general rules and specifics in https://www.notion.so/mintlify/Docs-Components-rules-audit-2d1aa841023480ba93b7e1a8676522db |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| interface CodeGroupSelectProps { | ||
| snippets: Record<string, Record<string, ExampleCodeSnippet>>; | ||
| setSelectedExampleIndex?: (index: number) => void; | ||
| codeBlockTheme?: "system" | "dark"; |
There was a problem hiding this comment.
don't we already have this type somewhere?
| noMargins?: boolean; | ||
| feedbackModalOpen?: boolean; | ||
| anchorRef?: RefObject<HTMLDivElement>; | ||
| codeBlockTheme?: "dark" | "system"; |
| { | ||
| children: ReactNode; | ||
| value: number; | ||
| isSelected: boolean; | ||
| tabsLength: number; | ||
| codeBlockTheme: "dark" | "system" | undefined; | ||
| } |
There was a problem hiding this comment.
can we move this to TabItemProps
| selectedOption?: string; | ||
| setSelectedOption: (option: string) => void; | ||
| options: string[]; | ||
| codeBlockTheme?: "system" | "dark"; |
| selectedLanguage: string; | ||
| setSelectedLanguage: (language: string, index: number) => void; | ||
| languages: string[]; | ||
| codeBlockTheme?: "dark" | "system"; |
| language: string; | ||
| className?: string; |
…thryn/eng-5509-pt-2
…t.tsx Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>
Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>
…down.tsx Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>
Co-authored-by: dmytro <71014515+pqoqubbw@users.noreply.github.com>
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
… from block and group
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.
| */ | ||
| onCopied?: (result: CopyToClipboardResult, textToCopy?: string) => void; | ||
| children?: ReactNode; | ||
| copyButtonProps?: CopyToClipboardButtonProps; |
There was a problem hiding this comment.
copyButtonProps type requires textToCopy, overrides computed value
Medium Severity
The copyButtonProps prop has type CopyToClipboardButtonProps which requires textToCopy: string. Since the component computes textToCopy internally and spreads copyButtonProps after the explicit prop, users face two problems: TypeScript errors when passing just onCopied without textToCopy, and unintentional override of the computed text when they do provide textToCopy. The type should likely be Omit<CopyToClipboardButtonProps, 'textToCopy'> to allow passing callbacks without forcing a textToCopy value.
Additional Locations (1)
2 participants
Note
Adds a new multi-tab code snippet container with unified theming and copy behavior, and updates
CodeBlockto align with it.CodeGroupcomponent: Tabbed code snippets with optional language dropdown, shared header actions (copy/Ask AI/feedback), expandable panels, and system/dark themes; includesLanguageDropdown,CodeSelectDropdown,LanguageIcon,Dropdownprimitives, andCodeSnippethelperCodeBlockupdates: Replaces literal union withCodeBlockThemetype, passes theme to header/copy button, addscopyButtonProps(deprecates directonCopiedonCodeBlock), minor base highlighting/height logic tweaksActiveCopyButtonIcon/CopyButtonIconacceptCodeBlockTheme; Shiki background util and validation types updated to useCodeBlockThemeCodeGroup(wrapping, lines, highlight/focus, themes, dropdowns, expandable, long lines, special chars)Risk: Medium — new UI component and API adjustments for
CodeBlock(prop changes) plus new dependencies (@base-ui/react/*, dropdown/scroll helpers) may impact consumers.Written by Cursor Bugbot for commit f566c72. This will update automatically on new commits. Configure here.