From 5d86fe69ba5a0af3549fec6c06b3189c149e2176 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Thu, 18 Aug 2022 00:09:47 +0100
Subject: [PATCH] feat: better button increment With support for prefix and
suffux
---
examples/web/react/app.tsx | 4 +-
.../button-increment/button-increment.css | 8 +++
.../button-increment/button-increment.tsx | 6 ++
.../web/react/components/button/button.css | 2 +-
examples/web/react/components/info/info.css | 58 +++++++++----------
5 files changed, 47 insertions(+), 31 deletions(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 0c59449e..9bf41756 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -21,7 +21,9 @@ export const App = () => {
<Pair
key="button-tobias"
name={"Button Increment"}
- valueNode={<ButtonIncrement value={200} delta={100} />}
+ valueNode={
+ <ButtonIncrement value={200} delta={100} suffix={"Hz"} />
+ }
/>,
<Pair
key="button-cpu"
diff --git a/examples/web/react/components/button-increment/button-increment.css b/examples/web/react/components/button-increment/button-increment.css
index eb8b0515..57f94577 100644
--- a/examples/web/react/components/button-increment/button-increment.css
+++ b/examples/web/react/components/button-increment/button-increment.css
@@ -5,3 +5,11 @@
.button-increment > .value {
margin: 0px 8px 0px 8px;
}
+
+.button-increment > .prefix {
+ margin-left: 8px;
+}
+
+.button-increment > .suffix {
+ margin-right: 8px;
+}
diff --git a/examples/web/react/components/button-increment/button-increment.tsx b/examples/web/react/components/button-increment/button-increment.tsx
index 8ab81dd6..19b49416 100644
--- a/examples/web/react/components/button-increment/button-increment.tsx
+++ b/examples/web/react/components/button-increment/button-increment.tsx
@@ -6,6 +6,8 @@ import "./button-increment.css";
type ButtonIncrementProps = {
value: number;
delta?: number;
+ prefix?: string;
+ suffix?: string;
size?: string;
style?: string[];
onClick?: () => void;
@@ -15,6 +17,8 @@ type ButtonIncrementProps = {
export const ButtonIncrement: FC<ButtonIncrementProps> = ({
value,
delta = 1,
+ prefix,
+ suffix,
size = "medium",
style = ["simple", "border"],
onClick,
@@ -43,7 +47,9 @@ export const ButtonIncrement: FC<ButtonIncrementProps> = ({
style={["simple"]}
onClick={_onMinusClick}
/>
+ {prefix && <span className="prefix">{prefix}</span>}
<span className="value">{valueState}</span>
+ {suffix && <span className="suffix">{suffix}</span>}
<Button
text={"+"}
size={size}
diff --git a/examples/web/react/components/button/button.css b/examples/web/react/components/button/button.css
index f3021512..67b45263 100644
--- a/examples/web/react/components/button/button.css
+++ b/examples/web/react/components/button/button.css
@@ -84,8 +84,8 @@
}
.button.simple > span {
- vertical-align: middle;
display: inline-block;
+ vertical-align: middle;
}
.button.simple.no-text > img {
diff --git a/examples/web/react/components/info/info.css b/examples/web/react/components/info/info.css
index 4d41c39e..cf192423 100644
--- a/examples/web/react/components/info/info.css
+++ b/examples/web/react/components/info/info.css
@@ -1,29 +1,29 @@
-.info {
- font-size: 24px;
- vertical-align: top;
-}
-
-.info > dt {
- clear: both;
- float: left;
- margin-top: 12px;
-}
-
-.info > dt:first-of-type {
- margin-top: 0px;
-}
-
-.info > dd {
- float: right;
- margin-top: 12px;
-}
-
-.info > dd:first-of-type {
- margin-top: 0px;
-}
-
-.info::after {
- clear: both;
- content: '';
- display: block;
-}
+.info {
+ font-size: 24px;
+ vertical-align: top;
+}
+
+.info > dt {
+ clear: both;
+ float: left;
+ margin-top: 12px;
+}
+
+.info > dt:first-of-type {
+ margin-top: 0px;
+}
+
+.info > dd {
+ float: right;
+ margin-top: 12px;
+}
+
+.info > dd:first-of-type {
+ margin-top: 0px;
+}
+
+.info::after {
+ clear: both;
+ content: '';
+ display: block;
+}
--
GitLab