You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The arrow buttons were plain divs passed to react-slick. Slick clones them and adds currentSlide / slideCount props, which React was complaining about that they aren't valid DOM attributes.
So I have now wrapped the arrows in a small CarouselArrow component that filters those out before spreading the rest onto the div.
Also fixed another issue, wherein setting empty content on the arrows didn't actually hide them, because slick still draws a 20x20 absolute-positioned click target.
Now we set arrows: false on slick when both prevButton and nextButton are empty. Anyone passing slickProps.arrows explicitly will still get the value.
Screenshot
Before
Warnings related to props
After
No warnings
The carousel doesn't leave invisible click areas at the edges
Note
Low Risk
Low risk: small, localized change to Carousel arrow rendering and react-slick configuration; main risk is minor behavior differences when consumers override slickProps.arrows.
Overview
Fixes Carousel arrow rendering to avoid React DOM warnings by wrapping react-slick arrow elements in a CarouselArrow component that strips Slick-injected props (currentSlide, slideCount).
Also disables Slick arrows entirely when both prevButton and nextButton content are empty, preventing invisible click targets from being rendered. Bumps @builder.io/widgets version to 2.1.1.
Reviewed by Cursor Bugbot for commit 91d9945. Bugbot is set up for automated code reviews on this repo. Configure here.
Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.
This PR includes no changesets
When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types
@floating-dynamo question: which sdks will this affect? both gen1 and gen2?
This change is related to the widgets package.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
floating-dynamo
requested review from
AishwaryaParab,
anaghav2023 and
midhunadarvin
Description
Screenshot
Before
Warnings related to props
After
No warnings
The carousel doesn't leave invisible click areas at the edges
Note
Low Risk
Low risk: small, localized change to
Carouselarrow rendering andreact-slickconfiguration; main risk is minor behavior differences when consumers overrideslickProps.arrows.Overview
Fixes
Carouselarrow rendering to avoid React DOM warnings by wrappingreact-slickarrow elements in aCarouselArrowcomponent that strips Slick-injected props (currentSlide,slideCount).Also disables Slick
arrowsentirely when bothprevButtonandnextButtoncontent are empty, preventing invisible click targets from being rendered. Bumps@builder.io/widgetsversion to2.1.1.Reviewed by Cursor Bugbot for commit 91d9945. Bugbot is set up for automated code reviews on this repo. Configure here.