Style tree content to full width

[chengcyber]

First of all, thank you for your contribution! 😄

New feature please send pull request to feature branch, and rest to master branch.
Pull request will be merged after one of collaborators approve.
Please makes sure that these form are filled before submitting your pull request, thank you!

[中文版模板 / Chinese template]

This is a ...

• New feature
• Bug fix
• Site / document update
• Component style update
• TypeScript definition update
• Refactoring
• Code style optimization
• Branch merge
• Other (about what?)

What's the background?

It's not elegant to control tree content width by calculating. Like the Tree draggable demo https://ant.design/components/tree/#components-tree-demo-draggable

/* You can add the following CSS to your project to make draggable area bigger */
#components-tree-demo-draggable .draggable-tree .ant-tree-node-content-wrapper {
  width: calc(100% - 18px);
}

API Realization (Optional if not new feature)

What's the effect? (Optional if not new feature)

Changelog description (Optional if not new feature)

make tree content full width. You can preview the style works on codesandbox

Self Check before Merge

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

Additional Plan? (Optional if not new feature)

If this PR related with other PR or following info. You can type here.

[codecov]

Codecov Report

Merging #14858 into feature will increase coverage by 0.01%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           feature   #14858      +/-   ##
===========================================
+ Coverage    92.79%   92.81%   +0.01%     
===========================================
  Files          236      236              
  Lines         6231     6231              
  Branches      1855     1868      +13     
===========================================
+ Hits          5782     5783       +1     
+ Misses         446      445       -1     
  Partials         3        3

Impacted Files	Coverage Δ
components/upload/UploadList.tsx	87.15% <0%> (-1.84%)	⬇️
components/_util/wave.tsx	87.5% <0%> (+2.88%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d30b2f5...0a0e741. Read the comment docs.

[codecov]

Codecov Report

Merging #14858 into feature will decrease coverage by 0.58%.
The diff coverage is 100%.

@@             Coverage Diff             @@
##           feature   #14858      +/-   ##
===========================================
- Coverage    93.63%   93.04%   -0.59%     
===========================================
  Files          249      247       -2     
  Lines         6675     6603      -72     
  Branches      1926     1943      +17     
===========================================
- Hits          6250     6144     -106     
- Misses         424      456      +32     
- Partials         1        3       +2

Impacted Files	Coverage Δ
components/tree/Tree.tsx	96.42% <100%> (-0.13%)	⬇️
components/grid/row.tsx	65.3% <0%> (-28.58%)	⬇️
components/input/calculateNodeHeight.tsx	65.45% <0%> (-21.82%)	⬇️
components/transfer/list.tsx	89.53% <0%> (-4.66%)	⬇️
components/input/TextArea.tsx	92.72% <0%> (-3.64%)	⬇️
components/upload/UploadList.tsx	87.15% <0%> (-1.84%)	⬇️
components/table/filterDropdown.tsx	94.44% <0%> (-0.43%)	⬇️
components/calendar/index.tsx	92.94% <0%> (-0.32%)	⬇️
components/table/util.tsx	97.5% <0%> (-0.28%)	⬇️
components/icon/index.tsx	87.75% <0%> (-0.25%)	⬇️
... and 34 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fb8b198...ed6163e. Read the comment docs.

[netlify]

Deploy preview for ant-design ready!

Built with commit ed6163e

https://deploy-preview-14858--ant-design.netlify.com

[yesmeck]

It's not horizontal aligned.

[afc163]

I like it, we can add <Tree blockNode> prop for this, cause it could be a breaking change of style.

[chengcyber]

According to the discussion, it seems to me the todo list is as follow:

• new props blockNode in rc-tree
• add styles for .ant-tree.block-node

I am not pretty sure about it. Could anyone give a bright routine of achieving this full-width tree content proposal?

[afc163]

<Tree blockNode> renders as .ant-tree.ant-tree-block-node.

[afc163]

@kimochg Can we make this implementation?

<Tree blockNode />

[chengcyber]

@afc163 done

[zombieJ]

pls help to update doc.
(Add one column for version info. ref: here)

[chengcyber]

@zombieJ docs updated. plz check, thanks.

[afc163]

节点占据一行。

[zombieJ]

Feature branch updated. Pls merge ~