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
