Skip to content

fix(theme-classic): don't rotate the carets of nested expanded catego… - #12789

Open
lautyscanio wants to merge 1 commit into
meta:mainfrom
lautyscanio:fix/sidebar-nested-caret-rotation
Open

lautyscanio wants to merge 1 commit into
meta:mainfrom
lautyscanio:fix/sidebar-nested-caret-rotation

Conversation

@lautyscanio

@lautyscanio lautyscanio commented Oct 27, 2026 •

Copy link
Copy Markdown

fix(theme-classic): don't rotate the carets of nested expanded categories when collapsing a parent sidebar category (AI-assisted)
Caja grande "Description": borrá todo lo que trae y pegá esto:

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

When you collapse a sidebar category, the carets of its nested expanded categories also rotate, so several arrows animate at once even though the nested categories stay expanded.

The cause is this Infima rule. It uses a descendant selector, so it matches every caret inside the collapsed categ

.menu__list-item--collapsed .menu__link--sublist::after,
.menu__list-item--collapsed .menu__caret::before {
  transform: rotateZ(90deg);
}                                                                                                                 ```

This PR adds an override in `DocSidebarItem/Category/styles.module.css`, next to the existing Infima override. It keeps the expanded rotation for carets whosed. Both caret variants are covered: theseparate `.menu__caret` button (category with a link) and `.menu__link--sublist-caret` (category without a link). The rule lives in the `docusaurus.theme-classic` cascade layer, and its specificity is also higher than Infima's, so it wins with or without CSS cascade layers.requests](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#pull-requests).
- [x] **If this is a code change**: I have wd dogfooding pages to fully verify the newbehavior.
- [ ] **If this is a new API or substantial change**: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

## Motivation

When you collapse a sidebar category, the carets of its nested expanded categories also rotate, so several arrows animate at once even though the nested categories stay expanded.

The cause is this Infima rule. It uses a descendant selector, so it matches every caret inside the collapsed category:

```css
.menu__list-item--collapsed .menu__link--sublist::after,
.menu__list-item--collapsed .menu__caret::before {
  transform: rotateZ(90deg);
}

This PR adds an override in DocSidebarItem/Category/styles.module.css, next to the existing Infima override. It
keeps the expanded rotation for carets whosed. Both caret variants are covered: theseparate .menu__caret button (category with a link) and .menu__link--sublist-caret (category without a link). The rule lives in the docusaurus.theme-classic cascade layer, and its specificity is also higher than Infima's, so it
wins with or without CSS cascade layers.

As Josh-Cena mentioned, the cleaner long-term fix would be in Infima (using child selectors). This fixes it in the theme for now.

I used AI assistance to write this change. I reviewed and tested it myself.

Test Plan

On the dogfooding docs (/tests/docs):

  1. Expand "Tests", then expand "Sidebar item description tests".
  2. Collapse "Tests": only the "Tests" caret

I also checked the computed transform of tnt gets menu__list-item--collapsed:

Nested expanded caret Parent caret
Before rotate(90deg) (wrong) rotate(90deg)
After rotate(180deg) rotate(90deg)

Same result for a category without a link ("Huge sidebar category" and its first nested category).

stylelint and oxfmt pass on the changed file.

Test links

Deploy preview: https://deploy-preview-12789--docusaurus-2.netlify.app/tests/docs

Related issues/PRs

Closes #8512

…ries when collapsing a parent sidebar category (AI-assisted)

Closes meta#8512
@meta-cla

meta-cla Bot commented Oct 27, 2026

Copy link
Copy Markdown

Hi @lautyscanio!

Thank you for your pull request and welcome to our community.

Action Required

In order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you.

Process

In order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with CLA signed. The tagging process may take up to 1 hour after signing. Please give it that time before contacting us about it.

If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks!

@coderabbitai

coderabbitai Bot commented Oct 27, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: defaults
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 6e210e01-78fb-48dd-a465-06e872d0be75
Commits

Reviewing files that changed from the base of the PR and between 4e6fe61 and 4ad0e27.

Files selected for processing: 1
  • packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/styles.module.css

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.

Walkthrough

Added CSS selectors to rotate caret elements for expanded sidebar categories. The selectors exclude collapsed categories.

Changes: Sidebar category caret rotation

Layer / File(s) Summary
Expanded category caret rotation
packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/styles.module.css
Direct caret elements rotate 180 degrees for expanded categories. Collapsed categories are excluded.

Priority: Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: slorber

Merge Risk: Minimal · up to 4ad0e

The localized caret presentation change matches the category markup and introduces no established merge-blocking risk.

Architecture risk: Low · up to 4ad0e

The change affects 1 system.

Changed systems: packages/docusaurus-theme-classic

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

  • observed — packages/docusaurus-theme-classic (library) was modified; 1 changed file maps to changed impact.

Before / after behavior

  • observed — Modified behavior in packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/styles.module.css: Added selectors for expanded category items’ direct caret elements and rotate them 180 degrees; collapsed categories are excluded.
Pre-merge checks: Passed 4
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly describes the main change: preventing nested expanded category carets from rotating when a parent category collapses.
Linked Issues check Passed Issue [#8512] requires only the parent sidebar caret to rotate when a parent category collapses. The change in packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/styles.module.css t…
Out of Scope Changes check Passed The pull request changes only the category sidebar CSS. The selectors and rotation rule directly address issue [#8512]. No unrelated production changes are present in the reviewed diff.
Full details: Linked Issues check

Explanation

Issue [#8512] requires only the parent sidebar caret to rotate when a parent category collapses. The change in packages/docusaurus-theme-classic/src/theme/DocSidebarItem/Category/styles.module.css targets non-collapsed category items and directly targets both supported caret pseudo-elements. This keeps nested expanded-category carets at the expanded rotation. The change directly implements the reported behavior.

Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

@netlify

netlify Bot commented Oct 27, 2026

Copy link
Copy Markdown

✅ [V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit 4ad0e27
🔍 Latest deploy log https://app.netlify.com/projects/docusaurus-2/deploys/6ae0f1ea63f8ffded0ed8684
😎 Deploy Preview https://deploy-preview-12789--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@meta-cla

meta-cla Bot commented Oct 27, 2026

Copy link
Copy Markdown

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks!

@meta-cla meta-cla Bot added the CLA Signed Signed Facebook CLA label Oct 27, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

collapsing a sidebar erroneously shows a collapse animation for open sub-items

1 participant