## Description
Fixes#39900
| Before | After |
|--------|--------|
| <img width="746" alt="Screenshot 2025-04-04 at 12 28 54"
src="https://github.com/user-attachments/assets/8e36f87d-8340-4b83-92d4-9e3ff2525f4d"
/> | <img width="707" alt="Screenshot 2025-04-04 at 12 41 51"
src="https://github.com/user-attachments/assets/e786f8e8-0a7e-4a9c-8671-536962622ea2"
/> |
## Automation
/ok-to-test tags="@tag.Sanity"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
## Description
> [!TIP]
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._
Fixes #`Issue Number`
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._
## Automation
/ok-to-test tags="@tag.Sanity"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/14084583856>
> Commit: ea22c91b1c823c98e73471752381ce73a36e2061
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=14084583856&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Wed, 26 Mar 2025 14:14:38 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- An optional hint display in theme settings provides users with
additional guidance when enabled.
- The theming interface is now consistently available across all views.
- **Bug Fixes**
- Revised theme mode detection now accurately differentiates between
light and dark modes.
- **Style**
- Enhanced styling of color scheme controls improves label readability
and overall visual consistency.
- **Chores**
- Updated versioning for several dependencies to fixed versions to
ensure consistent behavior.
These improvements aim to deliver a more intuitive and reliable user
experience.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
> [!TIP]
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._
Fixes #`Issue Number`
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._
## Automation
/ok-to-test tags=""
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced a new slider component to the design system, expanding the
range of interactive UI elements available.
- **Chores**
- Enhanced the Storybook configuration to streamline dependency
management, contributing to a smoother development workflow.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Added daterpicker component along with other components needed for it
like Calendar andTimeField
Datepicker
Calendar
Timefield
/ok-to-test tags="@tag.Anvil"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
- **New Features**
- Introduced a `Calendar` component for date selection and display.
- Added a `DatePicker` component for selecting dates and times with
enhanced error handling.
- Launched a `TimeField` component for time input with optional prefix
and suffix.
- Updated `TextField` component replacing the previous `TextInput` for
improved usability.
- **Bug Fixes**
- Enhanced styling and responsiveness of input components.
- **Documentation**
- Added Storybook stories for `Calendar`, `DatePicker`, and `TimeField`
components to showcase functionalities and configurations.
- **Chores**
- Refactored imports to utilize the new `TextField` component across
various widgets.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11970103158>
> Commit: a1a552cb0bfdc9754341de5db0a6d8b142479083
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11970103158&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 22 Nov 2024 10:01:23 UTC
<!-- end of auto-generated comment: Cypress test results -->
/ok-to-test tags="@tag.Anvil"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
- **New Features**
- Introduced a new `Sheet` component for modal-like overlays, enhancing
content display.
- Added a `Sidebar` component for improved navigation and organization
within the design system.
- **Improvements**
- Enhanced styling and animations for the `Sheet` and `Sidebar`
components, providing a more interactive user experience.
- Updated dependencies to improve performance and accessibility.
- **Documentation**
- Added Storybook configurations for `Sheet` and `Sidebar` components,
showcasing their functionality and usage.
<!-- 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/11855312043>
> Commit: f8f4d2c836597b5ec316bec48579f4e39bb18387
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11855312043&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 15 Nov 2024 11:40:45 UTC
<!-- end of auto-generated comment: Cypress test results -->
/ok-to-test tags="@tag.Anvil"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced the `Avatar` component for displaying user avatars.
- Added the `Markdown` component for rendering Markdown content with
GitHub Flavored Markdown support.
- Enhanced `AIChat` component with a new modular input system and
improved message display.
- **Bug Fixes**
- Updated CSS for better styling consistency across components.
- **Refactor**
- Removed outdated components (`ChatDescriptionModal` and
`ThreadMessage`) to streamline the codebase.
- Simplified the structure of `AIChat` by incorporating new components.
- **Documentation**
- Updated Storybook stories for `AIChat`, `Avatar`, and `Markdown`
components to showcase new features.
<!-- 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/11320929997>
> Commit: db2bc5c9a0a0a65b3d9dd4f53e9f100beb3af3a7
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11320929997&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 14 Oct 2024 04:42:54 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Description
Added styles for input to the combobox
Separate reused components(FieldDescription, FieldError, FieldLabel,
FieldListPopover)
Fixes#36224
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10888601720>
> Commit: 7ef81de082771d0345478f5cf21ce7fadcc83547
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10888601720&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 16 Sep 2024 17:33:23 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Release Notes
- **New Features**
- Added a more comprehensive set of button size examples to the
`Button.stories.tsx` file.
- Introduced a new `FieldDescription` component in the `ComboBox.tsx`
file to handle field descriptions.
- **Styling Improvements**
- Refined the spacing, padding, and text size for the `Button` component
based on its size.
- Enhanced the visual feedback for checkboxes in invalid and selected
states in the `Checkbox` component.
- Simplified the CSS structure and improved the visual states of the
`ComboBox` component.
- **Refactor**
- Replaced legacy components in the `ComboBox` with more standardized
design system components for improved consistency.
- Removed the `ListBoxItem` component, indicating a change in the list
box rendering approach.
- Narrowed the allowed sizes for the `ComboBox` component, excluding
"xSmall" and "large" sizes.
- **Chores**
- Removed the `ErrorMessage` component and its associated export in the
`index.ts` file.
- Added a `verbatimModuleSyntax` property to the `tsconfig.json` file,
potentially affecting module handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
/ok-to-test tags="@tag.All"
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Introduced new hooks for icon management: `useIconDensity` and
`useIconSizing`.
- **Improvements**
- Refactored hooks to enhance performance by using `useMemo` instead of
state management, leading to more efficient calculations for icon size,
density, spacing, and typography.
- Streamlined theme management by consolidating logic and removing
unnecessary properties, improving clarity and maintainability.
- Optimized CSS class name management within the `useCssTokens` hook for
better performance.
- **Bug Fixes**
- Removed `fontFamily` property from various components, which may
affect text rendering but simplifies font management.
- **Documentation**
- Updated comments and documentation to reflect changes in typography
and theme 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/10786030048>
> Commit: a0d12586c130252d4164305c5293c1b6fb67b5eb
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10786030048&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Tue, 10 Sep 2024 06:00:30 UTC
<!-- end of auto-generated comment: Cypress test results -->
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
/ok-to-test tags="@tag.Widget"
## Description
> [!TIP]
> _Add a TL;DR when the description is longer than 500 words or
extremely technical (helps the content, marketing, and DevRel team)._
>
> _Please also include relevant motivation and context. List any
dependencies that are required for this change. Add links to Notion,
Figma or any other documents that might be relevant to the PR._
Fixes #`Issue Number`
_or_
Fixes `Issue URL`
> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._
## Automation
/ok-to-test tags=""
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10414775054>
> Commit: 445dec9a23df945a5b2a965ce39b8369641bd2b8
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10414775054&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Widget`
> Spec:
> <hr>Fri, 16 Aug 2024 05:45:49 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
---------
Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
## Description
Rename `design-system` package to `@appsmith/ads`
## Automation
/ok-to-test tags="@tag.All"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10319507327>
> Commit: 65d9664dd75b750496458a6e1652e0da858e1fc6
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319507327&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 09 Aug 2024 13:47:50 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
## Description
Update storybook and related packages
## Automation
/ok-to-test tags=""
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!CAUTION]
> If you modify the content in this section, you are likely to disrupt
the CI result for your PR.
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Updated Storybook and Vite dependencies to their latest versions,
enhancing performance and compatibility.
- **Bug Fixes**
- Minor bug fixes included with the update of Storybook dependencies
that improve stability and functionality.
These changes ensure a smoother development experience and leverage
improvements in the libraries used.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
Fixes#35296
## Automation
/ok-to-test tags="@tag.All"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10182307436>
> Commit: 8b0aa1a644769cd28161b92a21f7426d0d94cf4f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10182307436&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Wed, 31 Jul 2024 15:48:59 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Updated TypeScript dependency across multiple modules to support newer
features and improvements.
- Updated `colorjs.io` dependency in design system packages to enhance
functionality.
- **Bug Fixes**
- Enhanced type-checking and overall code quality through dependency
updates.
- Refined color values in both `LightModeTheme` and `DarkModeTheme` to
improve visual accuracy.
- **Chores**
- Improved flexibility in dependency management by allowing minor and
patch updates for TypeScript and `colorjs.io`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
- Move [ADS](https://github.com/appsmithorg/design-system) to local
packages
- Fix ADS stories according of Storybook 8
- Fix type errors
- Update Storybook to latest version to be able to run `test-storybook`
- Remove unused files(components, tests, stories) from
ADS-old(design-system-old)
Following steps:
- Merge `ads-old` and `widgets-old`, only 1 package should remain
- Rename packages https://github.com/appsmithorg/appsmith/issues/27658
- Use `importSvg` `importRemixIcon` from ADS remove this functionality
from `ads-old`
Fixes#34252
## Automation
/ok-to-test tags="@tag.All"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10114839347>
> Commit: 64cdfec4d2acd45ca955cc0d19c3cb582e1ac0ad
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10114839347&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Fri, 26 Jul 2024 17:49:25 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
- Remove headless radio and use react-aria component instead
- Create ErrorMessage component
Fixes#27677
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9567388261>
> Commit: 62d1153caa8bf03d827f88593c9dfaf3121091ee
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9567388261&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added `ErrorMessage` component for displaying error messages with
specific styling.
- Introduced `isDisabled` prop for `Label` and `ToggleGroup` components.
- Updated `RadioGroup` to accept an items array for easier
configuration.
- **Bug Fixes**
- Improved conditional rendering in `Label` component to prevent issues
when `text` and `contextualHelp` are both falsy.
- **Refactor**
- Removed `Radio` component export from design system.
- Restructured import statements and prop declarations for `Checkbox`
and `RadioGroup`.
- **Style**
- Updated styles for `RadioGroup` and `ToggleGroup` components for
better state handling (disabled, hovered, selected).
- **Documentation**
- Updated Storybook stories for `RadioGroup` to reflect changes in
component usage.
- **Tests**
- Adjusted `RadioGroup.test.tsx` to test new items array prop.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
1. WDS menu component has been completely refactored. WDS headless
component has been removed, we use `react-aria-components` instead. The
menu component now has the ability to use submenus and icons for items.
2. Rename components `ActionGroup` to `ToolbarButtons and `ButtonGroup`
to `InlineButtons`
3. Make API of the `ToolbarButtons`, `Menu`, `InlineButtons`, `Select`
consistent.
4. Cosmetic refactoring of `ToolbarButtons` and `InlineButtons` and
related widgets.
Fixes:
#32299#32109
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9210315418>
> Commit: b11c0029c656b4fbf61b9760d16f77564478d053
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9210315418&attempt=1"
target="_blank">Click here!</a>
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No
---------
Co-authored-by: Pawan Kumar <pawan@appsmith.com>
## Description
Refactoring wds button component
## Automation
/ok-to-test tags="@tag.Anvil"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢🟢🟢 All cypress tests have passed! 🎉🎉🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8788334412>
> Commit: 3e11d5f7800eaf492cb42f049f42980ed33cd774
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8788334412&attempt=1"
target="_blank">Click here!</a>
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enhanced the design system by switching the `Button` component imports
to `react-aria-components` across various components for improved
accessibility and performance.
- **Style Updates**
- Revised multiple CSS properties across components, improving visual
consistency and user interface aesthetics.
- **Refactor**
- Updated various components to use `ForwardedRef<HTMLButtonElement>`
replacing previous ref types, aligning with modern React patterns and
improving component interoperability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Description
- Update Storybook and related dependencies
- Delete the stories for old widget components
- Rewrite stories for new widgets(mdx to tsx)
Note: local chromatic doesn't work because of this
https://github.com/storybookjs/storybook/issues/22531
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Introduced new component stories across various packages to enhance
design system documentation and user experience.
- **Documentation**
- Updated `.gitignore` files to optimize version control settings for
Storybook and build logs.
- **Refactor**
- Modified UI element positioning in Storybook theming for improved
layout management.
- **Style**
- Adjusted CSS properties for the `Select` component to ensure better
visual presentation.
- **Chores**
- Updated dependencies and scripts in package configurations to maintain
up-to-date development tools.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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 -->
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
- 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 -->
<!-- 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 -->
## 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
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 -->
## 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
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
tl;dr there was no favicon, added one. Slightly different fills for
light and dark mode.
---------
Co-authored-by: Valera Melnikov <valera@appsmith.com>
## 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>
