Update swatch to have new disabled state (#1603)

* Update swatch to have new disabled state
* Apply alpha value to color and not border
* Disabled properly suppresses `:hover` on `Swatch`

Co-authored-by: Luke Bowerman <[email protected]>

Author: jhardy

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - InputFilter to support multiline filter tokens
 - Reduced & consolidated dependencies on `polished` library
 - `ButtonItem` used inside `ButtonToggle` and `ButtonGroup` now uses `body`
+- `Swatch` no longer turns gray when disabled, but has a reduced opacity instead
 
 ### Fixed
 

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

@@ -40,3 +40,7 @@ test('Swatch with hex value passed', () => {
 test('Swatch with width and height set', () => {
   assertSnapshot(<Swatch color="blue" width="50px" height="25px" />)
 })
+
+test('Swatch has a disabled state', () => {
+  assertSnapshot(<Swatch color="blue" width="50px" height="25px" disabled />)
+})

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

@@ -25,12 +25,16 @@
  */
 
 import styled from 'styled-components'
-import { CompatibleHTMLProps, reset } from '@looker/design-tokens'
+import {
+  CompatibleHTMLProps,
+  disabledSwatchColor,
+  reset,
+} from '@looker/design-tokens'
 import { height, HeightProps, width, WidthProps } from 'styled-system'
 import {
   inputCSS,
-  inputTextDisabled,
   inputTextHover,
+  inputTextDisabled,
 } from '../../../Inputs/InputText'
 import { inputHeight } from '../../height'
 
@@ -64,16 +68,20 @@ export const Swatch = styled.div<SwatchProps>`
   ${inputCSS}
   ${width}
   ${height}
-  background-color: ${(props) => props.color};
+  background-color: ${({ color, disabled }) =>
+    disabled ? disabledSwatchColor(color) : color};
   flex-shrink: 0;
   margin-top: auto;
 
-  &:hover {
+  &:disabled {
+    ${inputTextDisabled}
+  }
+
+  &:hover:not([disabled]) {
     ${inputTextHover}
   }
 
   ${(props) => props.color === 'transparent' && emptySwatch}
-  ${(props) => (props.disabled ? inputTextDisabled : '')}
 `
 
 Swatch.defaultProps = {

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

@@ -18,7 +18,17 @@ exports[`Default Swatch 1`] = `
   position: relative;
 }
 
-.c0:hover {
+.c0:disabled {
+  background: #F5F6F7;
+  color: #939BA5;
+  cursor: default;
+}
+
+.c0:disabled:hover {
+  border-color: #DEE1E5;
+}
+
+.c0:hover:not([disabled]) {
   border-color: #C1C6CC;
 }
 
@@ -44,6 +54,46 @@ exports[`Default Swatch 1`] = `
 />
 `;
 
+exports[`Swatch has a disabled state 1`] = `
+.c0 {
+  font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
+  background: #FFFFFF;
+  border: 1px solid #DEE1E5;
+  border-radius: 0.25rem;
+  color: #343C42;
+  font-size: 0.875rem;
+  width: 50px;
+  height: 25px;
+  background-color: rgba(0,0,255,0.85);
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  margin-top: auto;
+}
+
+.c0:disabled {
+  background: #F5F6F7;
+  color: #939BA5;
+  cursor: default;
+}
+
+.c0:disabled:hover {
+  border-color: #DEE1E5;
+}
+
+.c0:hover:not([disabled]) {
+  border-color: #C1C6CC;
+}
+
+<div
+  className="c0"
+  color="blue"
+  disabled={true}
+  height="25px"
+  width="50px"
+/>
+`;
+
 exports[`Swatch with hex value passed 1`] = `
 .c0 {
   font-family: 'Roboto','Noto Sans JP','Noto Sans CJK KR','Noto Sans Arabic UI','Noto Sans Devanagari UI','Noto Sans Hebrew','Noto Sans Thai UI','Helvetica','Arial',sans-serif;
@@ -61,7 +111,17 @@ exports[`Swatch with hex value passed 1`] = `
   margin-top: auto;
 }
 
-.c0:hover {
+.c0:disabled {
+  background: #F5F6F7;
+  color: #939BA5;
+  cursor: default;
+}
+
+.c0:disabled:hover {
+  border-color: #DEE1E5;
+}
+
+.c0:hover:not([disabled]) {
   border-color: #C1C6CC;
 }
 
@@ -90,7 +150,17 @@ exports[`Swatch with width and height set 1`] = `
   margin-top: auto;
 }
 
-.c0:hover {
+.c0:disabled {
+  background: #F5F6F7;
+  color: #939BA5;
+  cursor: default;
+}
+
+.c0:disabled:hover {
+  border-color: #DEE1E5;
+}
+
+.c0:hover:not([disabled]) {
   border-color: #C1C6CC;
 }
 

packages/design-tokens/src/utils/helpers.ts

@@ -57,3 +57,6 @@ export const toggleSwitchShadowColor = () => css`
   box-shadow: 0 0 0 0.2rem
     ${({ theme }) => rgba(theme.colors.keyInteractive, 0.4)};
 `
+
+export const disabledSwatchColor = (color?: string) =>
+  color && color !== 'transparent' ? rgba(color, 0.85) : undefined

storybook/src/Forms/Color.stories.tsx

@@ -25,7 +25,7 @@
  */
 
 import React, { useState } from 'react'
-import { FieldColor, FieldSelect } from '@looker/components'
+import { FieldColor, FieldSelect, InputColor } from '@looker/components'
 
 export default { title: 'Forms/Color' }
 
@@ -51,3 +51,5 @@ export const ControlledColor = () => {
     </>
   )
 }
+
+export const InputColorExample = () => <InputColor value="purple" disabled />

www/src/documentation/components/forms/input-color.mdx

@@ -13,5 +13,6 @@ The `InputColor` component has an input to add a color value and a color wheel t
   <InputColor value="green" />
   <InputColor defaultValue="purple" />
   <InputColor disabled />
+  <InputColor defaultValue="green" disabled />
 </SpaceVertical>
 ```