/ok-to-test tags="@tag.Widget"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
- **New Features**
- Introduced a custom widget with enhanced console logging and
communication capabilities.
- Added a configuration system for widget properties, including
visibility, style settings, and autocomplete functionality.
- Implemented a responsive design for the custom widget with dynamic
loading events and error handling.
- Expanded widget mapping to include the new custom widget type.
- Added support for multiple code templates (React, Vue, Vanilla JS) for
custom widget creation.
- Introduced a custom hook for managing widget height based on component
sizes and embedding status.
- **Bug Fixes**
- Resolved various issues related to event handling and message passing
between the widget and parent context.
- **Documentation**
- Added comprehensive comments and structure to configuration files for
better clarity and usability.
- **Style**
- Included a CSS reset stylesheet for consistent styling across
browsers.
- Introduced new CSS classes for improved widget styling.
- Enhanced styling rules to manage pointer events during widget
resizing.
- **Tests**
- Developed a test suite to ensure the reliability of the widget's
functionality and event handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12194686716>
> Commit: a757240165ea8d2730d6b6f2574b2c1c7335fada
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12194686716&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget`
> Spec:
> <hr>Fri, 06 Dec 2024 08:28:58 UTC
<!-- end of auto-generated comment: Cypress test results -->
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
- 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
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
**Typography**
- Move typography to the provider.
- Add context for the theme provider
- Move `fontFaces` styles to the provider
**Tooltip**
- Add `isRounded` check for the tooltip (shift for the arrow)
- Fix the position of the arrow in the tooltip
**Tokens**
Move `rootUnit` from `sizing` since this is a common value and is used
not only for sizing. We will do the sizing iteration separately, if
necessary.
**Theming package**
Theming package refactoring. So now we have 4 folders (color, theme,
token, and typography) with related files
#### PR fixes following issue(s)
Fixes#21927
#### Type of change
- 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
- [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
- [ ] 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
tl;dr Smoother fallbacks when we're failing APCA contrast check as a
border for the seed (more chroma, closer to the neutral lightness)
Fixes#22630
## Media
New on the left, current on the right
https://github.com/appsmithorg/appsmith/assets/80973/b13122c8-9159-4337-ae77-4dfa2df2151d
## Type of change
- 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)
## How Has This Been Tested?
- Manual
### Test Plan
Initial POC refinement, no testing necessary
## 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
## Description
tl;dr Preserving more color in fgAccent when the seed doesn't pass the
contrast check, more saturated and pure color for better harmony. Also
fixed `fg` that missed a return for achromatic seeds rule.
Fixes#22699
## Media
New on the left, current on the right
https://github.com/appsmithorg/appsmith/assets/80973/e4731b10-fa4c-45bb-a0e1-9591a9bbce2a
## Type of change
- 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)
## How Has This Been Tested?
- Manual
### Test Plan
Initial POC refinement, no testing necessary
## 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
## Description
tl;dr Fixed APCA contrast checks for both light and dark modes (detailed
info in the ticket). Refined how we pick shade or tint for `fgOnAccent`.
Fixes#23218
## Type of change
- Bug fix (non-breaking change which fixes an issue)
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
- Manual
### Test Plan
Initial POC refinement, no testing necessary
## 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
## Description
1. Move everything related to client from app folder to client folder
(`.yarn`, `yarn.lock`, package.json, .gitignore)
2. Move `ast` and `rst` to client packages
3. Fix running scripts in packages
4. Add running unit tests in packages in CI
TODO: It is necessary to consider enabling the `nmHoistingLimits:
workspaces` option, since now all packages are hoisted to the root,
there may be issues with dependencies in workspaces. Also, there is a
possibility of implicit use of packages.
https://yarnpkg.com/configuration/yarnrc#nmHoistingLimits
#### PR fixes following issue(s)
Fixes#23333
#### Type of change
- Chore (housekeeping or task changes that don't impact user perception)
## Testing
#### How Has This Been Tested?
- [x] Manual
- [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
- [ ] 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
Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
## Description
tl;dr Fixed APCA contrast checks and logic for `bdNeutral`, fixed
`bdAccent` check too (see also #23218 for more stuff to fix). Adjusted
gradations of hover for the color to make it visible in both modes.
Fixes#22823
## Media
New on the left, current on the right (using the latest DP instead of
release deploy, since it's failing at the moment of creation of this PR)
https://github.com/appsmithorg/appsmith/assets/80973/cfcb7aa7-17cd-454d-a452-779efba20158
## Type of change
- 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)
## How Has This Been Tested?
- Manual
### Test Plan
Initial POC refinement, no testing necessary
## 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
---------
Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
## Description
tl;dr Slightly darker hover for dark seeds, overall refinements in the
medium, special exceptions for very light yellows. Minor fixes in
utility functions.
Fixes#22921
## Media
New on the left, current on the right
https://user-images.githubusercontent.com/80973/236816955-2be0773f-2c51-4e53-9e61-844a61ad7f2c.mov
## Type of change
- 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)
## How Has This Been Tested?
- Manual
### Test Plan
Initial POC refinement, no testing necessary
## 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
## Description
Removed redundant props from the button and improved the component for
testing the color generation algorithm
Fixes#22286
Media
<img width="1002" alt="Снимок экрана 2023-05-03 в 18 34 20"
src="https://user-images.githubusercontent.com/11555074/235965384-d59347a5-a752-4f95-a419-5b4deb8f055c.png">
## 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
- [ ] 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
Using the Сolor object directly in the theme classes will simplify the
code and remove redundant functions. Also we'll be able to use LCH
values for each color token.
Fixes # (issue)
#22897
## Type of change
> Please delete options that are not relevant.
- 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. Provide
instructions, so we can reproduce.
> Please also list any relevant details for your test configuration.
> Delete anything that is not important
- Manual
## 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>
## Description
tl;dr Gradated hover and active manipulation (more for darker colors,
less for lighter), inverted rules for very light seeds
Fixes#22713
## Media
New on the left, current on the right
https://user-images.githubusercontent.com/80973/234889970-05792d7c-e5c7-49b0-80a2-6c9b31d2751d.mov
## Type of change
- 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)
## How Has This Been Tested?
- Manual
### Test Plan
Initial POC refinement, no testing necessary
## 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
## Description
tl;dr Slightly darker canvas background for very light seeds. It is
still perceptually light mode, but now `bgAccent` doesn't need to be
dark/dirty to stay visible against app background.
Fixes#22568
## Media
New on the left, current on the right
<img width="2560" alt="Screenshot 2023-04-25 at 13 33 25"
src="https://user-images.githubusercontent.com/80973/234264228-907d43a5-f816-4700-9b98-b34d86b38b4e.png">
<img width="2560" alt="Screenshot 2023-04-25 at 13 33 55"
src="https://user-images.githubusercontent.com/80973/234264240-c688848c-e153-418b-9417-d770eb400ea0.png">
## Type of change
- 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)
## How Has This Been Tested?
- Manual
### Test Plan
Initial POC refinement, no testing necessary
## 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
## Description
tl;dr No longer adding parasitic chroma in achromatic seeds, better
middle in yellows and reds, non-muddy `active` derivatives.
Fixes#22512
## Media
New on the left, current on the right
<img width="2560" alt="Screenshot 2023-04-20 at 11 35 16"
src="https://user-images.githubusercontent.com/80973/233324936-ea7898e6-ca3b-475e-aa86-1c3d7e735871.png">
<img width="2560" alt="Screenshot 2023-04-20 at 11 37 10"
src="https://user-images.githubusercontent.com/80973/233325429-8abbaf64-c8ce-4eaf-8831-4fc6c2705808.png">
## Type of change
- 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)
## How Has This Been Tested?
- Manual
### Test Plan
Initial POC refinement, no testing necessary
## 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
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
## Description
- TokensAccessor improvement. The dependence on default values has been
removed, now what we pass to the input is what we get at the output.
- The themes are placed in a separate class and added tagging for it.
- The theme settings in storybook have been moved to the panel, color
input from the keyboard is now available
- The Chroma is controlled only for non achromatic colors.
## Type of change
> Please delete options that are not relevant.
- Chore (housekeeping or task changes that don't impact user perception)
## How Has This Been Tested?
- Manual
## 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
---------
Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
