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>
Closes#31284
1. Decreased overall chroma everywhere except for actual `bgAccent`.
2. Couldn't reproduce the too-light heading text issue in Storybook,
`fg*` colors are all appropriately dark. Perhaps, a wrong token is
applied in the editor?
Before / After comparisons for warm and cold seeds:
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **Style**
- Enhanced contrast in both dark and light mode themes through
adjustments in chroma and lightness values.
- Improved color accuracy in the design system themes for better
representation.
- Updated color values in test scenarios for more precise RGB
representation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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 -->
Closes#30890
This is not a full refinement, because we set height/block-size
explicitly for some of our widgets with styles [such as
these](0d16dc0382/app/client/packages/design-system/widgets/src/components/Button/src/styles.module.css (L171)).
As such, changes to e.g. inner spacing only affect the horizontal/inline
size and not the vertical/block one since the block padding doesn't
affect an element that has block size set explicitly.
Ideally, we should switch to implicit sizing to fully embrace
multi-dimensional sizing and density theming control over the widget
dimensions (i.e. control it with padding that consumes the tokens of the
inner spacing scale). If that is not feasible I'd like to know why and
how we can closely tie together the sizing scale with inner spacing.
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>
Fixes#30896
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Refactor**
- Reordered typography variants for improved consistency in design.
- **New Features**
- Enhanced feature flag checks to directly return `true` for specific
flags, improving feature toggling.
- **Style**
- Adjusted the order of style options in the widget property pane for
better usability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Added recommended rules for testing library
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added `data-testid` attributes across various components for improved
test identification.
- **Tests**
- Enhanced test cases with asynchronous handling (`async`/`await`) for
more reliable user interaction simulations.
- Transitioned to using `getByTestId` instead of `queryByTestId` for
better assertion reliability in tests.
- Added `await` before the `userEvent.click(el)` statement in the
ChartWidget test file.
- Updated the destructured variable names from `queryByTestId` to
`getByTestId` in the DividerWidget test file for improved clarity.
- Added an import for `screen` from "@testing-library/react" and updated
element querying in the TabsWidget test file.
- **Chores**
- Updated ESLint configurations to include testing-library plugins and
rules, improving code quality and consistency in test files.
- Removed unnecessary `cleanup` function calls after tests, following
best practices for test cleanup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#30439
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced feature flag checks to directly return `true` for specific
flag names, improving efficiency.
- Updated the `ButtonListControl` component to support separators
between buttons for better visual distinction.
<!-- 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 -->
Get rid of fluid tokens. I left the original scale function unchanged, I
use the min value for tokens.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Refactor**
- Simplified fluid sizing calculations across the design system for
consistency and performance.
- Improved state management in ThemeProvider for more responsive
theming.
- **Style**
- Updated Modal component padding for better visual spacing.
- **Chores**
- Updated various Storybook configurations and styling for better
performance and usability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Fixes for the modal widget:
1. Added support for clickOutside. The modal is closed only by clicking
on the backdrop overlay. A click on the widget name has been added to
the exceptions for close event.
2. Fixed the positioning of the modal. Now it is located in the center
of the provider.
3. For the correct positioning of the modal, it was necessary to make
fixes for canvas height. The fixes also affect fixed and autolayout.
#### PR fixes following issue(s)
Fixes#30788
Also fixed this
https://www.notion.so/appsmith/Canvas-gets-cut-off-on-preview-mode-525b95f26c6e4644bf5ab7389c02e434
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/6db9ecde-595b-4fa4-a21b-9ed08930d58f
#### Type of change
> Please delete options that are not relevant.
- 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
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Popover and Modal components now support dismissing by clicking
outside. Custom logic and selectors can be specified to control this
behavior.
- **Enhancements**
- Simplified logic for closing Modals by directly setting open state.
- Enhanced Modal styling options, allowing for better customization of
width and height.
- ErrorBoundary component now supports custom styles.
- **Refactor**
- Removed redundant code and unused properties across various components
and layout systems.
- Simplified state management and styling adjustments in editor
components.
- **Style**
- Updated Modal component styles for improved layout and responsiveness.
- **Chores**
- Codebase cleanup including removal of unused classes, variables, and
adjustments for more efficient layout rendering.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#30423
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced the `StatBoxComponent` for displaying statistical
information with flexibility in presentation, including icons, labels,
values, and sublabels.
- Expanded the application's widget offerings by adding the
`WDSStatBoxWidget`.
- **Enhancements**
- Improved flexibility and customization of the Flex component with the
introduction of the `isInner` property.
- Enhanced feature flag checks for quicker enablement of specific
functionalities.
- **Documentation**
- Added comprehensive configurations and documentation for the
`WDSStatBoxWidget`, including property pane settings, default
configurations, and meta information.
- **Style**
- Implemented new styling for the `StatBoxComponent`, defining its
appearance including border, width, and background.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#30428
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced the `KeyValue` widget, enhancing the app's widget library
with key-value input functionality.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes#29758
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Updated the app's accent color to improve visual consistency and
enhance user interface aesthetics.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Pawan Kumar <pawan.stardust@gmail.com>
Fixes#30426
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced layout configuration for various widgets including Button,
Checkbox, Currency Input, Icon Button, Input, Menu Button, Paragraph,
Phone Input, Radio Group, Switch, and Table, providing better
responsiveness and design consistency.
- **Bug Fixes**
- Fixed the `componentHeight` calculation in the Table widget for
improved stability.
- **Refactor**
- Streamlined auto layout configuration across multiple widgets to
simplify the user interface.
- **Style**
- Updated default widget dimensions for a more cohesive user experience.
- **Chores**
- Cleaned up unused properties and imports to optimize widget
performance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Valera Melnikov <valera@appsmith.com>
## Description
This PR primarily adds the modal widget to WDS.
The following changes were made:
1. WidgetNameCanvas now listens to modal body scrolls to position widget
name components correctly
2. Modal Widget is rendered as a detached widget that is outside of the
layout flow of the main canvas
3. Main container resizer now has a higher z-index to show even if the
modal is open in the preview mode
4. Widget selection flow in Anvil layout system has been modified to be
handled in a central location (`AnvilMainCanvas`)
5. Modal widget's type in modal sagas are selected via a selector that
checks for the feature flag.
6. Modal widget has its own preset that (at present) is similar to the
Main container's layout preset
#### PR fixes following issue(s)
Fixes#28588Fixes#28328Fixes#27459
#### Media
https://github.com/appsmithorg/appsmith/assets/103687/bf350be4-2202-49f3-a860-3e38681ab32e
#### Type of change
- New feature (non-breaking change which adds functionality)
- This change requires a documentation update
## Testing
>
#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
## Checklist:
#### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] 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
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced Modal components with additional styling and customization
options.
- Introduced a new event type for modal submission actions.
- Added a `--on-canvas-ui-z-index` CSS variable for improved layering
control.
- Implemented a new method for widget focus management in the editor.
- **Improvements**
- Modal components now use context hooks for close actions.
- Improved the handling of detached widgets in various layout systems.
- Simplified the drag-and-drop state management for widgets.
- Upgraded the visual presentation of the widget drop area.
- Enhanced widget selection with new custom event dispatching.
- Updated the modal widget configuration with default settings and
property pane structure.
- **Bug Fixes**
- Fixed an issue with modal scrolling to behave consistently with the
main container.
- Addressed a problem where the `id` was not found during layout element
position updates.
- **Style**
- Adjusted modal overlay positioning and content width with new CSS
standards.
- Updated zIndex references to use CSS variables for consistent styling.
- **Refactor**
- Reorganized the `Widgets` array into categorized groups for better
clarity.
- Simplified the `modalPreset` function's parameters and layout
declaration.
- **Documentation**
- Added default values for feature flags in the documentation.
- **Chores**
- Altered feature flags to enable new functionalities by default.
- **Tests**
- No visible changes to end-users in this category.
- **Revert**
- No visible changes to end-users in this category.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Preet Sidhu <preetsidhu.bits@gmail.com>
Co-authored-by: Valera Melnikov <valera@appsmith.com>
## Description
- Added tokens to the anvil config
- Removed redundant functions for calculating widget sizes
- I cleaned the widget configs
- Added a zero-state to the input component
- Optimised the responsiveness of the action group component
https://github.com/appsmithorg/appsmith/assets/11555074/e9e0513a-cf3f-42ef-b960-820bb4980858
#### PR fixes following issue(s)
Fixes#29507
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- 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
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] 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
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced `MenuItem` display with additional text attribute for better
accessibility.
- Improved user interaction with `TextArea` and `TextInput` components
through more effective handling of default and read-only states.
- Extended `Flex` component to include click event handling
capabilities.
- Refined `ActionGroup` styling and dynamic sizing for a more polished
UI experience.
- **Enhancements**
- Updated `Button` styling to ensure consistency across different screen
sizes.
- Optimized layout and styling of `Menu` items for improved visual
hierarchy and responsiveness.
- **Refactor**
- Simplified `WidgetProvider` and `AnvilEditorWidget` configurations for
more streamlined layout management.
- Refined `ZoneColumn` rendering for better alignment with layout system
principles.
- **Bug Fixes**
- Fixed minimum width calculation in `useZoneMinWidth` hook to ensure
correct layout behavior.
- Corrected `AnvilDSLTransformer` padding value for consistent widget
spacing.
- **Documentation**
- Removed redundant Storybook addon to streamline developer experience.
- **Style**
- Adjusted CSS for various components to align with updated design
system standards.
- **Tests**
- Updated widget property pane configuration tests for better coverage
and reliability.
- **Chores**
- Cleaned up unused imports and methods across multiple widget
components for improved code maintenance.
<!-- 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 -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Updated theming capabilities for a more consistent and customizable
user interface.
- **Style**
- Enhanced Modal widget styling for better visual integration within the
app.
- **Documentation**
- Improved Storybook previews with custom font settings for a more
accurate representation of components.
<!-- 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 -->
Fixes#29446
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced `WDSHeadingWidget` for enhanced heading elements.
- Launched `WDSParagraphWidget` for improved paragraph formatting.
- **Refactor**
- Transitioned from `WDSTextWidget` to more specific text-related
widgets: `WDSHeadingWidget` and `WDSParagraphWidget`.
- **Style**
- Updated widget styles to reflect new static color assignments and
semantic changes.
- **Documentation**
- Updated widget names in configuration files to align with new naming
conventions.
- **Chores**
- Removed unused color configuration code from `styleConfig.ts`.
- **Tests**
- Adjusted tests to accommodate new widget structure and naming.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Add readonly mode for input component and widgets
#### PR fixes following issue(s)
Fixes#29145
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/2d42a2bf-603b-4b30-a74c-6c1edd408216
#### Type of change
> Please delete options that are not relevant.
- 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
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a "Read-only" mode for input fields, enabling users to view
data without the ability to modify it.
- **Enhancements**
- Improved input components to respect both disabled and read-only
states.
- Updated widget properties to include read-only configurations.
- **Style Updates**
- Standardized padding across various components to use spacing
variables for consistency.
- **Documentation**
- Added "Read-only" property documentation to relevant component
interfaces and configurations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#29744
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Updated the Dark Mode theme with enhanced shadow elevations for better
visual depth.
- Refined the Light Mode theme by adjusting transparency levels for a
cleaner appearance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Closes#29423
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Updated the visual styling of the TagGroup component, including
adjustments to tag height, padding, and margin for a cleaner and more
streamlined appearance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#29362
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Documentation**
- Updated the `TextInput` component documentation to reflect the new
`startIcon` property change.
- **Style**
- Adjusted CSS selectors for improved targeting of start and end icons
within text input fields.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#29425
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced an icon alongside menu items, with positioning options.
- Implemented a new `ActionGroup` component to manage a group of actions
with overflow behavior and keyboard navigation.
- Added new `ActionGroupItem` and `MoreIcon` components for action
groups.
- **Enhancements**
- Improved resize handling in the `ThemeProvider` for conditional
rendering based on measurements.
- Updated button styles to adjust minimum inline sizing for better
layout.
- **Documentation**
- Created Storybook stories to showcase `ActionGroup` configurations and
usage.
- **Style**
- Modified list item styling in the `Menu` component to incorporate
icons.
- **Tests**
- Added mock for `useDebounce` hook in `AppsmithIDE` tests.
- Updated Cypress test assertions to accommodate changes in layout
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Valera Melnikov <valera@appsmith.com>
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 -->
## Description
Fix checkbox and button border radius
https://github.com/appsmithorg/appsmith/assets/11555074/8b7cc892-eaa2-4b06-9745-40410cd1d92b
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Updated the default font stack to include 'sans-serif' for better
cross-platform consistency.
- **Style**
- Adjusted button padding for improved visual alignment and spacing.
- Enhanced checkbox design with responsive border-radius for a more
modern look.
- **Documentation**
- Updated theme settings to reflect the new "Pill" option value for
border-radius, ensuring design consistency across components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Fixes#29134
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced `TagGroup` and `Tag` components with features like label,
description, error message, and tag removal options.
- Added new stories for `TagGroup` to demonstrate various configurations
and use cases.
- **Enhancements**
- Updated `Switch` component with improved validation logic.
- Enhanced `TextArea` initialization to handle undefined default values
more gracefully.
- Added `validationState` property to `HelpText` and `Field` components
to support form validation states.
- **Style Updates**
- Implemented new CSS styles for `TagGroup` and `Tag` components to
improve UI consistency and interactivity.
- **Documentation**
- Expanded Storybook documentation with examples and usage guidelines
for `TagGroup` and `Tag` components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
useState is calling the initialisation function unnecessarily for every
render, We will call it only during state initialisation.
#### PR fixes following issue(s)
Fixes#29491
#### 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
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Tests**
- Improved stability of list widget server-side pagination tests by
introducing wait times.
- **Refactor**
- Optimized theme state initialization in `useTheme` to enhance
performance.
- **Bug Fixes**
- Adjusted handling of moment objects in evaluation workers to ensure
accurate serialization of updates.
- **Documentation**
- Updated test documentation to reflect changes in moment object
handling and serialization.
(Note: Duplicate entries for `useTheme` have been consolidated in the
Refactor category to maintain clarity and avoid repetition.)
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Add fg and bg colors to provier for inheritance in child components
Before:
After:
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new theming capability to dynamically adjust color
schemes.
- **Refactor**
- Enhanced theming logic to improve responsiveness to color mode
changes.
- **Style**
- Updated visual styling to ensure consistency across different themes.
- **Documentation**
- Adjusted documentation to reflect new theming functions and usage.
- **Chores**
- Streamlined theming properties for better maintainability.
<!-- 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
Adds WDS Menu Button Widget.
#### PR fixes following issue(s)
Fixes#28864
> if no issue exists, please create an issue and ask the maintainers
about this first
>
>
#### Media
> A video or a GIF is preferred. when using Loom, don’t embed because it
looks like it’s a GIF. instead, just link to the video
>
>
#### Type of change
> Please delete options that are not relevant.
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Chore (housekeeping or task changes that don't impact user perception)
- This change requires a documentation update
>
>
>
## 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
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] 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
- [ ] My code follows the style guidelines of this project
- [ ] 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
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new `Menu` component with customizable color options for
items.
- Added dynamic styling for menu items based on color attributes.
- Implemented a new `WDSMenuButtonWidget` with configurable properties
and styles.
- Expanded the property pane with new configurations for menu items and
buttons.
- **Enhancements**
- Improved menu placement options and handling of colors within the Menu
component.
- Enhanced the `MenuButtonWidget` with additional properties for better
customization.
- **Bug Fixes**
- Fixed incorrect component naming for `MenuList` to ensure consistency.
- **Documentation**
- Updated Menu component stories to reflect new color handling features.
- **Refactor**
- Streamlined export statements for Menu components to simplify imports.
- Organized property pane configurations into separate modules for
clarity.
- **Style**
- Added new styles for the search bar and menu items for a more polished
UI.
- **Tests**
- No visible changes to end-users.
- **Chores**
- No visible changes to end-users.
- **Revert**
- No visible changes to end-users.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Valera Melnikov <valera@appsmith.com>
## 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
Implement WDS components and tokenst at header of table widget
#### PR fixes following issue(s)
Fixes#28391
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/456babee-ff8f-4771-8867-f44ae5bbe236
#### 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
## Description
- Add the ability to use a dialog without a trigger component.
- Add the ability to pass a triggerRef to the component that helps to
set the correct and aria attributes to trigger.
#### PR fixes following issue(s)
Fixes#28814
#### Type of change
- New feature (non-breaking change which adds functionality)
#### 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
## 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
## Description
Add WDS menu component
#### PR fixes following issue(s)
Fixes#28392
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/c79a4872-3241-456f-82cb-5c1fa4cd6c9e
#### 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
## Description
Adds WDSButtonGroup Widget.
#### PR fixes following issue(s)
Fixes#27748
#### Type of change
- 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
- [ ] Manual
- [ ] JUnit
- [ ] Jest
- [ ] 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
- [ ] My code follows the style guidelines of this project
- [ ] 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
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---------
Co-authored-by: Pawan Kumar <pawan.stardust@gmail.com>
## Description
1. Supply additional classes / styles for MainCanvas through its
parents.
#### 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
- [ ] 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
- [x] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---------
Co-authored-by: Aswath K <aswath.sana@gmail.com>
Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: rahulramesha <rahul@appsmith.com>
Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
## Description
Updating strings to sentence case and moving brand colors logic update
to tenant reducer
#### PR fixes following issue(s)
Fixes [#28235](https://github.com/appsmithorg/appsmith/issues/28235)
#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## Testing
#### How Has This Been Tested?
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [x] 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
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
## Description
Fixes#28203
- Borders are added to widgets separately now, as there is no resizer in
Anvil
- Fix main container jump when hovering over the main container resizer
- Add height 100% to themeprovider so that the layout preset for main
canvas can render correctly
- Stop widgets from focusing in preview mode
- Prevent AutoHeight Sagas from running in Anvil
- Prevent Auto Layout sagas from running in Anvil
## Description
Replace emotion/sheet to emotion/css.
**Motivation**
During performance testing, it was revealed that creating a separate
class for each component is slow.
Rendering 10k elements
<img width="269" alt="Снимок экрана 2023-10-05 в 13 34 12"
src="https://github.com/appsmithorg/appsmith/assets/11555074/a881b188-b7d6-4fff-bc79-e7a81e37ffac">
As part of the task, an approach using styles through attributes was
also tested, it works well, but we still need to create a separate class
in runtime if we work with container queries. Because of this, I think
it's best to use a ready-made solution from emotion/css, since it
creates only one class out of the box for elements with the same styles,
which allows to render elements with good performance.
Rendering 80k elements
#### PR fixes following issue(s)
Fixes#27750
#### Type of change
- 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
- [ ] 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
Bumps [postcss](https://github.com/postcss/postcss) from 8.4.30 to
8.4.31.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/postcss/postcss/releases">postcss's
releases</a>.</em></p>
<blockquote>
<h2>8.4.31</h2>
<ul>
<li>Fixed <code>\r</code> parsing to fix CVE-2023-44270.</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/postcss/postcss/blob/main/CHANGELOG.md">postcss's
changelog</a>.</em></p>
<blockquote>
<h2>8.4.31</h2>
<ul>
<li>Fixed <code>\r</code> parsing to fix CVE-2023-44270.</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="90208de880"><code>90208de</code></a>
Release 8.4.31 version</li>
<li><a
href="58cc860b4c"><code>58cc860</code></a>
Fix carrier return parsing</li>
<li><a
href="4fff8e4cdc"><code>4fff8e4</code></a>
Improve pnpm test output</li>
<li><a
href="cd43ed1232"><code>cd43ed1</code></a>
Update dependencies</li>
<li><a
href="caa916bdcb"><code>caa916b</code></a>
Update dependencies</li>
<li><a
href="8972f76923"><code>8972f76</code></a>
Typo</li>
<li><a
href="11a5286f78"><code>11a5286</code></a>
Typo</li>
<li>See full diff in <a
href="https://github.com/postcss/postcss/compare/8.4.30...8.4.31">compare
view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)
You can disable automated security fix PRs for this repo from the
[Security Alerts
page](https://github.com/appsmithorg/appsmith/network/alerts).
</details>
Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Shrikant Sharat Kandula <shrikant@appsmith.com>
#### PR fixes following issue(s)
Fixes#25500
#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)
#### 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
- [ ] 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
## Description
When admin has configured the branding color, on click of primary
button, still appsmith orange color was being rendered. This PR fixes
that issue and also added a fallback to handle the old customers who
already have a branding color. This fallback is required since the new
fix work only for people who choose brand color after this PR is merged.
Corresponding EE PR:
https://github.com/appsmithorg/appsmith-ee/pull/2182
#### PR fixes following issue(s)
Fixes#25446Fixes#27501
#### 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
- [ ] Jest
- [ ] 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
- [ ] My code follows the style guidelines of this project
- [ ] 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
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [x] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---------
Co-authored-by: Pawan Kumar <pawan.stardust@gmail.com>
## Description
Rewrite Text component to CSS modules
#### PR fixes following issue(s)
Fixes # (issue number)
#27479
#### Type of change
- 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
## 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
- [x] 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
## Description
Created and exported interfaces for the following flex properties:
1. AlignContent
2. AlignItems
3. AlignSelf
4. JustifyContent
5. JustifySelf
6. FlexDirection
7. FlexWrap
These interfaces will enable better type casting for Flex component
usage in client.
#### Type of change
- 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
- [ ] Jest
- [ ] Cypress
## Checklist:
#### Dev activity
- [ ] 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
## Description
Fix wds provider font family
#### Type of change
> Please delete options that are not relevant.
- 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
- [ ] 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
- [ ] 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
#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
Related #26018
Added tests for
- bgNeutralActive color
- bgNeutralSubtle color
- bgNeutralSubtleHover color
- bgNeutralSubtleActive color
- bgPositive color
- bgPositiveHover color
- bgPositiveActive color
- bgPositiveSubtle color
- bgPositiveSubtleHover color
- bgPositiveSubtleActive color
- bgNegative color
- bgNegativeHover color
- bgNegativeActive color
- bgNegativeSubtle color
- bgNegativeSubtleHover color
- bgNegativeSubtleActive color
- bgWarning color
- bgWarningHover color
- bgWarningActive color
- bgWarningSubtle color
- bgWarningSubtleHover color
- bgWarningSubtleActive color
## Description
Make eslint rules stricter for packages
#### Type of change
- 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
- [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
Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
