Merge pull request #89 from Giveth/adds-leftIcon

adds left icon on buttons
Giveth · Jun 15, 2023 · 71d0c91 · 71d0c91
2 parents 3aa024a + 0759d6b
commit 71d0c91
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@giveth/ui-design-system",
-	"version": "1.11.10",
+	"version": "1.11.11",
 	"files": [
 		"/lib"
 	],

diff --git a/src/components/buttonLinks/ButtonLink.tsx b/src/components/buttonLinks/ButtonLink.tsx
@@ -155,6 +155,7 @@ export const ButtonLink: FC<IButtonLinkProps> = forwardRef(
 			linkType = 'secondary',
 			disabled = false,
 			icon,
+			leftIcon,
 			target,
 			className,
 			href,
@@ -173,10 +174,11 @@ export const ButtonLink: FC<IButtonLinkProps> = forwardRef(
 				size={size}
 				className={className}
 			>
+				{leftIcon && leftIcon}
 				<ButtonText as='span' size={size}>
 					{label}
 				</ButtonText>
-				{icon && icon}
+				{icon && !leftIcon && icon}
 			</ButtonLinkContainer>
 		);
 	},

diff --git a/src/components/buttonLinks/OutlineButtonLink.tsx b/src/components/buttonLinks/OutlineButtonLink.tsx
@@ -84,6 +84,7 @@ export const OutlineLinkButton: FC<IButtonLinkProps> = forwardRef(
 			linkType = 'secondary',
 			disabled = false,
 			icon,
+			leftIcon,
 			href,
 			target,
 			className,
@@ -103,8 +104,9 @@ export const OutlineLinkButton: FC<IButtonLinkProps> = forwardRef(
 				as={isExternal ? 'a' : 'span'}
 			>
 				<ButtonText as='span' size={size}>
+					{leftIcon && leftIcon}
 					{label}
-					{icon && icon}
+					{icon && !leftIcon && icon}
 				</ButtonText>
 			</ButtonLinkContainer>
 		);

diff --git a/src/components/buttonLinks/type.ts b/src/components/buttonLinks/type.ts
@@ -17,5 +17,6 @@ export interface IButtonLinkProps
 	extends ComponentPropsWithoutRef<'a'>,
 		IButtonLinkContainerProps {
 	icon?: ReactNode;
+	leftIcon?: ReactNode;
 	label: string;
 }
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
@@ -155,6 +155,7 @@ export const Button: FC<IButtonProps> = ({
 	loading = false,
 	onClick,
 	icon,
+	leftIcon,
 	className,
 	type = 'button',
 }) => {
@@ -172,8 +173,9 @@ export const Button: FC<IButtonProps> = ({
 					<Loader buttonType={buttonType} disabled={disabled} />
 				)}
 			</LoadingContainer>
+			{leftIcon && leftIcon}
 			<ButtonText size={size}>{label}</ButtonText>
-			{icon && icon}
+			{icon && !leftIcon && icon}
 		</ButtonContainer>
 	);
 };
diff --git a/src/components/buttons/OutlineButton.tsx b/src/components/buttons/OutlineButton.tsx
@@ -93,6 +93,7 @@ export const OutlineButton: FC<IButtonProps> = ({
 	loading = false,
 	onClick,
 	icon,
+	leftIcon,
 	className,
 	type = 'button',
 }) => {
@@ -110,8 +111,9 @@ export const OutlineButton: FC<IButtonProps> = ({
 					<Loader buttonType={buttonType} disabled={disabled} />
 				)}
 			</LoadingContainer>
+			{leftIcon && leftIcon}
 			<ButtonText size={size}>{label}</ButtonText>
-			{icon && icon}
+			{icon && !leftIcon && icon}
 		</ButtonContainer>
 	);
 };
diff --git a/src/components/buttons/type.ts b/src/components/buttons/type.ts
@@ -18,4 +18,5 @@ export interface IButtonProps
 	loading?: boolean;
 	label: string;
 	icon?: ReactNode;
+	leftIcon?: ReactNode;
 }