@unitedstatespowersquadrons/components 1.4.2 → 1.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/IconButton.tsx +10 -6
- package/package.json +1 -1
package/IconButton.tsx
CHANGED
|
@@ -46,16 +46,20 @@ const IconButton = (props: IconButtonProps) => {
|
|
|
46
46
|
const { className, color, fa, icon, id, mode, style, title } = props;
|
|
47
47
|
const classes = useStyles();
|
|
48
48
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
49
|
+
// The button carries the color class so it composes with consumer-side
|
|
50
|
+
// descendant selectors (e.g. AdminLink's `& button { color }`); the icon
|
|
51
|
+
// inherits via `currentColor` rather than receiving its own color class,
|
|
52
|
+
// which would beat that cascade due to specificity.
|
|
53
|
+
const buttonClassName = classNames(classes.icon, classes[color ?? "blue"], className);
|
|
54
|
+
const iconClassName = classNames(classes.icon, className);
|
|
55
|
+
const configuredIcon = <FontAwesomeIcon css={iconClassName} fa={fa} icon={icon} mode={mode} style={style} />;
|
|
52
56
|
|
|
53
57
|
if ("onClick" in props) {
|
|
54
58
|
const { confirm, onClick } = props;
|
|
55
59
|
|
|
56
60
|
return(
|
|
57
61
|
<BaseActionButton
|
|
58
|
-
className={
|
|
62
|
+
className={buttonClassName}
|
|
59
63
|
confirm={confirm}
|
|
60
64
|
id={id}
|
|
61
65
|
onClick={onClick}
|
|
@@ -69,7 +73,7 @@ const IconButton = (props: IconButtonProps) => {
|
|
|
69
73
|
|
|
70
74
|
return(
|
|
71
75
|
<BaseActionButton
|
|
72
|
-
className={
|
|
76
|
+
className={buttonClassName}
|
|
73
77
|
confirm={confirm}
|
|
74
78
|
href={href}
|
|
75
79
|
id={id}
|
|
@@ -84,7 +88,7 @@ const IconButton = (props: IconButtonProps) => {
|
|
|
84
88
|
|
|
85
89
|
return(
|
|
86
90
|
<BaseActionButton
|
|
87
|
-
className={
|
|
91
|
+
className={buttonClassName}
|
|
88
92
|
href={href}
|
|
89
93
|
id={id}
|
|
90
94
|
linkClassName={classNames(classes.wrapperLink, linkClassName)}
|