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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Fixed image preview in a nested pop-up where z-index Settings did not meet expectations #45979

Merged
merged 2 commits into from
Nov 21, 2023

Conversation

kiner-tang
Copy link
Member

@kiner-tang kiner-tang commented Nov 21, 2023

[中文版模板 / Chinese template]

🤔 This is a ...

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

🔗 Related issue link

fix #45975

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Fixed image preview in a nested pop-up where z-index Settings did not meet expectations
🇨🇳 Chinese 解决了图像预览在嵌套弹框中中 z-index 设置不符合预期

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

🚀 Summary

🤖[deprecated] Generated by Copilot at d93d306

Added z-index management for the Image component with a preview feature. Used the useZIndex hook to assign z-index values to the image preview elements and updated the rc-image dependency to support the zIndex prop. Added a test case for the useZIndex hook with the Image component.

🔍 Walkthrough

🤖[deprecated] Generated by Copilot at d93d306

  • Update rc-image dependency to use the latest version that supports the zIndex prop for the PreviewGroup component (link)
  • Import and use useZIndex hook in Image component to get the z-index value for the preview element based on the ImagePreview consumer and the optional zIndex prop from the preview object (link, link, link)
  • Pass the z-index value to the PreviewGroup component as a prop to set the z-index of the preview element (link)
  • Update ZIndexConsumer type and consumerBaseZIndexOffset object to include the ImagePreview consumer and assign a base z-index offset value of 1 to it (link, link)
  • Add ImagePreview component to the useZIndex test file and import Image component and ImageProps type from antd to use them in the ImagePreview component (link, link, link)
  • Update getConsumerSelector function in the useZIndex test file to handle the ImagePreview consumer case and return the appropriate selector for the preview element based on the root class name (link)

Copy link

stackblitz bot commented Nov 21, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Contributor

github-actions bot commented Nov 21, 2023

Preview Is ready

Copy link

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages Version New capabilities Transitives Size Publisher
rc-image 7.4.0 None +0 137 kB

Copy link
Contributor

github-actions bot commented Nov 21, 2023

size-limit report 📦

Path Size
./dist/antd.min.js 321.54 KB (+106 B 🔺)
./dist/antd-with-locales.min.js 367.19 KB (-68 B 🔽)

Copy link

codesandbox-ci bot commented Nov 21, 2023

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 29db8b6:

Sandbox Source
antd reproduction template (forked) Configuration
strange-benz-mwt6h9 Issue #45975

Copy link

codecov bot commented Nov 21, 2023

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (e778066) 100.00% compared to head (29db8b6) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##            master    #45979   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          700       700           
  Lines        11849     11851    +2     
  Branches      3158      3159    +1     
=========================================
+ Hits         11849     11851    +2     

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

@zombieJ zombieJ merged commit ef9971c into master Nov 21, 2023
93 checks passed
@zombieJ zombieJ deleted the fix-image-preview-z-index-in-nested-modal branch November 21, 2023 07:53
@zombieJ zombieJ mentioned this pull request Nov 22, 2023
16 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image preview 的zindex在多层Modal中层级错误被遮住了
3 participants