Make breakpoints use the token feature #39105

azro352 · 2022-11-29T20:22:07Z

🤔 This is a ...

New feature

🔗 Related issue link

close #32954
close #34197
close #19694
close #22359

💡 Background and solution

Screens are getting bigger, we need a new size to handle them. For example with 4k screens, you can differenciate an half-screen of a full-screen (so can't adapt the width f you app only for full-screen mode)

📝 Changelog

Language	Changelog
🇺🇸 English	Breakpoints can now follow theme token config.
🇨🇳 Chinese	Breakpoints 现在会消费主题 token 配置。

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

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

The decision has been made to use the new token system for the breakpoints

I have decided to remove ResponsiveObserve.unsubscribe should be called when unmounted test because now we use a hook, that isn't the same instance of ResponsiveObserver that is shared between Row and the test, so we can't check the call on subscribe at this moment

Thanks

github-actions · 2022-11-29T20:22:22Z

yoyo837 · 2022-11-30T02:04:06Z

Maybe feature branch is better.

yoyo837 · 2022-11-30T02:10:52Z

CI failed.

yoyo837 · 2022-11-30T07:23:44Z

feature branch please!

yoyo837 · 2022-11-30T07:28:41Z

feature branch please!

You said "maybe" so I wasn't sure If I needed to change or not , sorry :)

My bad. :)

components/list/index.zh-CN.md

components/grid/demo/responsive.md

components/list/index.zh-CN.md

components/grid/index.en-US.md

components/grid/index.zh-CN.md

components/list/index.en-US.md

components/_util/responsiveObserve.ts

yoyo837

So sorry, The owner think that this should be supported by adding some style token by ConfigProvider with theme. #39105 (comment)
https://ant.design/docs/react/customize-theme#customize-design-token

Co-authored-by: Amumu <yoyo837@hotmail.com>

codecov · 2022-12-08T07:59:45Z

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage 👍

Coverage data is based on head (c5e91b8) compared to base (49e8c13).
Patch coverage: 100.00% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #39105   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          556       556           
  Lines         9595      9602    +7     
  Branches      2714      2714           
=========================================
+ Hits          9595      9602    +7

Impacted Files	Coverage Δ
components/_util/responsiveObserve.ts	`100.00% <100.00%> (ø)`
components/descriptions/index.tsx	`100.00% <100.00%> (ø)`
components/grid/hooks/useBreakpoint.tsx	`100.00% <100.00%> (ø)`
components/grid/row.tsx	`100.00% <100.00%> (ø)`

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

components/_util/responsiveObserve.ts

zombieJ · 2022-12-12T07:48:59Z

components/grid/__tests__/index.test.tsx

@@ -88,15 +83,6 @@ describe('Grid', () => {
    expect(asFragment().firstChild).toMatchSnapshot();
  });

-  it('ResponsiveObserve.unsubscribe should be called when unmounted', () => {


Do not remove directly which should replace with new test case.

Do not remove existing test cases, add some new test cases for this feature directly.

@yoyo837 @zombieJ

I have no idea how to replace it. What do I do ? Who write the new test ?

@yoyo837 @zombieJ
Tell me at least, the behaviour you expect to be tested ? And I will try to think about the test implementation

Let me handle this : )

components/_util/responsiveObserve.ts

OOD

codeball-ai-writer bot added the codeball:needs-review label Nov 30, 2022

yoyo837 approved these changes Nov 30, 2022

View reviewed changes

azro352 changed the base branch from master to feature November 30, 2022 07:24

This comment was marked as resolved.

Sign in to view

huangkairan reviewed Nov 30, 2022

View reviewed changes

components/list/index.zh-CN.md Outdated Show resolved Hide resolved

li-jia-nan reviewed Nov 30, 2022

View reviewed changes

components/grid/demo/responsive.md Outdated Show resolved Hide resolved

li-jia-nan reviewed Nov 30, 2022

View reviewed changes

components/grid/demo/responsive.md Outdated Show resolved Hide resolved

codeball-ai-writer bot added codeball:needs-careful-review and removed codeball:needs-review labels Nov 30, 2022

yoyo837 reviewed Nov 30, 2022

View reviewed changes

components/list/index.zh-CN.md Outdated Show resolved Hide resolved

yoyo837 reviewed Nov 30, 2022

View reviewed changes

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

yoyo837 reviewed Nov 30, 2022

View reviewed changes

components/grid/index.zh-CN.md Outdated Show resolved Hide resolved

yoyo837 reviewed Nov 30, 2022

View reviewed changes

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

zombieJ reviewed Nov 30, 2022

View reviewed changes

components/_util/responsiveObserve.ts Outdated Show resolved Hide resolved

yoyo837 previously requested changes Dec 1, 2022

View reviewed changes

azro352 requested review from zombieJ and afc163 and removed request for zombieJ and afc163 December 1, 2022 11:02

azro352 force-pushed the feature/xxxl-grid-size branch from 515c028 to 3d04fd1 Compare December 2, 2022 08:54

azro352 and others added 4 commits December 2, 2022 09:55

Add XXXL size

ee3fb62

Update index.zh-CN.md

3d42ce9

Update components/list/index.zh-CN.md

00ffde2

Co-authored-by: Amumu <yoyo837@hotmail.com>

Try to use useToken for building responsiveMap

09257b8

azro352 force-pushed the feature/xxxl-grid-size branch from bc22667 to a052c4b Compare December 7, 2022 20:18

azro352 added 2 commits December 7, 2022 21:32

Remove impossible test

95f07c3

Fix token.screenXSMax

4c6bbcf

azro352 and others added 2 commits December 8, 2022 09:03

Try to put test back as token.screenXSMax is fixed

b34561e

Remove impossible test now

a849bf3

zombieJ reviewed Dec 8, 2022

View reviewed changes

components/_util/responsiveObserve.ts Show resolved Hide resolved

li-jia-nan requested review from zombieJ, yoyo837 and afc163 December 9, 2022 02:23

zombieJ reviewed Dec 12, 2022

View reviewed changes

components/_util/responsiveObserve.ts Outdated Show resolved Hide resolved

azro352 and others added 7 commits December 12, 2022 09:22

Subscribers, subuid and screen are no longer static

e34464a

reorganize def

e2a738a

chore: merge feature

0a972cc

chore: not affect no-related file

6ec354f

chore: not affect no-related file

c9349d0

test: update test case

f49630a

chore: adjust memo logic

c5e91b8

zombieJ approved these changes Dec 15, 2022

View reviewed changes

li-jia-nan approved these changes Dec 15, 2022

View reviewed changes

zombieJ merged commit 18400fb into ant-design:feature Dec 15, 2022

azro352 deleted the feature/xxxl-grid-size branch December 15, 2022 07:17

xrkffgg mentioned this pull request Dec 19, 2022

docs: add 5.1.0 changelog #39667

Merged

This was referenced Dec 30, 2022

响应式栅格可否增加1920的尺寸？ #32954

Closed

Grid中的响应式断点breakpoint支持自定义 #34197

Closed

Allow Configuration of breakpoints in Layout Component #19694

Closed

Redefine media query breakpoints doesn't work #22359

Closed

Khez added a commit to Khez/ant-design that referenced this pull request Apr 17, 2024

Backport xxxl-grid-size from ant-design#39105

856664d

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make breakpoints use the token feature #39105

Make breakpoints use the token feature #39105

azro352 commented Nov 29, 2022 •

edited by afc163

github-actions bot commented Nov 29, 2022 •

edited

yoyo837 commented Nov 30, 2022

yoyo837 commented Nov 30, 2022

yoyo837 commented Nov 30, 2022

This comment was marked as resolved.

yoyo837 commented Nov 30, 2022

yoyo837 left a comment

codecov bot commented Dec 8, 2022 •

edited

zombieJ Dec 12, 2022

yoyo837 Dec 12, 2022

azro352 Dec 12, 2022

azro352 Dec 13, 2022

zombieJ Dec 15, 2022

Make breakpoints use the token feature #39105

Make breakpoints use the token feature #39105

Conversation

azro352 commented Nov 29, 2022 • edited by afc163

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

github-actions bot commented Nov 29, 2022 • edited

yoyo837 commented Nov 30, 2022

yoyo837 commented Nov 30, 2022

yoyo837 commented Nov 30, 2022

This comment was marked as resolved.

yoyo837 commented Nov 30, 2022

yoyo837 left a comment

Choose a reason for hiding this comment

codecov bot commented Dec 8, 2022 • edited

Codecov Report

zombieJ Dec 12, 2022

Choose a reason for hiding this comment

yoyo837 Dec 12, 2022

Choose a reason for hiding this comment

azro352 Dec 12, 2022

Choose a reason for hiding this comment

azro352 Dec 13, 2022

Choose a reason for hiding this comment

zombieJ Dec 15, 2022

Choose a reason for hiding this comment

azro352 commented Nov 29, 2022 •

edited by afc163

github-actions bot commented Nov 29, 2022 •

edited

codecov bot commented Dec 8, 2022 •

edited