From 1ce9d9c9aecc14f2f1c033aaa9907be08fd6c885 Mon Sep 17 00:00:00 2001 From: Diljit VJ Date: Sat, 20 Feb 2021 02:42:26 +0530 Subject: [PATCH 1/2] #416: Update to 8 digit hex code --- src/components/compact/CompactFields.js | 10 ++++++++-- src/components/google/GoogleFields.js | 2 +- src/components/material/Material.js | 20 ++++++++++++++------ src/components/photoshop/PhotoshopFields.js | 14 +++++++++++++- src/components/sketch/SketchFields.js | 2 +- src/helpers/color.js | 7 ++++--- 6 files changed, 41 insertions(+), 14 deletions(-) diff --git a/src/components/compact/CompactFields.js b/src/components/compact/CompactFields.js index 163edaaa..96560e01 100644 --- a/src/components/compact/CompactFields.js +++ b/src/components/compact/CompactFields.js @@ -39,7 +39,7 @@ export const CompactFields = ({ hex, rgb, onChange }) => { display: 'none', }, RGBwrap: { - flex: '3', + flex: '2', position: 'relative', }, RGBinput: { @@ -57,7 +57,7 @@ export const CompactFields = ({ hex, rgb, onChange }) => { position: 'absolute', top: '3px', left: '0px', - lineHeight: '16px', + lineHeight: '14px', textTransform: 'uppercase', fontSize: '12px', color: '#999', @@ -108,6 +108,12 @@ export const CompactFields = ({ hex, rgb, onChange }) => { value={ rgb.b } onChange={ handleChange } /> + ) } diff --git a/src/components/google/GoogleFields.js b/src/components/google/GoogleFields.js index e0457b8f..7f390430 100644 --- a/src/components/google/GoogleFields.js +++ b/src/components/google/GoogleFields.js @@ -138,7 +138,7 @@ export const GoogleFields = ({ onChange, rgb, hsl, hex, hsv }) => { }, }) - const rgbValue = `${ rgb.r }, ${ rgb.g }, ${ rgb.b }` + const rgbValue = `${ rgb.r }, ${ rgb.g }, ${ rgb.b }, ${ Math.round(rgb.a * 100) }%` const hslValue = `${ Math.round(hsl.h) }°, ${ Math.round(hsl.s * 100) }%, ${ Math.round(hsl.l * 100) }%` const hsvValue = `${ Math.round(hsv.h) }°, ${ Math.round(hsv.s * 100) }%, ${ Math.round(hsv.v * 100) }%` diff --git a/src/components/material/Material.js b/src/components/material/Material.js index b767d180..da22a5ec 100644 --- a/src/components/material/Material.js +++ b/src/components/material/Material.js @@ -48,7 +48,7 @@ export const Material = ({ onChange, hex, rgb, RGBinput: { width: '100%', marginTop: '12px', - fontSize: '15px', + fontSize: '12px', color: '#333', padding: '0px', border: '0px', @@ -69,9 +69,9 @@ export const Material = ({ onChange, hex, rgb, marginRight: '-10px', paddingTop: '11px', }, - third: { + fourth: { flex: '1', - paddingRight: '10px', + paddingRight: '5px', }, }, }, passedStyles)) @@ -102,14 +102,14 @@ export const Material = ({ onChange, hex, rgb, onChange={ handleChange } />
-
+
-
+
-
+
+
+ +
diff --git a/src/components/photoshop/PhotoshopFields.js b/src/components/photoshop/PhotoshopFields.js index 75aff531..7c585a49 100644 --- a/src/components/photoshop/PhotoshopFields.js +++ b/src/components/photoshop/PhotoshopFields.js @@ -83,11 +83,12 @@ export const PhotoshopPicker = ({ onChange, rgb, hsv, hex }) => { hex: data['#'], source: 'hex', }, e) - } else if (data.r || data.g || data.b) { + } else if (data.r || data.g || data.b || data.a) { onChange({ r: data.r || rgb.r, g: data.g || rgb.g, b: data.b || rgb.b, + a: data.a || rgb.a, source: 'rgb', }, e) } else if (data.h || data.s || data.v) { @@ -139,6 +140,12 @@ export const PhotoshopPicker = ({ onChange, rgb, hsv, hex }) => { value={ rgb.b } onChange={ handleChange } /> +
{
°
%
%
+
+
+
+
+
%
) diff --git a/src/components/sketch/SketchFields.js b/src/components/sketch/SketchFields.js index b2e30227..d4ac0be4 100644 --- a/src/components/sketch/SketchFields.js +++ b/src/components/sketch/SketchFields.js @@ -22,7 +22,7 @@ export const SketchFields = ({ onChange, rgb, hsl, hex, disableAlpha }) => { paddingLeft: '6px', }, double: { - flex: '2', + flex: '2.5', }, input: { width: '80%', diff --git a/src/helpers/color.js b/src/helpers/color.js index c095e061..e70c9035 100644 --- a/src/helpers/color.js +++ b/src/helpers/color.js @@ -27,12 +27,12 @@ export const toState = (data, oldHue) => { const hsl = color.toHsl() const hsv = color.toHsv() const rgb = color.toRgb() - const hex = color.toHex() + const hex = color.toHex8() if (hsl.s === 0) { hsl.h = oldHue || 0 hsv.h = oldHue || 0 } - const transparent = hex === '000000' && rgb.a === 0 + const transparent = hex === '00000000' return { hsl, @@ -50,7 +50,7 @@ export const isValidHex = (hex) => { } // disable hex4 and hex8 const lh = (String(hex).charAt(0) === '#') ? 1 : 0 - return hex.length !== (4 + lh) && hex.length < (7 + lh) && tinycolor(hex).isValid() + return hex.length !== (4 + lh) && hex.length < (9 + lh) && tinycolor(hex).isValid() } export const getContrastingColor = (data) => { @@ -74,5 +74,6 @@ export const red = { export const isvalidColorString = (string, type) => { const stringWithoutDegree = string.replace('°', '') + // eslint-disable-next-line no-underscore-dangle return tinycolor(`${ type } (${ stringWithoutDegree })`)._ok } From 6b2be20f70d9feb6f9b56f558c0be01e069dabe1 Mon Sep 17 00:00:00 2001 From: Diljit VJ Date: Sat, 20 Feb 2021 02:42:55 +0530 Subject: [PATCH 2/2] #416: Update snapshots and test cases --- .../block/__snapshots__/spec.js.snap | 16 +- .../chrome/__snapshots__/spec.js.snap | 2 +- .../compact/__snapshots__/spec.js.snap | 304 +++++++++++++----- .../google/__snapshots__/spec.js.snap | 6 +- .../material/__snapshots__/spec.js.snap | 75 ++++- .../photoshop/__snapshots__/spec.js.snap | 230 +++++++++++-- .../sketch/__snapshots__/spec.js.snap | 22 +- .../twitter/__snapshots__/spec.js.snap | 6 +- src/helpers/spec.js | 8 +- 9 files changed, 539 insertions(+), 130 deletions(-) diff --git a/src/components/block/__snapshots__/spec.js.snap b/src/components/block/__snapshots__/spec.js.snap index 8affe493..89c54b04 100644 --- a/src/components/block/__snapshots__/spec.js.snap +++ b/src/components/block/__snapshots__/spec.js.snap @@ -24,7 +24,7 @@ exports[`Block \`triangle="hide"\` 1`] = `
- #22194d + #22194dff
@@ -417,7 +417,7 @@ exports[`Block renders correctly 1`] = `
- #22194d + #22194dff
diff --git a/src/components/chrome/__snapshots__/spec.js.snap b/src/components/chrome/__snapshots__/spec.js.snap index 55eb79d4..62e3676e 100644 --- a/src/components/chrome/__snapshots__/spec.js.snap +++ b/src/components/chrome/__snapshots__/spec.js.snap @@ -544,7 +544,7 @@ exports[`Chrome renders correctly 1`] = ` "width": "100%", } } - value="#22194D" + value="#22194DFF" />
+
+ + +
@@ -3503,7 +3555,7 @@ exports[`Compact with onSwatchHover renders correctly 1`] = `
+
+ + +
@@ -3803,7 +3907,7 @@ exports[`CompactFields renders correctly 1`] = ` } >