Indenting checkboxes to match the other fields.

howsoai · Jun 20, 2024 · 19c8944 · 19c8944
1 parent 284ec9d
commit 19c8944
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/FeatureAttributes/FeaturesAttributesContext/FeaturesAttributesContext.tsx b/src/components/FeatureAttributes/FeaturesAttributesContext/FeaturesAttributesContext.tsx
@@ -4,7 +4,7 @@ import {
   FieldSelectProps,
   FieldTextAreaProps,
   FieldTextProps,
-  FieldToggleProps,
+  FieldCheckboxProps,
 } from "@howso/react-tailwind-flowbite-components";
 import {
   ComponentProps,
@@ -18,15 +18,14 @@ import { twMerge } from "tailwind-merge";
 import { FeatureAttributesGroupBaseProps } from "../groups";
 
 export type IFeaturesAttributesContext = {
-  fieldCheckboxProps?: Partial<FieldToggleProps>;
+  fieldCheckboxProps?: Partial<FieldCheckboxProps>;
   fieldRadiosProps?: Pick<FieldRadiosProps, "labelInline" | "labelProps">;
   fieldSelectProps?: Pick<FieldSelectProps, "labelInline" | "labelProps">;
   fieldTextProps?: Pick<FieldTextProps, "labelInline" | "labelProps">;
   fieldStackProps?: {
     stackProps?: ComponentProps<"div">;
   } & Pick<IFeaturesAttributesContext, "fieldTextProps">;
   fieldTextAreaProps?: Pick<FieldTextAreaProps, "labelInline" | "labelProps">;
-  fieldToggleProps?: Partial<FieldToggleProps>;
   groupBaseProps?: Omit<
     FeatureAttributesGroupBaseProps,
     "title" | "basic" | "advanced" | "isAdvancedOpen"
@@ -44,7 +43,14 @@ export const FeaturesAttributesContextProvider: FC<
   FeaturesAttributesContextProviderProps
 > = ({ children, compact }) => {
   const fieldCheckboxProps: IFeaturesAttributesContext["fieldCheckboxProps"] =
-    useMemo(() => ({}), []);
+    useMemo(
+      () => ({
+        containerProps: compact
+          ? { className: inlineCheckboxClassName }
+          : undefined,
+      }),
+      [compact],
+    );
   const fieldRadiosProps: IFeaturesAttributesContext["fieldRadiosProps"] =
     useMemo(
       () => ({
@@ -88,8 +94,6 @@ export const FeaturesAttributesContextProvider: FC<
       }),
       [compact],
     );
-  const fieldToggleProps: IFeaturesAttributesContext["fieldToggleProps"] =
-    useMemo(() => ({}), []);
 
   const fieldStackProps: IFeaturesAttributesContext["fieldStackProps"] =
     useMemo(
@@ -109,12 +113,9 @@ export const FeaturesAttributesContextProvider: FC<
     );
   const groupBaseProps: IFeaturesAttributesContext["groupBaseProps"] = useMemo(
     () => ({
-      titleProps: {
-        className: twMerge(compact && "text-md"),
-      },
-      advancedControlProps: {
-        size: compact ? "sm" : undefined,
-      },
+      titleProps: { className: twMerge(compact && "text-md") },
+      advancedControlProps: { size: compact ? "sm" : undefined },
+      sectionProps: { className: twMerge(compact && "ml-0") },
     }),
     [compact],
   );
@@ -128,15 +129,16 @@ export const FeaturesAttributesContextProvider: FC<
         fieldTextProps,
         fieldStackProps,
         fieldTextAreaProps,
-        fieldToggleProps,
         groupBaseProps,
       }}
     >
       <ErrorBoundary>{children}</ErrorBoundary>
     </FeaturesAttributesContext.Provider>
   );
 };
+
 const inlineLabelClassName = "w-40";
+const inlineCheckboxClassName = "ml-40 pl-2"; // pl-2 accounts for the flex gap 2 between label and field
 const inlineLabelStackClassName = `[&_div:nth-child(1)_label]:w-40`;
 const inlineLabelStackFieldClassName = "";
 const compactFieldSize: FieldTextProps["sizing"] = "sm";
diff --git a/...onents/FeatureAttributes/groups/FeatureAttributesGroupBase/FeatureAttributesGroupBase.tsx b/...onents/FeatureAttributes/groups/FeatureAttributesGroupBase/FeatureAttributesGroupBase.tsx
@@ -15,6 +15,7 @@ export type FeatureAttributesGroupBaseProps = Omit<
 > & {
   title: ReactNode;
   titleProps?: ComponentProps<"div">;
+  sectionProps?: ComponentProps<"div">;
   basic?: ReactNode;
   advanced?: ReactNode;
   advancedControlProps?: Omit<
@@ -25,49 +26,65 @@ export type FeatureAttributesGroupBaseProps = Omit<
 };
 export const FeatureAttributesGroupBase: FC<
   FeatureAttributesGroupBaseProps
-> = ({ title, basic, advanced, isAdvancedOpen, ...props }) => {
+> = ({ title, sectionProps, basic, advanced, isAdvancedOpen, ...props }) => {
   const { t } = useDefaultTranslation();
-  const { groupBaseProps: groupBasePropsRaw = {} } = useContext(
+  const { groupBaseProps: contextProps } = useContext(
     FeaturesAttributesContext,
   );
-  const { titleProps, advancedControlProps, ...groupBaseProps } =
-    groupBasePropsRaw;
-
   const [isOpen, setIsOpen] = useState(isAdvancedOpen ?? false);
 
   return (
     <section
-      {...groupBaseProps}
       {...props}
       className={twMerge(
         "border-t border-solid pt-2",
         formSpacingYDefault,
-        groupBaseProps?.className,
+        contextProps?.className,
         props.className,
       )}
     >
       {title && (
         <header className={"mb-4 flex items-center justify-between gap-4"}>
           <div
-            {...titleProps}
+            {...contextProps?.titleProps}
             className={twMerge(
               "text-lg font-medium dark:text-white",
-              titleProps?.className,
+              contextProps?.titleProps?.className,
             )}
           >
             {title}
           </div>
         </header>
       )}
-      {basic && <div className={childIndention}>{basic}</div>}
+      {basic && (
+        <div
+          {...contextProps?.sectionProps}
+          {...sectionProps}
+          className={twMerge(
+            defaultSectionProps,
+            contextProps?.sectionProps?.className,
+            sectionProps?.className,
+          )}
+        >
+          {basic}
+        </div>
+      )}
       {advanced && (
-        <div className={twMerge(childIndention)}>
+        <div
+          {...contextProps?.sectionProps}
+          {...sectionProps}
+          className={twMerge(
+            defaultSectionProps,
+            contextProps?.sectionProps?.className,
+            sectionProps?.className,
+          )}
+        >
           <ExpandCollapseControl
-            {...advancedControlProps}
+            {...contextProps?.advancedControlProps}
             isExpanded={isOpen}
             className={twMerge(
               "mb-4 p-0 text-sm font-normal",
-              advancedControlProps?.className,
+              contextProps?.advancedControlProps?.className,
             )}
             fullSized
             onClick={
@@ -94,4 +111,4 @@ export const FeatureAttributesGroupBase: FC<
   );
 };
 
-const childIndention = "ml-7";
+const defaultSectionProps = "ml-7";