[](https://workerb.linearb.io/v2/badge/collaboration-page?magicLinkId=9GEnyEC)
## Description
> [!TIP]
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._
Fixes#33740
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9643638292>
> Commit: bcc4bbddaa50b0be16e41a3a51db4f6abe732e79
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9643638292&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced test cases for Anvil modals, covering interactions like
opening, closing, drag and drop operations, and handling modal
functions.
- **Bug Fixes**
- Enhanced testing capabilities with `data-testid` attributes for better
identification and testing of components, particularly in detached
widget drop areas.
- **Refactor**
- Updated the `Modal` component to use `dataAttributes` instead of
`size` prop to streamline attribute handling.
- Dynamic generation of modal class names based on properties for better
styling and consistency.
- **Style**
- Adjusted styling for SVG elements within the `EntityExplorer`
component, specifically modifying the height and width properties.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
- Remove headless radio and use react-aria component instead
- Create ErrorMessage component
Fixes#27677
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9567388261>
> Commit: 62d1153caa8bf03d827f88593c9dfaf3121091ee
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9567388261&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added `ErrorMessage` component for displaying error messages with
specific styling.
- Introduced `isDisabled` prop for `Label` and `ToggleGroup` components.
- Updated `RadioGroup` to accept an items array for easier
configuration.
- **Bug Fixes**
- Improved conditional rendering in `Label` component to prevent issues
when `text` and `contextualHelp` are both falsy.
- **Refactor**
- Removed `Radio` component export from design system.
- Restructured import statements and prop declarations for `Checkbox`
and `RadioGroup`.
- **Style**
- Updated styles for `RadioGroup` and `ToggleGroup` components for
better state handling (disabled, hovered, selected).
- **Documentation**
- Updated Storybook stories for `RadioGroup` to reflect changes in
component usage.
- **Tests**
- Adjusted `RadioGroup.test.tsx` to test new items array prop.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
- Remove headless checkbox and switch use react-aria component instead
- Add Label component
- Now `ToggleGroup` is used instead of `SwitchGroup` and
`CheckboxGroup`, since they are essentially the same component.
**I'll create another one PR to refactor the radioGroup.**
Fixes#27677
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9485370398>
> Commit: f2557233978da533b9ab856335a8191b4226dba5
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9485370398&attempt=1"
target="_blank">Click here!</a>
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced `ToggleGroup` component with various features for improved
user interaction.
- **Enhancements**
- Updated `Radio`, `Checkbox`, and `Switch` components for better
functionality and styling alignment.
- Added `labelPosition` options to `Radio` and `Checkbox` components for
flexible label positioning.
- Enhanced `ContextualHelp` component with a new `slot` prop for more
customization.
- Improved `Select` component to use `Label` directly, optimizing
rendering.
- **Bug Fixes**
- Adjusted logic for `WDSSwitchWidget` to ensure correct validity
handling.
- **Styling**
- Various styling adjustments across multiple components for consistent
design.
- **Tests**
- Updated test cases for the `Checkbox` component to reflect recent
changes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
1. WDS menu component has been completely refactored. WDS headless
component has been removed, we use `react-aria-components` instead. The
menu component now has the ability to use submenus and icons for items.
2. Rename components `ActionGroup` to `ToolbarButtons and `ButtonGroup`
to `InlineButtons`
3. Make API of the `ToolbarButtons`, `Menu`, `InlineButtons`, `Select`
consistent.
4. Cosmetic refactoring of `ToolbarButtons` and `InlineButtons` and
related widgets.
Fixes:
#32299#32109
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9210315418>
> Commit: b11c0029c656b4fbf61b9760d16f77564478d053
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9210315418&attempt=1"
target="_blank">Click here!</a>
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Pawan Kumar <pawan@appsmith.com>
## Description
- Update Storybook and related dependencies
- Delete the stories for old widget components
- Rewrite stories for new widgets(mdx to tsx)
Note: local chromatic doesn't work because of this
https://github.com/storybookjs/storybook/issues/22531
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced new component stories across various packages to enhance
design system documentation and user experience.
- **Documentation**
- Updated `.gitignore` files to optimize version control settings for
Storybook and build logs.
- **Refactor**
- Modified UI element positioning in Storybook theming for improved
layout management.
- **Style**
- Adjusted CSS properties for the `Select` component to ensure better
visual presentation.
- **Chores**
- Updated dependencies and scripts in package configurations to maintain
up-to-date development tools.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#31020
We now have options to express elevation with backgrounds plus shadows,
borders, or a combination of both.
https://github.com/appsmithorg/appsmith/assets/80973/6ab62bc7-b2e9-4de5-9c6a-d5447b591b14
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced new methods in both dark and light mode themes to calculate
elevation border color.
- **Refactor**
- Restructured the `Elevation` testing story to offer a display of
borders, shadows, and combined effects.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#31054
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Updated styling across various components to align with the new
elevation theme, enhancing visual consistency.
- **Refactor**
- Adjusted border-radius properties in CSS styles for multiple
components to utilize `--border-radius-elevation-3` for a cohesive look.
- **Chores**
- Enhanced the `Elevation` component to use specific elevation-related
border radius values for improved styling.
- **Style**
- Tweaked background color and border-radius properties in the
`Container` component based on `elevatedBackground` and `elevation`
props.
- **Documentation**
- Updated access to `borderRadius` property in the theme object for
`TooltipContent.tsx` to `theme?.borderRadiusElevation?.[1].value`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Closes#29731
tl;dr nicer, softer shadows, some refinement on elevated backgrounds
Comparison for various seeds (old on top, refined on the bottom):
Dark mode:
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **Style**
- Fine-tuned the color calculations in both dark and light mode themes
to enhance visuals of elevated levels.
- Adjusted the `Elevation` test story for better evaluation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#28443Fixes#27866
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced `IconSelectControlV2` for enhanced icon selection with
keyboard navigation and state updates.
- Added new `iconStyle` theme property for users to define icon styles
globally.
- Implemented dynamic icon loading with fallback options, improving icon
management.
- **Enhancements**
- Simplified icon usage across various components like `Button`,
`IconButton`, `Menu`, `ModalHeader`, `TextInput`, and more by directly
using icon names.
- Enhanced `Tag` component to use a generic `Icon` component for the
remove action.
- **Style Updates**
- Added CSS classes for resizing, boundary display, and pointer event
handling.
- Updated icon size definitions using CSS custom properties.
- **Bug Fixes**
- Fixed icon-related issues in `Button`, `ActionGroup`, `Menu`, and
`TextInput` components to ensure proper icon display.
- **Documentation**
- Updated storybook and test cases to reflect new icon selection and
usage.
- **Refactor**
- Refactored theme and token management to include `iconStyle` for
consistent icon theming.
- Refined the `ButtonGroupWidget` and `MenuButtonWidget` to use the new
icon selection mechanism.
- **Chores**
- Cleaned up unused icon imports and components across the codebase to
streamline the icon system.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#29426
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced `isLoading` state for action items to provide user feedback
during actions.
- Added `onAction` callback to menu items for improved interaction
handling.
- **Enhancements**
- Enhanced action group visibility based on orientation.
- Streamlined modal control flow with keys for different modal sizes.
- Implemented `htmlFor` attribute in checkboxes for better form
accessibility.
- **Refactor**
- Transitioned from `ButtonGroup` to `ActionGroup` across various
components for consistency.
- Refactored component structures to integrate new `ActionGroup` and
`Item` components.
- Updated widget configuration and properties to accommodate new
features and styles.
- **Style Updates**
- Added new CSS rules for buttons with `data-density="compact"`.
- Removed outdated CSS properties to align with updated design system.
- **Documentation**
- Updated story examples to reflect changes in modal and action group
usage.
- **Bug Fixes**
- Fixed association issues between labels and checkbox inputs.
- **Configuration**
- Introduced `anvilConfig` for widget size properties and updated
property pane configuration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes#29421
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Enhanced the visual contrast in Dark Mode by adjusting background
elevation colors for improved readability.
- Refined Light Mode background colors for better visual hierarchy based
on lightness conditions.
- Updated shadow effects on UI components to provide a more pronounced
depth and focus.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Add story for elevation
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced new elevation color calculation methods for both Dark and
Light mode themes, enhancing the visual hierarchy in the user interface.
- **Documentation**
- Added Storybook documentation for the `Elevation` component, allowing
for interactive testing and showcasing of elevation styles.
- **Style**
- Implemented new `Elevation` component with nested styling to represent
different UI layers effectively.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
- I added `--provider-width` CSS variable to the provider, which we get
with the help of [ResizeObserver
hook](https://github.com/jaredLunde/react-hook/tree/master/packages/resize-observer),
the variable is calculated through
[debounces](https://github.com/jaredLunde/react-hook/tree/master/packages/debounce)
every 100 ms.
- Styles for typography are now calculated only through CSS
- Split useFluidTokens hook into several, now there are separate hook
for sizing, spacing and typography
- Create a separate folder for hooks in the theme package
#### PR fixes following issue(s)
Fixes#29177
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/7778c5a0-9ed9-4f9c-a2b6-787784ed3e1f
#### Type of change
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced fluid sizing, spacing, and typography hooks for responsive
design adjustments.
- Added global font stack utility for consistent typography across
platforms.
- Enhanced theming capabilities with new hooks and utilities.
- **Improvements**
- Updated `ThemeProvider` to support new styling hooks and responsive
design features.
- Refined typography utilities for dynamic class name generation based
on design tokens.
- **Documentation**
- Added comments to clarify the use of `className` and `style`
properties in `ThemeProviderProps`.
- **Refactor**
- Streamlined token access with updated `TokensAccessor` class.
- Consolidated typography and font metric types for better type safety
and clarity.
- **Bug Fixes**
- Fixed modal handling in `ComplexForm` component with improved state
management and accessibility.
- **Breaking Changes**
- Removed exports of deprecated typography module and fluid token
module.
- Changed public interface for theming hooks, which may affect existing
consumers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
## Description
Add WDS Modal component
#### PR fixes following issue(s)
Fixes#28463
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/38871bdb-32ec-48c6-878d-75c831057b69
#### Type of change
- New feature (non-breaking change which adds functionality)
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
