@unitedstatespowersquadrons/components 1.4.2 → 1.4.4

package/Admin/AdminLink.tsx

@@ -3,8 +3,7 @@ import { createUseStyles } from "react-jss";
 import classNames from "classnames";
 import AdminItem from "./AdminItem";
 import Colors, { ButtonColorName } from "../Colors";
-import { FontAwesomeProps } from "../FontAwesomeIcon";
-import IconButton from "../IconButton";
+import FontAwesomeIcon, { FontAwesomeProps } from "../FontAwesomeIcon";
 import Styles from "../Styles";
 
 // Styles aren't tree-shaken, but keeping every color variant here means apps
@@ -49,6 +48,13 @@ const useStyles = createUseStyles({
     cursor: "pointer",
   },
   left: { textAlign: "left" },
+  link: {
+    ...Styles.flexRow,
+    color: "inherit",
+    flex: 1,
+    justifyContent: "left",
+    textDecoration: "none",
+  },
   orange: {
     "& button": { ...Styles.orange },
     "&:hover": {
@@ -96,22 +102,23 @@ interface Props extends FontAwesomeProps {
 }
 
 const AdminLink = (props: Props) => {
-  const { className, color, href, icon, mode, style, subMenu, title } = props;
+  const { className, color, fa, href, icon, mode, style, subMenu, title } = props;
   const classes = useStyles();
 
   const colorClassName = classes[color];
 
   return(
     <AdminItem className={classNames(classes.item, classes.left, colorClassName)}>
-      <IconButton
-        className={classNames(classes.subMenuIcon, className)}
-        href={href}
-        icon={icon}
-        mode={mode}
-        style={style}
-        title={title}
-      />
-      <span className={classNames(classes.subMenuText, className)}>{subMenu}</span>
+      <a className={classes.link} href={href} title={title}>
+        <FontAwesomeIcon
+          css={classNames(classes.subMenuIcon, className)}
+          fa={fa}
+          icon={icon}
+          mode={mode}
+          style={style}
+        />
+        <span className={classNames(classes.subMenuText, className)}>{subMenu}</span>
+      </a>
     </AdminItem>
   );
 };

package/IconButton.tsx

@@ -46,16 +46,20 @@ const IconButton = (props: IconButtonProps) => {
   const { className, color, fa, icon, id, mode, style, title } = props;
   const classes = useStyles();
 
-  const colorClassName = classes[color ?? "blue"];
-  const combinedClassName = classNames(classes.icon, colorClassName, className);
-  const configuredIcon = <FontAwesomeIcon css={combinedClassName} fa={fa} icon={icon} mode={mode} style={style} />;
+  // The button carries the color class so it composes with consumer-side
+  // descendant selectors (e.g. AdminLink's `& button { color }`); the icon
+  // inherits via `currentColor` rather than receiving its own color class,
+  // which would beat that cascade due to specificity.
+  const buttonClassName = classNames(classes.icon, classes[color ?? "blue"], className);
+  const iconClassName = classNames(classes.icon, className);
+  const configuredIcon = <FontAwesomeIcon css={iconClassName} fa={fa} icon={icon} mode={mode} style={style} />;
 
   if ("onClick" in props) {
     const { confirm, onClick } = props;
 
     return(
       <BaseActionButton
-        className={combinedClassName}
+        className={buttonClassName}
         confirm={confirm}
         id={id}
         onClick={onClick}
@@ -69,7 +73,7 @@ const IconButton = (props: IconButtonProps) => {
 
     return(
       <BaseActionButton
-        className={combinedClassName}
+        className={buttonClassName}
         confirm={confirm}
         href={href}
         id={id}
@@ -84,7 +88,7 @@ const IconButton = (props: IconButtonProps) => {
 
     return(
       <BaseActionButton
-        className={combinedClassName}
+        className={buttonClassName}
         href={href}
         id={id}
         linkClassName={classNames(classes.wrapperLink, linkClassName)}

package/package.json

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