From c1b043de0c60f8a655b1941ce0ac8e12e6558eab Mon Sep 17 00:00:00 2001
From: S T <shindigira@gmail.com>
Date: Wed, 7 Feb 2024 14:59:17 -0500
Subject: [PATCH] [ButtonGroup][Checkbox] Minor fixes (#297)

closes #298

## Changes
- ButtonGroup - Allows additional style changes via `className` prop
- Checkbox - three props (`labelClassName`, `labelInline`, `status`) are
now optional to prevent TypeScript errors in apps
---
 src/components/Buttons/ButtonGroup.tsx | 5 +++--
 src/components/Checkbox/Checkbox.tsx   | 8 ++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Buttons/ButtonGroup.tsx b/src/components/Buttons/ButtonGroup.tsx
index 2f68dbe8..14b87b70 100644
--- a/src/components/Buttons/ButtonGroup.tsx
+++ b/src/components/Buttons/ButtonGroup.tsx
@@ -4,12 +4,13 @@ import type { JSXElement } from '~/src/types/jsxElement';
  * Display a collection of related Buttons
  */
 export const ButtonGroup = ({
+  className,
   children,
-  ...properties
+  ...other
 }: React.HTMLProps<HTMLDivElement>): JSXElement => {
   if (!children) return null;
   return (
-    <div className='m-btn-group' {...properties}>
+    <div className={`m-btn-group ${className}`} {...other}>
       {children}
     </div>
   );
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index d483fcc9..ebc9e407 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -19,7 +19,7 @@ export interface CheckboxProperties {
   /** Additional CSS classes that will be applied to checkbox input element */
   inputClassName?: string;
   /** Additional CSS classes that will be applied to checkbox label element */
-  labelClassName: string;
+  labelClassName?: string;
   /** React Ref to be enable direct access and control of the input element */
   inputRef?:
     | RefObject<HTMLInputElement>
@@ -30,7 +30,7 @@ export interface CheckboxProperties {
   /** Apply the "Large" styles for this element? */
   isLarge?: boolean;
   /** A name for this checkbox's value that can be referenced in javascript */
-  labelInline: boolean;
+  labelInline?: boolean;
   /** Removes/Adds 'label__heading' class to the Label * */
   name?: string;
   /** Is this checkbox disabled? */
@@ -38,7 +38,7 @@ export interface CheckboxProperties {
   /** An event handler function that will be called when the checkbox's value is changed  */
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   /** Border status */
-  status: 'error' | 'success' | 'warning';
+  status?: 'error' | 'success' | 'warning';
 }
 
 const containerBaseStyles = ['m-form-field m-form-field__checkbox'];
@@ -54,7 +54,7 @@ export const Checkbox = ({
   label,
   className,
   inputClassName,
-  labelClassName,
+  labelClassName = '',
   checked = false,
   helperText,
   inputRef,