From 0246ebeb4b68a769a672538ebb0287ecc646ae8c Mon Sep 17 00:00:00 2001 From: Kher Phay Chang Date: Wed, 8 Sep 2021 19:31:22 +0800 Subject: [PATCH 1/6] docs(gd-pages): fix documentation version dropdown --- .github/workflows/gh-pages.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml index 324222237..d2287cb82 100644 --- a/.github/workflows/gh-pages.yml +++ b/.github/workflows/gh-pages.yml @@ -14,7 +14,7 @@ jobs: uses: octokit/request-action@v2.x 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: From d1f1af7baa2f758e502942f14d4c4b2ee52feadc Mon Sep 17 00:00:00 2001 From: Mario Subotic Date: Thu, 9 Sep 2021 15:13:36 +0800 Subject: [PATCH 2/6] fix(dynamic-form and form components): fix dynamic form feedback indicators --- lib/src/hooks/useDynamicForm.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/lib/src/hooks/useDynamicForm.tsx b/lib/src/hooks/useDynamicForm.tsx index 6a56a12aa..e26cee8dc 100644 --- a/lib/src/hooks/useDynamicForm.tsx +++ b/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 ?

{props.item?.description}

: <>; 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} - + {props.item?.options?.map((option: DynamicFormOption, i) => ( @@ -518,7 +522,7 @@ const DynamicFormItemComponent: React.FC<{ <> {labelItem} {descriptionItem} - + @@ -554,7 +558,7 @@ const DynamicFormItemComponent: React.FC<{ <> {labelItem} {descriptionItem} - +
{props.item?.options?.map((option: DynamicFormOption, i) => { const active: boolean = !!(value as string[])?.find((e: string) => option.value === e); From f514927a351e251a4e06e7a6196079a8b422472c Mon Sep 17 00:00:00 2001 From: Mario Subotic Date: Thu, 9 Sep 2021 15:15:07 +0800 Subject: [PATCH 3/6] fix(feedback-indicator): fix margin for message --- lib/src/FeedbackIndicator/FeedbackIndicator.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/src/FeedbackIndicator/FeedbackIndicator.tsx b/lib/src/FeedbackIndicator/FeedbackIndicator.tsx index 9911b9d2e..1a11fe1f9 100644 --- a/lib/src/FeedbackIndicator/FeedbackIndicator.tsx +++ b/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 = (props: Feedb return React.isValidElement(Child) ? ( <> {React.cloneElement(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} mb-0`, { "no-border": props.noBorder }, { "mb-0": props.message }), })} {props.type &&

{props.message}

} From a429bca0155edb09ebd30713869d17c682ee0ea1 Mon Sep 17 00:00:00 2001 From: Mario Subotic Date: Thu, 9 Sep 2021 15:16:15 +0800 Subject: [PATCH 4/6] fix(form components): fix styles for checkbox, radio and stepper --- lib/src/Checkbox/Checkbox.tsx | 6 +++--- lib/src/Checkbox/checkbox.scss | 11 ++++------- lib/src/RadioButton/RadioButton.tsx | 6 +++--- lib/src/RadioButton/radio-button.scss | 5 ++--- lib/src/Stepper/stepper.scss | 2 +- 5 files changed, 13 insertions(+), 17 deletions(-) diff --git a/lib/src/Checkbox/Checkbox.tsx b/lib/src/Checkbox/Checkbox.tsx index 8eaeb7d77..43c25004c 100644 --- a/lib/src/Checkbox/Checkbox.tsx +++ b/lib/src/Checkbox/Checkbox.tsx @@ -21,12 +21,12 @@ export const Checkbox: React.FC = React.forwardRef(({ inline, wra return (
-
+
+
); diff --git a/lib/src/Checkbox/checkbox.scss b/lib/src/Checkbox/checkbox.scss index f71d6fe7a..a245817d9 100644 --- a/lib/src/Checkbox/checkbox.scss +++ b/lib/src/Checkbox/checkbox.scss @@ -4,11 +4,10 @@ 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; @@ -16,21 +15,19 @@ $checkbox-padding: $checkbox-padding $checkbox-padding $checkbox-padding $checkb 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 { diff --git a/lib/src/RadioButton/RadioButton.tsx b/lib/src/RadioButton/RadioButton.tsx index bd1cdd29a..a8a412623 100644 --- a/lib/src/RadioButton/RadioButton.tsx +++ b/lib/src/RadioButton/RadioButton.tsx @@ -20,14 +20,14 @@ export const RadioButton: React.FC = React.forwardRef(({ child return (
-
+
+
); diff --git a/lib/src/RadioButton/radio-button.scss b/lib/src/RadioButton/radio-button.scss index 2dfa0df96..256e881b3 100644 --- a/lib/src/RadioButton/radio-button.scss +++ b/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; } } diff --git a/lib/src/Stepper/stepper.scss b/lib/src/Stepper/stepper.scss index 083aab85c..296cf04cf 100644 --- a/lib/src/Stepper/stepper.scss +++ b/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; From a6805a7e2f8ecc970e3b61670ea4a02e067c79e5 Mon Sep 17 00:00:00 2001 From: Mario Subotic Date: Thu, 9 Sep 2021 17:09:50 +0800 Subject: [PATCH 5/6] fix: remove double margin --- lib/src/FeedbackIndicator/FeedbackIndicator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/FeedbackIndicator/FeedbackIndicator.tsx b/lib/src/FeedbackIndicator/FeedbackIndicator.tsx index 1a11fe1f9..7e9c82a4e 100644 --- a/lib/src/FeedbackIndicator/FeedbackIndicator.tsx +++ b/lib/src/FeedbackIndicator/FeedbackIndicator.tsx @@ -39,7 +39,7 @@ export const FeedbackIndicator: React.FC = (props: Feedb return React.isValidElement(Child) ? ( <> {React.cloneElement(Child as any, { - className: classnames((Child.props as any).className, `rc-d feedback feedback-${indicatorValue} mb-0`, { "no-border": props.noBorder }, { "mb-0": props.message }), + className: classnames((Child.props as any).className, `rc-d feedback feedback-${indicatorValue}`, { "no-border": props.noBorder }, { "mb-0": props.message }), })} {props.type &&

{props.message}

} From 132a47f04d057b7756421e00f0c01bb2c7f75a1e Mon Sep 17 00:00:00 2001 From: Mario Subotic Date: Thu, 9 Sep 2021 17:36:36 +0800 Subject: [PATCH 6/6] test(dynamic-form): update test for checkbox --- lib/src/hooks/useDynamicForm.test.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/lib/src/hooks/useDynamicForm.test.tsx b/lib/src/hooks/useDynamicForm.test.tsx index 0c5455180..15f06e07a 100644 --- a/lib/src/hooks/useDynamicForm.test.tsx +++ b/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) {