[LG-5094] feat(code-editor): add panel component for toolbar functionality #3047
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: a3b0f25 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
tsck
changed the title
Panel component support to code editorPanel component support to code editor
|
Size Change: +1.97 kB (+0.1%) Total Size: 2.01 MB
ℹ️ View Unchanged
|
tsck
changed the title
Panel component support to code editor
|
@stephl3 This is the |
tsck
changed the title
3 tasks
tsck
force-pushed
the
LG-5444/ce-add-copy-to-editor
branch
from
56431be to
e269262
Compare
tsck
force-pushed
the
LG-5094/cs-toolbar-panel
branch
from
074df77 to
d6954a5
Compare
tsck
force-pushed
the
LG-5444/ce-add-copy-to-editor
branch
from
a7dfb6a to
0f31a2c
Compare
stephl3
reviewed
Aug 19, 2025
| | `placeholder` _(optional)_ | Value to display in the editor when it is empty. | `HTMLElement \| string` | `undefined` | | ||
| | `readOnly` _(optional)_ | Enables read only mode, making the contents uneditable. | `boolean` | `false` | | ||
| | `tooltips` _(optional)_ | Add tooltips to the editor content that appear on hover. | `Array<CodeEditorTooltip>` | `undefined` | | ||
| | `value` _(optional)_ | Controlled value of the editor. If set, the editor will be controlled and will not update its value on change. Use `onChange` to update the value externally. | `string` | `undefined` | | ||
| | `width` _(optional)_ | Sets the editor's width. If not set, the editor will be 100% width of its parent container. | `string` | `undefined` | | ||
|
|
||
| ### `<Panel>` | ||
|
|
||
| The Panel component provides a toolbar interface for the CodeEditor with formatting, copying, and custom action buttons. It displays at the top of the CodeEditor and can include a title, action buttons, and custom content. |
There was a problem hiding this comment.
what do you think about adding a note about what functionality is provided out-of-the-box vs what consumers will need to implement?
There was a problem hiding this comment.
actually, will all of these actions be supported out-of-the-box? (I might be incorrectly assuming based off of having only reviewed copy)
There was a problem hiding this comment.
Yup, all of these actions will be provided! Only added secondary actions won't be.
| /** | ||
| * Text label for the button that will be displayed in the menu item. | ||
| */ | ||
| label: string; |
There was a problem hiding this comment.
what's the reason for using a separate prop vs using children which is on MenuItemProps? If not using children, I think we should Omit it
| * Configuration object for custom secondary buttons that appear in the Panel's secondary menu. | ||
| * Extends MenuItemProps to inherit all MenuItem functionality while adding required label. | ||
| */ | ||
| type SecondaryButtonConfig = MenuItemProps & { |
There was a problem hiding this comment.
is it necessary to include some of these props? looks like some are already part of MenuItemProps
| * Optional title text to display in the panel header. | ||
| * Typically used to show the current language or content description. | ||
| */ | ||
| title?: string; |
There was a problem hiding this comment.
any reason not to use ReactNode?
| background-color: ${color[theme].background[Variant.Secondary][ | ||
| InteractionState.Default | ||
| ]}; | ||
| height: 36px; |
There was a problem hiding this comment.
nit: looks like a magic number worth turning into constant
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| padding: 0 16px 0 10px; |
|
|
||
| export const getPanelInnerContentStyles = () => { | ||
| return css` | ||
| grid-area: children; |
There was a problem hiding this comment.
hmm I see that this grid-area isn't necessary anyways, but I'd still hesitate on naming this children to avoid creating confusion between innerContent vs children
Base automatically changed from
LG-5444/ce-add-copy-to-editor
to
integration/code-editor
August 19, 2025 01:18
- Introduced `copyButtonAppearance` prop to control the visibility of the copy button in the CodeEditor. - Implemented styles for different copy button appearances: 'hover', 'persist', and 'none'. - Updated tests to verify the rendering behavior of the copy button based on the new prop. - Refactored CodeEditor component to integrate the new copy button functionality and ensure proper rendering based on user interactions.
- Eliminated the unused `copyButtonClassName` import to clean up the code and improve maintainability.
- Introduced a new `CodeEditorContext` to provide internal context values to child components, enhancing state management within the CodeEditor. - Implemented `CodeEditorProvider` for context provisioning and `useCodeEditorContext` hook for easy access to context values. - This addition supports better organization and encapsulation of editor-related functionalities.
…tionality - Added a new `Panel` component to the CodeEditor, providing a toolbar interface with options for formatting, copying, and custom actions. - Integrated the `Panel` into the CodeEditor, allowing for a customizable user experience with buttons for common actions like undo, redo, and download. - Updated the README to include documentation for the new `Panel` component and its properties. - Enhanced TypeScript definitions to support the new component and its props. - Included storybook examples to demonstrate the usage of the `Panel` component.
- Updated the Panel component to set `renderDarkMenu` to false, ensuring the dark menu is not rendered. - This change improves the consistency of the user interface in light mode.
…nctionality - Added the `Panel` component to the `CodeEditor`, allowing for a customizable toolbar with options for formatting, copying, and additional actions. - Updated `CodeEditor` to accept a `panel` prop, enabling the rendering of the `Panel` within the editor. - Enhanced TypeScript definitions to support the new `panel` prop and its interaction with the `copyButtonAppearance` prop. - Modified styling in `useThemeExtension` to accommodate the new panel layout. - Removed the `Panel.stories.tsx` file as part of the integration process.
…d consistency - Rearranged the props in both `CodeEditor` and `Panel` components for better readability and logical grouping. - Ensured that related props are positioned together, enhancing the overall structure of the components. - Maintained existing functionality while improving the code organization.
- Added documentation for the optional `panel` prop in the CodeEditor, which allows rendering a toolbar interface at the top of the editor. - Provided a description of the `Panel` component's functionality and its available options, enhancing the clarity of the README.
…nality - Introduced a new test suite for the Panel component, covering various aspects including rendering, button functionality, and accessibility. - Implemented tests for the format, copy, and secondary menu buttons, ensuring they behave as expected when interacted with. - Verified the integration with the CodeEditor context and confirmed proper handling of props like `showFormatButton`, `showCopyButton`, and custom secondary buttons. - Included tests for edge cases, such as handling undefined callback functions and empty custom button arrays, to enhance robustness.
…lify styles - Introduced a new `getIconFill` function to dynamically determine the icon fill color based on the theme and copied state. - Simplified the CSS styles for the copy button by removing redundant selectors and consolidating transition properties. - Updated the `CopyButtonTrigger` component to accept an `iconFill` prop, allowing for more flexible icon color management.
- Updated the `CodeEditor` component to rename the `getContents` prop to `getContentsToCopy`, improving clarity regarding its functionality. - Ensured consistency with the recent changes in the `CodeEditorCopyButton` component.
- Introduced `copyButtonAppearance` prop to control the visibility of the copy button in the CodeEditor. - Implemented styles for different copy button appearances: 'hover', 'persist', and 'none'. - Updated tests to verify the rendering behavior of the copy button based on the new prop. - Refactored CodeEditor component to integrate the new copy button functionality and ensure proper rendering based on user interactions.
- Eliminated the unused `copyButtonClassName` import to clean up the code and improve maintainability.
- Updated the `getContents` prop in the `CodeEditorCopyButton` to `getContentsToCopy` for improved clarity regarding its purpose. - This change aligns with recent naming conventions and enhances the overall consistency of the CodeEditor component.
- Introduced a new section in the README for `SecondaryButtonConfig`, detailing its properties including `aria-label`, `glyph`, `href`, `label`, and `onClick`. - This addition enhances documentation clarity and provides developers with comprehensive information on configuring secondary buttons in the CodeEditor component.
tsck
force-pushed
the
LG-5094/cs-toolbar-panel
branch
from
8c1d196 to
cb12287
Compare
- Changed the accessibility label for the copy button in tests from 'Copy text' to 'Copy' to align with the actual implementation. - Updated related test cases to ensure consistency and accuracy in verifying the copy button's presence and functionality.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✍️ Proposed changes
This PR introduces a new Panel component to the
@leafygreen-ui/code-editorpackage, providing a comprehensive toolbar interface for the CodeEditor with formatting, copying, and custom action buttons.The Panel component includes:
This enhancement significantly improves the user experience by providing easy access to common editor actions through a clean, organized toolbar interface.
🎟️ Jira ticket: N/A
✅ Checklist
For bug fixes, new features & breaking changes
🧪 How to test changes
Basic Panel Rendering:
Test Copy Functionality:
showCopyButton={true}Test Secondary Menu:
showSecondaryMenuButton={true}Test Custom Secondary Buttons:
Test Accessibility:
Test Integration: