Ng-zorro-antd: <nz-form-control> in <nz-form-item nzGutter> should generated correct padding

[wheeljs]

Version

1.8.0

Environment

Windows 10
Chrome 70.0.3538.102（正式版本） （64 位）
[email protected]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-start-z14eiy?file=src%2Fapp%2Fapp.component.html

Steps to reproduce

<nz-form-item nzGutter="8">
  <nz-form-control nzSpan="10">
    <nz-form-text>Col 10 In Form</nz-form-text>
  </nz-form-control>
</nz-form-item>

What is expected?

<nz-form-control> get correct style padding-left: 4px; padding-right: 4px, like [nz-col] in [nz-row].

What is actually happening?

<nz-form-control> has no style, but <nz-form-item> generated margin style.

Other?

[asincole]

Hi, I would like to look into this bug if that's okay, please?

[wendellhu95]

@asincole 👏 Sure! Welcome to contribute. Feel free to open a pr.

[asincole]

Alright, great. I have forked already and will start working on it tonight. This is my first Contribution to an OSS, any tips or hints outside the ones in the CONTRIBUTING.md or general tips? @wendzhue

[asincole]

Hi, so I have taken a look at it, I discovered that the nz-form-control selector has no padding added, so I have added that, but then once nzSpan directive is added, the padding rule gets overwritten and then set to 0 which are the rules for nzSpan directive. So I added an extra rule to override it

 .@{form-prefix-cls}-item-control-wrapper {
    display: block;
    width: 100%;
    padding-right: 4px; 
    padding-left: 4px;
    &[class^="@{ant-prefix}-col-"] { // adds the padding rules to overwrite the nzSpan directive rules
      padding-right: 4px;
      padding-left: 4px;
    }

is repeating the rules optimal or is there a better way I can do it?

[wendellhu95]

@asincole You can just create a pr and we would review your code there.

[asincole]

@wendzhue alright. I'll do it in a bit.. sorry about the delay. Thanks.

[IssueHuntBot]

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

[vthinkxie]

fixed in https://github.com/NG-ZORRO/ng-zorro-antd/pull/2493/files#diff-611562526e66dba4ffd92fb8fa6cdd54R126