palantir/blueprint

<ButtonGroup> in <InputGroup> has extra margin

Open

#2,805 opened on 2018年8月15日

GitHub で見る
 (10 comments) (0 reactions) (1 assignee)TypeScript (20,263 stars) (2,167 forks)batch import
Package: coreType: bughelp wanted

説明

Environment

  • Package version(s): 3.0.0
  • Browser and OS versions: Chrome 68.0.3440.106 and Safari 11.1.2 on MacOS 10.13.6

Steps to reproduce

  1. Create an <InputGroup>
  2. Create a <ButtonGroup> and assign it to the rightElement of the <InputGroup> in step 1
  3. Add 2 <Button>s to the <ButtonGroup> in step 2

Actual behavior

screen shot 2018-08-15 at 4 13 52 pm

Child <Button>s of a <ButtonGroup> which is the rightElement of an <InputGroup> have extra margins, so they don't line up next to each other.

Expected behavior

Child <Button>s of a <ButtonGroup> which is the rightElement of an <InputGroup> should line up next to each other.

Possible solution

Add a specific rule to reset the margin of a <Button> when it's nested in a <ButtonGroup> that's nested in an <InputGroup>

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

技術スタック
typescriptreact
領域
frontend
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
2
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
blocked
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
CSS specificityReact component nesting
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
65
調査方針
Examine the CSS files for ButtonGroup and InputGroup components in the Blueprint repository, likely in packages/core/src/components/button group and packages/core/src/components/input group. The issue is about extra margin on buttons inside a ButtonGroup that is used as the rightElement of an InputGroup. The solution involves adding a CSS rule to reset margin for buttons in that specific nesting context, possibly using a descendant selector like `.blueprint input group .blueprint button group .blueprint button`. Check the existing styles for any overrides and test in a browser.