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>
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#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 -->
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
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#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 -->
## 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
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
- 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>
## 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>
