0 Fork 0

mirror of https://github.com/webstudio-is/webstudio.git synced 2026-11-07 20:44:05 +09:00

T

Ivan Starkov 1076d6efd0 Fix color input does not accept CSS color names (#1089 )

## Description

1. What is this PR about (link the issue and add a short description)

Found few bugs.

- [x] - White color have border
- [x] - Fix transparent - all is parsed well its `react-color` feature
<img width="237" alt="image"
src="https://user-images.githubusercontent.com/5077042/220187124-fe8ddc9a-1cc0-4ad3-9979-4037e4a69b5a.png">

- [x] - Synchronize picker color and color shown in input



closes #1081

`+` Added transparent color (need be in design, looks better for most
inputs if anything is shown)

<img width="212" alt="image"
src="https://user-images.githubusercontent.com/5077042/220186642-8cc0bcad-ab35-4444-b773-da652cafb734.png">

<img width="217" alt="image"
src="https://user-images.githubusercontent.com/5077042/220186773-071e6176-066a-4d37-807d-cd6a2db70642.png">


Accessibility is not done fully for the color picker
https://github.com/webstudio-is/webstudio-builder/issues/1092


## Steps for reproduction

1. You are now able to select colors by name
<img width="243" alt="image"
src="https://user-images.githubusercontent.com/5077042/220174790-7e33219d-e955-4718-bad1-0c1ac79ebaf3.png">

2. Colors with non-1 alpha will be shown on chessboard

<img width="225" alt="image"
src="https://user-images.githubusercontent.com/5077042/220174949-2c0c4a45-d330-4a3c-a769-f30bd33b2154.png">


## Code Review

- [ ] hi @kof, I need you to do
  - test it on preview

- [ ] hi @TrySound 
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)


## Before requesting a review

- [x] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [x] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

2023-02-21 02:48:49 +04:00