Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(module:row): grid gutter fix #1158

Merged
merged 4 commits into from
Feb 23, 2021

Conversation

anddrzejb
Copy link
Member

@anddrzejb anddrzejb commented Feb 22, 2021

馃 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • Bundle size optimization
  • Performance optimization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Other (about what?)

馃敆 Related issue link

#610

馃挕 Background and solution

The grid was basically working (although not exactly as in react), but the demo was wrong and it was screwing up the grid.
Changes made:

  • for vertical gutter, switched from margins to row-gap (same as react)
  • GutterType receive more options so both horizontal and vertical can be fully customized depending on a screen size
  • in demo changed the file name from Gutterx to gutter because the demo has specific css for id="components-grid-demo-gutter" (@Hona, I had to make this change here, please pull it into your PR once it is merged).

One thing that I did not manage to bring in sync with react is the order of classes for Col component. In react, this

  <Col class="gutter-row">

will render to

   <div class="ant-col ant-col-6 gutter-row">

Same in antBlazor will render to:

   <div class="gutter-row ant-col ant-col-6">

The problem here is ClassMapper and OriginalClass property. For Col I was trying to reset it and add it in the end, but it still comes back (I guess because it is a [Parameter]) and I was ending up with <div class="gutter-row ant-col ant-col-6 gutter-row">. I could probably reset it in the SetParameter method? For the time being it seems to work, and maybe we do not need to touch it, but because it is different than react, I wanted to bring it to your attention.

鈽戯笍 Self Check before Merge

鈿狅笍 Please check all items below before review. 鈿狅笍

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

@ElderJames ElderJames enabled auto-merge (squash) February 23, 2021 05:30
@ElderJames ElderJames linked an issue Feb 23, 2021 that may be closed by this pull request
@ElderJames ElderJames merged commit 48c1050 into ant-design-blazor:master Feb 23, 2021
@anddrzejb anddrzejb deleted the gridGutterFix branch February 23, 2021 07:14
ElderJames added a commit that referenced this pull request Apr 23, 2022
* fix(module:row): grid gutter switch to row-gap

* docs(module:grid): gutter docs in sync with react antDesign

* add DefaultBreakpoint

Co-authored-by: ElderJames <shunjiey@hotmail.com>
ElderJames added a commit that referenced this pull request Apr 30, 2022
* fix(module:row): grid gutter switch to row-gap

* docs(module:grid): gutter docs in sync with react antDesign

* add DefaultBreakpoint

Co-authored-by: ElderJames <shunjiey@hotmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Grid gutter doesn't work
2 participants