Add link type to Button Component

packages/desktop-client/src/components/common/Button.tsx

@@ -22,7 +22,7 @@ type ButtonProps = HTMLProps<HTMLButtonElement> & {
   as?: ElementType;
 };
 
-type ButtonType = 'normal' | 'primary' | 'bare';
+type ButtonType = 'normal' | 'primary' | 'bare' | 'link';
 
 const backgroundColor = {
   normal: theme.buttonNormalBackground,
@@ -33,6 +33,7 @@ const backgroundColor = {
   bareDisabled: theme.buttonBareDisabledBackground,
   menu: theme.buttonMenuBackground,
   menuSelected: theme.buttonMenuSelectedBackground,
+  link: theme.buttonBareBackground,
 };
 
 const backgroundColorHover = {
@@ -41,6 +42,7 @@ const backgroundColorHover = {
   bare: theme.buttonBareBackgroundHover,
   menu: theme.buttonMenuBackgroundHover,
   menuSelected: theme.buttonMenuSelectedBackgroundHover,
+  link: theme.buttonBareBackground,
 };
 
 const borderColor = {
@@ -50,6 +52,7 @@ const borderColor = {
   primaryDisabled: theme.buttonPrimaryDisabledBorder,
   menu: theme.buttonMenuBorder,
   menuSelected: theme.buttonMenuSelectedBorder,
+  link: theme.buttonBareBackground,
 };
 
 const textColor = {
@@ -61,6 +64,7 @@ const textColor = {
   bareDisabled: theme.buttonBareDisabledText,
   menu: theme.buttonMenuText,
   menuSelected: theme.buttonMenuSelectedText,
+  link: theme.pageTextLink,
 };
 
 const textColorHover = {
@@ -71,6 +75,55 @@ const textColorHover = {
   menuSelected: theme.buttonMenuSelectedTextHover,
 };
 
+const linkButtonHoverStyles = {
+  textDecoration: 'underline',
+  boxShadow: 'none',
+};
+
+const _getBorder = (type, typeWithDisabled) => {
+  switch (type) {
+    case 'bare':
+    case 'link':
+      return 'none';
+
+    default:
+      return '1px solid ' + borderColor[typeWithDisabled];
+  }
+};
+
+const _getPadding = type => {
+  switch (type) {
+    case 'bare':
+      return '5px';
+    case 'link':
+      return '0';
+    default:
+      return '5px 10px';
+  }
+};
+
+const _getActiveStyles = (type, bounce) => {
+  switch (type) {
+    case 'bare':
+      return { backgroundColor: theme.buttonBareBackgroundActive };
+    case 'link':
+      return {
+        transform: 'none',
+        boxShadow: 'none',
+      };
+    default:
+      return {
+        transform: bounce && 'translateY(1px)',
+        boxShadow: `0 1px 4px 0 ${
+          type === 'primary'
+            ? theme.buttonPrimaryShadow
+            : theme.buttonNormalShadow
+        }`,
+        transition: 'none',
+      };
+  }
+};
+
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
@@ -94,22 +147,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
 
     hoveredStyle = {
       ...(type !== 'bare' && styles.shadow),
+      ...(type === 'link' && linkButtonHoverStyles),
       backgroundColor: backgroundColorHover[type],
       color: color || textColorHover[type],
       ...hoveredStyle,
     };
     activeStyle = {
-      ...(type === 'bare'
-        ? { backgroundColor: theme.buttonBareBackgroundActive }
-        : {
-            transform: bounce && 'translateY(1px)',
-            boxShadow:
-              '0 1px 4px 0 ' +
-              (type === 'primary'
-                ? theme.buttonPrimaryShadow
-                : theme.buttonNormalShadow),
-            transition: 'none',
-          }),
+      ..._getActiveStyles(type, bounce),
       ...activeStyle,
     };
 
@@ -118,14 +162,13 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       alignItems: 'center',
       justifyContent: 'center',
       flexShrink: 0,
-      padding: type === 'bare' ? '5px' : '5px 10px',
+      padding: _getPadding(type),
       margin: 0,
       overflow: 'hidden',
-      display: 'flex',
+      display: type === 'link' ? 'inline' : 'flex',
       borderRadius: 4,
       backgroundColor: backgroundColor[typeWithDisabled],
-      border:
-        type === 'bare' ? 'none' : '1px solid ' + borderColor[typeWithDisabled],
+      border: _getBorder(type, typeWithDisabled),
       color: color || textColor[typeWithDisabled],
       transition: 'box-shadow .25s',
       WebkitAppRegion: 'no-drag',

packages/desktop-client/src/components/settings/UI.tsx

@@ -5,7 +5,7 @@ import { css, media } from 'glamor';
 
 import { type CSSProperties, theme } from '../../style';
 import tokens from '../../tokens';
-import LinkButton from '../common/LinkButton';
+import Button from '../common/Button';
 import View from '../common/View';
 
 type SettingProps = {
@@ -77,8 +77,9 @@ export const AdvancedToggle = ({ children }: AdvancedToggleProps) => {
       {children}
     </View>
   ) : (
-    <LinkButton
+    <Button
       id="advanced"
+      type="link"
       onClick={() => setExpanded(true)}
       style={{
         flexShrink: 0,
@@ -88,6 +89,6 @@ export const AdvancedToggle = ({ children }: AdvancedToggleProps) => {
       }}
     >
       Show advanced settings
-    </LinkButton>
+    </Button>
   );
 };

upcoming-release-notes/1725.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [th3c0d3br34ker]
+---
+
+Add support for type 'link' in Button component.