feat: better button increment

With support for prefix and suffux

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"

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;
+}

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}

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 {

examples/web/react/components/info/info.css

-.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;
+}