feat(color-picker): add `color-preview` #1395

nooooooom · 2021-10-18T11:43:43Z

vercel · 2021-10-18T11:43:48Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tusimple/naive-ui/J3FEaGSvhay5TcYxQf1xgR8hkGsX
✅ Preview: https://naive-ui-git-fork-nooooooom-feat-color-picker-preview-tusimple.vercel.app

codecov · 2021-10-18T11:49:54Z

Codecov Report

Merging #1395 (b63fcca) into main (a98528f) will decrease coverage by 0.06%.
The diff coverage is 20.45%.

@@            Coverage Diff             @@
##             main    #1395      +/-   ##
==========================================
- Coverage   52.96%   52.89%   -0.07%     
==========================================
  Files         533      534       +1     
  Lines       13336    13354      +18     
  Branches     3807     3815       +8     
==========================================
+ Hits         7063     7064       +1     
- Misses       5151     5164      +13     
- Partials     1122     1126       +4

Impacted Files	Coverage Δ
src/color-picker/src/ColorPicker.tsx	`48.05% <0.00%> (-0.72%)`	⬇️
src/color-picker/src/ColorPreview.tsx	`0.00% <0.00%> (ø)`
src/color-picker/src/utils.ts	`31.91% <28.57%> (-4.93%)`	⬇️
src/color-picker/src/ColorPickerSwatches.tsx	`79.31% <33.33%> (+20.48%)`	⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f28f8eb...b63fcca. Read the comment docs.

07akioni · 2021-10-18T15:54:09Z

src/color-picker/src/ColorPreview.tsx

+    function handleChange (e: Event): void {
+      // hex
+      const value = (e.target as HTMLInputElement).value
+      props.onUpdateColor?.(value.toLocaleUpperCase())


I think toUpperCase is enough, why you chose toLocaleUpperCase()?

You are right, I did not fully consider their usage scenarios, and I will replace it immediately.

07akioni · 2021-10-18T16:27:47Z

CHANGELOG.en-US.md

@@ -1,5 +1,9 @@
 # CHANGELOG

+### Feats
+
+- Add `n-color-preview` component, closes [#1281](https://github.com/TuSimple/naive-ui/issues/1281).


Add a prop to controll whether to show the native color picker.

And for preview, should we always show it, or is it also controlled by prop.

I think it's okay to add a show-preview prop.

Sorry that there was no update yesterday due to work reasons. This feature is now complete, but I don’t know whether my description in the document is appropriate.

07akioni · 2021-10-20T16:20:04Z

src/color-picker/src/ColorPicker.tsx

+  showPreview: {
+    type: Boolean,
+    default: false
+  },


Suggested change

showPreview: {

type: Boolean,

default: false

},

showPreview: Boolean,

07akioni · 2021-10-20T16:21:57Z

src/color-picker/src/utils.ts

+export function convertColor (
+  value: string,
+  mode: ColorPickerMode,
+  originalMode?: ColorPickerMode | null


Suggested change

originalMode?: ColorPickerMode | null

originalMode?: null

07akioni · 2021-10-20T16:24:58Z

src/color-picker/src/styles/index.cssr.ts

+        outline: none;
+      `, [
+        cE('fill', `
+          box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset, 0 0 4px var(--swatch-valid-color);


Suggested change

box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset, 0 0 4px var(--swatch-valid-color);

box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset, 0 0 4px var(--swatch-valid-color);

What is --swatch-valid-color? For unconfigurable mutable color using inline style is enough.

This approach is to display a shadow with the same color as the background when the swatch is focused.

The combination of them has a good visual effect, but I didn’t think of a good way to keep their colors consistent.

That's okay, keep it.

On the color block on the left, I used filter to achieve a similar effect, this is their contrast picture. It can achieve similar visual effects by inheriting background.

use filter.

use box-shadow.

I have thought about using color and currentColor before, but I want to reduce the dependency between CSS.

07akioni · 2021-10-20T16:25:19Z

src/color-picker/src/styles/index.cssr.ts

@@ -188,10 +218,18 @@ export default c([
      cE('fill', `
        width: 100%;
        height: 100%;
+        background: var(--swatch-valid-color);


What is --swatch-valid-color?

…loses tusen-ai#1401

07akioni · 2021-10-21T16:44:57Z

@nooooooom rebase on the latest commit

nooooooom · 2021-10-21T16:47:59Z

@nooooooom rebase on the latest commit

I will do it now.

feat(color-picker): add color-preview

91c2555

vercel bot deployed to Preview October 18, 2021 11:43 View deployment

docs(color-picker): add docs

37884c8

vercel bot deployed to Preview October 18, 2021 11:53 View deployment

docs(color-picker): replace symbols

1c6eebc

vercel bot deployed to Preview October 18, 2021 11:57 View deployment

feat(color-picker): color-picker-swatches support keyboard selection

9f3c6b1

vercel bot deployed to Preview October 18, 2021 12:25 View deployment

fix: guarantee test pass

ba762fa

vercel bot deployed to Preview October 18, 2021 12:43 View deployment

07akioni reviewed Oct 18, 2021

View reviewed changes

chore: use toUpperCase

1211f84

vercel bot deployed to Preview October 18, 2021 16:12 View deployment

07akioni reviewed Oct 18, 2021

View reviewed changes

nooooooom added 4 commits October 19, 2021 14:21

feat(color-picker): add show-preview prop

14117ef

chore(color-picker): public color convert function

0e2a030

chore: keep uppercase

a987786

docs(color-picker): document with color preview

caa469a

vercel bot deployed to Preview October 19, 2021 06:43 View deployment

nooooooom added 2 commits October 20, 2021 16:22

chore(color-picker): correct the variable name

a8a6cc6

docs(color-picker): update docs

2308a3c

vercel bot deployed to Preview October 20, 2021 08:26 View deployment

张乐聪 added 2 commits October 21, 2021 00:10

refactor(tabs): on-before-leave prop

fb65081

fix(tabs): typo

7d153c3

07akioni reviewed Oct 20, 2021

View reviewed changes

张乐聪 and others added 3 commits October 21, 2021 00:52

fix(upload): file can't be removed when file count limit is reached, c…

358b279

…loses tusen-ai#1401

2.19.11

d60b5a4

test(dialog): Update dialog component test (tusen-ai#1404)

15114a1

XieZongChen and others added 2 commits October 21, 2021 14:11

test(data-table): update test (tusen-ai#1411)

9912c91

chore: correct prop

30ddd19

vercel bot deployed to Preview October 21, 2021 11:06 View deployment

Merge branch 'main' into feat-color-picker-preview

e978768

vercel bot deployed to Preview October 21, 2021 11:11 View deployment

07akioni force-pushed the main branch from 9912c91 to d92e19b Compare October 21, 2021 15:48

Merge branch 'main' into feat-color-picker-preview

b63fcca

vercel bot deployed to Preview October 21, 2021 16:49 View deployment

07akioni merged commit 9978d92 into tusen-ai:main Oct 21, 2021

nooooooom deleted the feat-color-picker-preview branch October 22, 2021 12:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(color-picker): add `color-preview` #1395

feat(color-picker): add `color-preview` #1395

nooooooom commented Oct 18, 2021 •

edited

Loading

vercel bot commented Oct 18, 2021 •

edited

Loading

codecov bot commented Oct 18, 2021 •

edited

Loading

07akioni Oct 18, 2021

nooooooom Oct 18, 2021

07akioni Oct 18, 2021

nooooooom Oct 18, 2021

07akioni Oct 18, 2021

nooooooom Oct 20, 2021 •

edited

Loading

07akioni Oct 20, 2021

07akioni Oct 20, 2021

07akioni Oct 20, 2021

nooooooom Oct 20, 2021 •

edited

Loading

07akioni Oct 20, 2021

nooooooom Oct 20, 2021 •

edited

Loading

nooooooom Oct 21, 2021

07akioni Oct 20, 2021

07akioni commented Oct 21, 2021

nooooooom commented Oct 21, 2021 •

edited

Loading

	box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset, 0 0 4px var(--swatch-valid-color);
	box-shadow: rgba(0, 0, 0, .15) 0px 0px 0px 1px inset, 0 0 4px var(--swatch-valid-color);

feat(color-picker): add color-preview #1395

feat(color-picker): add color-preview #1395

Conversation

nooooooom commented Oct 18, 2021 • edited Loading

vercel bot commented Oct 18, 2021 • edited Loading

codecov bot commented Oct 18, 2021 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nooooooom Oct 20, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nooooooom Oct 20, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nooooooom Oct 20, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

07akioni commented Oct 21, 2021

nooooooom commented Oct 21, 2021 • edited Loading

feat(color-picker): add `color-preview` #1395

feat(color-picker): add `color-preview` #1395

nooooooom commented Oct 18, 2021 •

edited

Loading

vercel bot commented Oct 18, 2021 •

edited

Loading

codecov bot commented Oct 18, 2021 •

edited

Loading

nooooooom Oct 20, 2021 •

edited

Loading

nooooooom Oct 20, 2021 •

edited

Loading

nooooooom Oct 20, 2021 •

edited

Loading

nooooooom commented Oct 21, 2021 •

edited

Loading