Split effects from variants, mixed examples, new shine and shine hover effect. #12
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.
Rename the Icon prop to icon (lower case, keep prop name convention).
Move all effects from variants to effect.
Refactored ButtonExample container to dynamically generate button code based on props.
Add a new section with mixed examples (variants + effects)
Updated the docs.
Preview deployment here
https://enhanced-button2.vercel.app/
PS: It partially closes this issue: #11
For a wide composition between effects it would require separated props on cva for each effect.
[Copilot PR Explanation]
This pull request includes significant updates to the
button.tsx
component, improvements to theREADME.md
file, and changes to thepackage.json
andsrc/app/page.tsx
files to enhance the functionality and documentation of the button components. The most important changes include the addition of new button effects, updates to the Tailwind CSS configuration, and improvements to the documentation and examples.Enhancements to Button Component:
expandIcon
,ringHover
,shineHover
,gooeyRight
,gooeyLeft
,underline
, andhoverUnderline
to thebutton.tsx
component.buttonVariants
to include new styles and effects for better customization and visual enhancements.Button
component to useeffect
instead ofvariant
for certain visual effects and improved the handling of icons within buttons.Documentation Improvements:
README.md
file to provide clearer instructions and examples for using the new button effects and variants. This includes changes to the example usage and the addition of a section for mixing different button variants.README.md
file by using consistent markdown styling and code formatting.Configuration and Dependency Updates:
tailwind-merge
dependency inpackage.json
to version^2.5.5
to ensure compatibility with the latest Tailwind CSS features.tailwind.config.ts
to include new keyframes and animations for theshine
effect, enhancing the visual appeal of the buttons.Page Component Enhancements:
src/app/page.tsx
file to improve the display and examples of the button components, including the addition of new button examples and the removal of redundant code. [1] [2] [3] [4]These changes collectively enhance the functionality, customization, and documentation of the button components, making it easier for developers to implement and utilize them in their projects.