coderabbitai[bot]
commented
2 days ago Walkthrough
The pull request introduces several changes across multiple files, primarily adding a new dependency for Tailwind CSS merging and enhancing component functionality. The Box and Flex components are refactored to use forwardRef, allowing them to accept and forward refs. A new utility function cn is introduced for merging class names, accompanied by tests to validate its functionality. Additionally, the Toolbar component is enhanced with state management to apply a shadow effect on scroll.
Changes
| File | Change Summary |
|---|---|
app/client/package.json |
Added dependency: "tailwind-merge": "^2.5.4" |
app/client/packages/design-system/ads/src/Box/Box.tsx |
Refactored Box component to use forwardRef, updated method signature. |
app/client/packages/design-system/ads/src/Flex/Flex.tsx |
Refactored Flex component to use forwardRef, updated method signature. |
app/client/packages/utils/src/cn/cn.ts |
Added utility function cn for merging class names. |
app/client/packages/utils/src/cn/cn.test.ts |
Introduced test suite for cn function with multiple test cases. |
app/client/packages/utils/src/cn/index.ts |
Added export for cn function from ./cn module. |
app/client/packages/utils/src/index.ts |
Added export statement: export * from "./cn"; |
app/client/src/IDE/Structure/Toolbar.tsx |
Added state management for shadow effect on scroll, updated component structure. |
Assessment against linked issues
| Objective | Addressed | Explanation |
|---|---|---|
| Remove bottom border of toolbar (#37578) | ❌ | The changes do not include any modifications to remove the bottom border. |
| Add shadow on scroll (#37578) | ✅ | The implementation of state management for shadow effect on scroll addresses this requirement. |
Possibly related PRs
- #33228: Adds a new dependency for Tailwind CSS, potentially relevant to UI changes in tabs.
- #33536: Addresses UI updates for the Tabs component, which may relate to the new Tailwind CSS dependency.
- #33703: Refactors menu components, possibly utilizing the new Tailwind CSS styling.
- #35059: Fixes alignment for tabs, which may benefit from the new styling capabilities introduced.
Suggested labels
Bug, IDE Product, IDE Pod, skip-changelog
Suggested reviewers
- hetunandu
🎉 In the code we weave, a new style to achieve,
With Tailwind's grace, our components embrace.
Refactors in play, for Flex and Box today,
Shadows on scroll, making UI whole!
Tests to ensure, thecnfunction's pure,
Enhancements abound, in this PR we've found! 🌟
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
albinAppsmith
github-actions[bot]
Description
This PR have following changes to IDE toolbar
Fixes #37578
Automation
/ok-to-test tags="@tag.Sanity"
:mag: Cypress test results
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
Release Notes
New Features
cnfor merging class names, including support for Tailwind CSS classes.Toolbarcomponent with scroll-based shadow effects for improved visual feedback.Improvements
BoxandFlexcomponents to support ref forwarding, increasing their flexibility in usage.Testing
cnfunction to ensure reliable class name merging behavior.Dependencies
tailwind-mergelibrary to enhance styling capabilities.