## Description
Memoising some computations related to WDS_TOOLBAR_BUTTONS_WIDGET
Fixes #`Issue Number`
## Automation
/ok-to-test tags="@tag.All"
### 🔍 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/10264040446>
> Commit: c15e274b718fc36f17b8f7edda4f23790b72f16d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10264040446&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 06 Aug 2024 10:43:05 UTC
<!-- 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
## Summary by CodeRabbit
- **Performance Enhancements**
- Optimized the `ToolbarButtons` component for improved efficiency by
utilizing the `useMemo` hook, reducing unnecessary calculations and
re-renders.
- Consolidated the computation of `sortedButtons` and `disabledKeys` in
`ToolbarButtonsComponent` for better performance and clarity.
- **Telemetry Integration**
- Added performance tracking capabilities to the `withWidgetProps`
higher-order component, enhancing observability of widget performance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Fixes#35296
## Automation
/ok-to-test tags="@tag.All"
### 🔍 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/10182307436>
> Commit: 8b0aa1a644769cd28161b92a21f7426d0d94cf4f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10182307436&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 31 Jul 2024 15:48:59 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
## Summary by CodeRabbit
- **New Features**
- Updated TypeScript dependency across multiple modules to support newer
features and improvements.
- Updated `colorjs.io` dependency in design system packages to enhance
functionality.
- **Bug Fixes**
- Enhanced type-checking and overall code quality through dependency
updates.
- Refined color values in both `LightModeTheme` and `DarkModeTheme` to
improve visual accuracy.
- **Chores**
- Improved flexibility in dependency management by allowing minor and
patch updates for TypeScript and `colorjs.io`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Upgrade Typescript from 4.9.5 to 5.4
Upgrading to 5.5 is not possible until we upgrade colors.js lib. It will
be done in separate PR
More details here
https://github.com/color-js/color.js/issues/560#issuecomment-2182819685
## Automation
/ok-to-test tags="@tag.All"
### 🔍 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/10163124159>
> Commit: 8d2e93f2e2913e715686ccb058d3efddd55aabc9
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10163124159&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 30 Jul 2024 14:11:42 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
## Summary by CodeRabbit
- **New Features**
- Updated TypeScript dependency to the latest version (5.4), enhancing
overall functionality with potential new features and improvements.
- **Improvements**
- Enhanced type safety by refining the `isString` function, allowing
better type inference and preventing runtime errors.
- Improved comments and annotations in the `indirectEval` function for
better clarity on its usage and intent.
- Corrected typographical errors in error handling logic across multiple
controllers, improving reliability in error messaging.
- Updated export style for `IconNames` to clarify its purpose as a type,
enhancing developer experience.
- **Configuration Changes**
- Updated Jest configurations to better support ECMAScript Modules
(ESM), improving compatibility and allowing for more flexible module
handling.
- Adjusted TypeScript configuration to enhance module handling and
compatibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Fix text wrapping into paragraph and heading widgets
## 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/10047055173>
> Commit: d0f7b27b1f329f3293ea20dc548f076e967874b4
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10047055173&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 22 Jul 2024 19:49:10 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**
- Introduced a new `wordBreak` property to the text component for
improved control over text wrapping and overflow.
- Enhanced the `WDSParagraphWidget` to utilize the new `wordBreak`
property, improving text layout and readability.
- **Bug Fixes**
- Corrected a typo in documentation for the `TextProps` interface to
enhance clarity.
- **Style**
- Modified CSS styles affecting text overflow behavior, enabling better
customization and responsive design.
<!-- 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 theme setting and snapshot verification for various widgets
in different modes (Canvas, Preview, Deploy).
- Added a new CSS rule to enhance the styling of input elements based on
specific conditions.
- **Refactor**
- Renamed existing snapshot verification methods to more descriptive
names across multiple widget snapshot files.
- Added methods to handle theme settings and detailed snapshot matching.
- **Tests**
- Enhanced testing functionality for widgets with updated methods for
snapshot verification across different themes.
These updates ensure more detailed and theme-specific snapshot testing
for various widget states, improving test coverage and accuracy, as well
as enhancing the layout consistency of input elements.
<!-- 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/10046186626>
> Commit: a6232ae795f77bd46bff4c854f46c5671a518ff6
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10046186626&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 22 Jul 2024 18:43:52 UTC
<!-- end of auto-generated comment: Cypress test results -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Co-authored-by: Valera Melnikov <valera@appsmith.com>
## 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="@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/9942515767>
> Commit: db1ef7c00e0caa0c433984a198d9e8059a7b609e
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9942515767&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 15 Jul 2024 16:12:38 UTC
<!-- 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**
- Enhanced icon library with new thematic icons and improved
accessibility features.
- Introduced a default option in dropdowns for color selection in the
property pane.
- **Bug Fixes**
- Corrected naming inconsistencies in icon entries.
- **Improvements**
- Streamlined color handling for icon and text components, enhancing
visual coherence.
- Update to the icon component's logic for improved maintainability and
clarity.
- **Documentation**
- Added comments for better understanding of the handling of type errors
in the icon component's story.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
1. Add scripts for local e2e testing in the docker container.
2. Add types for cypress-image-snapshot
In this PR, I also added the following PRS as they affect screenshot
tests as well. I did this to speed up the process and unblock the team.
#34528#34546#34676#34729#34638#34639#34511
To run E2E tests locally in docker, you need to do the following:
1. Run FE locally and prepare the tests for local launch. See the
instructions
[here](https://github.com/appsmithorg/appsmith/blob/release/contributions/ClientSetup.md).
2. Run `yarn cypress:snapshot:docker:build` — this will create a docker
container with the necessary environment.
3. Run `yarn cypress:snapshot:docker
"./cypress/e2e/Regression/ClientSide/Anvil/Widgets/*_spec.ts"
updateSnapshots=false`. Here we can use the path to a specific file, or
set `updateSnapshots=true` flag to update the screenshots.
## 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/9844579277>
> Commit: 75f26599b149f831051fbd631aaa059084b226dd
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9844579277&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 08 Jul 2024 18:37:36 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**
- Added support for image snapshot testing with the
`@types/cypress-image-snapshot` dependency.
- **Refactor**
- Updated test specifications by removing unnecessary
`triggerInputInvalidState()` calls.
- Reorganized and improved efficiency of image snapshot methods for
various devices.
- **Chores**
- Updated `Dockerfile` to configure the Cypress environment with
specific versions for dependencies.
- Changed import paths in `e2e.js` for better module resolution.
- **Style**
- Fixed a comment typo in Cypress plugin configuration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Co-authored-by: unknown <vadim@appsmith.com>
[](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>
/ok-to-test tags="@tag.Anvil"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced test cases for Anvil Button Widgets, including Canvas,
Preview, and Deploy modes.
- **Bug Fixes**
- Updated CSS and HTML selectors for better element targeting and
testing reliability.
- **Style**
- Improved styling logic for buttons in the InlineButtons component.
- **Chores**
- Added `data-testid` attributes for better test targeting.
- Refactored code for string concatenations and URL constructions in
DeployModeHelper.
<!-- 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/9597157402>
> Commit: c551705fe01aace94962fcc7fa91dff253136721
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9597157402&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
<!-- end of auto-generated comment: Cypress test results -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
- Add excludeFromTabOrder for WDS widgets
- WDS Table refactoring
Fixes#32369
## 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/9596169254>
> Commit: 25d5ef47520266d904c3c545940ad6009e7b2a8f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9596169254&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**
- Introduced the ability to exclude toolbar buttons from the tab order
for improved accessibility and user experience. This can be controlled
via the `excludeFromTabOrder` property.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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
Add hover and focus for WDS link component.
https://github.com/appsmithorg/appsmith/assets/11555074/51e50841-b347-4585-aa5a-2fd54e13cf06
## 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/9401315193>
> Commit: 1a10e18ab16d30be828eeb931a2d5c22448fa096
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9401315193&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
- **Style**
- Improved the appearance of links with new CSS properties, enhancing
hover and focus states for better user experience.
- **Refactor**
- Reordered JSX elements within the Link component for cleaner and more
maintainable code structure.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
- Creates a new property control for Modal widgets. `closeOnSubmit`.
- This property (default `true`) configures if the modal must close on
the submit button click.
Fixes#33240
## 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/9299980305>
> Commit: 59fc2957f0b4ff3c47788480b0d82adf99596265
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9299980305&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
## 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
Refactoring wds button component
## 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/8788334412>
> Commit: 3e11d5f7800eaf492cb42f049f42980ed33cd774
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8788334412&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
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced the design system by switching the `Button` component imports
to `react-aria-components` across various components for improved
accessibility and performance.
- **Style Updates**
- Revised multiple CSS properties across components, improving visual
consistency and user interface aesthetics.
- **Refactor**
- Updated various components to use `ForwardedRef<HTMLButtonElement>`
replacing previous ref types, aligning with modern React patterns and
improving component interoperability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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#32308
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced text styling in flex layouts to improve spacing and
alignment.
- Updated the WDSParagraphWidget to include a Flex container, enhancing
the structural layout and rendering of text elements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
Fixes#28466
## Automation
/ok-to-test tags=""
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.
<!-- 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 customizable `Select` component with enhanced dropdown
features including error messages, loading state, and contextual help.
- Added a new `className` prop to the `Button` component for custom
class name manipulation.
- **Enhancements**
- Updated the design system package to include exports for new
components like `Select` and `ContextualHelp`.
- Improved accessibility and cohesive user interface across components.
- **Bug Fixes**
- Corrected import paths for `ContextualHelp` in various components to
ensure consistent functionality.
- **Documentation**
- Updated component documentation to reflect new features and props.
- **Style Updates**
- Added comprehensive styles for the new `Select` component, including
form fields and error text styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced typography styling with dynamic font size adjustments.
- Introduced feature flag checks for new functionalities.
- Implemented `VirtualTableBody` for efficient data rendering.
- Added `onClickRow` functionality in table rows for improved
interactivity.
- Improved table accessibility with explicit cell roles.
- Added pagination controls refinement in table headers.
- **Refactor**
- Simplified table header and body component structures for better
maintainability.
- Streamlined feature flag usage for cleaner logic.
- Refined `WDSTableWidget` component by optimizing width calculations
and event handling.
- **Style**
- Introduced a new CSS module for comprehensive table styling.
- Removed outdated styling configurations to align with updated design
system.
- **Bug Fixes**
- Fixed accessibility issues by adding proper roles to table cells.
- **Chores**
- Removed unused functions and properties related to theme and styling
adjustments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
Fixed the alignment of the content inside the input
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced `prefix` and `suffix` props for better customization in
TextInput components, replacing `startIcon` and `endIcon`.
- Added examples for using menus as prefixes/suffixes and for type
password functionality in TextInput stories.
- Implemented loading indicator functionality with priority over icons
in TextInput.
- Added support for disabled and readonly states with icon prefixes and
suffixes in TextInput.
- **Bug Fixes**
- Adjusted styles for autofill, focus states, and padding in input
fields to improve user experience.
- **Documentation**
- Updated TextInput component documentation to reflect new `prefix` and
`suffix` props usage and examples.
- **Refactor**
- Removed `startIcon` and `endIcon` properties from TextInputProps and
updated rendering logic.
- Replaced `startIcon` with `prefix` in CurrencyInputComponent and
PhoneInputComponent.
- Changed `startIcon` and `endIcon` to `prefix` and `suffix` in
InputComponent.
- **Style**
- Removed specific styling for `[data-field-input-group]` affecting
display and alignment.
- Updated text-input module CSS to enhance the appearance of prefix and
suffix elements and small-sized input fields.
- **Chores**
- Added `MULTI_LINE_TEXT` constant to the `InputTypes` object.
- Updated the label for the "Icon" property in WDSInputWidget's
propertyPaneStyleConfig.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Adds WDS components in Table Header
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced utility functions for handling table data, including
downloading and transforming data into CSV or Excel formats.
- Added a new `TableHeader` component for the `WDSTableWidget` with
features like search, actions, adding new rows, and pagination.
- **Enhancements**
- Enhanced feature flag checks for "ab_wds_enabled" and
"release_anvil_enabled" to prioritize specific flags before general
lookup.
- Updated `ActionGroup` component to include a `size` property for the
`IconButton`.
- **Refactor**
- Removed redundant imports and renamed the `searchTableData` function
to `onSearch` across multiple components to streamline search
functionality.
- Updated the `useListState` call to suppress text value warnings,
improving code quality without altering functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
This PR adds styles for separator in the action group menu
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced menu items in the design system to support separators and
icons, improving visual organization and interaction.
- **Style**
- Updated styling for menu items with separators to improve visual
clarity.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
Plenty changes related to widgets alignment
1. Paragraph, button, inputs, single checkbox and switch widgets are
aligned along the baseline of the text content
2. The icons in the buttons and the single checkbox and switch are now
positioned absolutely so as not to affect the height of the components.
The height of the components now depends on text content.
3. All unnecessary paddings and borders in the layout have been removed:
- Canvas padding: `--outer-spacing-4`
- Gap between sections and zones: `--outer-spacing-4`
- Zone padding: `--outer-spacing-3`
- Gap between widgets: `--outer-spacing-3`
4. In widget selection styles replace `border` with `outline`, since the
`outline` one does not take space.
5. Add Changes to the flex-basis calculation method. Now the gap between
the zones is taken into account there.
6. Add a lot of small fixes related to the changes described above.
https://github.com/appsmithorg/appsmith/assets/11555074/b7c220eb-3e27-4039-9c15-6281bafe8008Fixes#29364
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!IMPORTANT]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8375537665>
> Commit: `f85b63c0a49f30b9762379c2f8c3bd38c7a8355f`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8375537665&attempt=2"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉
<!-- end of auto-generated comment: Cypress test results -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Improved handling of CSS variable values in Flex components.
- Enhanced styling and layout configurations for a better user
experience.
- **Bug Fixes**
- Fixed label positioning and styling issues in Checkbox and Switch
components.
- Adjusted padding, margin, and sizing for consistency and alignment.
- **Refactor**
- Enhanced flex layout handling and space distribution logic for
improved layout flexibility.
- **Style**
- Updated component styles for refined user interface aesthetics.
- **Chores**
- Updated feature flags and configurations for widgets and components to
enable new functionalities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#31899
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new hover outline color for input fields to enhance user
interaction.
- **Style**
- Updated hover outline colors for both Dark and Light modes to improve
visibility and aesthetics.
- **Tests**
- Adjusted tests to reflect new color values for hover states in both
Dark and Light themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#29365
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced label positioning for Checkbox, Radio, and Switch components
with "start" and "end" options.
- Introduced dynamic orientation for Checkbox and Radio groups based on
container size.
- Added new story for RadioGroup component to demonstrate vertical
orientation.
- **Style Updates**
- Updated CSS for Switch, Checkbox, and Radio components to align with
the new label positioning options.
- Improved field group styles with `flex-wrap` to accommodate various
layouts.
- **Refactor**
- Modified handling of `labelPosition` across components for consistency
and flexibility.
- Implemented `useGroupOrientation` hook for dynamic orientation
management.
- **Chores**
- Adjusted default configurations and property pane options for widgets
to align with new label positioning and orientation features.
- Added feature flag checks for specific functionalities to always
return `true`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Fixes the bug in inline button group where it button don't spread out
when the widget is selected.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Refactor**
- Simplified the `ButtonGroup` component's flex basis style to always be
`"100%"`.
- Streamlined the logic in the `useButtonGroup` function by removing the
`isMeasuring` property and focusing on orientation management.
- **New Features**
- Enhanced feature flag checks to directly return `true` for
"ab_wds_enabled" and "release_anvil_enabled" flags, improving feature
management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Improved styling isolation for text input elements to enhance visual
consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
- Fixed text input widget width
- Increased size of the separator for toolbarButtons
- Fixed widgets label
- Fixed behaviour for Boolean widgets. Removed Checkbox and Radio
labelPosition. Fixed width for these widgets
#### PR fixes following issue(s)
Fixes # (issue number)
#29088#31250
#### Type of change
- Bug fix (non-breaking change which fixes an issue)
## 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
- [x] 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
- [ ] 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
Fixes#31252
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Updated the design of the modal headers, including font weight and
variant adjustments.
- Enhanced spacing within modal components for improved visual
structure.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Fixes#30438
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new `ButtonGroup` component that manages groups of
buttons with customizable properties like color, size, and orientation.
- Added a `ButtonGroupItem` component for rendering buttons within the
`ButtonGroup`.
- Launched an "Inline Buttons" widget allowing users to configure a
group of buttons inline with various properties such as labels,
visibility, and icons.
- Enhanced icon loading with fallback styles for better spacing and
appearance.
- **Refactor**
- Updated various components (ActionGroup, Button, Menu) to use new
`ButtonGroupProps` and `ButtonGroupItemProps`, aligning with the new
`ButtonGroup` component structure.
- Renamed widget names and updated configurations to improve clarity and
consistency across the application.
- **Bug Fixes**
- Fixed feature flag checks to directly return `true` for specific
flags, ensuring feature availability checks are more efficient.
- **Documentation**
- Added comprehensive story and documentation for the `ButtonGroup`
component, showcasing its usage with different options.
- **Chores**
- Enhanced internal codebase by optimizing the `Icon` component
performance through memoization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
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#31329
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Adjusted the stacking order of elements in the design system to
enhance visual hierarchy.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
- Move canvas resizer by 1 DOM node higher.
- Used `contain: strict;` for modal styles.
**Before:**
**After:**
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Improved modal overlay containment with updated CSS properties.
- Enhanced page alignment with new centering style for the
`PageViewWrapper` component.
- **Refactor**
- Streamlined canvas viewport handling in the Widgets Editor for better
conditional styling.
- **Chores**
- Updated Cypress configuration to modify scroll behavior settings.
<!-- 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>
## Description
- Icon tokens now respond to changes to density and sizing in the theme.
Added the appropriate settings to the config as well
- Fixed the documentation and rendering of some stories in storybook.
- Fixed icon rendering
#### PR fixes following issue(s)
Fixes#30955
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/e0cd818f-9716-4887-9f5e-aaa3c3ab9e30
#### Type of change
- Bug fix (non-breaking change which fixes an issue)
- Chore (housekeeping or task changes that don't impact user perception)
## 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
- [x] Jest
- [x] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## 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
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced custom React hooks for dynamic icon sizing
(`useIconSizing`) and stroke width adjustments (`useIconDensity`).
- Revised `Dimension` component functionality with new token calculation
and user adjustments.
- **Refactor**
- Updated various type imports to improve consistency across theming
hooks.
- Simplified logic in detached widget hooks and removed unnecessary
styling logic in resizer components.
- **Style**
- Adjusted shadow colors and properties in CSS modules.
- Updated icon and button styling for better size and stroke width
management.
- **Documentation**
- Removed sections focusing on deprecated hooks and components in
storybook stories.
- **Chores**
- Changed favicon path in Storybook manager.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#30901
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced feature flag checks to always enable specific features
without checking flag values.
- Introduced dynamic sizing for widget icons and thumbnails in the
editor, improving visual consistency.
- Implemented new styling for text input elements to better adapt to
various container sizes.
- Added unique identifiers to improve testability of the widget sidebar.
- Introduced new SVG properties for widget thumbnails and icons,
enriching widget customization options.
- **Refactor**
- Adjusted gap spacing in the widget sidebar for a more compact layout.
- **Style**
- Updated text input styling to use flexible width for improved layout
responsiveness.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Co-authored-by: Valera Melnikov <valera@appsmith.com>
