Rules Hub
Code Ruleset
Rule priority, scope & exceptions
Use this to align rules with the senior-level structure (P0/P1/P2, scope, exceptions/tradeoffs).
Animate a disclosure chevron from its open state, not on hover
Don't rotate/flip a dropdown chevron on hover for a control that opens a modal or reveals nothing inline — a flipped chevron with no revealed content reads as a dropdown that failed to open. Drive the rotation from the actual open/expanded state.
Bad example
| 1 | .menu:hover .menu__chevron { |
| 2 | transform: rotate(180deg); /* flips on hover, but this control opens a modal — nothing pops */ |
| 3 | } |
Explanation (EN)
A hover-only rotation communicates an opened panel even when no panel is visible.
Objašnjenje (HR)
Rotacija samo na hover može prikazivati otvoreno stanje iako panel nije vidljiv.
Good example
| 1 | /* rotate only when a panel truly expands (open-state class or scoped to real inline dropdowns) */ |
| 2 | .menu.is-open .menu__chevron { |
| 3 | transform: rotate(180deg); |
| 4 | } |
Explanation (EN)
Tie the chevron rotation to the actual open/expanded state (a class toggled with the panel), or scope hover rotation to controls that really reveal an inline dropdown.
Objašnjenje (HR)
Veži rotaciju chevrona na stvarno open/expanded stanje (klasa koja se mijenja s panelom), ili ograniči hover rotaciju na kontrole koje stvarno otvaraju inline dropdown.
Notes (EN)
Animate an expansion indicator from the actual expanded state and verify its relation to aria-expanded and the controlled panel.
Exceptions / Tradeoffs (EN)
A modal-launch affordance may need a different icon; do not imply an inline expansion that never occurs.