Merge branch 'master' into UIPQB-64

# Conflicts: # CHANGELOG.md
folio-org · Nov 13, 2023 · c9fb89d · c9fb89d
2 parents d15d5b1 + 87ed788
commit c9fb89d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ## (in progress)
 * [UIPQB-60](https://issues.folio.org/browse/UIPQB-60) 'In' and 'Not In' requests not properly formatted for [Users] "User ID"
 * [UIPQB-56](https://issues.folio.org/browse/UIPQB-56) Prevent columns from being reset when query is changed
+* [UIPQB-67](https://issues.folio.org/browse/UIPQB-67) Styles are defined globally for inputs with type "number"
 * [UIPQB-64](https://issues.folio.org/browse/UIPQB-64) Query builder can’t edit single condition queries without AND wrapper
 
 ## [1.0.0](https://github.com/folio-org/ui-plugin-query-builder/tree/v1.0.0) (2023-10-12)

diff --git a/src/QueryBuilder/QueryBuilder.css b/src/QueryBuilder/QueryBuilder.css
@@ -7,13 +7,13 @@
     align-items: center;
 }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
+input.NumberInput::-webkit-outer-spin-button,
+input.NumberInput::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
 
 /* Firefox */
-input[type=number] {
+input.NumberInput[type=number] {
     -moz-appearance: textfield;
 }
diff --git a/src/QueryBuilder/QueryBuilder/QueryBuilderModal/DataTypeInput/DataTypeInput.js b/src/QueryBuilder/QueryBuilder/QueryBuilderModal/DataTypeInput/DataTypeInput.js
@@ -13,6 +13,8 @@ import { OPERATORS } from '../../../../constants/operators';
 import { SelectionContainer } from '../SelectionContainer/SelectionContainer';
 import { ISO_FORMAT } from '../../helpers/timeUtils';
 
+import css from '../../../QueryBuilder.css';
+
 export const DataTypeInput = ({
   availableValues,
   onChange,
@@ -28,7 +30,7 @@ export const DataTypeInput = ({
   const isEqualRelatedOperator = [OPERATORS.EQUAL, OPERATORS.NOT_EQUAL].includes(operator);
   const hasSourceOrValues = source || availableValues;
 
-  const textControl = ({ testId, type = 'text' }) => {
+  const textControl = ({ testId, type = 'text', textClass }) => {
     const onKeyDown = (event) => {
       // prevent typing e, +, - in number type
       if (type === 'number' && (event.keyCode === 69 || event.keyCode === 187 || event.keyCode === 189)) {
@@ -42,6 +44,7 @@ export const DataTypeInput = ({
         onChange={(e) => onChange(e.target.value, index, COLUMN_KEYS.VALUE)}
         onKeyDown={onKeyDown}
         type={type}
+        className={textClass}
         {...rest}
       />
     );
@@ -114,7 +117,9 @@ export const DataTypeInput = ({
   };
 
   const numericTypeControls = () => {
-    return hasSourceOrValues ? selectControl({ testId: 'data-input-select-numeric' }) : textControl({ type: 'number' });
+    return hasSourceOrValues
+      ? selectControl({ testId: 'data-input-select-numeric' })
+      : textControl({ type: 'number', textClass: css.NumberInput });
   };
 
   const booleanTypeControls = () => (