diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 1e53cdaf..bcebeb36 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -50,6 +50,7 @@ We use a variation on [BEM Naming Conventions](http://getbem.com/introduction/)
 ```css
 .component-name--element__modifier
 ```
+
 ```css
 // example:
 .button--checkbox__active
@@ -101,16 +102,20 @@ We offer larger groups of components that are intended to be used together close
 import {FruitApple} from './FruitApple'
 import {FruitOrange} from './FruitOrange'
 ```
+
 ```tsx
 export class Fruit {
   public static Apple = FruitApple
   public static Orange = FruitOrange
 }
 ```
+
 This enables usage like so:
+
 ```tsx
 import {Fruit} from '@influxdata/clockface'
 ```
+
 ```tsx
 <Fruit.Apple />
 <Fruit.Orange />
@@ -133,6 +138,7 @@ import {Fruit} from '@influxdata/clockface'
       FruitExample.md
   Fruit.stories.tsx
 ```
+
 We strongly encourage including examples of all the components in a family working together
 
 ### 4. The Consistent Customization Pattern
@@ -158,6 +164,6 @@ $cf-radius: 4px;
 
 When creating or modifying components use these size variables. There also other variables located in [variables.scss](https://github.com/influxdata/clockface/blob/master/src/Styles/variables.scss) that are useful for ensuring visual consistency
 
---------------
+---
 
 # More Coming Soon
diff --git a/package.json b/package.json
index d3193c6f..35ff1311 100644
--- a/package.json
+++ b/package.json
@@ -108,4 +108,4 @@
     "storybook": "start-storybook -p 9001 -c .storybook",
     "publishStorybook": "storybook-to-ghpages --out=.out"
   }
-}
\ No newline at end of file
+}
diff --git a/src/Components/ColorPicker/ColorPickerSwatch.tsx b/src/Components/ColorPicker/ColorPickerSwatch.tsx
index 66f2d576..c021326a 100644
--- a/src/Components/ColorPicker/ColorPickerSwatch.tsx
+++ b/src/Components/ColorPicker/ColorPickerSwatch.tsx
@@ -62,10 +62,12 @@ export const ColorPickerSwatch = forwardRef<
       onClick(hex)
     }
 
+    const title = name ? name : hex
+
     return (
       <div
         className={colorPickerSwatchClass}
-        title={hex}
+        title={title}
         onClick={handleClick}
         data-testid={`${testID}--swatch`}
         style={colorPickerSwatchStyle}
diff --git a/src/Components/ResourceList/Documentation/ResourceCard.stories.tsx b/src/Components/ResourceList/Documentation/ResourceCard.stories.tsx
index 4c4e77b7..9418dd46 100644
--- a/src/Components/ResourceList/Documentation/ResourceCard.stories.tsx
+++ b/src/Components/ResourceList/Documentation/ResourceCard.stories.tsx
@@ -460,7 +460,9 @@ resourceListExampleStories.add(
                         value=""
                         selected={false}
                         wrapText={false}
+                        /* eslint-disable */
                         onClick={() => {}}
+                        /* eslint-enable */
                         backgroundColor={InfluxColors.Pool}
                         size={ComponentSize.Small}
                       >
@@ -515,7 +517,9 @@ resourceListExampleStories.add(
                 name="CRIT"
                 color="#da3434"
                 size={ComponentSize.ExtraSmall}
+                /* eslint-disable */
                 onDelete={() => {}}
+                /* eslint-enable */
               />
               <Label
                 id="WARN"
@@ -523,7 +527,9 @@ resourceListExampleStories.add(
                 name="WARN"
                 color="#f2b218"
                 size={ComponentSize.ExtraSmall}
+                /* eslint-disable */
                 onDelete={() => {}}
+                /* eslint-enable*/
               />
               <Label
                 id="OK"
@@ -531,7 +537,9 @@ resourceListExampleStories.add(
                 name="OK"
                 color="#6ac255"
                 size={ComponentSize.ExtraSmall}
+                /* eslint-disable */
                 onDelete={() => {}}
+                /* eslint-enable */
               />
             </FlexBox>
           </ResourceCard>
diff --git a/src/Components/SelectGroup/Documentation/SelectGroup.stories.tsx b/src/Components/SelectGroup/Documentation/SelectGroup.stories.tsx
index e32054ed..b74fcce2 100644
--- a/src/Components/SelectGroup/Documentation/SelectGroup.stories.tsx
+++ b/src/Components/SelectGroup/Documentation/SelectGroup.stories.tsx
@@ -91,7 +91,7 @@ selectGroupStories.add(
             ]
           }
         >
-          {mirepoix.map((btn, i) => {
+          {mirepoix.map(btn => {
             const isSelectGroup =
               select('type', mapEnumKeys(InputToggleType), 'SelectGroup') ===
               'SelectGroup'
diff --git a/src/Components/SelectGroup/SelectGroupOption.tsx b/src/Components/SelectGroup/SelectGroupOption.tsx
index 25613475..2b42e40d 100644
--- a/src/Components/SelectGroup/SelectGroupOption.tsx
+++ b/src/Components/SelectGroup/SelectGroupOption.tsx
@@ -50,7 +50,9 @@ export const SelectGroupOption = forwardRef<
       testID = 'select-group--option',
       active,
       onClick,
+      /* eslint-disable */
       onKeyUp,
+      /* eslint-enable */
       tabIndex,
       disabled = false,
       children,
diff --git a/src/Constants/colors.ts b/src/Constants/colors.ts
index 718db383..01f0797c 100644
--- a/src/Constants/colors.ts
+++ b/src/Constants/colors.ts
@@ -1,4 +1,4 @@
-import { Color, InfluxColors } from '../Types'
+import {Color, InfluxColors} from '../Types'
 
 export const influxColors: Color[] = [
   // Row 1
@@ -486,7 +486,7 @@ export const influxGradients = {
   Info: {
     start: InfluxColors.Pool,
     stop: InfluxColors.Pulsar,
-  }
+  },
 }
 
 export const dropdownScrollColors = {
diff --git a/src/Sandbox/Cards.stories.tsx b/src/Sandbox/Cards.stories.tsx
index 50c1302e..a88b53c4 100644
--- a/src/Sandbox/Cards.stories.tsx
+++ b/src/Sandbox/Cards.stories.tsx
@@ -127,7 +127,9 @@ function CardBucketsFull() {
             name="user:influx"
             color="#9AF445"
             size={ComponentSize.ExtraSmall}
+            /* eslint-disable */
             onDelete={() => {}}
+            /* eslint-enable */
           />
         </FlexBox>
         <FlexBox direction={FlexDirection.Row} margin={ComponentSize.Medium}>
@@ -188,9 +190,11 @@ function CardDisabled() {
           margin={ComponentSize.Medium}
         >
           <SlideToggle
+            /* eslint-disable */
             onChange={() => {
               // Do nothing
             }}
+            /* eslint-enable */
             size={ComponentSize.ExtraSmall}
             active={false}
           />
@@ -287,7 +291,9 @@ function CardAll() {
           name="CRIT"
           color="#da3434"
           size={ComponentSize.ExtraSmall}
+          /* eslint-disable */
           onDelete={() => {}}
+          /* eslint-enable */
         />
         <Label
           id="WARN"
@@ -295,7 +301,9 @@ function CardAll() {
           name="WARN"
           color="#f2b218"
           size={ComponentSize.ExtraSmall}
+          /* eslint-disable */
           onDelete={() => {}}
+          /* eslint-enable */
         />
         <Label
           id="OK"
@@ -303,7 +311,9 @@ function CardAll() {
           name="OK"
           color="#6ac255"
           size={ComponentSize.ExtraSmall}
+          /* eslint-disable */
           onDelete={() => {}}
+          /* eslint-enable */
         />
       </FlexBox>
     </ResourceCard>
@@ -321,9 +331,11 @@ function CardTask() {
           margin={ComponentSize.Medium}
         >
           <SlideToggle
+            /* eslint-disable */
             onChange={() => {
               // Do nothing
             }}
+            /* eslint-enable */
             size={ComponentSize.ExtraSmall}
             active={true}
           />
@@ -390,7 +402,9 @@ function CardLabel() {
           name="Analytics"
           color="#C5F98D"
           size={ComponentSize.Small}
+          /* eslint-disable */
           onDelete={() => {}}
+          /* eslint-enable */
         />
         <span>No description</span>
       </ResourceCard.Meta>
diff --git a/src/Types/Types.md b/src/Types/Types.md
index 97c61247..d7ffe34c 100644
--- a/src/Types/Types.md
+++ b/src/Types/Types.md
@@ -8,24 +8,24 @@ Clockface offers a set of common `enum` data types which control the appearance
 
 ### Data Types Reference
 
-| Name | Values |
-|:-------------------|:----------------------------------------------------------------|
-| `ComponentColor` | `Default` `Primary` `Danger` `Tertiary` `Colorless` |
-| `ComponentSize` | `ExtraSmall` `Small` `Medium` `Large` |
-| `ComponentStatus` | `Default` `Loading` `Error` `Valid` `Disabled` |
-| `DropdownMenuTheme` | `Amethyst` `Malachite` `Sapphire` `Onyx` |
-| `DropdownItemType` | `Dot` `Checkbox` `None` |
-| `ButtonShape` | `Default` `Square` `StretchToFit` |
-| `ButtonType` | `Button` `Submit` |
-| `Columns` | `One` `Two` `Three` `Four` `Five` `Six` `Seven` `Eight` `Nine` `Ten` `Eleven` `Twelve` |
-| `Sort` | `Descending` `Ascending` `None` |
-| `Alignment` | `Left` `Center` `Right` |
-| `JustifyContent` | `FlexStart` `Center` `FlexEnd` `SpaceAround` `SpaceBetween` |
-| `AlignItems` | `FlexStart` `Center` `FlexEnd` `Stretch` |
-| `FlexDirection` | `Row` `RowReverse` `Column` `ColumnReverse` |
-| `RemoteDataState` | `NotStarted` `Loading` `Done` `Error` |
-| `AutoComplete` | `On` `Off` |
-| `Orientation` | `Horizontal` `Vertical` |
+| Name                | Values                                                                                 |
+| :------------------ | :------------------------------------------------------------------------------------- |
+| `ComponentColor`    | `Default` `Primary` `Danger` `Tertiary` `Colorless`                                    |
+| `ComponentSize`     | `ExtraSmall` `Small` `Medium` `Large`                                                  |
+| `ComponentStatus`   | `Default` `Loading` `Error` `Valid` `Disabled`                                         |
+| `DropdownMenuTheme` | `Amethyst` `Malachite` `Sapphire` `Onyx`                                               |
+| `DropdownItemType`  | `Dot` `Checkbox` `None`                                                                |
+| `ButtonShape`       | `Default` `Square` `StretchToFit`                                                      |
+| `ButtonType`        | `Button` `Submit`                                                                      |
+| `Columns`           | `One` `Two` `Three` `Four` `Five` `Six` `Seven` `Eight` `Nine` `Ten` `Eleven` `Twelve` |
+| `Sort`              | `Descending` `Ascending` `None`                                                        |
+| `Alignment`         | `Left` `Center` `Right`                                                                |
+| `JustifyContent`    | `FlexStart` `Center` `FlexEnd` `SpaceAround` `SpaceBetween`                            |
+| `AlignItems`        | `FlexStart` `Center` `FlexEnd` `Stretch`                                               |
+| `FlexDirection`     | `Row` `RowReverse` `Column` `ColumnReverse`                                            |
+| `RemoteDataState`   | `NotStarted` `Loading` `Done` `Error`                                                  |
+| `AutoComplete`      | `On` `Off`                                                                             |
+| `Orientation`       | `Horizontal` `Vertical`                                                                |
 
 <!-- STORY HIDE START -->
 
diff --git a/src/Utils/index.ts b/src/Utils/index.ts
index ba675fa3..e8bef3b3 100644
--- a/src/Utils/index.ts
+++ b/src/Utils/index.ts
@@ -1,10 +1,10 @@
 //Libraries
-import { CSSProperties } from 'react'
+import {CSSProperties} from 'react'
 import chroma from 'chroma-js'
-import { uniq, shuffle, capitalize, random } from 'lodash'
+import {uniq, shuffle, capitalize, random} from 'lodash'
 
 // Constants
-import { getColorsFromGradient } from '../Utils/colors'
+import {getColorsFromGradient} from '../Utils/colors'
 
 // Types
 import {
@@ -34,7 +34,7 @@ export const calculateTextColorFromBackground = (
   const mediumGrey = 0.37
 
   if (gradient) {
-    const { start } = getColorsFromGradient(gradient)
+    const {start} = getColorsFromGradient(gradient)
     return chroma(start).luminance() >= mediumGrey ? 'dark' : 'light'
   }
 
@@ -57,7 +57,7 @@ export const generateBackgroundStyle = (
   }
 
   let border = `2px solid ${backgroundColor}`
-  let panelStyle: CSSProperties = { backgroundColor }
+  let panelStyle: CSSProperties = {backgroundColor}
 
   if (gradient) {
     const colors = getColorsFromGradient(gradient)
@@ -72,11 +72,11 @@ export const generateBackgroundStyle = (
   }
 
   if (bordered) {
-    panelStyle = { ...panelStyle, border }
+    panelStyle = {...panelStyle, border}
   }
 
   if (style) {
-    return { ...panelStyle, ...style }
+    return {...panelStyle, ...style}
   }
 
   return panelStyle
@@ -88,7 +88,7 @@ export const generateTextBlockStyle = (
   style?: CSSProperties
 ): CSSProperties | undefined => {
   if (!backgroundColor) {
-    return { color: `${textColor}`, ...style }
+    return {color: `${textColor}`, ...style}
   }
 
   const contrastingTextColor =
@@ -102,7 +102,7 @@ export const generateTextBlockStyle = (
     color = `${textColor}`
   }
 
-  return { backgroundColor, color, ...style }
+  return {backgroundColor, color, ...style}
 }
 
 export const generateLabelStyle = (
@@ -153,7 +153,7 @@ export const generateTechnoSpinnerStyle = (
       borderWidth = 8
   }
 
-  return { width, height, borderWidth, ...style }
+  return {width, height, borderWidth, ...style}
 }
 
 export const generateRangeSliderTrackFillStyle = (
@@ -165,7 +165,7 @@ export const generateRangeSliderTrackFillStyle = (
   status: ComponentStatus
 ): CSSProperties | undefined => {
   if (status === ComponentStatus.Disabled) {
-    return { background: InfluxColors.Castle }
+    return {background: InfluxColors.Castle}
   }
 
   const fillColor = {