feat: add text prop to ButtonIcon component and Decrediton launcher i…

…cons
decred · Feb 14, 2022 · 107253c · 107253c
1 parent cfdd9dd
commit 107253c
Show file tree

Hide file tree

Showing 5 changed files with 308 additions and 6 deletions.
diff --git a/src/components/ButtonIcon/ButtonIcon.jsx b/src/components/ButtonIcon/ButtonIcon.jsx
@@ -19,6 +19,7 @@ const ButtonIcon = ({
   viewBox,
   iconColor,
   iconBackgroundColor,
+  text,
   ...props
 }) => {
   const { theme, themeName } = useTheme();
@@ -42,6 +43,7 @@ const ButtonIcon = ({
         styles.buttonIcon,
         disabled && styles.disabled,
         loading && styles.loading,
+        text && styles.text,
         className
       )}
       disabled={disabled}
@@ -50,12 +52,15 @@ const ButtonIcon = ({
       {loading ? (
         <Spinner invert={!isDarkTheme} width="1.4rem" height="1.4rem" />
       ) : (
-        <Icon
-          type={type}
-          viewBox={viewBox}
-          iconColor={disabled ? disabledBtnIconColor : btnIconColor}
-          backgroundColor={disabled ? disabledBtnIconBgColor : btnIconBgColor}
-        />
+        <>
+          <Icon
+            type={type}
+            viewBox={viewBox}
+            iconColor={disabled ? disabledBtnIconColor : btnIconColor}
+            backgroundColor={disabled ? disabledBtnIconBgColor : btnIconBgColor}
+          />
+          {text && <span>{text}</span>}
+        </>
       )}
     </button>
   );
@@ -68,6 +73,7 @@ ButtonIcon.propTypes = {
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
   loading: PropTypes.bool,
+  text: PropTypes.string,
 };
 
 export default ButtonIcon;
diff --git a/src/components/ButtonIcon/styles.css b/src/components/ButtonIcon/styles.css
@@ -16,6 +16,11 @@
   box-shadow: 0 0.1rem 0.4rem 0 rgba(0, 0, 0, 0.24);
 }
 
+.buttonIcon.text:hover {
+  width: max-content;
+  padding-left: 0.4rem;
+}
+
 .buttonIcon:active {
   box-shadow: 0 0 0.4rem 0 rgba(0, 0, 0, 0.24);
 }
@@ -38,3 +43,14 @@
 .loading {
   pointer-events: none;
 }
+
+.buttonIcon > span {
+  display: none;
+  margin: 0 1rem 0 0.6rem;
+  font-size: 1.3rem;
+  line-height: 1.6rem;
+}
+
+.buttonIcon:hover > span {
+  display: inline;
+}