@unitedstatespowersquadrons/components 1.4.2-2 → 1.4.3

package/IconButton.tsx

@@ -1,35 +1,24 @@
 import React from "react";
 import { createUseStyles } from "react-jss";
 import classNames from "classnames";
-import Colors, { ButtonColorName } from "./Colors";
+import { ButtonColorName } from "./Colors";
 import FontAwesomeIcon, { FontAwesomeProps } from "./FontAwesomeIcon";
 import BaseActionButton from "./BaseActionButton";
 import { HrefProps, MethodProps, OnClickProps } from "./types";
-
-// FA duotone uses `--fa-primary-color` / `--fa-secondary-color`. Their
-// out-of-the-box defaults are `inherit` (currentColor), but the kit can
-// override that with literal hexes, which freezes the duotone color
-// regardless of `color`. Re-pin both to `currentColor` so each layer
-// follows our `color` while `--fa-secondary-opacity` (default 0.4) keeps
-// the duotone contrast.
-const colorize = (hex: string) => ({
-  "--fa-primary-color": "currentColor",
-  "--fa-secondary-color": "currentColor",
-  color: hex,
-});
+import Styles from "./Styles";
 
 const useStyles = createUseStyles({
-  blue: colorize(Colors.blue),
-  darkGray: colorize(Colors.darkGray),
-  gray: colorize(Colors.gray),
-  green: colorize(Colors.green),
+  blue: { ...Styles.blue },
+  darkGray: { ...Styles.darkGray },
+  gray: { ...Styles.gray },
+  green: { ...Styles.green },
   icon: {
     cursor: "pointer",
     fontSize: "1.1em",
   },
-  orange: colorize(Colors.orange),
-  purple: colorize(Colors.purple),
-  red: colorize(Colors.red),
+  orange: { ...Styles.orange },
+  purple: { ...Styles.purple },
+  red: { ...Styles.red },
   wrapperLink: {
     display: "inline-block",
     margin: "0",
@@ -57,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}
@@ -80,7 +73,7 @@ const IconButton = (props: IconButtonProps) => {
 
     return(
       <BaseActionButton
-        className={combinedClassName}
+        className={buttonClassName}
         confirm={confirm}
         href={href}
         id={id}
@@ -95,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-2",
+  "version": "1.4.3",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {