Merge pull request #149 from kodiak-packages/fix-button-layout

Line scale parameters edit

src/components/Button/Button.module.css

@@ -5,7 +5,7 @@
   padding: 10px 14px;
   border: none;
   cursor: pointer;
-  display: inline-block;
+  display: flex;
 }
 
 .smallButton {

src/components/FormField/FormField.test.tsx

@@ -16,6 +16,24 @@ describe('FormField', () => {
     expect(queryByText(/Something went wrong/)).not.toBe(null);
   });
 
+  test('undefined errorMessage should not be rendered', () => {
+    const { queryByText } = render(
+      <FormField errorMessage={undefined}>Form elements here</FormField>,
+    );
+    expect(queryByText(/undefined/)).toBe(null);
+  });
+
+  test('array of error messages should all be rendered', () => {
+    const { queryByText } = render(
+      <FormField errorMessage={['A first error', 'A second error', undefined]}>
+        Form elements here
+      </FormField>,
+    );
+    expect(queryByText(/A second error/)).not.toBe(null);
+    expect(queryByText(/A first error/)).not.toBe(null);
+    expect(queryByText(/undefined/)).toBe(null);
+  });
+
   test('hint should be rendered', () => {
     const { queryByText } = render(
       <FormField hint={<span>You should look here</span>}>Form elements here</FormField>,

src/components/FormField/FormField.tsx

@@ -7,7 +7,7 @@ import styles from './FormField.module.css';
 type Props = {
   label?: string;
   hint?: ReactNode;
-  errorMessage?: string;
+  errorMessage?: string | (string | undefined)[];
   className?: string;
   children: ReactNode;
 };
@@ -16,11 +16,23 @@ const FormField: React.FC<Props> = ({ label, className, children, hint, errorMes
   const mergedClassNames = classNames(cssReset.ventura, className, {
     [styles.isSpaced]: Boolean(label),
   });
+
+  let errorMessages: string[] = [];
+  if (Array.isArray(errorMessage)) {
+    errorMessages = errorMessage.filter(Boolean) as string[];
+  } else if (errorMessage) {
+    errorMessages = [errorMessage];
+  }
+
   return (
     <div className={mergedClassNames}>
       {Boolean(label) && <span className={styles.label}>{label}</span>}
       {children}
-      {Boolean(errorMessage) && <span className={styles.errorMessage}>{errorMessage}</span>}
+      {errorMessages.map((err) => (
+        <span key={err} className={styles.errorMessage}>
+          {err}
+        </span>
+      ))}
       {Boolean(hint) && <div className={styles.hint}>{hint}</div>}
     </div>
   );

src/components/Input/Input.tsx

@@ -11,7 +11,7 @@ interface Props {
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onBlur?: FocusEventHandler<HTMLInputElement>;
   placeholder?: string;
-  type?: 'text' | 'email' | 'password';
+  type?: 'text' | 'email' | 'password' | 'number';
   spellCheck?: boolean;
   autoComplete?: boolean;
   maxLength?: number;

src/components/Slider/Slider.module.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 20px;
+  padding: 20px 0;
   touch-action: none;
 }
 

src/components/Slider/Slider.test.tsx

@@ -15,6 +15,12 @@ describe('Slider', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('the displayed decimals should be the same as the value boundaries', () => {
+    const { queryByText } = render(<Slider {...defaultProps} valueBoundaries={[10, 10.05]} />);
+    expect(queryByText('10.00')).not.toBe(null);
+    expect(queryByText('10.05')).not.toBe(null);
+  });
+
   test('3 decimals should be displayed', () => {
     const { queryByText } = render(<Slider {...defaultProps} numberOfDecimals={3} />);
     expect(queryByText('100.000')).not.toBe(null);

src/components/Slider/Slider.tsx

@@ -5,15 +5,16 @@ import classnames from 'classnames';
 import { Handle } from './Handle/Handle';
 import { SliderRail } from './SliderRail/SliderRail';
 import { Tick } from './Tick/Tick';
+import { countDecimals } from '../../utils/math';
 
 import cssReset from '../../css-reset.module.css';
 import styles from './Slider.module.css';
 
 type Props = {
   value: number;
-  onChange: (value: number) => void;
+  onChange?: (value: number) => void;
   valueBoundaries: [number, number];
-  textBoundaries?: [string, string];
+  textBoundaries?: [string | undefined, string | undefined];
   stepSize?: number;
   numberOfDecimals?: number;
   isDisabled?: boolean;
@@ -26,18 +27,21 @@ const Slider: React.FC<Props> = ({
   onChange,
   valueBoundaries,
   textBoundaries,
-  stepSize,
-  numberOfDecimals = 0,
+  stepSize: defaultStepSize,
+  numberOfDecimals: defaultNumberOfDecimals,
   isDisabled = false,
   showTooltip = true,
   className,
 }: Props) => {
+  const minValue = valueBoundaries[0];
+  const maxValue = valueBoundaries[1];
+  const numberOfDecimals =
+    defaultNumberOfDecimals ?? Math.max(...valueBoundaries.map(countDecimals));
+  const stepSize = defaultStepSize ?? valueBoundaries[1] <= 100 ? 1 : (maxValue - minValue) / 100;
   const formatValue = (val: number) =>
     (Math.round(val * (10 ** numberOfDecimals || 1)) / (10 ** numberOfDecimals || 1)).toFixed(
       numberOfDecimals,
     );
-  const minValue = valueBoundaries[0];
-  const maxValue = valueBoundaries[1];
   const classNames = classnames(
     cssReset.ventura,
     styles.sliderWrapper,
@@ -50,10 +54,10 @@ const Slider: React.FC<Props> = ({
   return (
     <div className={classNames}>
       <CompoundSlider
-        step={stepSize ?? (maxValue - minValue) / 100}
+        step={stepSize}
         domain={valueBoundaries}
         className={styles.slider}
-        onChange={(values) => onChange(values[0])}
+        onChange={(values) => onChange && onChange(values[0])}
         values={[value]}
         disabled={isDisabled}
       >

src/utils/math.ts

@@ -0,0 +1,4 @@
+export const countDecimals = (value: number) => {
+  if (Math.floor(value) === value) return 0;
+  return String(value).split('.')[1].length || 0;
+};