fix: Click on Show more on ModalActions breaks the app

[OtavioStasiak]

Proposed changes

The Actions component violated the Rules of Hooks when toggling "Show more". When showMoreVisible changed, the number of rendered elements changed (5 vs 8), causing hooks to be called in different orders between renders and triggering React warnings.

Issue(s)

https://rocketchat.atlassian.net/browse/SUP-975

How to test or reproduce

• Storybook story demonstrates the fix with 8 buttons (first 5 visible, last 3 hidden initially);
• No React Hooks warnings in console;
• "Show more" functionality works correctly;
• All hooks are called in consistent order on every render;

Screenshots

Storybook Show More button	Storybook after click on Show More

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

Release Notes

• New Features

  • Added "Show more" functionality for actions in modals, initially displaying up to 5 items with a button to reveal additional actions.

• Tests

  • Added test story for the new "Show more" behavior in modals.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Modified the Actions component to render all elements always and hide overflow items via CSS instead of conditional rendering, maintaining hook call order with a 5-item display limit and "show more" button. Added a new story demonstrating the expanded actions behavior with 8 items.

Changes

Cohort / File(s)	Summary
Actions component rendering logic app/containers/UIKit/Actions.tsx	Changed from conditional in-place rendering to always rendering all elements wrapped in View components. Elements beyond the 5-item limit are visually hidden via a new hidden style. Introduces maxVisible = 5, shouldShowMore flag, and guard returning null when data is missing. Show_more button now conditionally displayed only when shouldShowMore && showMoreVisible.
Story additions app/containers/UIKit/UiKitModal.stories.tsx	Added new story component ModalActionsWithShowMore demonstrating the actions block with 8 buttons and introductory/concluding descriptive text. Includes story metadata assignment ModalActionsWithShowMore.storyName = 'Modal - Actions with Show More'.
Dependencies package.json	Minor version or dependency adjustments (+29/-7 lines).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• diegolmello

Poem

🐰 We render all with CSS flair,
Five items shown with hidden care,
The hooks stay safe, in order they dance,
"Show more" appears at the right glance,
A story blooms to show it all! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the main bug being fixed: a crash that occurs when clicking 'Show more' on ModalActions. This aligns with the changeset, which refactors the rendering logic to preserve hook call order and prevent the app from breaking.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix.show-more-actions-breaks-the-app

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}