Change width of component when alpha allowed

src/components/ColorPicker/ColorPicker.scss

@@ -1,8 +1,11 @@
 @import '../../styles/common';
 
-$picker-size: rem(160px);
+$picker-width: rem(160px);
+$picker-with-alpha-width: rem(194px);
+$picker-height: $picker-width;
 $dragger-size: rem(18px);
-$hex-size: rem(126px);
+$text-picker-width: rem(192px);
+$text-picker-with-alpha-width: $picker-width;
 $alpha-size: rem(90px);
 $inner-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.5);
 
@@ -35,8 +38,12 @@ $swatch-shadow: inset rgba(0, 0, 0, 0.07) 0 0 0 1px,
   @include checkers;
   position: relative;
   overflow: hidden;
-  height: $picker-size;
-  width: $picker-size;
+  height: $picker-height;
+  width: $picker-width;
+
+  &.AlphaAllowed {
+    width: $picker-with-alpha-width;
+  }
 
   // Need an extra pixel to avoid a small color bleed from happening
   border-radius: border-radius() + 1px;
@@ -95,17 +102,17 @@ $swatch-shadow: inset rgba(0, 0, 0, 0.07) 0 0 0 1px,
 $green: rgb(0, 255, 0);
 $purple: rgb(255, 0, 255);
 $huepicker-padding: $dragger-size;
-$huepicker-bottom-padding-start: $picker-size - $dragger-size;
+$huepicker-bottom-padding-start: $picker-width - $dragger-size;
 
 .HuePicker,
 .AlphaPicker {
   position: relative;
   overflow: hidden;
-  height: $picker-size;
+  height: $picker-height;
   width: rem(24px);
   margin-left: spacing(tight);
   border-width: border-radius();
-  border-radius: $picker-size * 0.5;
+  border-radius: $picker-height * 0.5;
 }
 
 .HuePicker {
@@ -126,7 +133,7 @@ $huepicker-bottom-padding-start: $picker-size - $dragger-size;
   @include checkers;
 
   .ColorLayer {
-    border-radius: $picker-size * 0.5;
+    border-radius: $picker-height * 0.5;
   }
 }
 
@@ -152,11 +159,11 @@ $huepicker-bottom-padding-start: $picker-size - $dragger-size;
 }
 
 .TextPicker {
-  width: $picker-size + rem(32px);
+  width: $text-picker-width;
   margin-top: spacing(tight);
 
   &.AlphaAllowed {
-    width: $hex-size;
+    width: $text-picker-with-alpha-width;
   }
 }
 

src/components/ColorPicker/ColorPicker.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {clamp} from '@shopify/javascript-utilities/math';
 
+import {classNames} from '../../utilities/css';
 import {hsbToRgb, hexToHsb} from '../../utilities/color-transformers';
 import {HSBColor, HSBAColor} from '../../utilities/color-types';
 import {
@@ -14,7 +15,8 @@ import {
 import styles from './ColorPicker.scss';
 
 interface State {
-  pickerSize: number;
+  pickerWidth: number;
+  pickerHeight: number;
 }
 
 export interface Color extends HSBColor {
@@ -37,7 +39,8 @@ export interface ColorPickerProps extends BaseProps {}
 
 export class ColorPicker extends React.PureComponent<ColorPickerProps, State> {
   state: State = {
-    pickerSize: 0,
+    pickerWidth: 0,
+    pickerHeight: 0,
   };
 
   private colorNode: HTMLElement | null = null;
@@ -48,25 +51,40 @@ export class ColorPicker extends React.PureComponent<ColorPickerProps, State> {
       return;
     }
 
-    this.setState({pickerSize: colorNode.clientWidth});
+    this.setState({
+      pickerWidth: colorNode.clientWidth,
+      pickerHeight: colorNode.clientHeight,
+    });
 
     if (process.env.NODE_ENV === 'development') {
       setTimeout(() => {
-        this.setState({pickerSize: colorNode.clientWidth});
+        this.setState({
+          pickerWidth: colorNode.clientWidth,
+          pickerHeight: colorNode.clientHeight,
+        });
       }, 0);
     }
   }
 
   render() {
     const {id, color, allowAlpha} = this.props;
     const {hue, saturation, brightness, alpha: providedAlpha} = color;
-    const {pickerSize} = this.state;
+    const {pickerWidth, pickerHeight} = this.state;
 
     const alpha = providedAlpha != null && allowAlpha ? providedAlpha : 1;
     const {red, green, blue} = hsbToRgb({hue, saturation: 1, brightness: 1});
     const colorString = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
-    const draggerX = clamp(saturation * pickerSize, 0, pickerSize);
-    const draggerY = clamp(pickerSize - brightness * pickerSize, 0, pickerSize);
+    const draggerX = clamp(saturation * pickerWidth, 0, pickerWidth);
+    const draggerY = clamp(
+      pickerHeight - brightness * pickerHeight,
+      0,
+      pickerHeight,
+    );
+
+    const className = classNames(
+      styles.MainColor,
+      allowAlpha && styles.AlphaAllowed,
+    );
 
     const alphaSliderMarkup = allowAlpha ? (
       <AlphaPicker
@@ -95,7 +113,7 @@ export class ColorPicker extends React.PureComponent<ColorPickerProps, State> {
           id={id}
           onMouseDown={this.handlePickerDrag}
         >
-          <div ref={this.setColorNode} className={styles.MainColor}>
+          <div ref={this.setColorNode} className={className}>
             <div
               className={styles.ColorLayer}
               style={{backgroundColor: colorString}}
@@ -147,14 +165,14 @@ export class ColorPicker extends React.PureComponent<ColorPickerProps, State> {
   };
 
   private handleDraggerMove = ({x, y}: Position) => {
-    const {pickerSize} = this.state;
+    const {pickerWidth, pickerHeight} = this.state;
     const {
       color: {hue, alpha = 1},
       onChange,
     } = this.props;
 
-    const saturation = clamp(x / pickerSize, 0, 1);
-    const brightness = clamp(1 - y / pickerSize, 0, 1);
+    const saturation = clamp(x / pickerWidth, 0, 1);
+    const brightness = clamp(1 - y / pickerHeight, 0, 1);
 
     onChange({hue, saturation, brightness, alpha});
   };