search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.77k stars 395 forks source link

fix: carousel init bug #1305

Open abdulbasithqb opened 3 months ago

abdulbasithqb commented 3 months ago

fix: carousel init bug

Changes:

Added Overflow Props to ScrollContainer

Why:

fixes: #1283

Screen-record:

https://github.com/themesberg/flowbite-react/assets/134603758/f40425df-cddf-4beb-b5bd-a488dc0806a6

Summary by CodeRabbit

Summary by CodeRabbit

stackblitz[bot] commented 3 months ago

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

vercel[bot] commented 3 months ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
flowbite-react ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 18, 2024 6:20am
coderabbitai[bot] commented 3 months ago

Walkthrough

The recent update introduces a style property to the Carousel component, specifically setting overflowX to 'scroll'. This change aims to enhance user interaction with the Carousel by enabling horizontal scrolling, potentially addressing issues related to Carousel initialization and usability on mobile devices.

Changes

File Path Change Summary
src/components/.../Carousel.tsx Added style property with overflowX: 'scroll'.

Assessment against linked issues

Objective Addressed Explanation
Carousel does not work on first page load [#1283] ❓ It's unclear if the overflowX: 'scroll' directly addresses the initialization issue without further context on the bug's cause.
Allow scrolling through the page on mobile devices when Carousel is the only visible element [#1280] ✅
Investigate scrolling limitation on iOS devices [#1280] ❓ The change might impact scrolling on iOS, but without specific testing or feedback, it's unclear if it fully resolves the issue.

Related issues

Poem

In a world of static views and clicks,
A tiny change makes the Carousel ticks.
With a scroll to the left and a scroll to the right,
Smoothly gliding, a delightful sight.
🐇 CodeRabbit toiled by the moon's soft gleams,
Crafting experiences beyond mere dreams.
"Scroll on," it whispers, "to see wonders untold,
In the magical Carousel that now smoothly scrolls."

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?

Share - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)
Tips ### Chat There are 3 ways to chat with CodeRabbit: - Review comments: Directly reply to a review comment made by CodeRabbit. Example: - `I pushed a fix in commit .` - `Generate unit-tests for this file.` - `Open a follow-up GitHub issue for this discussion.` - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: - `@coderabbitai generate unit tests for this file.` - `@coderabbitai modularize this function.` - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: - `@coderabbitai generate interesting stats about this repository and render them as a table.` - `@coderabbitai show all the console.log statements in this repository.` - `@coderabbitai read src/utils.ts and generate unit tests.` - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` 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) - `@coderabbitai pause` to pause the reviews on a PR. - `@coderabbitai resume` to resume the paused reviews. - `@coderabbitai review` to trigger a review. This is useful when automatic reviews are disabled for the repository. - `@coderabbitai resolve` resolve all the CodeRabbit review comments. - `@coderabbitai help` to get help. Additionally, you can add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. ### CodeRabbit Configration File (`.coderabbit.yaml`) - You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository. - The JSON schema for the configuration file is available [here](https://coderabbit.ai/integrations/coderabbit-overrides.v2.json). - If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json` ### CodeRabbit Discord Community Join our [Discord Community](https://discord.com/invite/GsXnASn26c) to get help, request features, and share feedback.
codecov[bot] commented 3 months ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 95.53%. Comparing base (7461173) to head (11677ec). Report is 202 commits behind head on main.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #1305 +/- ## ========================================== - Coverage 99.54% 95.53% -4.02% ========================================== Files 163 217 +54 Lines 6621 9666 +3045 Branches 401 558 +157 ========================================== + Hits 6591 9234 +2643 - Misses 30 432 +402 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.