feat: color picker redesign (#6216)

Co-authored-by: Maielo <maielo.mv@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
Barnabás Molnár 2023-05-18 16:06:27 +02:00 committed by GitHub
parent 6977c32631
commit 5b7596582f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
55 changed files with 4010 additions and 2699 deletions

View file

@ -7,7 +7,7 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
>
<div
class="Island dropdown-menu-container"
style="--padding: 2; z-index: 1;"
style="--padding: 2; z-index: 2;"
>
<button
class="dropdown-menu-item dropdown-menu-item-base"
@ -115,7 +115,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
>
<div
class="Island dropdown-menu-container"
style="--padding: 2; z-index: 1;"
style="--padding: 2; z-index: 2;"
>
<button
aria-label="Open"
@ -523,38 +523,84 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
<div
style="padding: 0px 0.625rem;"
>
<div
style="position: relative;"
>
<div>
<div>
<div
aria-modal="true"
class="color-picker-container"
role="dialog"
>
<div
class="color-picker-control-container"
class="color-picker__top-picks"
>
<div
class="color-picker-label-swatch-container"
>
<button
aria-label="Canvas background"
class="color-picker-label-swatch"
style="--swatch-color: #ffffff;"
/>
</div>
<label
class="color-input-container"
<button
class="color-picker__button active"
style="--swatch-color: #ffffff;"
title="#ffffff"
type="button"
>
<div
class="color-picker-hash"
>
#
</div>
<input
aria-label="Canvas background"
class="color-picker-input"
spellcheck="false"
value="ffffff"
class="color-picker__button-outline"
/>
</label>
</button>
<button
class="color-picker__button"
style="--swatch-color: #f8f9fa;"
title="#f8f9fa"
type="button"
>
<div
class="color-picker__button-outline"
/>
</button>
<button
class="color-picker__button"
style="--swatch-color: #f5faff;"
title="#f5faff"
type="button"
>
<div
class="color-picker__button-outline"
/>
</button>
<button
class="color-picker__button"
style="--swatch-color: #fffce8;"
title="#fffce8"
type="button"
>
<div
class="color-picker__button-outline"
/>
</button>
<button
class="color-picker__button"
style="--swatch-color: #fdf8f6;"
title="#fdf8f6"
type="button"
>
<div
class="color-picker__button-outline"
/>
</button>
</div>
<div
style="width: 1px; height: 100%; margin: 0px auto;"
/>
<button
aria-controls="radix-:r0:"
aria-expanded="false"
aria-haspopup="dialog"
aria-label="Canvas background"
class="color-picker__button active-color"
data-state="closed"
style="--swatch-color: #ffffff;"
title="Show background color picker"
type="button"
>
<div
class="color-picker__button-outline"
/>
</button>
</div>
</div>
</div>