Merge pull request #64 from Synthetixio/icon-button-border

Icon button border
Synthetixio · May 2, 2022 · 9b62d1c · 9b62d1c
2 parents e73e4ae + 859ec41
commit 9b62d1c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 13 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,14 +1,13 @@
-import React, { ButtonHTMLAttributes, MouseEvent } from 'react';
+import React, { ButtonHTMLAttributes, MouseEvent, PropsWithChildren } from 'react';
 import styled from 'styled-components';
 import colors from '../styles/colors';
 import fonts from '../styles/fonts';
 import theme from '../styles/theme';
 
 interface ButtonProps {
-	text?: string;
 	type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
 	size?: 'large' | 'medium' | 'small';
-	variant?: 'primary' | 'secondary' | 'tertiary';
+	variant?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
 	disabled?: boolean;
 	onClick: (e: MouseEvent<HTMLButtonElement>) => void;
 }
@@ -19,9 +18,9 @@ export default function Button({
 	variant,
 	disabled,
 	onClick,
-	text,
+	children,
 	...rest
-}: ButtonProps) {
+}: PropsWithChildren<ButtonProps>) {
 	return (
 		<StyledButton
 			type={type}
@@ -31,9 +30,9 @@ export default function Button({
 			onClick={onClick}
 			{...rest}
 		>
-			<StyledButtonText variant={variant} disabled={disabled} size={size}>
-				{text}
-			</StyledButtonText>
+			<StyledChildren variant={variant} disabled={disabled} size={size}>
+				{children}
+			</StyledChildren>
 		</StyledButton>
 	);
 }
@@ -58,6 +57,8 @@ const determineVariant = (variant: ButtonProps['variant'], disabled: boolean) =>
 			return colors.darkBlue;
 		case 'secondary':
 			return 'none';
+		case 'quaternary':
+			return 'none';
 		default:
 			return colors.gradients.lightBlue;
 	}
@@ -72,7 +73,8 @@ const StyledButton = styled.button<{
 	min-height: ${theme.rem};
 	height: ${({ size }) => determineHeight(size)};
 	outline: 0;
-	border: 0;
+	border: ${({ variant }) =>
+		variant === 'quaternary' ? '1px solid rgba(130, 130, 149, 0.3)' : '0'};
 	text-align: center;
 	background: ${({ variant, disabled }) => determineVariant(variant, !!disabled)};
 	cursor: pointer;
@@ -116,7 +118,7 @@ const StyledButton = styled.button<{
 	}}
 `;
 
-const StyledButtonText = styled.span<{
+const StyledChildren = styled.span<{
 	disabled?: ButtonProps['disabled'];
 	variant?: ButtonProps['variant'];
 	size?: ButtonProps['size'];
@@ -125,7 +127,7 @@ const StyledButtonText = styled.span<{
 	font-family: ${fonts.interBold};
 	line-height: 17px;
 	font-weight: bold;
-	${({ variant }) => variant === 'tertiary' && 'color: white'};
+	${({ variant }) => (variant === 'tertiary' || variant === 'quaternary') && 'color: white'};
 	${({ disabled }) => disabled && `color: ${colors.disabled}`};
 	${({ variant, disabled }) =>
 		variant === 'secondary' &&

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -35,7 +35,7 @@ const StyledWrapper = styled.button<{
 	display: inline-block;
 	padding: 2px;
 	outline: 0;
-	border: 0;
+	border: 1px solid rgba(130, 130, 149, 0.3);
 	border-radius: ${({ rounded }) => (rounded ? '30px' : '4px')};
 	background: ${({ active }) => (active ? `${colors.gradients.grey}` : 'transparent')};
 `;

diff --git a/stories/Button.stories.tsx b/stories/Button.stories.tsx
@@ -16,7 +16,7 @@ export const Template: ComponentStory<typeof Button> = (args) => (
 );
 
 Template.args = {
-	text: 'I am a Button',
+	children: 'I am a Button',
 	variant: 'primary',
 	type: 'button',
 	size: 'large',
@@ -29,3 +29,24 @@ Template.parameters = {
 		url: 'https://www.figma.com/file/zeCepPb3Bo6Fd92FdcolUT/v1.0?node-id=918%3A18443',
 	},
 };
+
+export const Quaternary: ComponentStory<typeof Button> = (args) => (
+	<div style={{ backgroundColor: 'red', padding: '10px' }}>
+		<Button {...args} />
+	</div>
+);
+
+Quaternary.args = {
+	children: (
+		<>
+			<span style={{ backgroundColor: 'green', minWidth: 8, minHeight: 8, borderRadius: '50%' }}>
+				.
+			</span>
+			I am a Button
+		</>
+	),
+	variant: 'primary',
+	type: 'button',
+	size: 'large',
+	disabled: false,
+};