search

carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://carbon-for-ibm-products.netlify.app/
Apache License 2.0
89 stars 127 forks source link

preview.js keeps appending `dev-prefix--` on re-renders #5383

Closed AustinGitHub closed 1 month ago

AustinGitHub commented 1 month ago

https://github.com/carbon-design-system/ibm-products/assets/10100397/11b858f1-fbfc-4a0c-b3ec-e33fad1cab8d

annawen1 commented 1 month ago

Hi @AustinGitHub, I'm not seeing this issue on my end locally - can you provide the exact steps to replicate the bug? Thanks!

AustinGitHub commented 1 month ago

Yes, all I did was keep saving file inside of something like InlineEditCell.js and I had a console log at the preview.js for the pkg-prefix value.

When we keep saving, it does re-render auto refresh so the preview.js keeps getting called which therefore keeps appending the prefix over again

AustinGitHub commented 1 month ago

@annawen1 were you able to reproduce it? Thanks!

annawen1 commented 1 month ago

@AustinGitHub hmm I followed the steps you provided and not seeing the issue occurring - I see the prefix console.logged once when storybook is loaded and that's it; I don't see it being console.logged with each save

AustinGitHub commented 1 month ago

I will get a new video and link here

AustinGitHub commented 1 month ago

Screen Recording 2024-06-11 at 10 25 53 AM

Here is a gif I took since video was too large (Gif sped up a bit to meet 10mb file size) . Maybe some code changes went in to fix on inlineEditCell.js but I do see it still occur inside of preview.js which is still related to this issue.

Following that, if I did save in preview.js and then inside of inlineEditCell.js it messes up the UI because the class names get messed up

https://github.com/carbon-design-system/ibm-products/assets/10100397/a910e7ec-f98b-4eab-a763-8f3b74da8b99

annawen1 commented 1 month ago

So I'm able to see the issue on my end now, but only if I do a save in the preview.js file - otherwise saving from other component files doesn't trigger a re-render of the preview.js and there's no style issues as the prefix remains the same.