palantir/blueprint

[InputGroup] Cannot set fill to false

Open

#4,857 建立於 2021年8月14日

在 GitHub 查看
 (1 留言) (0 反應) (0 負責人)TypeScript (20,263 star) (2,167 fork)batch import
P3Package: coreType: bughelp wanted

描述

Environment

  • Package version(s): 3.47.0
  • Operating System: Windows 10
  • Browser name and version: Google Chrome - v92.0.4515.131 (Official Build) (64-bit)

Code Sandbox

Link to a minimal repro: https://codesandbox.io/s/blueprint-sandbox-forked-68yys?file=/src/CoreExample.tsx

Steps to reproduce

  1. Create an InputGroup with fill=true
  2. Create another InputGroup with fill=false
  3. Both inputs look the same

Actual behavior

The fill prop cannot be set to false

Expected behavior

Setting the fill prop to false should make the component not to take up the full width of its container

Possible solution

TBH I'm not sure what's the solution for this one. I tried moving some styles in .bp3-input-group and .bp3-input, but doing so breaks a lot of components that depend on other inputs that are also using those classes (that's something I hate about CSS classes. To me It's so good we have styled-components now 😅)

貢獻者指南

技術棧
reacttypescript
領域
frontend
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
1-3 hours
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
fresh
清晰度議題是否清楚說明預期改動、驗收標準和下一步。
mostly clear
前置要求
ReactCSSBlueprint components
新手友善度1-100 的估計分數，表示該議題對首次貢獻者的友善程度。
55
研究方向
Investigate the CSS for .bp3 input group and .bp3 input to understand why fill=false does not apply. Check the component's className logic. Possibly the component always adds the fill class or the CSS priority issue. Look at the InputGroup source code and related CSS files. Consider a minimal fix that overrides width when fill=false.
[InputGroup] Cannot set fill to false · palantir/blueprint#4857 | Good First Issue