@planningcenter/tapestry-react 1.0.0 → 1.1.0

package/dist/cjs/ActionsDropdown/ActionsDropdown.js

@@ -38,13 +38,13 @@ function ActionsDropdown(_ref) {
       duplicates = _ref.duplicates,
       _ref$duplicatesButton = _ref.duplicatesButtonProps,
       duplicatesButtonProps = _ref$duplicatesButton === void 0 ? {
-    color: 'white',
-    backgroundColor: 'hsl(25deg 79% 57%)',
+    backgroundColor: 'hsl(42deg 87% 94%)',
+    color: 'hsl(0deg 0% 24%)',
     hover: {
-      backgroundColor: 'hsl(25deg 80% 54%)'
+      backgroundColor: 'hsl(42deg 87% 90%)'
     },
     active: {
-      backgroundColor: 'hsl(25deg 82% 51%)'
+      backgroundColor: 'hsl(42deg 87% 87%)'
     }
   } : _ref$duplicatesButton,
       inactive = _ref.inactive,
@@ -61,8 +61,9 @@ function ActionsDropdown(_ref) {
   return /*#__PURE__*/React.createElement(_Dropdown["default"], (0, _extends2["default"])({
     title: "Actions",
     iconLeft: hasDuplicates || hasInactiveDate ? {
+      color: hasDuplicates ? '#E6A714' : 'white',
       name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
-      size: 'lg'
+      size: 'md'
     } : undefined,
     fontSize: "14px",
     fontWeight: 400,
@@ -78,9 +79,9 @@ function ActionsDropdown(_ref) {
     padding: 2,
     spacing: 1
   }, /*#__PURE__*/React.createElement(_Icon["default"], {
-    name: "exclamation-triangle-filled",
-    color: "#e8833a",
-    marginTop: "3px"
+    color: "#E6A714",
+    marginTop: "3px",
+    name: "exclamation-triangle-filled"
   }), /*#__PURE__*/React.createElement(_Text["default"], {
     size: 4
   }, "There ", duplicates.amount > 1 ? 'are' : 'is', " ", duplicates.amount, ' ', "potential ", duplicates.amount > 1 ? 'duplicates' : 'duplicate', " for this profile.", ' ', isBelowManager ? "An administrator can resolve " + (duplicates.amount > 1 ? "them" : "it") + " in People." : /*#__PURE__*/React.createElement(_Link["default"], duplicates.linkProps, isPeopleProduct ? 'Review' : 'Review in People'))), /*#__PURE__*/React.createElement(_Divider["default"], null)) : null, hasInactiveDate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_StackView["default"], {

package/dist/cjs/NumberField/NumberField.js

@@ -139,12 +139,25 @@ var NumberField = /*#__PURE__*/function (_Component) {
           maxValue = _this$getParsedValues5.maxValue;
 
       if (_this.props.pad) {
-        var targetValue = event.target.value === '' ? event.target.value : parseFloat(event.target.value);
+        var deleteKeyPressed = event.target.value === '';
+        var targetValue = deleteKeyPressed ? event.target.value : parseFloat(event.target.value);
 
-        if (targetValue !== '') {
-          var nextValue = _this.clampValue(targetValue);
+        if (deleteKeyPressed) {
+          var nextValue = ("" + _this.props.value).slice(0, -1);
 
-          if (_this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
+          _this.props.onChange((0, _utils.padNumber)(nextValue, _this.props.pad));
+        } else {
+          var _nextValue = _this.clampValue(targetValue);
+
+          var paddedValue = parseFloat("" + _this.props.value + targetValue);
+
+          if (!_this.firstTouch && !isNaN(targetValue) && _this.isValueValid(paddedValue)) {
+            _nextValue = paddedValue;
+          }
+
+          _this.firstTouch = false;
+
+          if (_this.props.moveFocusOnMax && _nextValue / maxValue > 0.1) {
             var _getTabbableSiblings = (0, _utils.getTabbableSiblings)(event.target),
                 next = _getTabbableSiblings.next;
 
@@ -155,11 +168,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
             }
           }
 
-          _this.firstTouch = false;
-
-          _this.changeIfValid(nextValue);
-        } else {
-          _this.props.onChange('');
+          _this.changeIfValid(_nextValue);
         }
       } else {
         _this.props.onChange(event.target.value);
@@ -222,7 +231,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
       textOverflow: undefined,
       autoComplete: 'off',
       value: numberValue,
-      highlightOnInteraction: highlightOnInteraction,
+      highlightOnInteraction: highlightOnInteraction || pad,
       onBlur: this.handleBlur,
       onInput: this.handleInput,
       onKeyDown: this.handleKeyDown

package/dist/esm/ActionsDropdown/ActionsDropdown.js

@@ -12,9 +12,9 @@ import Text from '../Text';
 import { cloneChildren } from '../utils';
 
 var _ref2 = /*#__PURE__*/React.createElement(Icon, {
-  name: "exclamation-triangle-filled",
-  color: "#e8833a",
-  marginTop: "3px"
+  color: "#E6A714",
+  marginTop: "3px",
+  name: "exclamation-triangle-filled"
 });
 
 var _ref3 = /*#__PURE__*/React.createElement(Divider, null);
@@ -52,13 +52,13 @@ export function ActionsDropdown(_ref) {
       duplicates = _ref.duplicates,
       _ref$duplicatesButton = _ref.duplicatesButtonProps,
       duplicatesButtonProps = _ref$duplicatesButton === void 0 ? {
-    color: 'white',
-    backgroundColor: 'hsl(25deg 79% 57%)',
+    backgroundColor: 'hsl(42deg 87% 94%)',
+    color: 'hsl(0deg 0% 24%)',
     hover: {
-      backgroundColor: 'hsl(25deg 80% 54%)'
+      backgroundColor: 'hsl(42deg 87% 90%)'
     },
     active: {
-      backgroundColor: 'hsl(25deg 82% 51%)'
+      backgroundColor: 'hsl(42deg 87% 87%)'
     }
   } : _ref$duplicatesButton,
       inactive = _ref.inactive,
@@ -75,8 +75,9 @@ export function ActionsDropdown(_ref) {
   return /*#__PURE__*/React.createElement(Dropdown, _extends({
     title: "Actions",
     iconLeft: hasDuplicates || hasInactiveDate ? {
+      color: hasDuplicates ? '#E6A714' : 'white',
       name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
-      size: 'lg'
+      size: 'md'
     } : undefined,
     fontSize: "14px",
     fontWeight: 400,

package/dist/esm/NumberField/NumberField.js

@@ -134,12 +134,25 @@ var NumberField = /*#__PURE__*/function (_Component) {
           maxValue = _this$getParsedValues5.maxValue;
 
       if (_this.props.pad) {
-        var targetValue = event.target.value === '' ? event.target.value : parseFloat(event.target.value);
+        var deleteKeyPressed = event.target.value === '';
+        var targetValue = deleteKeyPressed ? event.target.value : parseFloat(event.target.value);
 
-        if (targetValue !== '') {
-          var nextValue = _this.clampValue(targetValue);
+        if (deleteKeyPressed) {
+          var nextValue = ("" + _this.props.value).slice(0, -1);
 
-          if (_this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
+          _this.props.onChange(padNumber(nextValue, _this.props.pad));
+        } else {
+          var _nextValue = _this.clampValue(targetValue);
+
+          var paddedValue = parseFloat("" + _this.props.value + targetValue);
+
+          if (!_this.firstTouch && !isNaN(targetValue) && _this.isValueValid(paddedValue)) {
+            _nextValue = paddedValue;
+          }
+
+          _this.firstTouch = false;
+
+          if (_this.props.moveFocusOnMax && _nextValue / maxValue > 0.1) {
             var _getTabbableSiblings = getTabbableSiblings(event.target),
                 next = _getTabbableSiblings.next;
 
@@ -150,11 +163,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
             }
           }
 
-          _this.firstTouch = false;
-
-          _this.changeIfValid(nextValue);
-        } else {
-          _this.props.onChange('');
+          _this.changeIfValid(_nextValue);
         }
       } else {
         _this.props.onChange(event.target.value);
@@ -219,7 +228,7 @@ var NumberField = /*#__PURE__*/function (_Component) {
       textOverflow: undefined,
       autoComplete: 'off',
       value: numberValue,
-      highlightOnInteraction: highlightOnInteraction,
+      highlightOnInteraction: highlightOnInteraction || pad,
       onBlur: this.handleBlur,
       onInput: this.handleInput,
       onKeyDown: this.handleKeyDown

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/ActionsDropdown/ActionsDropdown.tsx

@@ -60,10 +60,10 @@ export function ActionsDropdown({
   defaultButtonProps = defaultTheme.button.themes.primary.fill,
   duplicates,
   duplicatesButtonProps = {
-    color: 'white',
-    backgroundColor: 'hsl(25deg 79% 57%)',
-    hover: { backgroundColor: 'hsl(25deg 80% 54%)' },
-    active: { backgroundColor: 'hsl(25deg 82% 51%)' },
+    backgroundColor: 'hsl(42deg 87% 94%)',
+    color: 'hsl(0deg 0% 24%)',
+    hover: { backgroundColor: 'hsl(42deg 87% 90%)' },
+    active: { backgroundColor: 'hsl(42deg 87% 87%)' },
   },
   inactive,
   inactiveButtonProps = {
@@ -82,8 +82,9 @@ export function ActionsDropdown({
       iconLeft={
         hasDuplicates || hasInactiveDate
           ? {
+              color: hasDuplicates ? '#E6A714' : 'white',
               name: hasDuplicates ? 'exclamation-triangle-filled' : 'inactive',
-              size: 'lg',
+              size: 'md',
             }
           : undefined
       }
@@ -104,9 +105,9 @@ export function ActionsDropdown({
         <>
           <StackView axis="horizontal" padding={2} spacing={1}>
             <Icon
-              name="exclamation-triangle-filled"
-              color="#e8833a"
+              color="#E6A714"
               marginTop="3px"
+              name="exclamation-triangle-filled"
             />
             <Text size={4}>
               There {duplicates.amount > 1 ? 'are' : 'is'} {duplicates.amount}{' '}

package/src/NumberField/NumberField.js

@@ -168,13 +168,26 @@ class NumberField extends Component<Props> {
   handleInput = (event) => {
     const { maxValue } = this.getParsedValues(event.target.value)
     if (this.props.pad) {
-      const targetValue =
-        event.target.value === ''
-          ? event.target.value
-          : parseFloat(event.target.value)
+      const deleteKeyPressed = event.target.value === ''
+      const targetValue = deleteKeyPressed
+        ? event.target.value
+        : parseFloat(event.target.value)
 
-      if (targetValue !== '') {
+      if (deleteKeyPressed) {
+        const nextValue = `${this.props.value}`.slice(0, -1)
+        this.props.onChange(padNumber(nextValue, this.props.pad))
+      } else {
         let nextValue = this.clampValue(targetValue)
+        const paddedValue = parseFloat(`${this.props.value}${targetValue}`)
+        if (
+          !this.firstTouch &&
+          !isNaN(targetValue) &&
+          this.isValueValid(paddedValue)
+        ) {
+          nextValue = paddedValue
+        }
+        this.firstTouch = false
+
         if (this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
           const { next } = getTabbableSiblings(event.target)
           if (next) {
@@ -182,10 +195,7 @@ class NumberField extends Component<Props> {
           }
         }
 
-        this.firstTouch = false
         this.changeIfValid(nextValue)
-      } else {
-        this.props.onChange('')
       }
     } else {
       this.props.onChange(event.target.value)
@@ -244,7 +254,7 @@ class NumberField extends Component<Props> {
       textOverflow: undefined,
       autoComplete: 'off',
       value: numberValue,
-      highlightOnInteraction: highlightOnInteraction,
+      highlightOnInteraction: highlightOnInteraction || pad,
       onBlur: this.handleBlur,
       onInput: this.handleInput,
       onKeyDown: this.handleKeyDown,