InputColor empty state (#986)

* first commit

* Swatch working with empty color but not updating InputColor correctly

* allow a default transparent value in InputColor

* update InputColor state to handle empty color

* fix license header

Co-authored-by: Daniel Christopher <[email protected]>

Author: laraharrow

.vscode/settings.json

@@ -40,5 +40,8 @@
     "xxxsmall",
     "xxxxlarge"
   ],
-  "prettier.arrowParens": "always"
+  "prettier.arrowParens": "always",
+  "extensions.ignoreRecommendations": true,
+  "files.autoSave": "off",
+  "debug.allowBreakpointsEverywhere": true
 }

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- update InputColor to have an empty `Swatch`
 - `Status` component
 - `Tree`, `TreeItem` components
   - Includes docs and test suite

packages/components/src/Form/Inputs/InputColor/InputColor.tsx

@@ -33,17 +33,13 @@ import React, {
   useEffect,
 } from 'react'
 import styled from 'styled-components'
+import get from 'lodash/get'
 import { useID, useWrapEvent } from '../../../utils'
 import { usePopover, PopoverContent } from '../../../Popover'
 import { InputText, InputTextProps } from '../InputText'
 import { useFormContext } from '../../Form'
 import { Flex } from '../../../Layout/Flex'
-import {
-  HueSaturation,
-  polarbrightness2hsv,
-  SimpleHSV,
-  white,
-} from './ColorWheel/color_wheel_utils'
+import { HueSaturation, SimpleHSV } from './ColorWheel/color_wheel_utils'
 import { ColorWheel } from './ColorWheel'
 import { LuminositySlider } from './LuminositySlider'
 import { Swatch } from './Swatch'
@@ -86,8 +82,7 @@ const createEventWithHSVValue = (
 }
 
 function getColorFromText(text?: string) {
-  const initialWhite = polarbrightness2hsv(white())
-  return text && isValidColor(text) ? str2simpleHsv(text) : initialWhite
+  return text && isValidColor(text) ? str2simpleHsv(text) : undefined
 }
 
 export const InputColorComponent = forwardRef(
@@ -106,10 +101,9 @@ export const InputColorComponent = forwardRef(
   ) => {
     const inputID = useID(id)
     const validationMessage = useFormContext(props)
-    const initialWhite = polarbrightness2hsv(white())
     const initialColor = getColorFromText(value || defaultValue)
 
-    const [color, setColor] = useState<SimpleHSV>(initialColor)
+    const [color, setColor] = useState<SimpleHSV | undefined>(initialColor)
     const [inputTextValue, setInputTextValue] = useState(
       value || defaultValue || ''
     )
@@ -127,7 +121,7 @@ export const InputColorComponent = forwardRef(
       }
     }, [isFocused, value, inputTextValue])
 
-    const callOnChange = (newColor: SimpleHSV | string) => {
+    const callOnChange = (newColor?: SimpleHSV | string) => {
       if (!onChange || !newColor) return
       onChange(createEventWithHSVValue(newColor))
     }
@@ -138,12 +132,13 @@ export const InputColorComponent = forwardRef(
       callOnChange(newColor)
     }
 
-    const handleColorChange = (hs: HueSaturation) =>
-      setColorState({ ...hs, v: color.v })
+    const handleColorChange = (hs: HueSaturation) => {
+      setColorState({ h: 0, s: 100, ...hs, v: get(color, 'v', 1) })
+    }
 
     const handleSliderChange = (event: FormEvent<HTMLInputElement>) =>
       setColorState({
-        ...color,
+        ...(color || { h: 0, s: 100, v: 100 }),
         v: Number(event.currentTarget.value) / 100,
       })
 
@@ -152,24 +147,24 @@ export const InputColorComponent = forwardRef(
       setInputTextValue(newValue)
 
       const isValid = isValidColor(newValue)
-      callOnChange(isValid ? newValue : initialWhite)
+      callOnChange(isValid ? newValue : undefined)
       setColor(getColorFromText(event.currentTarget.value))
     }
 
     const content = (
       <PopoverContent display="flex" flexDirection="column">
         <ColorWheel
           size={colorWheelSize}
-          hue={color.h}
-          saturation={color.s}
-          value={color.v}
+          hue={get(color, 'h')}
+          saturation={get(color, 's')}
+          value={get(color, 'v')}
           onColorChange={handleColorChange}
         />
         <LuminositySlider
           min={0}
           max={100}
           step={1}
-          value={color.v * 100}
+          value={get(color, 'v', 1) * 100}
           width={colorWheelSize}
           onChange={handleSliderChange}
         />
@@ -182,7 +177,7 @@ export const InputColorComponent = forwardRef(
       <Flex>
         <Swatch
           ref={triggerRef}
-          color={hsv2hex(color)}
+          color={color ? hsv2hex(color) : undefined}
           borderRadius={hideInput ? 'medium' : 'none'}
           borderTopLeftRadius="medium"
           borderBottomLeftRadius="medium"

packages/components/src/Form/Inputs/InputColor/Swatch/Swatch.tsx

@@ -23,6 +23,7 @@
  SOFTWARE.
 
  */
+
 import omit from 'lodash/omit'
 import styled from 'styled-components'
 import { CompatibleHTMLProps, reset } from '@looker/design-tokens'
@@ -51,25 +52,38 @@ export interface SwatchProps
   color?: string
 }
 
+const emptySwatch = `position: relative;
+  &:after {
+    position: absolute;
+    display: block;
+    content: '';
+    height: 1px;
+    width: calc(100% + 12px);
+    background: red;
+    /* left: 50%; */
+    top: 50%;
+    margin-left: -6px;
+    transform: rotate(-45deg);
+  }`
+
 export const Swatch = styled.div<SwatchProps>`
   ${reset}
   ${width}
   ${height}
   ${border}
-
   &:hover {
     ${inputTextHover}
   }
-
   ${(props) => (props.disabled ? inputTextDisabled : '')}
-
   background-color: ${(props) => props.color};
   margin-top: auto;
   flex-shrink: 0;
+
+  ${(props) => props.color === 'transparent' && emptySwatch}
 `
 
 Swatch.defaultProps = {
   ...omit(inputTextDefaults, 'fontSize'),
-  color: 'white',
+  color: 'transparent',
   width: inputTextDefaults.height,
 }

packages/components/src/Form/Inputs/InputColor/Swatch/__snapshots__/Swatch.test.tsx.snap

@@ -7,20 +7,35 @@ exports[`Default Swatch 1`] = `
   border: solid 1px;
   border-color: #DEE1E5;
   border-radius: 0.25rem;
-  background-color: white;
+  background-color: transparent;
   margin-top: auto;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
+  position: relative;
 }
 
 .c0:hover {
   border-color: #C1C6CC;
 }
 
+.c0:after {
+  position: absolute;
+  display: block;
+  content: '';
+  height: 1px;
+  width: calc(100% + 12px);
+  background: red;
+  top: 50%;
+  margin-left: -6px;
+  -webkit-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+}
+
 <div
   className="c0"
-  color="white"
+  color="transparent"
   height="36px"
   width="36px"
 />

packages/playground/src/index.tsx

@@ -25,18 +25,18 @@
  */
 import React from 'react'
 import { render } from 'react-dom'
-import { ComponentsProvider } from '@looker/components'
-import { ComboboxDemo } from './Select/ComboboxDemo'
-import { SelectContent } from './Select/SelectDemo'
-import { SelectMultiDemo } from './Select/SelectMultiDemo'
-
-const App = () => (
-  <ComponentsProvider>
-    <ComboboxDemo />
-    <SelectContent />
-    <SelectMultiDemo />
-  </ComponentsProvider>
-)
+import { ComponentsProvider, InputColor, Swatch } from '@looker/components'
+
+const App = () => {
+  return (
+    <ComponentsProvider>
+      <InputColor />
+      <InputColor value="green" />
+      <InputColor defaultValue="purple" />
+      <Swatch />
+    </ComponentsProvider>
+  )
+}
 
 /*
   This is the binding site for the playground. If you want to edit the