## Automation
/ok-to-test tags="@tag.Sanity"
### 🔍 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/12396717822>
> Commit: c556bda0ecbae89388821185ab86d340c553bc1e
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12396717822&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Wed, 18 Dec 2024 16:46:31 UTC
<!-- 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**
- Updated titles for various components in Storybook for improved
readability (e.g., "NumberInput" to "Number Input").
- Introduced a new ESLint rule to enforce Title Case formatting for
Storybook titles.
- **Bug Fixes**
- Enhanced error handling and validation for Storybook titles through
the new ESLint rule.
- **Documentation**
- Added test cases for the new ESLint rule to validate title formats in
Storybook configurations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Added daterpicker component along with other components needed for it
like Calendar andTimeField
Datepicker
Calendar
Timefield
/ok-to-test tags="@tag.Anvil"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
- **New Features**
- Introduced a `Calendar` component for date selection and display.
- Added a `DatePicker` component for selecting dates and times with
enhanced error handling.
- Launched a `TimeField` component for time input with optional prefix
and suffix.
- Updated `TextField` component replacing the previous `TextInput` for
improved usability.
- **Bug Fixes**
- Enhanced styling and responsiveness of input components.
- **Documentation**
- Added Storybook stories for `Calendar`, `DatePicker`, and `TimeField`
components to showcase functionalities and configurations.
- **Chores**
- Refactored imports to utilize the new `TextField` component across
various widgets.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11970103158>
> Commit: a1a552cb0bfdc9754341de5db0a6d8b142479083
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11970103158&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 22 Nov 2024 10:01:23 UTC
<!-- end of auto-generated comment: Cypress test results -->
Fixes the API for modal for setting modal.
/ok-to-test tags="@tag.Anvil"
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11479189189>
> Commit: 1a07d20439ef71515a8246cc1065af60bf54f07a
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11479189189&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Wed, 23 Oct 2024 12:09:48 UTC
<!-- end of auto-generated comment: Cypress test results -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new `size` prop for the Modal component, allowing for
flexible sizing options (e.g., small, medium, large).
- Added `overlayProps` for enhanced customization of the Modal's overlay
properties.
- **Bug Fixes**
- Removed the outdated `dataAttributes` prop, streamlining the Modal
configuration.
- **Documentation**
- Updated examples to reflect the new prop structure for the Modal
component.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
/ok-to-test tags="@tag.Anvil"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new `ChatInput` component for enhanced user input in chat
interfaces, featuring structured input fields and dynamic height
adjustments.
- Added a customizable `Input` component for both single-line and
multi-line text entry, with support for password visibility and loading
states.
- Launched a `TextAreaInput` component that integrates loading states
and optional prefix/suffix elements for a versatile text area
experience.
- **Improvements**
- Enhanced input components with new interfaces for better customization
options and shared properties.
- **Bug Fixes**
- Resolved issues related to input sizing and alignment, ensuring a
smoother user experience.
- **Documentation**
- Expanded documentation to include details on the new input components
and their usage examples.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11251960399>
> Commit: dc87d2de1213d23fdda1f52cee5b346d68627263
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11251960399&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Wed, 09 Oct 2024 10:49:28 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Description
Added ESLint rule to force blank lines between statements.
Fixes #`Issue Number`
_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.All"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> 🔴🔴🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10924926728>
> Commit: 34f57714a1575ee04e94e03cbcaf95e57a96c86c
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10924926728&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.All
> Spec:
> The following are new failures, please fix them before merging the PR:
<ol>
> <li>cypress/e2e/Regression/ClientSide/Anvil/AnvilModal_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInlineButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilParagraphWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilStatsWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchGroupWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilSwitchWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilTableWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilToolbarButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilZoneSectionWidgetSnapshot_spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Wed, 18 Sep 2024 16:33:36 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
---------
Co-authored-by: Valera Melnikov <valera@appsmith.com>
## Description
Added styles for input to the combobox
Separate reused components(FieldDescription, FieldError, FieldLabel,
FieldListPopover)
Fixes#36224
## 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/10888601720>
> Commit: 7ef81de082771d0345478f5cf21ce7fadcc83547
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10888601720&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 16 Sep 2024 17:33:23 UTC
<!-- 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
## Release Notes
- **New Features**
- Added a more comprehensive set of button size examples to the
`Button.stories.tsx` file.
- Introduced a new `FieldDescription` component in the `ComboBox.tsx`
file to handle field descriptions.
- **Styling Improvements**
- Refined the spacing, padding, and text size for the `Button` component
based on its size.
- Enhanced the visual feedback for checkboxes in invalid and selected
states in the `Checkbox` component.
- Simplified the CSS structure and improved the visual states of the
`ComboBox` component.
- **Refactor**
- Replaced legacy components in the `ComboBox` with more standardized
design system components for improved consistency.
- Removed the `ListBoxItem` component, indicating a change in the list
box rendering approach.
- Narrowed the allowed sizes for the `ComboBox` component, excluding
"xSmall" and "large" sizes.
- **Chores**
- Removed the `ErrorMessage` component and its associated export in the
`index.ts` file.
- Added a `verbatimModuleSyntax` property to the `tsconfig.json` file,
potentially affecting module handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
/ok-to-test tags="@tag.Widget"
## 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 #`Issue Number`
_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=""
### 🔍 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/10414775054>
> Commit: 445dec9a23df945a5b2a965ce39b8369641bd2b8
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10414775054&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget`
> Spec:
> <hr>Fri, 16 Aug 2024 05:45:49 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
[](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
