fix: checkbox label (#172)

- center align label children - gap label children
ninja · Jan 28, 2022 · 05fb321 · 05fb321
1 parent 0d6afcc
commit 05fb321
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/docs/pages/examples/checkbox/index.tsx b/src/docs/pages/examples/checkbox/index.tsx
@@ -1,4 +1,5 @@
 import { Card, Checkbox, useHashRef } from "ninjakit";
+import { MdFavorite } from "react-icons/md";
 
 import styles from "../examples.module.css";
 import { CheckboxState, useButtonState } from "./state";
@@ -19,9 +20,11 @@ export function CheckboxExample() {
 						indeterminate={indeterminate}
 						label={
 							labelWithJSX ? (
-								<span>
-									Label <strong>with node</strong>
-								</span>
+								<>
+									<span>Label </span>
+									<strong>with </strong>
+									<MdFavorite />
+								</>
 							) : (
 								"Label"
 							)

diff --git a/src/lib/components/checkbox/checkbox.module.css b/src/lib/components/checkbox/checkbox.module.css
@@ -25,6 +25,13 @@
 	position: relative;
 }
 
+.children {
+	align-items: center;
+	display: flex;
+	flex-wrap: nowrap;
+	gap: 0.4rem;
+}
+
 .check {
 	fill: var(--md-color-on-primary);
 	font-size: 2rem;

diff --git a/src/lib/components/checkbox/checkbox.tsx b/src/lib/components/checkbox/checkbox.tsx
@@ -55,7 +55,7 @@ export const Checkbox = forwardRef<
 					type="checkbox"
 				/>
 				<MdCheck className={styles.check} />
-				{children || label}
+				<span className={styles.children}>{children || label}</span>
 			</label>
 			{error && (
 				<div className={styles.errorMessage} role="tooltip">