PromucFlow_constructor/app/client/cypress/locators/ThemeLocators.json
Valera Melnikov 8be4936ca0
chore: add color validation + native color picker (#25355)
## Description
1. Reduced the number of default colors. Because the amount of suggested
options was too much: very little difference between shades and
sometimes with hues too. By removing half of them, we allow builders
make better choices faster. The transparent color has also been removed.
2. Added validation of color values because HTML colors are remarkably
easy to get wrong, because they allow so many different values and now
we support and validate all these guys
    - `hex` - `#bada55`
    - `name` - `LightGoldenrodYellow`
    - `special name` - `currentColor`
    - `rgb` - `rgb(0 0 0)`
    - `rgba` - `rgba(0, 0, 0, .45)`
    - `hsl` - `hsl(4.71239rad, 60%, 70%)`
    - `hsla` - `hsla(180deg 100% 50% / .8)`
    - `hwb` - `hwb(180deg 0% 0% / 100%)`
    - `lab` - `lab(2000.1337% -8.6911 -159.131231 / .987189732)`
    - `lch` - `lch(54.292% 106.839 40.853)`
<img width="283" alt="Снимок экрана 2023-08-02 в 17 58 07"
src="https://github.com/appsmithorg/appsmith/assets/11555074/a8fef365-506d-432e-85ad-cdb550de1f60">
    
3. Added support for a Full color picker. Now we can easily switch
between modes and builders can easily choose any colors.
<img width="259" alt="Снимок экрана 2023-08-02 в 17 43 34"
src="https://github.com/appsmithorg/appsmith/assets/11555074/be09cd92-7c69-43eb-812a-0b1fe3ac9ef6">


#### PR fixes following issue(s)
Fixes  #22996

#### Media

https://www.loom.com/share/098e0116e49744e7b10689d4a18ab664?sid=15405577-160e-4b48-bfef-bc8dcfa97efe

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


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

---------

Co-authored-by: Valera Melnikov <melnikov.vv@greendatasoft.ru>
2023-08-07 11:55:10 +03:00

14 lines
592 B
JSON

{
"canvas": "#canvas-selection-0",
"border": ".t--theme-appBorderRadius",
"popover": ".rc-tooltip-inner",
"shadow": ".t--theme-appBoxShadow",
"color": ".t--property-pane-sidebar .bp3-popover-target .cursor-pointer",
"inputColor": ".t--colorpicker-v2-popover [data-testid='t--color-picker-input']",
"colorPicker": "[data-testid='color-picker']",
"greenColor": "[style='background-color: rgb(21, 128, 61);']",
"fontsSelected": ".leading-normal",
"currentTheme": ".cursor-pointer:contains('Applied theme')",
"purpleColor": "[style='background-color: rgb(107,114,128);']"
}