[UPDATE] several changes + refators #68
Merged
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
✅ Deploy Preview for egdev6-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the Avatar and Dropdown components to improve maintainability and customization. The changes introduce utility hooks for better separation of concerns and enhance component functionality.
- Extracted component logic into custom hooks (
useAvataranduseDropdown) for better code organization - Added
roundedprop to Avatar component while removing badge functionality - Enhanced Dropdown hover/focus styles and reduced IconButton padding
Reviewed Changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
src/components/atoms/icon-button/types.ts |
Reduced padding from px-2 py-2 to px-1 py-1 for more compact design |
src/components/atoms/dropdown/useDropdown.ts |
New hook extracting dropdown configuration and accessibility logic |
src/components/atoms/dropdown/Dropdown.tsx |
Refactored to use useDropdown hook and added hover outline styles |
src/components/atoms/avatar/useAvatar.ts |
New hook extracting avatar size, text, and rounded class logic |
src/components/atoms/avatar/types.ts |
Added rounded prop type and removed badge-related props |
src/components/atoms/avatar/Avatar.tsx |
Refactored to use useAvatar hook and removed badge functionality |
src/components/atoms/avatar/Avatar.stories.tsx |
Updated stories to showcase rounded prop instead of badge examples |
Co-authored-by: Copilot <[email protected]>
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.
This pull request introduces enhancements to the
AvatarandDropdowncomponents, focusing on code modularity, customization options, and usability improvements. TheAvatarcomponent now supports aroundedprop for customizable shapes, while badge-related functionality has been removed. TheDropdowncomponent has been refactored to improve maintainability and includes enhanced hover and focus styles. Additionally, utility hooks (useAvataranduseDropdown) have been added for better separation of concerns.Avatar Component Changes:
useAvatarhook: Centralized logic for size, text, and rounded classes, simplifying theAvatarcomponent's implementation. (src/components/atoms/avatar/useAvatar.ts, src/components/atoms/avatar/useAvatar.tsR1-R33)roundedprop for customization: Introduced a newroundedprop ('md','full','none') for avatar shape customization. Removed badge-related props (hasBadge,badgeContent,badgeClassName). (src/components/atoms/avatar/types.ts, src/components/atoms/avatar/types.tsL12-R13)Avatar.stories.tsx. (src/components/atoms/avatar/Avatar.stories.tsx, src/components/atoms/avatar/Avatar.stories.tsxL73-R83)Dropdown Component Changes:
useDropdownhook: Moved dropdown configuration and accessibility logic into a dedicated hook for improved readability and modularity. (src/components/atoms/dropdown/useDropdown.ts, src/components/atoms/dropdown/useDropdown.tsR1-R40)outlinestyles. (src/components/atoms/dropdown/Dropdown.tsx, [1] [2]Miscellaneous Changes:
iconButtonVariantsfor a more compact design. (src/components/atoms/icon-button/types.ts, src/components/atoms/icon-button/types.tsL6-R6)