ColorPicker: Limit alpha decimal places (#5883)

* Limit decimal points displayed in ColorPicker. * Change file. * Revert multiplier change. * Finish reversion. * Switch to precision to fix screener test. * Revert snapshots.
microsoft · Aug 9, 2018 · cfcff98 · cfcff98
1 parent c3c818b
commit cfcff98
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/common/changes/office-ui-fabric-react/jg-5848-colorpicker-alpha-fix_2018-08-09-22-19.json b/common/changes/office-ui-fabric-react/jg-5848-colorpicker-alpha-fix_2018-08-09-22-19.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ColorPicker: Limit decimal points shown for alpha.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jagore@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.base.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.base.tsx
@@ -138,7 +138,7 @@ export class ColorPickerBase extends BaseComponent<IColorPickerProps, IColorPick
                     <TextField
                       className={classNames.input}
                       onBlur={this._onRGBAChanged}
-                      value={String(color.a)}
+                      value={String(color.a ? color.a.toPrecision(3) : color.a)}
                       componentRef={this._aText}
                       spellCheck={false}
                       ariaLabel={this.props.alphaLabel}
@@ -181,7 +181,7 @@ export class ColorPickerBase extends BaseComponent<IColorPickerProps, IColorPick
         r: Number(this._rText.current.value),
         g: Number(this._gText.current.value),
         b: Number(this._bText.current.value),
-        a: Number((this._aText && this._aText.current.value) || 100)
+        a: Number(this._aText.current.value || 100)
       })
     );
   };