@unitedstatespowersquadrons/components 1.4.6 → 1.4.7

package/ActionButton.tsx

@@ -34,6 +34,7 @@ const useStyles = createUseStyles({
     justifyContent: "flex-end",
     padding: "0 0.3em 0 0.7em",
   },
+  sizing: ({ fontSize, margin }: { fontSize?: string | number; margin?: string | number }) => ({ fontSize, margin }),
   small: { fontSize: "0.8em" },
   subText: {
     fontSize: "0.75em",
@@ -50,17 +51,30 @@ const useStyles = createUseStyles({
   },
 });
 
-export interface CoreActionButtonProps extends FontAwesomeProps {
+interface CoreActionButtonBaseProps extends FontAwesomeProps {
   className?: string | undefined;
   color: ButtonColorName;
   grayMode?: boolean | undefined;
   id?: string;
   rightIcon?: boolean;
-  size?: "big" | "mediumWithMargin" | "medium" | "small" | undefined;
   subtext?: string;
   text: string;
 }
 
+interface SizePresetProps {
+  fontSize?: never;
+  margin?: never;
+  size?: "big" | "mediumWithMargin" | "medium" | "small" | undefined;
+}
+
+interface CustomSizeProps {
+  fontSize?: string | number;
+  margin?: string | number;
+  size?: never;
+}
+
+export type CoreActionButtonProps = CoreActionButtonBaseProps & (SizePresetProps | CustomSizeProps);
+
 interface FormProps {
   confirm?: string;
   formId: string;
@@ -82,8 +96,13 @@ export type ActionButtonProps =
   | ActionButtonFormProps;
 
 const ActionButton = (props: ActionButtonProps) => {
-  const { className, color, fa, grayMode, icon, id, mode, rightIcon, size, style, subtext, text, title } = props;
-  const classes = useStyles();
+  const {
+    className, color, fa, fontSize, grayMode, icon, id, margin, mode, rightIcon, size, style, subtext, text, title,
+  } = props;
+  const classes = useStyles({
+    ...(fontSize !== undefined && { fontSize }),
+    ...(margin !== undefined && { margin }),
+  });
 
   const colorClassName = classes[`${color}${grayMode ? "Gray" : "Colored"}`];
 
@@ -122,7 +141,9 @@ const ActionButton = (props: ActionButtonProps) => {
 
     return(
       <BaseActionButton
-        className={classNames(classes.button, colorClassName, sizeClassName(), inline && classes.inline, className)}
+        className={classNames(
+          classes.button, colorClassName, sizeClassName(), classes.sizing, inline && classes.inline, className
+        )}
         confirm={confirm}
         id={id}
         onClick={onClick}
@@ -136,7 +157,9 @@ const ActionButton = (props: ActionButtonProps) => {
 
     return(
       <BaseActionButton
-        className={classNames(classes.button, colorClassName, sizeClassName(), inline && classes.inline, className)}
+        className={classNames(
+          classes.button, colorClassName, sizeClassName(), classes.sizing, inline && classes.inline, className
+        )}
         confirm={confirm}
         href={href}
         id={id}
@@ -153,6 +176,7 @@ const ActionButton = (props: ActionButtonProps) => {
       classes.button,
       colorClassName,
       sizeClassName(),
+      classes.sizing,
       rightIcon ? classes.rightIcon : "",
       inline && classes.inline,
       className
@@ -183,7 +207,9 @@ const ActionButton = (props: ActionButtonProps) => {
 
     return(
       <BaseActionButton
-        className={classNames(classes.button, colorClassName, sizeClassName(), inline && classes.inline, className)}
+        className={classNames(
+          classes.button, colorClassName, sizeClassName(), classes.sizing, inline && classes.inline, className
+        )}
         confirm={confirm}
         id={id}
         onClick={onClick}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {