From 9dee75fa4236f3b57a59ab3c9e669866fccdf44a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Sun, 24 Jul 2022 11:32:38 +0100
Subject: [PATCH] feat: support for image in button
---
examples/web/react/app.tsx | 6 ++++++
examples/web/react/components/button/button.css | 8 ++++++--
examples/web/react/components/button/button.tsx | 13 ++++++++++++-
3 files changed, 24 insertions(+), 3 deletions(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 09a5ca31..d20878a3 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -28,6 +28,12 @@ export const App = () => {
return (
<>
<Button text={getText()} onClick={onClick} />
+ <Button
+ text={getText()}
+ image={require("../res/pause.svg")}
+ imageAlt="tobias"
+ onClick={onClick}
+ />
<Info pairs={pairs()} />
</>
);
diff --git a/examples/web/react/components/button/button.css b/examples/web/react/components/button/button.css
index ca261c4b..3eabd764 100644
--- a/examples/web/react/components/button/button.css
+++ b/examples/web/react/components/button/button.css
@@ -66,8 +66,7 @@
.button.simple > img {
margin-right: 6px;
- margin-top: 2px;
- vertical-align: top;
+ vertical-align: middle;
width: 13px;
}
@@ -83,6 +82,11 @@
width: 38px;
}
+.button.simple > span {
+ vertical-align: middle;
+ display: inline-block;
+}
+
.button.simple.no-text > img {
margin-right: 0px;
margin-top: 0px;
diff --git a/examples/web/react/components/button/button.tsx b/examples/web/react/components/button/button.tsx
index b4b57329..7858e7ee 100644
--- a/examples/web/react/components/button/button.tsx
+++ b/examples/web/react/components/button/button.tsx
@@ -4,6 +4,8 @@ import "./button.css";
type ButtonProps = {
text: string;
+ image?: string;
+ imageAlt?: string;
size?: string;
style?: string[];
onClick?: () => void;
@@ -11,17 +13,26 @@ type ButtonProps = {
export const Button: FC<ButtonProps> = ({
text,
+ image,
+ imageAlt,
size = "small",
style = ["simple", "border"],
onClick
}) => {
const classes = () => ["button", size, ...style].join(" ");
const _onClick = () => (onClick ? onClick() : undefined);
- return (
+ const buttonSimple = () => (
<span className={classes()} onClick={_onClick}>
{text}
</span>
);
+ const buttonImage = () => (
+ <span className={classes()} onClick={_onClick}>
+ <img src={image} alt={imageAlt} />
+ <span>{text}</span>
+ </span>
+ );
+ return image ? buttonImage() : buttonSimple();
};
export default Button;
--
GitLab