[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
- 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.
🦋 Changeset detectedLatest commit: 074df77 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.92 kB (+0.1%) Total Size: 2.01 MB
ℹ️ View Unchanged
|
- 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.
tsck
changed the title
Panel component support to code editor
|
@stephl3 This is the |
tsck
changed the title
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: