Merge pull request #14382 from storybookjs/fix-color-picker-qa

Controls: Color picker QA fixes
storybookjs · Mar 29, 2021 · 2a29e90 · 2a29e90
2 parents d2ad09e + cdb8777
commit 2a29e90
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/lib/components/src/controls/Color.tsx b/lib/components/src/controls/Color.tsx
@@ -23,6 +23,7 @@ const PickerTooltip = styled(WithTooltip)({
 });
 
 const TooltipContent = styled.div({
+  width: 200,
   margin: 5,
 
   '.react-colorful__saturation': {
@@ -36,6 +37,10 @@ const TooltipContent = styled.div({
   },
 });
 
+const Note = styled(TooltipNote)(({ theme }) => ({
+  fontFamily: theme.typography.fonts.base,
+}));
+
 const Swatches = styled.div({
   display: 'grid',
   gridTemplateColumns: 'repeat(9, 16px)',
@@ -62,11 +67,13 @@ const Swatch = ({ value, active, onClick, style, ...props }: SwatchProps) => {
   return <SwatchColor {...props} {...{ active, onClick }} style={{ ...style, backgroundImage }} />;
 };
 
-const Input = styled(Form.Input)({
+const Input = styled(Form.Input)(({ theme }) => ({
   width: '100%',
   paddingLeft: 30,
   paddingRight: 30,
-});
+  boxSizing: 'border-box',
+  fontFamily: theme.typography.fonts.base,
+}));
 
 const ToggleIcon = styled(Icons)(({ theme }) => ({
   position: 'absolute',
@@ -76,6 +83,7 @@ const ToggleIcon = styled(Icons)(({ theme }) => ({
   width: 20,
   height: 20,
   padding: 4,
+  boxSizing: 'border-box',
   cursor: 'pointer',
   color: theme.input.color,
 }));
@@ -94,6 +102,7 @@ const HEX_REGEXP = /^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i;
 const SHORTHEX_REGEXP = /^\s*#?([0-9a-f]{3})\s*$/i;
 
 type ParsedColor = {
+  valid: boolean;
   value: string;
   keyword: string;
   colorSpace: ColorSpace;
@@ -123,11 +132,13 @@ const stringToArgs = (value: string) => {
 
 const parseValue = (value: string): ParsedColor => {
   if (!value) return undefined;
+  let valid = true;
 
   if (RGB_REGEXP.test(value)) {
     const [r, g, b, a] = stringToArgs(value);
     const [h, s, l] = convert.rgb.hsl([r, g, b]) || [0, 0, 0];
     return {
+      valid,
       value,
       keyword: convert.rgb.keyword([r, g, b]),
       colorSpace: ColorSpace.RGB,
@@ -141,6 +152,7 @@ const parseValue = (value: string): ParsedColor => {
     const [h, s, l, a] = stringToArgs(value);
     const [r, g, b] = convert.hsl.rgb([h, s, l]) || [0, 0, 0];
     return {
+      valid,
       value,
       keyword: convert.hsl.keyword([h, s, l]),
       colorSpace: ColorSpace.HSL,
@@ -158,7 +170,18 @@ const parseValue = (value: string): ParsedColor => {
   if (/[^#a-f0-9]/i.test(value)) mapped = plain;
   else if (HEX_REGEXP.test(value)) mapped = `#${plain}`;
 
+  if (mapped.startsWith('#')) {
+    valid = HEX_REGEXP.test(mapped);
+  } else {
+    try {
+      convert.keyword.hex(mapped as any);
+    } catch (e) {
+      valid = false;
+    }
+  }
+
   return {
+    valid,
     value: mapped,
     keyword: convert.rgb.keyword(rgb),
     colorSpace: ColorSpace.HEX,
@@ -169,7 +192,7 @@ const parseValue = (value: string): ParsedColor => {
 };
 
 const getRealValue = (value: string, color: ParsedColor, colorSpace: ColorSpace) => {
-  if (!value) return fallbackColor[colorSpace];
+  if (!value || !color?.valid) return fallbackColor[colorSpace];
   if (colorSpace !== ColorSpace.HEX) return color?.[colorSpace] || fallbackColor[colorSpace];
   if (!color.hex.startsWith('#')) {
     try {
@@ -236,7 +259,7 @@ const usePresets = (
 
   const addPreset = useCallback(
     (color) => {
-      if (!color?.[colorSpace]) return;
+      if (!color?.valid) return;
       if (presets.some((preset) => id(preset[colorSpace]) === id(color[colorSpace]))) return;
       setSelectedColors((arr) => arr.concat(color));
     },
@@ -278,7 +301,7 @@ export const ColorControl: FC<ColorProps> = ({
                   <WithTooltip
                     key={preset.value}
                     hasChrome={false}
-                    tooltip={<TooltipNote note={preset.keyword || preset.value} />}
+                    tooltip={<Note note={preset.keyword || preset.value} />}
                   >
                     <Swatch
                       value={preset[colorSpace]}

diff --git a/lib/components/src/tooltip/TooltipNote.tsx b/lib/components/src/tooltip/TooltipNote.tsx
@@ -20,6 +20,6 @@ export interface TooltipNoteProps {
   note: string;
 }
 
-export const TooltipNote: FunctionComponent<TooltipNoteProps> = ({ note }) => {
-  return <Note>{note}</Note>;
+export const TooltipNote: FunctionComponent<TooltipNoteProps> = ({ note, ...props }) => {
+  return <Note {...props}>{note}</Note>;
 };