feat: Col support `flex` prop #16635

zombieJ · 2019-05-16T12:43:04Z

🤔 This is a ...

👻 What's the background?

close #7309
close #19728

💡 Solution

Add flex prop:

📝 Changelog

Language	Changelog
🇺🇸 English	Col support `flex` prop
🇨🇳 Chinese	Col 支持 `flex` 属性

☑️ 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

View rendered components/grid/demo/flex-stretch.md
View rendered components/grid/demo/playground.md
View rendered components/grid/demo/responsive-more.md
View rendered components/grid/demo/responsive.md
View rendered components/grid/index.en-US.md
View rendered components/grid/index.zh-CN.md

netlify · 2019-05-16T12:53:28Z

Deploy preview for ant-design ready!

Built with commit 2f791f8

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

codecov · 2019-05-16T14:07:14Z

Codecov Report

Merging #16635 into 4.0-prepare will increase coverage by <.01%.
The diff coverage is 100%.

@@               Coverage Diff               @@
##           4.0-prepare   #16635      +/-   ##
===============================================
+ Coverage        97.46%   97.46%   +<.01%     
===============================================
  Files              288      288              
  Lines             7216     7219       +3     
  Branches          1995     1997       +2     
===============================================
+ Hits              7033     7036       +3     
  Misses             183      183

Impacted Files	Coverage Δ
components/form/FormItem.tsx	`98.68% <ø> (ø)`	⬆️
components/grid/row.tsx	`100% <ø> (ø)`	⬆️
components/grid/col.tsx	`100% <100%> (ø)`	⬆️
components/transfer/ListItem.tsx	`100% <0%> (ø)`	⬆️

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 9da09ff...093d20f. Read the comment docs.

abenhamdine · 2019-07-24T15:52:36Z

hi @zombieJ any news on this ?

afc163 · 2019-09-05T14:40:07Z

https://chakra-ui.com/flex

components/grid/col.tsx

akaguny · 2019-10-25T09:43:29Z

any news?

netlify · 2019-10-26T12:21:38Z

Deploy preview for ant-design ready!

Built with commit 093d20f

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

afc163 · 2019-11-07T14:04:04Z

components/grid/style/mixin.less

-  }
-  .col(1); // kickstart it
-}
-


Fanally, I believe this can help to reduce at least 50Kb css size.

shaodahong · 2019-11-07T14:05:17Z

Remove Row type prop, now default by flex mode
Remove .less file float style
Fix flex with gutter invalid vertical
Doc (we can reorganize Grid doc )
- Remove FAQ
- Remove layout and demo description metion with flex(now default flex)
Fix arrangement when sum of Col more than 24 in a Row

shaodahong · 2019-11-07T14:15:22Z

@afc163 @zombieJ this request #7309 (comment) is ok?

components/grid/style/mixin.less

buildsize · 2019-11-09T11:01:22Z

File name	Previous Size	New Size	Change
package-lock.json	[new file]	923.97 KB

zombieJ · 2019-11-12T14:39:20Z

https://deploy-preview-16635--ant-design.netlify.com/components/grid-cn/#components-grid-demo-flex

sub-element monospaced arrangement not correct

shaodahong · 2019-11-19T09:32:30Z

@zombieJ plz double check, and prepare merge

afc163 · 2019-11-19T09:41:33Z

/rebase

zombieJ · 2019-11-19T09:41:59Z

标题 Flex 布局 可以去掉，作为 概述 的额外描述。demo 里的 flex 文字也可以去掉了。

afc163 · 2019-11-19T09:43:06Z

We can hint ``type="flex" is not neccessary now blahblah if set.

zombieJ · 2019-11-19T09:44:44Z

We can hint ``type="flex" is not neccessary now blahblah if set.

Can move into Migrate to v4 like Table: https://next.ant.design/components/table/#Migrate-to-v4

shaodahong · 2019-11-19T09:50:37Z

We can hint ``type="flex" is not neccessary now blahblah if set.

Can move into Migrate to v4 like Table: https://next.ant.design/components/table/#Migrate-to-v4

also, and we 4.0 release doc can metion this too

shaodahong · 2019-11-19T10:13:36Z

Wait for #16635 (comment) this list all checked.

shaodahong · 2019-11-19T12:18:27Z

Remove Row type prop, now default by flex mode

Remove .less file float style

Fix flex with gutter invalid vertical

Doc (we can reorganize Grid doc )

Remove FAQ

Remove layout and demo description metion with flex(now default flex)

All of my changed list.

Done.

components/grid/index.en-US.md

zombieJ · 2019-11-19T12:47:52Z

LGTM

afc163 · 2019-11-19T14:32:11Z

components/grid/style/index.less

  // Prevent columns from collapsing when empty
  min-height: 1px;
 }

-.make-grid-columns();
 .make-grid();


感觉这个也能干掉？

干不掉，之前干掉然后又捡回来了，这个就是栅格的基础，没有这个就没有栅格了……

display: block; flex: 0 0 percentage((@index / @grid-columns)); max-width: percentage((@index / @grid-columns));

pr-triage bot added the PR: unreviewed label May 16, 2019

zombieJ requested a review from afc163 May 16, 2019 12:43

zombieJ changed the title ~~feat: Col support flex prop~~ [WIP - 4.0] feat: Col support flex prop May 17, 2019

zombieJ changed the title ~~[WIP - 4.0] feat: Col support flex prop~~ [WIP - Next] feat: Col support flex prop May 17, 2019

weekly-digest bot mentioned this pull request May 19, 2019

Weekly Digest (12 May, 2019 - 19 May, 2019) #16663

Closed

ant-design-bot added the Inactive label Jun 17, 2019

weekly-digest bot mentioned this pull request Jun 23, 2019

Weekly Digest (16 June, 2019 - 23 June, 2019) #17248

Closed

afc163 added the 4.x In Ant Design 4.0 label Jul 25, 2019

afc163 changed the base branch from feature to 4.0-prepare August 17, 2019 14:18

shaodahong reviewed Oct 12, 2019

View reviewed changes

components/grid/col.tsx Show resolved Hide resolved

weekly-digest bot mentioned this pull request Oct 20, 2019

Weekly Digest (13 October, 2019 - 20 October, 2019) #19309

Closed

shaodahong mentioned this pull request Oct 25, 2019

Grid component use Flexbox by default #19430

Closed

shaodahong self-assigned this Oct 25, 2019

shaodahong force-pushed the col-flex branch from 2f791f8 to dd04915 Compare October 26, 2019 12:21

shaodahong force-pushed the col-flex branch from 97a2260 to b471dd6 Compare November 7, 2019 13:51

afc163 reviewed Nov 7, 2019

View reviewed changes

afc163 reviewed Nov 8, 2019

View reviewed changes

components/grid/style/mixin.less Show resolved Hide resolved

shaodahong force-pushed the col-flex branch from 17a9005 to 1ba15ea Compare November 9, 2019 16:28

shaodahong force-pushed the col-flex branch from 57a8625 to d1e3076 Compare November 12, 2019 14:57

shaodahong changed the title ~~[WIP - Next] feat: Col support flex prop~~ feat: Col support flex prop Nov 13, 2019

shaodahong added 2 commits November 19, 2019 16:43

set default col flex => 1 auto

d30bb5e

change grid about flex mode description

77a0901

shaodahong force-pushed the col-flex branch from 76c273c to 77a0901 Compare November 19, 2019 08:50

update snapshots

2c65160

github-actions bot force-pushed the col-flex branch from 2c65160 to ea77d3a Compare November 19, 2019 09:42

shaodahong changed the title ~~feat: Col support flex prop~~ [WIP] feat: Col support flex prop Nov 19, 2019

improve grid introduce and fix with gutter bug

2c81142

shaodahong force-pushed the col-flex branch from ea77d3a to 2c81142 Compare November 19, 2019 11:35

shaodahong changed the title ~~[WIP] feat: Col support flex prop~~ feat: Col support flex prop Nov 19, 2019

update snapshots

02be1be

zombieJ commented Nov 19, 2019

View reviewed changes

components/grid/index.en-US.md Outdated Show resolved Hide resolved

remove version

093d20f

afc163 approved these changes Nov 19, 2019

View reviewed changes

pr-triage bot added the PR: reviewed-approved label Nov 19, 2019

afc163 reviewed Nov 19, 2019

View reviewed changes

zombieJ merged commit efd3b35 into 4.0-prepare Nov 20, 2019

zombieJ deleted the col-flex branch November 20, 2019 03:13

pr-triage bot added the PR: merged label Nov 20, 2019

weekly-digest bot mentioned this pull request Nov 24, 2019

Weekly Digest (17 November, 2019 - 24 November, 2019) #19909

Closed

yoyo837 mentioned this pull request May 20, 2020

Can't set less variable from webpack #24300

Closed

1 task

zombieJ unassigned shaodahong Feb 16, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Col support `flex` prop #16635

feat: Col support `flex` prop #16635

zombieJ commented May 16, 2019 •

edited by shaodahong

netlify bot commented May 16, 2019 •

edited

codecov bot commented May 16, 2019 •

edited

abenhamdine commented Jul 24, 2019

afc163 commented Sep 5, 2019

akaguny commented Oct 25, 2019

netlify bot commented Oct 26, 2019 •

edited

afc163 Nov 7, 2019

shaodahong commented Nov 7, 2019 •

edited

shaodahong commented Nov 7, 2019

buildsize bot commented Nov 9, 2019 •

edited

zombieJ commented Nov 12, 2019

shaodahong commented Nov 19, 2019

afc163 commented Nov 19, 2019

zombieJ commented Nov 19, 2019

afc163 commented Nov 19, 2019

zombieJ commented Nov 19, 2019

shaodahong commented Nov 19, 2019

shaodahong commented Nov 19, 2019

shaodahong commented Nov 19, 2019

zombieJ commented Nov 19, 2019

afc163 Nov 19, 2019

shaodahong Nov 19, 2019

feat: Col support flex prop #16635

feat: Col support flex prop #16635

Conversation

zombieJ commented May 16, 2019 • edited by shaodahong

🤔 This is a ...

👻 What's the background?

💡 Solution

📝 Changelog

☑️ Self Check before Merge

netlify bot commented May 16, 2019 • edited

codecov bot commented May 16, 2019 • edited

Codecov Report

abenhamdine commented Jul 24, 2019

afc163 commented Sep 5, 2019

akaguny commented Oct 25, 2019

netlify bot commented Oct 26, 2019 • edited

afc163 Nov 7, 2019

Choose a reason for hiding this comment

shaodahong commented Nov 7, 2019 • edited

shaodahong commented Nov 7, 2019

buildsize bot commented Nov 9, 2019 • edited

zombieJ commented Nov 12, 2019

shaodahong commented Nov 19, 2019

afc163 commented Nov 19, 2019

zombieJ commented Nov 19, 2019

afc163 commented Nov 19, 2019

zombieJ commented Nov 19, 2019

shaodahong commented Nov 19, 2019

shaodahong commented Nov 19, 2019

shaodahong commented Nov 19, 2019

zombieJ commented Nov 19, 2019

afc163 Nov 19, 2019

Choose a reason for hiding this comment

shaodahong Nov 19, 2019

Choose a reason for hiding this comment

feat: Col support `flex` prop #16635

feat: Col support `flex` prop #16635

zombieJ commented May 16, 2019 •

edited by shaodahong

netlify bot commented May 16, 2019 •

edited

codecov bot commented May 16, 2019 •

edited

netlify bot commented Oct 26, 2019 •

edited

shaodahong commented Nov 7, 2019 •

edited

buildsize bot commented Nov 9, 2019 •

edited