palantir/blueprint

MenuItem sizing issue when using large modifier with nested items

Open

#4,893 opened on 2021年9月9日

GitHub で見る
 (1 comment) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: coreType: bughelp wanted

説明

Environment

  • Package version(s): 4.0.0-alpha.0
  • Operating System: Windows
  • Browser name and version: Edge Version 92.0.902.78 (Official build) (64-bit)

Steps to reproduce

  • Hover over a MenuItem with nested MenuItem(s)

Expected Result

  • Sub-menu opens with no sizing change to parent item

Actual Result

  • Parent MenuItem size changes (looks like top/bottom padding reduces), which is particularly an issue when hovering at the lower edge of the item, and doesn't look great

CodeSandbox Example

https://codesandbox.io/s/blueprint-4-menu-issue-wmb12?file=/src/index.tsx

コントリビューターガイド

技術スタック
typescriptreactcss
領域
frontend
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
ReactCSS
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
85
調査方針
The issue is a CSS bug where the parent MenuItem's padding changes when hovering over a nested sub menu. To fix, examine the MenuItem component's CSS in the Blueprint source, likely in packages/blueprintjs core/src/components/menu/ menu.scss. Look for styles targeting .bp4 menu item and the large modifier. Compare hover and non hover states. The CodeSandbox reproduction confirms the behavior. A potential fix is to ensure the padding remains consistent.