-
-
Notifications
You must be signed in to change notification settings - Fork 430
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat/BottomNavigation - added BottomNavigation with Example #1333
base: main
Are you sure you want to change the base?
Conversation
Run & review this pull request in StackBlitz Codeflow. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis update introduces a Bottom Navigation component to the Flowbite framework, enhancing user navigation with a stylish, customizable bar at the screen's bottom. Tailored for React and styled with Tailwind CSS, this component comes with examples, documentation, and tests ensuring functionality and ease of integration. It's a significant addition, providing developers with more tools to create intuitive and visually appealing web applications. Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
Review Status
Configuration used: CodeRabbit UI
Files ignored due to path filters (2)
apps/web/public/images/components/bottom-bar-dark.svg
is excluded by!**/*.svg
apps/web/public/images/components/bottom-bar.svg
is excluded by!**/*.svg
Files selected for processing (16)
- apps/web/content/docs/components/bottom-navigation.mdx (1 hunks)
- apps/web/data/components.tsx (1 hunks)
- apps/web/data/docs-sidebar.ts (1 hunks)
- apps/web/examples/bottomNavigation/bottomNavigation.root.tsx (1 hunks)
- apps/web/examples/bottomNavigation/bottomNavigation.withBorder.tsx (1 hunks)
- apps/web/examples/bottomNavigation/index.ts (1 hunks)
- apps/web/examples/index.ts (1 hunks)
- packages/ui/src/components/BottomNavigation/BottomNavigation.spec.tsx (1 hunks)
- packages/ui/src/components/BottomNavigation/BottomNavigation.stories.tsx (1 hunks)
- packages/ui/src/components/BottomNavigation/BottomNavigation.tsx (1 hunks)
- packages/ui/src/components/BottomNavigation/BottomNavigationItem.tsx (1 hunks)
- packages/ui/src/components/BottomNavigation/index.ts (1 hunks)
- packages/ui/src/components/BottomNavigation/theme.ts (1 hunks)
- packages/ui/src/components/Flowbite/FlowbiteTheme.ts (2 hunks)
- packages/ui/src/index.ts (1 hunks)
- packages/ui/src/theme.ts (2 hunks)
Files skipped from review due to trivial changes (3)
- apps/web/data/docs-sidebar.ts
- apps/web/examples/bottomNavigation/index.ts
- packages/ui/src/components/BottomNavigation/index.ts
Additional Context Used
GitHub Check Runs (1)
🕵 Lint failure (13)
packages/ui/src/components/BottomNavigation/BottomNavigation.spec.tsx: [failure] 5-5:
Describe callback cannot be async
Additional comments not posted (18)
packages/ui/src/components/BottomNavigation/theme.ts (1)
3-18
: Consider using CSS variables for colors and sizes to enhance theme customization. This approach allows users to easily modify the component's appearance without altering the source code.apps/web/content/docs/components/bottom-navigation.mdx (1)
6-20
: The documentation is clear and informative. However, it would be beneficial to include a section on how to customize theBottomNavigation
component, such as changing colors or adding custom icons, to help users tailor the component to their needs.apps/web/examples/index.ts (1)
7-7
: The export forbottomNavigation
is consistent with the naming and structure of other component exports. This ensures a uniform approach to exporting components in the library.packages/ui/src/components/BottomNavigation/BottomNavigation.stories.tsx (1)
17-47
: The Storybook stories provide a good overview of theBottomNavigation
component's capabilities. Consider adding a story that demonstrates how to use the component with a dynamic list of navigation items, as this is a common use case.packages/ui/src/components/BottomNavigation/BottomNavigation.tsx (1)
25-45
: The implementation of theBottomNavigation
component is well-structured and follows best practices. However, consider adding PropTypes for better type checking in non-TypeScript environments.apps/web/examples/bottomNavigation/bottomNavigation.root.tsx (1)
26-43
: The example implementation is clear and demonstrates the basic usage of theBottomNavigation
component effectively. To enhance the example, consider adding comments explaining each part of the component, especially thetheme
prop customization.apps/web/examples/bottomNavigation/bottomNavigation.withBorder.tsx (1)
26-44
: The example implementation showcasing theBottomNavigation
component with borders is well-done. Similar to the previous example, adding comments to explain the customization and the use of thebordered
prop would make the example more informative for users.packages/ui/src/index.ts (1)
8-8
: The export for theBottomNavigation
component is correctly added and follows the library's export pattern. This ensures that the component is properly exposed for use in consumer applications.packages/ui/src/components/BottomNavigation/BottomNavigationItem.tsx (4)
1-1
: Consider removing"use client";
if server-side rendering (SSR) support is intended for this component, as it explicitly opts out of SSR.
20-26
: TheBottomNavigationItemProps
interface extendsComponentProps<"button">
but omits"ref"
. Ensure that this omission is intentional and documented if necessary, as it may limit the component's flexibility in certain use cases.
39-39
: The use ofmergeDeep
for theme customization is a good practice for flexibility. However, ensure that this deep merge function handles all edge cases correctly, especially with nested properties and arrays.
67-72
: The default icon (IoMdHome
) is a good fallback. Ensure that the choice of this specific icon as the default is documented, as it might not be intuitive for all use cases.packages/ui/src/theme.ts (2)
7-7
: The import ofbottomNavigationTheme
is correctly placed alphabetically among other component themes. This maintains consistency and readability in the theme imports.
50-50
: Successfully adding thebottomNavigation
theme to the global theme object ensures that the new component is fully integrated into the theming system. This allows for easy customization and consistency across the library.packages/ui/src/components/BottomNavigation/BottomNavigation.spec.tsx (1)
111-134
: The test utility functions and theTestBottomNavigation
component are well-structured and promote code reuse across tests. This approach enhances test readability and maintainability.packages/ui/src/components/Flowbite/FlowbiteTheme.ts (2)
7-7
: The import ofFlowbiteBottomNavigationTheme
is correctly placed alphabetically among other component themes. This maintains consistency and readability in the theme imports.
52-52
: Successfully adding thebottomNavigation
to theFlowbiteTheme
interface ensures that the new component's theme is fully integrated into the theming system. This allows for easy customization and consistency across the library.apps/web/data/components.tsx (1)
38-44
: The addition of the "Bottom Navigation" entry to theCOMPONENTS_DATA
array is correctly implemented, with appropriate image paths and link. This ensures that the new component is discoverable in the documentation or UI library.
packages/ui/src/components/BottomNavigation/BottomNavigationItem.tsx
Outdated
Show resolved
Hide resolved
packages/ui/src/components/BottomNavigation/BottomNavigation.spec.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (1)
- packages/ui/src/components/BottomNavigation/BottomNavigation.spec.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- packages/ui/src/components/BottomNavigation/BottomNavigation.spec.tsx
Additional Context Used
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (6)
- apps/web/content/docs/components/bottom-navigation.mdx (1 hunks)
- apps/web/examples/bottomNavigation/bottomNavigation.root.tsx (1 hunks)
- apps/web/examples/bottomNavigation/bottomNavigation.withBorder.tsx (1 hunks)
- apps/web/examples/bottomNavigation/bottomNavigation.withTooltip.tsx (1 hunks)
- apps/web/examples/bottomNavigation/index.ts (1 hunks)
- packages/ui/src/components/BottomNavigation/BottomNavigationItem.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (5)
- apps/web/content/docs/components/bottom-navigation.mdx
- apps/web/examples/bottomNavigation/bottomNavigation.root.tsx
- apps/web/examples/bottomNavigation/bottomNavigation.withBorder.tsx
- apps/web/examples/bottomNavigation/index.ts
- packages/ui/src/components/BottomNavigation/BottomNavigationItem.tsx
Additional Context Used
Additional comments not posted (3)
apps/web/examples/bottomNavigation/bottomNavigation.withTooltip.tsx (3)
1-1
: The usage of"use client";
at the top of the file indicates that this component is intended to run only in the client-side environment. Ensure that this aligns with the overall architecture and deployment strategy of the Flowbite-React library, especially considering server-side rendering (SSR) scenarios.
9-24
: The code snippet provided as a string within thecode
variable is a great way to showcase the usage of theBottomNavigation
component. However, ensure that this code snippet is kept up-to-date with any changes to the component's API to prevent documentation drift. Additionally, consider adding a brief comment within the code snippet explaining its purpose, especially the use ofshowTooltip
, for better clarity to developers.
26-42
: TheComponent
function demonstrates theBottomNavigation
component with a custom theme. This is a good practice for showcasing theme customization capabilities. However, ensure that the CSS classes used (absolute
,bottom-0
,left-0
, etc.) are consistent with the rest of the Flowbite-React library to maintain a cohesive look and feel. Additionally, consider explaining the choice of these specific classes in either code comments or documentation to help developers understand the theming approach.
apps/web/examples/bottomNavigation/bottomNavigation.withTooltip.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (2)
- apps/web/content/docs/components/bottom-navigation.mdx (1 hunks)
- apps/web/examples/bottomNavigation/bottomNavigation.withTooltip.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- apps/web/examples/bottomNavigation/bottomNavigation.withTooltip.tsx
Additional Context Used
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
Review Status
Configuration used: CodeRabbit UI
Files selected for processing (1)
- apps/web/content/docs/components/bottom-navigation.mdx (1 hunks)
Additional Context Used
Additional comments not posted (5)
apps/web/content/docs/components/bottom-navigation.mdx (5)
1-8
: The introduction provides a clear overview of the Bottom Navigation component's purpose and usage. Well done on setting the context for the readers.
10-14
: The "Default bottom navigation" section is clear and provides useful guidance on implementing the default navigation bar. The example reference is correctly formatted.
16-20
: The "Menu items with border" section clearly explains how to differentiate menu items with borders. The example reference is correctly formatted.
22-32
: The "Example with Tooltip" and "Theme" sections are informative, providing guidance on enhancing the bottom navigation with tooltips and customizing its appearance through theming. The references to examples and theme documentation are correctly formatted.
34-36
: The reference link for "Flowbite Bottom Navigation" needs verification. As previously noted, it may direct users to incorrect documentation. Please ensure it points to the correct page for the Bottom Navigation component.
@SutuSebastian - can you please review? |
1 similar comment
@SutuSebastian - can you please review? |
This Pull Request introduces the
BottomNavigation
component to Flowbite-React, enhancing the navigation experience for users. TheBottomNavigation
component offers a convenient way to navigate between different sections or pages of an application, displayed at the bottom of the screen for easy access. Leveraging this component in Flowbite-React provides users with intuitive and efficient navigation options, contributing to an improved user experience overall. With this addition, Flowbite-React becomes even more versatile, catering to a broader range of UI navigation needs.Summary by CodeRabbit
FlowbiteBottomNavigationTheme
.