[ADD] Badge component #70
Closed
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
[ADD] Button component + tokens updated
Add/icon and docs
[ADD] New docs pages in storybook
[FIX] animations and keyframes in build
[ADD] Icon Button + Link + Skeleton
Add/icon button
Update button styles
[Update] button styles + several adjustments
Co-authored-by: Copilot <[email protected]>
This pull request introduces several updates across the codebase, focusing on theme customization, new features for components, and enhancements to the design system documentation. Below are the most important changes grouped by theme:
Theme Customization
Updated primary and secondary colors in .storybook/theme.ts and added new UI-related properties such as background colors, border radius, and text colors for improved visual consistency. ([.storybook/theme.tsL15-R34](https://github.com/egdev6/design-system/pull/54/files#diff-9c4fc9f6ce824bcd411b467f702644cd9753b3c423d19e82093f60832913c771L15-R34))
Component Enhancements
Dropdown Component
Adjusted dark mode background and border colors for dropdown elements to improve contrast. ([[1]](https://github.com/egdev6/design-system/pull/54/files#diff-62db825ffaefc21246c707abaaf8f70b4cbdc59ea7bf4b1e68828762e3c91552L62-R62), [[2]](https://github.com/egdev6/design-system/pull/54/files#diff-62db825ffaefc21246c707abaaf8f70b4cbdc59ea7bf4b1e68828762e3c91552L132-R132))
Header Component
Introduced an as prop to allow headers to visually adopt different HTML tags without changing their semantic meaning. Updated Header.stories.tsx and Header.tsx to demonstrate and implement this functionality. ([[1]](https://github.com/egdev6/design-system/pull/54/files#diff-8bc19a1de58b3cfabb8d31180b7158fc3988ffc10c8bfc3bd93e1fe461cf835cR121-R138), [[2]](https://github.com/egdev6/design-system/pull/54/files#diff-b13490ba79e0ac87abcca1c9bedc8389da1ed0bea801ca07588bb2c4f3355120R12-R37), [[3]](https://github.com/egdev6/design-system/pull/54/files#diff-76417b7865cda66509c43d33e8f77fd8e3f7304965ed967feeae044b9552eb83R46-R47))
Input Component
Added an isRequired prop to indicate mandatory fields, including visual cues like an asterisk next to labels. Updated Input.stories.tsx and Input.tsx to showcase and implement this feature. ([[1]](https://github.com/egdev6/design-system/pull/54/files#diff-9164d2331dc417e45c1cb70d875d269bde9b0bd5d3aa99ac87d0426714d02a61L46-R47), [[2]](https://github.com/egdev6/design-system/pull/54/files#diff-9164d2331dc417e45c1cb70d875d269bde9b0bd5d3aa99ac87d0426714d02a61R134-R145), [[3]](https://github.com/egdev6/design-system/pull/54/files#diff-251eb0f4cc6b55e331fecf226ec7c327f6cb25ec3903c539e8f108627070da2dR82), [[4]](https://github.com/egdev6/design-system/pull/54/files#diff-251eb0f4cc6b55e331fecf226ec7c327f6cb25ec3903c539e8f108627070da2dL210-R217), [[5]](https://github.com/egdev6/design-system/pull/54/files#diff-b5649b5472bec1582efe75733720c876ea45aa1da76ed5b8706109c3f01342acR104-R108))
Link and Modal Components
Modified link styles to use transparent backgrounds instead of gray for better adaptability. ([src/components/atoms/link/types.tsL44-R49](https://github.com/egdev6/design-system/pull/54/files#diff-193b097b37e24b65d64cacf5eee8e8cfc66aa1e8d3db9dd8dc4fe90fec281a91L44-R49))
Adjusted padding in modal headers for improved alignment. ([src/components/atoms/modal/Modal.tsxL69-R69](https://github.com/egdev6/design-system/pull/54/files#diff-6d4ce332fe2e7a26e74ae4deff26268bbed5c3e995740ce60d89b5c9c22c62feL69-R69))
Design System Documentation
Added a welcome page (0-Welcome.mdx) introducing the design system, its features, and guidelines for usage and contribution. ([src/stories/Design system/0-Welcome.mdxR1-R57](https://github.com/egdev6/design-system/pull/54/files#diff-2738fec41906160708883164e8f76c0d03a263221c982db7bba53cf0f4f3e521R1-R57))
Updated primitive color documentation (1-primitive-colors.mdx) with refined gradients and added borders for better visual clarity. ([[1]](https://github.com/egdev6/design-system/pull/54/files#diff-0aca00c17781634510c9b9e946a4356a06abfd1a8eddfe647e1c770faa16d88eL98-R98), [[2]](https://github.com/egdev6/design-system/pull/54/files#diff-0aca00c17781634510c9b9e946a4356a06abfd1a8eddfe647e1c770faa16d88eL206-R206), [[3]](https://github.com/egdev6/design-system/pull/54/files#diff-0aca00c17781634510c9b9e946a4356a06abfd1a8eddfe647e1c770faa16d88eL264-R270), [[4]](https://github.com/egdev6/design-system/pull/54/files#diff-0aca00c17781634510c9b9e946a4356a06abfd1a8eddfe647e1c770faa16d88eL283-R290))
Dependency Updates
Added @radix-ui/react-select to package.json for additional UI functionality. ([package.jsonR20](https://github.com/egdev6/design-system/pull/54/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R20))
These changes collectively enhance the project's visual design, component functionality, and documentation clarity.
[FIX] Header as prop
[TEST] New contributor
[FIX] Storybook safelist import path
✅ Deploy Preview for egdev6-design-system ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
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.
No description provided.