Conversation
This update introduces a new Slots API, allowing users to customize internal components of MarkedInput through the `slots` and `slotProps` props. Key changes include: - **Slots API**: Users can now replace default components (container and span) with custom components. - **SlotProps**: Additional props can be passed to these components for enhanced styling and behavior. - **Documentation**: Updated README and new stories demonstrating the usage of the Slots API. - **TypeScript Support**: Improved type definitions for slots and slotProps. This enhancement provides greater flexibility and control over the component structure.
- Simplified event handler syntax in README example. - Enhanced table formatting in README for better clarity. - Streamlined JSX return statements in EditableSpan component. - Improved formatting in dataAttributes and resolveSlot utility functions. - Cleaned up test cases for MarkedInput to enhance readability.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Updated ConfiguredMarkedInput in Base.stories.tsx to pass event handlers through slotProps for better encapsulation and customization. - Improved JSX structure for clarity and maintainability.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
This PR introduces a new Slots API that enables developers to customize internal components of
MarkedInputwith improved type safety and flexibility. The implementation follows the MUI slots pattern, providing a standardized way to override internal components and pass custom props to them.Key Features
slotsprop - Override internal components (container,span) with custom componentsslotPropsprop - Pass custom props to slot components with type safetyWhat's New
Slotsinterface for defining which components can be customizedSlotPropsinterface for type-safe prop passingDataAttributesutility type for automatic attribute transformationresolveSlot()anddataAttributes()helper functionsDocumentation
Slots.stories.tsx)Breaking Changes
Before:
After: