Skip to content

Commit

Permalink
[ButtonGroup][Checkbox] Minor fixes (#297)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
shindigira authored Feb 7, 2024
1 parent df15462 commit c1b043d
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 6 deletions.
5 changes: 3 additions & 2 deletions src/components/Buttons/ButtonGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
8 changes: 4 additions & 4 deletions src/components/Checkbox/Checkbox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -30,15 +30,15 @@ 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? */
disabled?: boolean;
/** 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'];
Expand All @@ -54,7 +54,7 @@ export const Checkbox = ({
label,
className,
inputClassName,
labelClassName,
labelClassName = '',
checked = false,
helperText,
inputRef,
Expand Down

0 comments on commit c1b043d

Please sign in to comment.