feat(Carousel): Auto hide navigation buttons if total slides are less than visible items

[tejas-raskar]

Description

Screencast.from.2024-10-31.21-17-03.mp4

The navigation buttons do not appear when the total slides to display are less than the visible items. In the demo video there are 3 total slides in the carousel.

Changes

• Created a boolean shouldShowControls that checks if totalSlides > visibleItems
• showControls is passed as a prop to the Controls component that carries this value
• if true, we render the navigation controls

Additional Information

Implements #1833

Component Checklist

• Update Component Status Page
• Perform Manual Testing in Other Browsers
• Add KitchenSink Story
• Add Interaction Tests (if applicable)
• Add changeset

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8543f1f

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

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

✅ PR title follows Conventional Commits specification.

[codesandbox-ci]

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 8543f1f:

Sandbox	Source
razorpay/blade: basic	Configuration

[tejas-raskar]

Any updates on this PR?

[anuraghazra]

@tejas-raskar This is expected behaviour from design side, we do not want to show controls if slides are same as visibleItems.

• This case should not exist because if your slides are same as visibleItems it sort of ceases to becomes carousel at that point.