change: NumberInput and MultiSelect

greenbone · Nov 28, 2024 · 1699ae8 · 1699ae8
1 parent f2c3374
commit 1699ae8
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 2 deletions.
diff --git a/src/web/components/form/multiselect.jsx b/src/web/components/form/multiselect.jsx
@@ -16,6 +16,33 @@ import {isDefined} from 'gmp/utils/identity';
 import PropTypes from 'web/utils/proptypes';
 
 import useTranslation from 'web/hooks/useTranslation';
+import styled from 'styled-components';
+
+const getSize = size => (size === 'lg' ? '40px' : '32px');
+
+const getFontSize = size =>
+  size === 'lg' ? 'var(--mantine-font-size-lg)' : 'var(--mantine-font-size-md)';
+
+const getBorderColor = errorContent =>
+  isDefined(errorContent)
+    ? 'var(--input-error-border-color)'
+    : 'var(--input-border-color)';
+
+const getColor = errorContent =>
+  isDefined(errorContent) ? 'var(--mantine-color-red-5)' : 'var(--input-color)';
+
+const StyledMultiSelect = styled(MantineMultiSelect)`
+  .mantine-MultiSelect-input,
+  .mantine-MultiSelect-item {
+    min-height: ${({size}) => getSize(size)};
+    font-size: ${({size}) => getFontSize(size)};
+    border-color: ${({errorContent}) => getBorderColor(errorContent)};
+    color: ${({errorContent}) => getColor(errorContent)};
+  }
+  .mantine-MultiSelect-item:hover {
+    background-color: var(--select-selected-background-color-hover);
+  }
+`;
 
 const MultiSelect = ({
   disabled,
@@ -30,6 +57,8 @@ const MultiSelect = ({
   searchable = true,
   title,
   value,
+  size = 'md',
+  height,
   onChange,
   ...props
 }) => {
@@ -42,6 +71,7 @@ const MultiSelect = ({
     },
     [name, onChange],
   );
+
   if (isLoading) {
     return (
       <TextInput
@@ -53,7 +83,7 @@ const MultiSelect = ({
     );
   }
   return (
-    <MantineMultiSelect
+    <StyledMultiSelect
       {...props}
       styles={{root: {flexGrow: grow}}}
       disabled={disabled || !items?.length}
@@ -66,6 +96,8 @@ const MultiSelect = ({
       placeholder={placeholder}
       name={name}
       value={value}
+      size={size}
+      errorContent={errorContent}
       onChange={handleChange}
     />
   );
@@ -89,6 +121,8 @@ MultiSelect.propTypes = {
   searchable: PropTypes.bool,
   title: PropTypes.string,
   value: PropTypes.array,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  height: PropTypes.number,
   onChange: PropTypes.func,
 };
 

diff --git a/src/web/components/form/numberfield.jsx b/src/web/components/form/numberfield.jsx
@@ -6,11 +6,40 @@
 import React, {useCallback, forwardRef} from 'react';
 
 import {NumberInput} from '@mantine/core';
+import styled from 'styled-components';
 
 import PropTypes from 'web/utils/proptypes';
 import {parseFloat, parseInt} from 'gmp/parser';
 import {isDefined} from 'gmp/utils/identity';
 
+const getSize = size => (size === 'lg' ? '40px' : '32px');
+
+const getFontSize = size =>
+  size === 'lg' ? 'var(--mantine-font-size-lg)' : 'var(--mantine-font-size-md)';
+
+const getBorderColor = errorContent =>
+  isDefined(errorContent)
+    ? 'var(--input-error-border-color)'
+    : 'var(--input-border-color)';
+
+const getColor = errorContent =>
+  isDefined(errorContent) ? 'var(--mantine-color-red-5)' : 'var(--input-color)';
+
+const StyledNumberInput = styled(NumberInput)`
+  input,
+  .mantine-NumberInput-controls {
+    height: ${({size}) => getSize(size)};
+    min-height: ${({size}) => getSize(size)};
+    font-size: ${({size}) => getFontSize(size)};
+    border-color: ${({errorContent}) => getBorderColor(errorContent)};
+    color: ${({errorContent}) => getColor(errorContent)};
+  }
+  .mantine-NumberInput-control {
+    border-color: ${({errorContent}) => getBorderColor(errorContent)};
+    color: ${({errorContent}) => getColor(errorContent)};
+  }
+`;
+
 const NumberField = forwardRef(
   (
     {
@@ -28,6 +57,7 @@ const NumberField = forwardRef(
       title,
       type = 'int',
       value,
+      size = 'md',
       onChange,
       ...props
     },
@@ -50,7 +80,7 @@ const NumberField = forwardRef(
     );
 
     return (
-      <NumberInput
+      <StyledNumberInput
         {...props}
         ref={ref}
         allowDecimal={type === 'float'}
@@ -66,6 +96,8 @@ const NumberField = forwardRef(
         suffix={suffix}
         step={parseFloat(step)}
         value={value}
+        size={size}
+        errorContent={errorContent}
         onChange={handleChange}
       />
     );
@@ -87,6 +119,8 @@ NumberField.propTypes = {
   title: PropTypes.string,
   type: PropTypes.oneOf(['int', 'float']),
   value: PropTypes.number,
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+  height: PropTypes.number,
   onChange: PropTypes.func,
 };