fix: There are style issues with Table and other elements under Table expand #47190

crazyair · 2024-01-27T13:40:44Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

上次加的 pr #23602
这次修复的 issue #47189

📝 Changelog

Language	Changelog
🇺🇸 English	There are style issues with `Table` and other elements under `Table` `expand`
🇨🇳 Chinese	`Table` `expand` 下有 `Table` 和其他元素的样式问题

☑️ Self-Check before Merge

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

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

stackblitz · 2024-01-27T13:40:47Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2024-01-27T13:40:55Z

Visual Regression Report for PR #47190 Passed ✅

Target branch: master (52ad8b0)

Congrats! No visual-regression diff found

github-actions · 2024-01-27T13:40:56Z

github-actions · 2024-01-27T13:43:04Z

size-limit report 📦

Path	Size
`./dist/antd.min.js`	331.34 KB (-56 B 🔽)
`./dist/antd-with-locales.min.js`	377.1 KB (-131 B 🔽)

codesandbox-ci · 2024-01-27T13:48:20Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 83c6e79:

Sandbox	Source
antd reproduction template (forked)	Configuration

codecov · 2024-01-27T13:53:26Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (3365a84) 100.00% compared to head (83c6e79) 100.00%.
Report is 4 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #47190   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          732       732           
  Lines        12563     12563           
  Branches      3295      3295           
=========================================
  Hits         12563     12563

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

afc163 · 2024-01-28T05:23:53Z

components/table/style/size.ts

@@ -38,7 +38,7 @@ const genSizeStyle: GenerateStyle<TableToken, CSSObject> = (token) => {

      [`${componentCls}-tbody`]: {
        // ========================= Nest Table ===========================
-        [`${componentCls}-wrapper:only-child ${componentCls}`]: {
+        [`${componentCls}-wrapper ${componentCls}`]: {


这个 :only-child 应该是有用的，blame 一下。

描述早写清楚了

crazyair · 2024-01-28T09:51:11Z

上次的 pr
第一个 issue 没问题

第二个 issue 看了也没问题

afc163 · 2024-01-29T02:34:28Z

目前这个样式容易误伤不是直接内嵌的情况（比如放一个 Card 里面再嵌套 Table），建议用 > 来精确指定对应的子 Table。https://stackblitz.com/edit/react-rvtz1f-tgwzvl?file=demo.tsx

crazyair · 2024-01-29T03:31:09Z

目前这个样式容易误伤不是直接内嵌的情况（比如放一个 Card 里面再嵌套 Table），建议用 > 来精确指定对应的子 Table。https://stackblitz.com/edit/react-rvtz1f-tgwzvl?file=demo.tsx

不能用 > 这里还有2级div

目前这个样式容易误伤不是直接内嵌的情况（比如放一个 Card 里面再嵌套 Table），建议用 > 来精确指定对应的子 Table。https://stackblitz.com/edit/react-rvtz1f-tgwzvl?file=demo.tsx

你这个问题还没理解啊？这个 demo 没有写 {open && <div>111</div>}，所以复现不出来，需要在 Table 同级写个 div 来复现

afc163 · 2024-01-29T03:39:48Z

原来的写法用 only-child 限制了一部分误伤，但依然有误伤问题。如果去掉，误伤问题将被放大。

因此需要另外找一种限制场景的样式定制方式，避免 expand render 内其他无需右移的 Table 被影响到。

crazyair · 2024-01-29T03:43:07Z

原来的写法用 only-child 限制了一部分误伤，但依然有误伤问题。如果去掉，误伤问题将被放大。

因此需要另外找一种限制场景的样式定制方式，避免 expand render 内其他无需右移的 Table 被影响到。

之前只是对 ant-table 进行了 margin 现在依然是对 ant-table 进行 margin 没有改变，只是之前 ant-table-wrapper 必须是 only-child，现在不管 <Table /> 是不是一个，最后也都只是给 ant-table 元素 margin

afc163 · 2024-01-29T03:45:09Z

必须是 only-child 就是希望避免一部分场景的误伤，意思是如果里面不是直接放一个 Table，那很有可能用户是有自己的样式需要，不需要做默认边距调整。当然 only-child 并不准。

crazyair · 2024-01-29T03:47:42Z

必须是 only-child 就是希望避免一部分场景的误伤，意思是如果里面不是直接放一个 Table，那很有可能用户是有自己的样式需要，不需要做默认边距调整。当然 only-child 并不准。

最终是给 ant-table-wrapper 下面的 ant-table 加 margin，那下面如果有多个 Table 是不是都需要加 margin https://stackblitz.com/edit/react-rvtz1f-chjvps?file=demo.tsx

afc163 · 2024-01-29T03:55:52Z

这里情况很多，可能只能加属性来解决。

afc163 · 2024-01-29T03:56:42Z

我是希望一并将这个问题解决掉：https://stackblitz.com/edit/react-rvtz1f-tgwzvl?file=demo.tsx

crazyair · 2024-01-29T03:57:53Z

我是希望一并将这个问题解决掉：https://stackblitz.com/edit/react-rvtz1f-tgwzvl?file=demo.tsx

这个例子，我其实认为是合理的，因为当时就是只对 ant-table 加 margin，那也算 bug as feature 了。。

首先这个是问题吗，比如 expandedRowRender 就返回个 div 是否需要加 margin，如果能这样改是最好的

afc163 · 2024-01-29T04:09:32Z

           expandedRowRender: () => (
              <>
                <Table.ExpandColumnPlacehoder /> // 这个用来解决左侧内容对齐问题。
                <Table columns={columns} dataSource={data} />
              </>
            ),

先抛一个想法。

feat: done

7b0f3e9

Merge remote-tracking branch 'origin/master' into fix-47189

0b02bad

afc163 reviewed Jan 28, 2024

View reviewed changes

crazyair added 2 commits January 29, 2024 10:39

feat: >

b6dd2a7

feat: 移除 >

83c6e79

crazyair marked this pull request as draft January 30, 2024 08:13

afc163 closed this Feb 2, 2024

afc163 deleted the fix-47189 branch February 8, 2024 05:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: There are style issues with Table and other elements under Table expand #47190

fix: There are style issues with Table and other elements under Table expand #47190

crazyair commented Jan 27, 2024

stackblitz bot commented Jan 27, 2024

github-actions bot commented Jan 27, 2024 •

edited

github-actions bot commented Jan 27, 2024 •

edited

github-actions bot commented Jan 27, 2024 •

edited

codesandbox-ci bot commented Jan 27, 2024 •

edited

codecov bot commented Jan 27, 2024 •

edited

afc163 Jan 28, 2024

crazyair Jan 28, 2024

crazyair commented Jan 28, 2024

afc163 commented Jan 29, 2024 •

edited

crazyair commented Jan 29, 2024 •

edited

afc163 commented Jan 29, 2024 •

edited

crazyair commented Jan 29, 2024

afc163 commented Jan 29, 2024 •

edited

crazyair commented Jan 29, 2024

afc163 commented Jan 29, 2024

afc163 commented Jan 29, 2024

crazyair commented Jan 29, 2024 •

edited

afc163 commented Jan 29, 2024

fix: There are style issues with Table and other elements under Table expand #47190

fix: There are style issues with Table and other elements under Table expand #47190

Conversation

crazyair commented Jan 27, 2024

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

stackblitz bot commented Jan 27, 2024

github-actions bot commented Jan 27, 2024 • edited

Visual Regression Report for PR #47190 Passed ✅

github-actions bot commented Jan 27, 2024 • edited

github-actions bot commented Jan 27, 2024 • edited

size-limit report 📦

codesandbox-ci bot commented Jan 27, 2024 • edited

codecov bot commented Jan 27, 2024 • edited

Codecov Report

afc163 Jan 28, 2024

Choose a reason for hiding this comment

crazyair Jan 28, 2024

Choose a reason for hiding this comment

crazyair commented Jan 28, 2024

afc163 commented Jan 29, 2024 • edited

crazyair commented Jan 29, 2024 • edited

afc163 commented Jan 29, 2024 • edited

crazyair commented Jan 29, 2024

afc163 commented Jan 29, 2024 • edited

crazyair commented Jan 29, 2024

afc163 commented Jan 29, 2024

afc163 commented Jan 29, 2024

crazyair commented Jan 29, 2024 • edited

afc163 commented Jan 29, 2024

github-actions bot commented Jan 27, 2024 •

edited

github-actions bot commented Jan 27, 2024 •

edited

github-actions bot commented Jan 27, 2024 •

edited

codesandbox-ci bot commented Jan 27, 2024 •

edited

codecov bot commented Jan 27, 2024 •

edited

afc163 commented Jan 29, 2024 •

edited

crazyair commented Jan 29, 2024 •

edited

afc163 commented Jan 29, 2024 •

edited

afc163 commented Jan 29, 2024 •

edited

crazyair commented Jan 29, 2024 •

edited