Skip to content

Synchronise tabs in website#4331

Merged
rrousselGit merged 1 commit intorrousselGit:masterfrom
kunalpowar:sync-tabs-on-website
Sep 30, 2025
Merged

Synchronise tabs in website#4331
rrousselGit merged 1 commit intorrousselGit:masterfrom
kunalpowar:sync-tabs-on-website

Conversation

@kunalpowar
Copy link
Copy Markdown
Contributor

@kunalpowar kunalpowar commented Sep 29, 2025 •
edited by coderabbitai Bot
Loading

Related Issues

fixes #4330

Summary by CodeRabbit

  • Documentation
    • Tab groups in provider docs now share selection state across related examples, so switching a tab in one snippet keeps the same selection in other corresponding snippets—making comparisons and navigation smoother and reducing repetitive clicks.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Sep 29, 2025 •
edited
Loading

Walkthrough

Updated Tabs usage to include a shared groupId ("riverpod") in the CodeSnippet component and two docs occurrences, causing tab selections to be synchronized across those tab groups without changing tab labels or content.

Changes

Cohort / File(s) Summary
Component: Tabs grouping
website/src/components/CodeSnippet/index.tsx		 Add groupId="riverpod" to the <Tabs> component in AutoSnippet to associate its TabItems with the riverpod group.
Docs: Tabs grouping
website/docs/concepts2/providers.mdx		 Change two <Tabs> openings (Unmodifiable and Modifiable sections) to <Tabs groupId="riverpod"> to join those doc tab sets with the riverpod group.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as Tab UI (groupId="riverpod")
    participant OtherUI as Other Tab UI (groupId="riverpod")
    Note right of UI #e8f3ff: Tabs share groupId "riverpod"
    User->>UI: Click "riverpod_generator" tab
    UI-->>OtherUI: Broadcast selected tab (groupId="riverpod")
    OtherUI-->>UI: Apply selection
    UI-->>User: Render selected tab content
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I tapped my paw and flipped a tab,
Riverpod ripples across the slab.
One click, many panels hum in tune,
Synchronized tides beneath the moon.
🐇🌊

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title “Synchronise tabs in website” succinctly and accurately conveys the primary change, which is adding synchronization support for Tabs components across the site by grouping them through a shared identifier. It is concise, specific to the functional improvement, and gives teammates a clear idea of the PR’s intent without extraneous details.
Linked Issues Check ✅ Passed The changes implement the objective from issue #4330 by adding a consistent groupId attribute (“riverpod”) to all components, including both the AutoSnippet component in the codebase and the tabbed sections in providers.mdx, ensuring that selecting a tab in one location now reflects across all synchronized views.
Out of Scope Changes Check ✅ Passed All modifications are limited to adding the groupId attribute on existing components and do not introduce any unrelated files or functional changes outside the scope of synchronizing tab selections.
✨ Finishing touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c3bef5a and 13d92c1.

📒 Files selected for processing (2)
  • website/docs/concepts2/providers.mdx (2 hunks)
  • website/src/components/CodeSnippet/index.tsx (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • website/src/components/CodeSnippet/index.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (19)
  • GitHub Check: build (master, packages/riverpod_annotation)
  • GitHub Check: build (master, packages/riverpod)
  • GitHub Check: build (master, packages/riverpod_generator)
  • GitHub Check: build (master, packages/flutter_riverpod/example)
  • GitHub Check: build (master, packages/flutter_riverpod)
  • GitHub Check: build (master, packages/hooks_riverpod)
  • GitHub Check: build (master, packages/hooks_riverpod/example)
  • GitHub Check: build (master, examples/stackoverflow)
  • GitHub Check: build (master, examples/todos)
  • GitHub Check: build (master, examples/counter)
  • GitHub Check: build (master, examples/marvel)
  • GitHub Check: build (stable, packages/riverpod_annotation)
  • GitHub Check: build (stable, packages/riverpod)
  • GitHub Check: riverpod_lint (master, packages/riverpod_lint_flutter_test)
  • GitHub Check: check_generation
  • GitHub Check: riverpod_lint (stable, packages/riverpod_lint)
  • GitHub Check: riverpod_lint (stable, packages/riverpod_analyzer_utils_tests)
  • GitHub Check: riverpod_lint (stable, packages/riverpod_lint_flutter_test)
  • GitHub Check: riverpod_lint (master, packages/riverpod_analyzer_utils_tests)
🔇 Additional comments (2)
website/docs/concepts2/providers.mdx (2)

137-137: LGTM! Tab synchronization correctly implemented.

The addition of groupId="riverpod" to the Tabs component in the "Unmodifiable (functional)" section enables synchronization of tab selections across the website. This ensures users won't have to repeatedly select their preferred tab (e.g., riverpod vs riverpod_generator) throughout the documentation.

293-293: LGTM! Consistent tab synchronization applied.

The addition of groupId="riverpod" to the Tabs component in the "Modifiable (notifier)" section completes the synchronization setup for this file. Both nested tab groups (lines 137 and 293) now share the same groupId, ensuring a consistent user experience throughout the documentation.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🧪 Early access (Sonnet 4.5): enabled

We are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience.

Note:

  • Public repositories are always opted into early access features.
  • You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

Comment @coderabbitai help to get the list of available commands and usage tips.

@rrousselGit
Copy link
Copy Markdown
Owner

rrousselGit commented Sep 30, 2025

Thanks for this!

Looks like there are a few tabs that need to be updated to use the groupId too. Not all tabs use the component.

@rrousselGit
Copy link
Copy Markdown
Owner

rrousselGit commented Sep 30, 2025

It looks contained within providers.mdx. Could you update it too? Otherwise LGTM :)

@kunalpowar
Copy link
Copy Markdown
Contributor Author

kunalpowar commented Sep 30, 2025

It looks contained within providers.mdx. Could you update it too? Otherwise LGTM :)

Ah. I missed this. Have pushed the change.

@rrousselGit
Copy link
Copy Markdown
Owner

rrousselGit commented Sep 30, 2025

No worries. Thanks!

@rrousselGit rrousselGit merged commit 3d1ec59 into rrousselGit:master Sep 30, 2025
34 of 45 checks passed
@kunalpowar kunalpowar deleted the sync-tabs-on-website branch September 30, 2025 07:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Synchronise tabs in the website

3 participants

@kunalpowar @rrousselGit @kpowarefg