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#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 -->
## 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
- I added `--provider-width` CSS variable to the provider, which we get
with the help of [ResizeObserver
hook](https://github.com/jaredLunde/react-hook/tree/master/packages/resize-observer),
the variable is calculated through
[debounces](https://github.com/jaredLunde/react-hook/tree/master/packages/debounce)
every 100 ms.
- Styles for typography are now calculated only through CSS
- Split useFluidTokens hook into several, now there are separate hook
for sizing, spacing and typography
- Create a separate folder for hooks in the theme package
#### PR fixes following issue(s)
Fixes#29177
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/7778c5a0-9ed9-4f9c-a2b6-787784ed3e1f
#### Type of change
- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced fluid sizing, spacing, and typography hooks for responsive
design adjustments.
- Added global font stack utility for consistent typography across
platforms.
- Enhanced theming capabilities with new hooks and utilities.
- **Improvements**
- Updated `ThemeProvider` to support new styling hooks and responsive
design features.
- Refined typography utilities for dynamic class name generation based
on design tokens.
- **Documentation**
- Added comments to clarify the use of `className` and `style`
properties in `ThemeProviderProps`.
- **Refactor**
- Streamlined token access with updated `TokensAccessor` class.
- Consolidated typography and font metric types for better type safety
and clarity.
- **Bug Fixes**
- Fixed modal handling in `ComplexForm` component with improved state
management and accessibility.
- **Breaking Changes**
- Removed exports of deprecated typography module and fluid token
module.
- Changed public interface for theming hooks, which may affect existing
consumers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
## Description
Add WDS Modal component
#### PR fixes following issue(s)
Fixes#28463
#### Media
https://github.com/appsmithorg/appsmith/assets/11555074/38871bdb-32ec-48c6-878d-75c831057b69
#### Type of change
- New feature (non-breaking change which adds functionality)
## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [ ] Jest
- [ ] Cypress
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
## 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
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
## 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
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
- bump storybook version
- move stories to storybook package
- add dimensions for testing viewports
- improve some stories and types for argTable
#### PR fixes following issue(s)
Fixes#25534
#### 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
- [x] Manual
- [ ] 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
---------
Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
## Description
Fix the use of theme props in Storybrook.
#### PR fixes following issue(s)
Fixes#25684
#### 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
- [ ] 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
Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
## Description
The first part of ButtonGroup component fixes. #25500
- Add stubs for *bdOn* tokens
- Add borders for ButtonGroup component
- Add stories fixes
Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
## Description
- Add fluid root unit
- Add fluid tokens for typography, spacing and sizing
- Add docs about Theme
- Typography now works by creating a class at the provider level
- Update styled component version. Add PickRename interface to work with
[transient
props](https://styled-components.com/docs/api#transient-props)
- Remove the direct use of rootUnit and replace it with sizing tokens
- Get rid of some unit test because new version of styled components
doesn't work with Jest. Fortunately, we have visual tests.
#### PR fixes following issue(s)
#24295
#### 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
- [ ] 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
---------
Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
