Commit Graph

42 Commits

Author SHA1 Message Date
vadim
7c0173af58
chore: WDS text inputs visual refinements (#35581)
## Description

Fixes #34844  

Fixes several issues that were spotted related to that:
- We were not applying `--fg-neutral-subtle` to our placeholder because
ADS has `!important` for their placeholder styling, so I added it to
ours for now
- After applying it, it became obvious that `--fg-neutral-subtle` and
the “parent” `--fg-neutral` needed adjustments too
- Disabled opacity needed an increase (became obvious) after making our
`--bg-neutral-subtle` lighter to deal with the primary issue of the
ticket)
- `--bg-neutral-subtle` were derived from the seed, despite the intent
to be derived from `--bg-accent-subtle`, fixed that too

| Before | After |
|--------|--------|
| <img width="1114" alt="before-light"
src="https://github.com/user-attachments/assets/a2c8b8ca-db5c-443d-84bf-8b7f7dd2333d">
| <img width="1102" alt="after-light"
src="https://github.com/user-attachments/assets/dd924865-ea19-4d74-b4ed-3037e0b418ef">
|

Additional preview of how dark mode looks after these changes:
<img width="1119" alt="after-dark"
src="https://github.com/user-attachments/assets/2d06df1e-211d-4b1d-a293-99710b34f7bd">


## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!CAUTION]
> 🔴 🔴 🔴 Some tests have failed.
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10319662006>
> Commit: e1f99f2ea8956ff988c891470fc7fa4285ab32b0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319662006&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail"
target="_blank">Cypress dashboard</a>.
> Tags: @tag.Anvil
> Spec: 
> The following are new failures, please fix them before merging the PR:
<ol>
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilHeadingWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInlineButtonWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilParagraphWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts
>
<li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts</ol>
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master"
target="_blank">List of identified flaky tests</a>.
> <hr>Fri, 09 Aug 2024 13:25:27 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


- **New Features**
- Enhanced color themes for both dark and light modes, improving
aesthetic coherence and visual accessibility.

- **Bug Fixes**
- Adjusted opacity of disabled components to improve clarity and user
experience.

- **Style**
- Updated placeholder text styling in input fields to ensure consistent
visibility across different contexts.

- **Tests**
- Modified expected output values in color theme tests for improved
accuracy and alignment with new color definitions.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-08-09 16:41:26 +03:00
Pawan Kumar
2e2f4419bd
chore: add tests for app theming (#34839)
/ok-to-test tags="@tag.Anvil"

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced theme setting and snapshot verification for various widgets
in different modes (Canvas, Preview, Deploy).
- Added a new CSS rule to enhance the styling of input elements based on
specific conditions.

- **Refactor**
- Renamed existing snapshot verification methods to more descriptive
names across multiple widget snapshot files.
- Added methods to handle theme settings and detailed snapshot matching.

- **Tests**
- Enhanced testing functionality for widgets with updated methods for
snapshot verification across different themes.

These updates ensure more detailed and theme-specific snapshot testing
for various widget states, improving test coverage and accuracy, as well
as enhancing the layout consistency of input elements.
<!-- 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/10046186626>
> Commit: a6232ae795f77bd46bff4c854f46c5671a518ff6
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10046186626&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Mon, 22 Jul 2024 18:43:52 UTC
<!-- end of auto-generated comment: Cypress test results  -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
Co-authored-by: Valera Melnikov <valera@appsmith.com>
2024-07-22 22:08:48 +03:00
vadim
01d5275170
fix: WDS TextArea inner spacing (#34901)
## Description

Fixes #34584
| Before | After |
|--------|--------|
|
![before](https://github.com/user-attachments/assets/b0d58e3b-006e-49cc-af7f-5c600326caed)
|
![after](https://github.com/user-attachments/assets/935590ea-2a3b-4912-a28c-16b47ba9d83c)
|

We had [a CSS
rule](f6d62e5cdc/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css (L27-L30))
that was imitating CapSize behavior.

It worked okay with regular input but had no effect on TextArea. Fixing
it to work for TextArea did not seem possible no matter what CSS rules
or additional markup I threw at it:
<details><summary>Dev tools screenshots</summary>
<p>
<table>
<tr>
<td>
<img width="1252" alt="Screenshot 2024-07-12 at 10 32 30"
src="https://github.com/user-attachments/assets/c529f8b9-b129-4358-88e1-cee59a0797a6">
</td>
<td>
<img width="1270" alt="Screenshot 2024-07-12 at 10 32 40"
src="https://github.com/user-attachments/assets/52cc122e-cc0b-4e18-84d5-006b5ed56ef1">
</td>
</tr>
</table>
</p>
</details>

Changing the inner spacing and removing that rule achieves the desired
results: elements are neatly aligned with similar/equal paddings. See
the example with additional elements alongside TextInput and TextArea
that verifies that vertical alignment is consistent:

![after-extras](https://github.com/user-attachments/assets/8fa7e867-22a8-4790-a0fc-daf76ccd5dbc)

## 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/9906310028>
> Commit: 0c83d24dd5247ac962f2b73baefb734471e1c3b0
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9906310028&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Fri, 12 Jul 2024 10:43:05 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

- **Style**
- Updated vertical padding for text input fields to improve spacing and
visual clarity.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-07-22 11:15:17 +03:00
Pawan Kumar
01529c4db5
chore: Checkbox widget does not show an asterisk to indicate it's a required (#33814)
Fixes #33444

/ok-to-test tags="@tag.Anvil"<!-- This is an auto-generated comment:
Cypress test results -->
> [!WARNING]
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9297202278>
> Commit: 895c87c82e1b55e4d604870c89512200c408ef41
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9297202278&attempt=1"
target="_blank">Click here!</a>
> It seems like **no tests ran** 😔. We are not able to recognize it,
please check workflow <a
href="https://github.com/appsmithorg/appsmith/actions/runs/9297202278"
target="_blank">here.</a>

<!-- end of auto-generated comment: Cypress test results  -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
2024-05-30 11:21:39 +03:00
Valera Melnikov
55ae8594ad
fix: refactor wds menu and related components, widgets (#33703)
## 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>
2024-05-24 15:58:45 +03:00
Valera Melnikov
f22dffcf50
chore: wds select component (#32715)
## Description
Fixes #28466

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

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced customizable `Select` component with enhanced dropdown
features including error messages, loading state, and contextual help.
- Added a new `className` prop to the `Button` component for custom
class name manipulation.

- **Enhancements**
- Updated the design system package to include exports for new
components like `Select` and `ContextualHelp`.
- Improved accessibility and cohesive user interface across components.

- **Bug Fixes**
- Corrected import paths for `ContextualHelp` in various components to
ensure consistent functionality.

- **Documentation**
  - Updated component documentation to reflect new features and props.

- **Style Updates**
- Added comprehensive styles for the new `Select` component, including
form fields and error text styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-04-17 13:49:41 +03:00
vadim
1de9d15073
chore: WDS, adjusted border of text inputs to avoid "disabled" visual style (#32547)
Closes #32029
---
tl;dr
| Before | After |
|--------|--------|
|
https://github.com/appsmithorg/appsmith/assets/80973/9c4d1805-4b42-4849-ad64-ec6e471fab2f
|
https://github.com/appsmithorg/appsmith/assets/80973/236c547f-89a3-437a-a464-3da29fdd4845
|
---
Context
1. The appearance of TextInput can be mistaken as them being disabled
when there are not enough additional visual hints. See on this
screenshot of prior styling how the lack of a placeholder contributes to
that. Additionally when not lying inside a visible zone, but directly on
a canvas the contrast is very low for the field.
<img width="851" alt="Screenshot 2024-04-10 at 11 48 36"
src="https://github.com/appsmithorg/appsmith/assets/80973/69295c41-d4d2-40b0-9375-11b2d6ed532a">
2. Effect is not pronounced in the dark mode. When discriminating
between disabled and non-disabled input which one's which is also pretty
clear.
<img width="860" alt="Screenshot 2024-04-10 at 11 49 12"
src="https://github.com/appsmithorg/appsmith/assets/80973/65f9b91b-8984-4515-b5fb-fb8b74f3f492">
2024-04-11 13:01:26 +03:00
Valera Melnikov
8a835357cc
fix: input alignment (#32452)
## Description
Fixed the alignment of the content inside the input

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced `prefix` and `suffix` props for better customization in
TextInput components, replacing `startIcon` and `endIcon`.
- Added examples for using menus as prefixes/suffixes and for type
password functionality in TextInput stories.
- Implemented loading indicator functionality with priority over icons
in TextInput.
- Added support for disabled and readonly states with icon prefixes and
suffixes in TextInput.

- **Bug Fixes**
- Adjusted styles for autofill, focus states, and padding in input
fields to improve user experience.

- **Documentation**
- Updated TextInput component documentation to reflect new `prefix` and
`suffix` props usage and examples.

- **Refactor**
- Removed `startIcon` and `endIcon` properties from TextInputProps and
updated rendering logic.
- Replaced `startIcon` with `prefix` in CurrencyInputComponent and
PhoneInputComponent.
- Changed `startIcon` and `endIcon` to `prefix` and `suffix` in
InputComponent.

- **Style**
- Removed specific styling for `[data-field-input-group]` affecting
display and alignment.
- Updated text-input module CSS to enhance the appearance of prefix and
suffix elements and small-sized input fields.

- **Chores**
  - Added `MULTI_LINE_TEXT` constant to the `InputTypes` object.
- Updated the label for the "Icon" property in WDSInputWidget's
propertyPaneStyleConfig.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-04-05 15:02:07 +03:00
Valera Melnikov
ba6262ffe6
chore: widgets alignment (#31923)
## Description
Plenty changes related to widgets alignment 
1. Paragraph, button, inputs, single checkbox and switch widgets are
aligned along the baseline of the text content
2. The icons in the buttons and the single checkbox and switch are now
positioned absolutely so as not to affect the height of the components.
The height of the components now depends on text content.
3. All unnecessary paddings and borders in the layout have been removed:
- Canvas padding: `--outer-spacing-4`
- Gap between sections and zones: `--outer-spacing-4`
- Zone padding: `--outer-spacing-3`
- Gap between widgets: `--outer-spacing-3`
4. In widget selection styles replace `border` with `outline`, since the
`outline` one does not take space.
5. Add Changes to the flex-basis calculation method. Now the gap between
the zones is taken into account there.
6. Add a lot of small fixes related to the changes described above.


https://github.com/appsmithorg/appsmith/assets/11555074/b7c220eb-3e27-4039-9c15-6281bafe8008

Fixes #29364

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!IMPORTANT]  
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/8375537665>
> Commit: `f85b63c0a49f30b9762379c2f8c3bd38c7a8355f`
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=8375537665&attempt=2"
target="_blank">Click here!</a>
> All cypress tests have passed 🎉🎉🎉

<!-- end of auto-generated comment: Cypress test results  -->




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
	- Improved handling of CSS variable values in Flex components.
- Enhanced styling and layout configurations for a better user
experience.
- **Bug Fixes**
- Fixed label positioning and styling issues in Checkbox and Switch
components.
	- Adjusted padding, margin, and sizing for consistency and alignment.
- **Refactor**
- Enhanced flex layout handling and space distribution logic for
improved layout flexibility.
- **Style**
	- Updated component styles for refined user interface aesthetics.
- **Chores**
- Updated feature flags and configurations for widgets and components to
enable new functionalities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-03-22 16:53:29 +03:00
vadim
613547b43d
fix: WDS bdNeutralHover color (#31922)
Fixes #31899

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new hover outline color for input fields to enhance user
interaction.

- **Style**
- Updated hover outline colors for both Dark and Light modes to improve
visibility and aesthetics.

- **Tests**
- Adjusted tests to reflect new color values for hover states in both
Dark and Light themes.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-03-21 18:20:47 +03:00
vadim
edcdcaa593
chore: WDS TextInput style (#31659)
Closes #31021

Before

https://github.com/appsmithorg/appsmith/assets/80973/3a75dc1d-c340-428c-ab7a-53820471c006

After

https://github.com/appsmithorg/appsmith/assets/80973/70249593-2705-4d67-8408-44ce301cb8ae



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary of changes

- **New Features**
- Updated text input styles to use background colors, improving user
interaction cues for hover, focus, and invalid states.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2024-03-18 13:06:30 +03:00
Pawan Kumar
24c1dda69a
fix: Options in WDS radio group widget get distorted in a Section with > 1 Zone (#31797)
Fixes #29365 

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced label positioning for Checkbox, Radio, and Switch components
with "start" and "end" options.
- Introduced dynamic orientation for Checkbox and Radio groups based on
container size.
- Added new story for RadioGroup component to demonstrate vertical
orientation.
- **Style Updates**
- Updated CSS for Switch, Checkbox, and Radio components to align with
the new label positioning options.
- Improved field group styles with `flex-wrap` to accommodate various
layouts.
- **Refactor**
- Modified handling of `labelPosition` across components for consistency
and flexibility.
- Implemented `useGroupOrientation` hook for dynamic orientation
management.
- **Chores**
- Adjusted default configurations and property pane options for widgets
to align with new label positioning and orientation features.
- Added feature flag checks for specific functionalities to always
return `true`.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
2024-03-18 11:48:29 +03:00
Pawan Kumar
6929e7a77d
fix: focused state not working on storybook's complex form story due to z-index (#31540)
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- Improved styling isolation for text input elements to enhance visual
consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
2024-03-06 11:54:20 +03:00
Valera Melnikov
07279c070e
fix: improved widgets layout (#31471)
## Description
- Fixed text input widget width
- Increased size of the separator for toolbarButtons
- Fixed widgets label
- Fixed behaviour for Boolean widgets. Removed Checkbox and Radio
labelPosition. Fixed width for these widgets


#### PR fixes following issue(s)
Fixes # (issue number)
#29088 
#31250 

#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [x] Jest
- [ ] Cypress

## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag
2024-03-05 10:46:29 +03:00
Pawan Kumar
5762e69076
fix: refocussing of input (#31376)
Fixes #31329 

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style**
- Adjusted the stacking order of elements in the design system to
enhance visual hierarchy.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Pawan Kumar <pawankumar@Pawans-MacBook-Pro-2.local>
2024-02-29 11:48:28 +03:00
Pawan Kumar
b176bdb8a6
chore: create correct radii tokens (#31215)
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>
2024-02-21 16:49:12 +03:00
Pawan Kumar
b0c6cd39b3
chore: Add new icons and thumbnails to WDS widgets (#31085)
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>
2024-02-16 15:48:32 +03:00
Pawan Kumar
1cce7c9198
chore: add key value widget (#30795)
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 -->
2024-02-01 11:59:54 +03:00
Pawan Kumar
bd563dc751
chore: Components sizing and alignment (#30595)
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>
2024-01-29 13:15:58 +03:00
Valera Melnikov
ad256ed64a
feat: add readonly mode to input (#29778)
## 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

![Снимок экрана 2023-12-20 в 20 13
43](https://github.com/appsmithorg/appsmith/assets/11555074/bbb45fee-65ae-4f0b-8681-33713bee079f)

#### 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 -->
2023-12-21 15:03:28 +03:00
Pawan Kumar
369b9021bb
fix: WDS PhoneInput input area displays “+” & country code in different lines (#29756)
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 -->
2023-12-20 13:39:26 +03:00
Pawan Kumar
fde6e2de54
fix: WDS Input widget bugs (#29241)
Fixes #29091
Fixes #29086
Fixes #29088
2023-12-01 14:36:37 +03:00
Pawan Kumar
c1884fa25c
chore: Integrate Radio Group (#29026)
Fixes #29001
2023-11-23 11:21:23 +03:00
Valera Melnikov
1249330f91
feat: implement WDS components and tokenst at header of table widget (#28977)
## 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
2023-11-22 10:34:48 +03:00
Pawan Kumar
90bb8532a0
chore: integrate currency input widget (#28566)
Fixes #27747 



https://github.com/appsmithorg/appsmith/assets/6636360/9234acc1-f41a-4ca8-aaf6-15c66e2b3e9d
2023-11-15 15:57:50 +03:00
vadim
59d2bc3b96
chore: WDS fluid tokens refinement (#28580)
Closes #28104

Before

https://github.com/appsmithorg/appsmith/assets/80973/1bcbcf1a-f7ba-43ac-8b74-818e883c968b

After

https://github.com/appsmithorg/appsmith/assets/80973/3e02591a-c463-425a-9ebb-d681b7dcea56
2023-11-06 18:33:59 +03:00
Valera Melnikov
12c3363042
chore: new fluid tokens (#28072)
## Description
POC for new fluid tokens
2023-10-19 11:57:48 +03:00
Pawan Kumar
2908af7f9e
fix: Input Widget V3 bug fixes (#27891)
Fixes #27624
2023-10-18 17:05:03 +05:30
Pawan Kumar
d2cfa47443
chore: Refactor Text Input with css modules (#27585) 2023-09-25 14:47:08 +03:00
Pawan Kumar
11fdbf0f53
chore: Refactor styled component to css modules for checkbox/radio/switch (#27505)
Refactor css from styled component to css modules

Fixed #27386 
Fixed #27388
Fixed #27387
2023-09-22 10:14:58 +03:00
Pawan Kumar
f45c206acc
fix: in WDS TextInputcolor token fg is not applied to entered text (#27533)
Fixes #27511
2023-09-22 10:04:10 +03:00
vadim
2706298a11
chore: WDS fgNeutralSubtle fine-tuning (#27510)
Closes #26854

Increased contrast by lowering lightness shift, increasing opacity of
placeholder element to 100%. Current on the right
<img width="2560" alt="Screenshot 2023-09-20 at 13 20 39"
src="https://github.com/appsmithorg/appsmith/assets/80973/6ce1605e-f102-4a62-bce5-efaecd92d152">
<img width="2559" alt="Screenshot 2023-09-20 at 13 20 55"
src="https://github.com/appsmithorg/appsmith/assets/80973/c80df4e6-1635-4928-bade-0511dfb3e650">
2023-09-21 12:06:04 +03:00
Valera Melnikov
7fa73b100b
chore: rewrite Text component styles and consistency to as const types (#27497)
## 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
2023-09-21 10:56:11 +03:00
Pawan Kumar
9d73501c7a
chore: add TextInput component and InputWidgetV3 (#26775)
Fixes #26039

---------

Co-authored-by: Valera Melnikov <valera@appsmith.com>
2023-09-20 09:56:46 +03:00
Pawan Kumar
3711ad90e6
feat: enable CSS Modules fro WDS (#26162)
Fixes: #26019

---------

Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
Co-authored-by: Valera Melnikov <valera@appsmith.com>
2023-09-15 10:17:06 +03:00
vadim
5b34de09e3
chore: WDS fluid tokens config fine-tuning (#26533)
Closes #25686
2023-08-23 12:35:11 +03:00
Pawan Kumar
99e1b44526
chore: Move stories to component level (#26489)
Fixes #26503
2023-08-23 09:13:26 +03:00
Pawan Kumar
898ecf6d04
chore: add switch and switch group (#25526)
Fixes #25509 
Fixes #25510
2023-07-27 11:16:26 +03:00
Valera Melnikov
013adf782c
feat: add fluid tokens and flex component (#25448)
## 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>
2023-07-24 11:59:05 +03:00
Pawan Kumar
0666b07e30
chore: Add RadioGroup component (#24909)
Fixes #24906

---------

Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
2023-06-29 18:07:09 +03:00
Valera Melnikov
d3b48c500f
chore: move typography to themeprovider (#23904)
## 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>
2023-06-07 12:49:24 +03:00
Pawan Kumar
e0da7e21ef
chore: Add checkbox group component (#22721)
Fixes #22467
2023-05-02 13:21:36 +05:30