Bug 1780367: NumberSpinner fixes

frontend/public/components/modals/configure-count-modal.tsx

@@ -40,6 +40,7 @@ export const ConfigureCountModal = withHandlePromise((props: ConfigureCountModal
           changeValueBy={(operation) => setValue(_.toInteger(value) + operation)}
           autoFocus
           required
+          min={0}
         />
       </ModalBody>
       <ModalSubmitFooter

frontend/public/components/utils/_number-spinner.scss

@@ -1,21 +1,25 @@
+.co-m-number-spinner__button {
+  padding: 0 !important;
+}
+
 .co-m-number-spinner__input {
   @include co-x-prefix(user-select, none);
   display: inline-block;
 }
 
-.co-m-number-spinner__up-icon,
 .co-m-number-spinner__down-icon {
-  @include co-x-prefix(user-select, none);
-  cursor: pointer;
-  font-size: 20px;
-  position: relative;
-  top: 4px;
+  margin-right: 10px;
 }
 
 .co-m-number-spinner__up-icon {
   margin-left: 10px;
 }
 
-.co-m-number-spinner__down-icon {
-  margin-right: 10px;
+.co-m-number-spinner__down-icon,
+.co-m-number-spinner__up-icon {
+  @include co-x-prefix(user-select, none);
+  font-size: 20px;
+  position: relative;
+  top: 4px;
 }
+

frontend/public/components/utils/number-spinner.tsx

@@ -1,28 +1,47 @@
 import * as _ from 'lodash-es';
 import * as React from 'react';
 import * as classNames from 'classnames';
+import { Button } from '@patternfly/react-core';
 import { MinusSquareIcon, PlusSquareIcon } from '@patternfly/react-icons';
 
-export const NumberSpinner: React.FC<NumberSpinnerProps> = (props) => {
-  const inputProps = _.omit(props, ['className', 'changeValueBy']);
-  const className = classNames(props.className, 'co-m-number-spinner__input');
-
+export const NumberSpinner: React.FC<NumberSpinnerProps> = ({
+  className,
+  changeValueBy,
+  min,
+  ...inputProps
+}) => {
   return (
     <div>
-      <MinusSquareIcon
-        className="co-m-number-spinner__down-icon"
-        onClick={() => props.changeValueBy(-1)}
-      />
-      <input type="number" className={className} {...inputProps} />
-      <PlusSquareIcon
-        className="co-m-number-spinner__up-icon"
-        onClick={() => props.changeValueBy(1)}
+      <Button
+        onClick={() => changeValueBy(-1)}
+        type="button"
+        variant="plain"
+        isDisabled={!_.isNil(min) && inputProps.value <= min}
+        aria-label="Decrement"
+        className="co-m-number-spinner__button"
+      >
+        <MinusSquareIcon className="co-m-number-spinner__down-icon" />
+      </Button>
+      <input
+        type="number"
+        className={classNames(className, 'co-m-number-spinner__input')}
+        {...inputProps}
       />
+      <Button
+        onClick={() => changeValueBy(1)}
+        type="button"
+        variant="plain"
+        aria-label="Increment"
+        className="co-m-number-spinner__button"
+      >
+        <PlusSquareIcon className="co-m-number-spinner__up-icon" />
+      </Button>
     </div>
   );
 };
 
 type NumberSpinnerProps = {
   className?: string;
   changeValueBy: (operation: number) => void;
+  min?: number;
 } & React.HTMLProps<HTMLInputElement>;