new minor release - minor bug fixes

.github/workflows/gh-pages.yml

@@ -14,7 +14,7 @@ jobs:
         uses: octokit/[email protected]
         id: get_latest_release
         with:
-          route: GET /repos/kherp/react-components/tags
+          route: GET /repos/sebgroup/react-components/tags
           owner: octokit
           repo: request-action
         env:

lib/src/Checkbox/Checkbox.tsx

@@ -21,12 +21,12 @@ export const Checkbox: React.FC<CheckboxProps> = React.forwardRef(({ inline, wra
     return (
         <FeedbackIndicator {...indicator}>
             <div {...wrapperProps} className={classnames("rc", "checkbox", { inline }, wrapperProps?.className)}>
-                <div className={classnames("custom-control", "custom-checkbox", { "custom-control-inline": inline })}>
+                <label htmlFor={id} className={classnames("custom-control", "custom-checkbox", { "custom-control-inline": inline })}>
                     <input {...props} type="checkbox" id={id} className={classnames("custom-control-input", props.className)} ref={ref} />
-                    <label className="custom-control-label" htmlFor={id}>
+                    <label htmlFor={id} className="custom-control-label">
                         {children}
                     </label>
-                </div>
+                </label>
             </div>
         </FeedbackIndicator>
     );

lib/src/Checkbox/checkbox.scss

@@ -4,33 +4,30 @@
  TODO: This padding matches the checkbox with design library guidelines.
  Should be removed when it's updated in Bootstrap
  */
-$checkbox-padding: 0.563rem;
-$checkbox-padding-left: 2.23rem;
-$checkbox-padding: $checkbox-padding $checkbox-padding $checkbox-padding $checkbox-padding-left;
 
 .rc.checkbox {
+    padding: 0.5rem 0.75rem;
+
     &.inline {
         display: inline-block;
         vertical-align: top;
         &:not(:last-child) {
             margin-right: 1rem;
         }
     }
-    .custom-checkbox.custom-control {
-        padding: $checkbox-padding;
+    label.custom-checkbox.custom-control {
         border: 1px solid transparent;
         border-radius: 4px;
         transition: border-color 200ms;
+        margin-bottom: 0;
 
         > .checkbox-description {
-            margin: 0;
             color: $gray-600;
             font-size: $font-size-sm;
             line-height: 1.5rem;
         }
         &.custom-control-inline {
             flex-direction: column;
-            margin: 0;
         }
 
         > .custom-control-input {

lib/src/FeedbackIndicator/FeedbackIndicator.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import classnames from "classnames";
 import "./feedback-indicator.scss";
 
-export type IndicatorType = "danger" | "warning" | "success";
+export type IndicatorType = "danger" | "warning" | "success" | "none";
 export type Indicator = FeedbackIndicatorProps;
 
 type FeedbackIndicatorProps = React.PropsWithChildren<{
@@ -39,7 +39,7 @@ export const FeedbackIndicator: React.FC<FeedbackIndicatorProps> = (props: Feedb
         return React.isValidElement(Child) ? (
             <>
                 {React.cloneElement<any>(Child as any, {
-                    className: classnames((Child.props as any).className, `rc-d feedback feedback-${indicatorValue}`, { "no-border": props.noBorder }),
+                    className: classnames((Child.props as any).className, `rc-d feedback feedback-${indicatorValue}`, { "no-border": props.noBorder }, { "mb-0": props.message }),
                 })}
                 {props.type && <p className={classnames("rc-d feedback-message")}>{props.message}</p>}
             </>

lib/src/RadioButton/RadioButton.tsx

@@ -20,14 +20,14 @@ export const RadioButton: React.FC<RadioButtonProps> = React.forwardRef(({ child
     return (
         <FeedbackIndicator {...indicator}>
             <div {...wrapperProps} className={classnames("rc radio-button", wrapperProps.className)}>
-                <div className="rc custom-radio custom-control">
+                <label htmlFor={id} className="rc custom-radio custom-control">
                     <input {...props} ref={ref} className={classnames("custom-control-input", props.className)} type="radio" id={id} />
                     {children && (
-                        <label className="custom-control-label" htmlFor={id}>
+                        <label htmlFor={id} className="custom-control-label">
                             {children}
                         </label>
                     )}
-                </div>
+                </label>
             </div>
         </FeedbackIndicator>
     );

lib/src/RadioButton/radio-button.scss

@@ -1,13 +1,12 @@
 .rc.radio-button {
-    padding: 0.563rem 0.563rem 0.563rem 12px;
+    padding: 0.5rem 0.75rem;
 
     &.inline {
         display: inline-block;
         vertical-align: top;
     }
 
-    .custom-radio {
-        margin-bottom: 1rem;
+    label.custom-control.custom-radio {
         margin: 0;
     }
 }

lib/src/Stepper/stepper.scss

@@ -4,7 +4,7 @@ $transition-time: 200ms;
 $stepper-font-size: 24px;
 
 .rc.custom-stepper {
-    display: inline-block;
+    width: max-content;
     .stepper-container {
         height: 44px;
         border-radius: 4px;

lib/src/hooks/useDynamicForm.test.tsx

@@ -209,7 +209,14 @@ describe("hook: useDynamicForm", () => {
                 }
 
                 if (!isHidden) {
-                    expect(container.querySelector("label").innerHTML).toBe(props.label);
+                    if (props.controlType === "Checkbox") {
+                        // get the last label element since chekbox is wrapped in a label to fix the hitbox issue
+                        const labelElements = container.querySelectorAll("label");
+                        expect(labelElements.item(labelElements.length - 1).innerHTML).toBe(props.label);
+                    } else {
+                        // just get the first label element normally
+                        expect(container.querySelector("label").innerHTML).toBe(props.label);
+                    }
                 }
 
                 if (!isLabelOnly && !isHidden) {

lib/src/hooks/useDynamicForm.tsx

@@ -11,7 +11,7 @@ import { RadioButton, RadioGroup } from "../RadioButton";
 import { isEmpty } from "@sebgroup/frontend-tools/isEmpty";
 import { isValidDate } from "@sebgroup/frontend-tools/isValidDate";
 
-export type DynamicFormInternalStateValue = string | string[] | Date | boolean | number | null;
+export type DynamicFormInternalStateValue = string | string[] | Date | boolean | number;
 export interface DynamicFormItem {
     key: string;
     controlType: DynamicFormType;
@@ -431,7 +431,11 @@ const DynamicFormItemComponent: React.FC<{
     const descriptionItem: ReactNode = props.item?.description ? <p className="rc dynamic-form dynamic-form-description text-muted m-0">{props.item?.description}</p> : <></>;
 
     const indicator: Indicator = React.useMemo(() => {
-        return props.errorMessage ? { type: "danger", message: props.errorMessage } : props.warningMessage ? { type: "warning", message: props.warningMessage } : null;
+        return props.errorMessage
+            ? { type: "danger", message: props.errorMessage }
+            : props.warningMessage
+            ? { type: "warning", message: props.warningMessage }
+            : { type: "none", noBorder: true, message: "" };
     }, [props.errorMessage, props.warningMessage]);
 
     switch (controlType) {
@@ -467,7 +471,7 @@ const DynamicFormItemComponent: React.FC<{
                 <>
                     {labelItem}
                     {descriptionItem}
-                    <FeedbackIndicator type={indicator?.type} message={indicator?.message}>
+                    <FeedbackIndicator {...indicator}>
                         <RadioGroup {...{ name, onChange, value }} {...formElementAdditionalProps}>
                             {props.item?.options?.map((option: DynamicFormOption, i) => (
                                 <RadioButton key={i} value={option?.value} {...(option?.additionalProps || {})}>
@@ -518,7 +522,7 @@ const DynamicFormItemComponent: React.FC<{
                 <>
                     {labelItem}
                     {descriptionItem}
-                    <FeedbackIndicator type={indicator?.type} message={indicator?.message}>
+                    <FeedbackIndicator {...indicator}>
                         <Datepicker {...{ value, onChange, name }} min={props.item?.min} max={props.item?.max} {...formElementAdditionalProps} />
                     </FeedbackIndicator>
                 </>
@@ -554,7 +558,7 @@ const DynamicFormItemComponent: React.FC<{
                 <>
                     {labelItem}
                     {descriptionItem}
-                    <FeedbackIndicator type={indicator?.type} message={indicator?.message}>
+                    <FeedbackIndicator {...indicator}>
                         <div className="d-flex flex-wrap" role="group" {...formElementAdditionalProps}>
                             {props.item?.options?.map((option: DynamicFormOption, i) => {
                                 const active: boolean = !!(value as string[])?.find((e: string) => option.value === e);