fix: [InputNumber] Fix the rounded corners of InputNumber, DatePicker…

[YyumeiZhang]

…, Time Pick, and AutoComplete located in the middle of the InputGroup are not 0

中文模板 / Chinese Template

• I have read and followed Pull Request Guidelines of the contributing guide.

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Test Case
• TypeScript definition update
• Document improve
• CI/CD improve
• Branch sync
• Other, please describe:

PR description

Fixes #2489

复现代码

export const InputGroupTest = () => {
  return <>
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <InputNumber placeholder="InpuNumber" style={{ width: 140 }} innerButtons />
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <InputNumber placeholder="InpuNumber" style={{ width: 140 }} innerButtons />
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
      <InputNumber placeholder="InpuNumber" style={{ width: 140 }} innerButtons />
    </InputGroup>
    <br /><br />
    <h3>InputGroup, 按钮在外部，仅位于 group 中间的时候 border-radius 会有问题</h3>
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <InputNumber placeholder="InpuNumber" style={{ width: 140 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <InputNumber placeholder="InpuNumber" style={{ width: 140 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
      <InputNumber placeholder="InpuNumber" style={{ width: 140 }} />
    </InputGroup>
    <h3>AutoComplete, 仅位于 group 中间会有问题</h3>
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <AutoComplete placeholder="AutoComplete" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <AutoComplete placeholder="AutoComplete" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
      <AutoComplete placeholder="AutoComplete" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <h3>DatePicker, 仅位于 group 中间的时候 border-radius 会有问题</h3>
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <DatePicker placeholder="DatePicker" style={{ width: 100 }}/>
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <DatePicker placeholder="DatePicker" style={{ width: 100 }}/>
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
      <DatePicker placeholder="DatePicker" style={{ width: 100 }}/>
    </InputGroup>
    <br /><br />
    <h3>TimePicker, 仅位于 group 中间的时候 border-radius 会有问题</h3>
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <TimePicker placeholder="TimePicker" style={{ width: 100 }}/>
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <TimePicker placeholder="TimePicker" style={{ width: 100 }}/>
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
    </InputGroup>
    <br /><br />
    <InputGroup>
      <Input placeholder="Input" style={{ width: 100 }} />
      <Input placeholder="Input" style={{ width: 100 }} />
      <TimePicker placeholder="TimePicker" style={{ width: 100 }}/>
    </InputGroup>
    <br /><br />
  </>
}

Changelog

🇨🇳 Chinese

• Style: 修复位于InputGroup中间位置的 InputNumber，DatePicker， Time Pick，AutoComplete的圆角不为 0 问题 [InputGroup] 如果是inputNumber圆角没有变为0 #2489

---

🇺🇸 English

• Fix: Fixed the problem that the rounded corners of InputNumber, DatePicker, Time Pick, and AutoComplete located in the middle of the InputGroup are not 0 [InputGroup] 如果是inputNumber圆角没有变为0 #2489

Checklist

• Test or no need
• Document or no need
• Changelog or no need

Other

• Skip Changelog

Additional information

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0ebd42d:

Sandbox	Source
pr-story	Configuration

[cypress]

semi-design    Run #2827

Run Properties:   Passed #2827  •  e3d3faea9d ℹ️: Merge 0ebd42d6f4b57ccf31802f350b6e751b6b253451 into f182880c124d8197a0511f88ab87...

Project	semi-design
Branch Review	fix/inputnumber-group
Run status	Passed #2827
Run duration	07m 35s
Commit	e3d3faea9d ℹ️: Merge 0ebd42d6f4b57ccf31802f350b6e751b6b253451 into f182880c124d8197a0511f88ab87...
Committer	YyumeiZhang
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	11
Skipped	0
Passing	263
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎

[pointhalo]

为啥是去除 border-radius 0？

不是这里不全吗？

[YyumeiZhang]

不是， select，casacder 是直接由最外层控制颜色，InputNumber，DatePicker， Time Pick，AutoComplete和它们不同，最外层无背景，而是靠内层的 input 的背景色决定显示的颜色，所以他们都会有这样的问题