feat(@clayui/modal): Allow setting CSS classes and other properties on ClayModal.Footer and ClayModal.Body

Author: pat270

packages/clay-modal/src/Body.tsx

@@ -25,9 +25,11 @@ export interface IBodyProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ClayModalBody: React.FunctionComponent<IBodyProps> = ({
 	children,
+	className,
 	iFrameProps = {},
 	scrollable,
 	url,
+	...otherProps
 }: IBodyProps) => {
 	const elementRef = useRef<HTMLDivElement | null>(null);
 
@@ -55,12 +57,13 @@ const ClayModalBody: React.FunctionComponent<IBodyProps> = ({
 
 	return (
 		<div
-			className={classNames('modal-body', {
+			className={classNames('modal-body', className, {
 				'inline-scroller': scrollable,
 				'modal-body-iframe': url,
 			})}
 			ref={elementRef}
 			tabIndex={scrollable ? -1 : undefined}
+			{...otherProps}
 		>
 			{url ? <iframe {...iFrameProps} src={url} title={url} /> : children}
 		</div>

packages/clay-modal/src/Footer.tsx

@@ -3,9 +3,10 @@
  * SPDX-License-Identifier: BSD-3-Clause
  */
 
+import classNames from 'classnames';
 import React from 'react';
 
-export interface IFooterProps {
+export interface IFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Sets the elements that are positioned `first following
 	 * the LTR direction on the footer.
@@ -26,15 +27,19 @@ export interface IFooterProps {
 }
 
 const ClayModalFooter: React.FunctionComponent<IFooterProps> = ({
+	className,
 	first,
 	last,
 	middle,
-}: IFooterProps) => (
-	<div className="modal-footer">
-		<div className="modal-item-first">{first}</div>
-		<div className="modal-item">{middle}</div>
-		<div className="modal-item-last">{last}</div>
-	</div>
-);
+	...otherProps
+}: IFooterProps) => {
+	return (
+		<div className={classNames('modal-footer', className)} {...otherProps}>
+			<div className="modal-item-first">{first}</div>
+			<div className="modal-item">{middle}</div>
+			<div className="modal-item-last">{last}</div>
+		</div>
+	);
+};
 
 export default ClayModalFooter;