feat: Extend default button using HTMLButton Props

fixes unexpected hitbox behavior with dark/light toggle component
kevintyj · Dec 2, 2023 · d82c707 · d82c707
1 parent 131fb12
commit d82c707
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 79 deletions.
diff --git a/src/assets/components/button.styled.tsx b/src/assets/components/button.styled.tsx
@@ -1,12 +1,14 @@
-import type { ParentComponent } from 'solid-js';
+import type { JSX, ParentComponent } from 'solid-js';
+import { splitProps } from 'solid-js';
 
-type IButtonProps = ParentComponent< & {
+type ButtonProps = ParentComponent< & {
 	square?: boolean
 	aria: string
 	type?: 'button' | 'submit' | 'reset' | undefined
-}>;
+} & JSX.HTMLAttributes<HTMLButtonElement>>;
 
-const Button: IButtonProps = (props) => {
+const Button: ButtonProps = (props) => {
+	const [_, buttonProps] = splitProps(props, ['square', 'aria', 'type']);
 	return (
 		<button
 			aria-label={props.aria}
@@ -21,6 +23,7 @@ const Button: IButtonProps = (props) => {
     active:translate-y-px"
 			classList={{ 'w-8 h-8 px-0': props.square }}
 			type={props.type}
+			{...buttonProps}
 		>
 			{props.children}
 		</button>

diff --git a/src/components/layouts/navBar.tsx b/src/components/layouts/navBar.tsx
@@ -12,68 +12,61 @@ const NavBar: Component = () => {
 	const pathname = createMemo(() => location.pathname);
 
 	css`
-    .menuBG {
-      display: flex;
-      transition: all 0.5s;
-    }
-    .menuShown {
-      transform: translateX(0) !important;
-    }
-    .anim-menu {
-      transition: all 0.5s;
-    }
-  `;
+		.menuBG {
+		  display: flex;
+		  transition: all 0.5s;
+		}
+		.menuShown {
+		  transform: translateX(0) !important;
+		}
+		.anim-menu {
+		  transition: all 0.5s;
+		}
+	`;
 
 	const [mobileMenu, setMobileMenu] = createSignal(false);
 
+	const navLinkClass = 'font-medium text-lg font-display text-slate-700 dark:text-slate-300 rounded-lg hover:text-slate-900 hover:-translate-x-1 transition-all';
+
 	return (
 		<>
 			<nav
 				role="navigation"
-				class="h-screen w-screen hidden justify-end fixed
-      backdrop-blur-sm z-[100] bg-neutral-50 dark:bg-[#181819]
-      bg-opacity-60 dark:bg-opacity-70 cursor-pointer"
+				class="h-screen w-screen hidden justify-end fixed backdrop-blur-sm z-[100]
+				bg-neutral-50 dark:bg-[#181819] bg-opacity-60 dark:bg-opacity-70 cursor-pointer"
 				classList={{ menuBG: mobileMenu() }}
 				onClick={() => setMobileMenu(false)}
 			>
 				<div
-					class="absolute h-screen border-l p-4 py-3 sm:px-6 lg:px-10 flex flex-col justify-between
-         backdrop-blur-md bg-neutral-50 dark:bg-[#181819]
-         border-l-neutral-200 dark:border-l-neutral-800
-        bg-opacity-80 dark:bg-opacity-90 w-64 max-w-full translate-x-full shadow-xl anim-menu"
+					class="absolute h-screen border-l p-4 py-3 sm:px-6 lg:px-10 flex flex-col
+					justify-between backdrop-blur-md bg-neutral-50 dark:bg-[#181819] border-l-neutral-200
+					dark:border-l-neutral-800 bg-opacity-80 dark:bg-opacity-90 w-64 max-w-full translate-x-full
+					shadow-xl anim-menu"
 					classList={{ menuShown: mobileMenu() }}
 				>
 					<div class="flex space-x-2 w-full justify-end">
-						<a onClick={() => setMobileMenu(false)}>
-							<Button aria="Open Menu">
-								<i class="bi bi-list"></i>
-							</Button>
-						</a>
+						<Button aria="Open Menu" onClick={() => setMobileMenu(false)}>
+							<i class="bi bi-list"></i>
+						</Button>
 					</div>
 					<div class="flex flex-col space-y-2 w-full pt-[1px] justify-start text-end">
 						<a
 							href="/playground/intro"
-							class="font-medium text-lg font-display
-            text-slate-700 dark:text-slate-300 rounded-lg
-            hover:text-slate-900 hover:-translate-x-1 transition-all"
+							class={navLinkClass}
 							classList={{ 'font-bold': pathname().includes('/playground') }}
 						>
 							Playground
 						</a>
 						<a
 							href="https://github.com/kevintyj/ambient"
-							class="font-medium text-lg font-display
-            text-slate-700 dark:text-slate-300 rounded-lg
-            hover:text-slate-900 hover:-translate-x-1 transition-all"
+							class={navLinkClass}
 							classList={{ 'font-bold': pathname() === '/github' }}
 						>
 							Github
 						</a>
 						<a
 							href="/coming-soon"
-							class="font-medium text-lg font-display
-            text-slate-700 dark:text-slate-300 rounded-lg
-            hover:text-slate-900 hover:-translate-x-1 transition-all"
+							class={navLinkClass}
 							classList={{ 'font-bold': pathname() === '/coming-soon' }}
 						>
 							Documentation
@@ -125,12 +118,16 @@ const NavBar: Component = () => {
 								<i class="bi bi-github"></i>
 							</Button>
 						</A>
+
 						<DarkModeToggle />
-						<a onClick={() => setMobileMenu(true)} class="block md:hidden">
-							<Button aria="Open Menu">
-								<i class="bi bi-list"></i>
-							</Button>
-						</a>
+
+						<Button
+							aria="Open Menu"
+							class="block md:hidden"
+							onClick={() => setMobileMenu(true)}
+						>
+							<i class="bi bi-list"></i>
+						</Button>
 					</div>
 				</div>
 			</nav>

diff --git a/src/components/playground/button/playgroundButton.tsx b/src/components/playground/button/playgroundButton.tsx
@@ -1,7 +1,7 @@
 import type { ParentComponent } from 'solid-js';
 import { css } from 'solid-styled';
 
-type IButtonProps = ParentComponent< & {
+type ButtonProps = ParentComponent< & {
 	textColor?: string
 	color?: string
 	hoverColor?: string
@@ -14,7 +14,7 @@ type IButtonProps = ParentComponent< & {
 	type?: 'submit' | 'reset' | 'button' | undefined
 }>;
 
-const PlaygroundBtn: IButtonProps = (props) => {
+const PlaygroundBtn: ButtonProps = (props) => {
 	css`
     .playground-btn {
       color: ${props.textColor ? props.textColor : ''};

diff --git a/src/components/playground/components/sandboxCard.tsx b/src/components/playground/components/sandboxCard.tsx
@@ -13,14 +13,17 @@ const SandboxCard: ParentComponent = (props) => {
 			>
 				<div class="fixed w-screen max-h-screen overflow-x-scroll bg-black bg-opacity-90 dark:bg-opacity-70 top-0 left-0 z-[9998] backdrop-blur">
 					<div class="flex w-full h-full justify-center items-center p-6 sm:p-8 z-[9999]">
-						<div class={`relative rounded border w-full max-w-screen-xl 
+						<div class={`relative rounded border w-full max-w-screen-xl
             border-neutral-300 bg-white dark:border-neutral-800 dark:bg-[${BaseBackgroundArr[1]}] shadow p-6 sm:p-8`}
 						>
-							<div class="absolute right-4 top-3" onClick={() => setOpen(false)}>
-								<Button aria="Toggle Fullscreen View" square>
-									<i class="bi bi-fullscreen-exit -mx-[3.5px]"></i>
-								</Button>
-							</div>
+							<Button
+								aria="Toggle Fullscreen View"
+								square
+								class="absolute right-4 top-3"
+								onClick={() => setOpen(false)}
+							>
+								<i class="bi bi-fullscreen-exit -mx-[3.5px]"></i>
+							</Button>
 							{props.children}
 						</div>
 					</div>

diff --git a/src/components/shared/darkModeToggle.tsx b/src/components/shared/darkModeToggle.tsx
@@ -42,10 +42,8 @@ const DarkModeToggle: Component = () => {
 	};
 
 	return (
-		<Button aria="Dark-mode Toggle">
-			<a onClick={() => toggleDarkMode()}>
-				{darkMode() ? <i class="bi bi-lightbulb-fill"></i> : <i class="bi bi-moon-stars-fill"></i>}
-			</a>
+		<Button aria="Dark-mode Toggle" onClick={() => toggleDarkMode()}>
+			{darkMode() ? <i class="bi bi-lightbulb-fill"></i> : <i class="bi bi-moon-stars-fill"></i>}
 		</Button>
 	);
 };

diff --git a/src/pages/colorGenerationPage.tsx b/src/pages/colorGenerationPage.tsx
@@ -78,6 +78,15 @@ const ColorGenerationPage: Component = () => {
 								<input type="file" onChange={handleFileChange} class="hidden" />
 							</label>
 						</Button>
+						<Button
+							aria="Export Current Table as Object"
+							onClick={() => handleColorExport('obj')}
+						>
+							Export Color Table
+						</Button>
+						<Button aria="Export Current Table as Array" onClick={() => handleColorExport('arr')}>
+							Export Color Table as Array
+						</Button>
 						<a onClick={() => handleColorExport('obj')}>
 							<Button aria="Export Current Table as Object">
 								Export Color Table

diff --git a/src/pages/colorTablePage.tsx b/src/pages/colorTablePage.tsx
@@ -111,26 +111,31 @@ const ColorTablePage: Component = () => {
 								Import Colorset
 							</Button>
 						</a>
-						<a onClick={() => handleColorExport('obj')}>
-							<Button aria="Export Current Colors as Object">
-								Export Colorset
-							</Button>
-						</a>
-						<a onClick={() => handleColorExport('arr')}>
-							<Button aria="Export Current Colors as Array">
-								Export Colorset as Array
-							</Button>
-						</a>
-						<a onClick={() => handleJSExport('arrjs')}>
-							<Button aria="Export Current Colors as Array">
-								Export Colorset as Array (JS)
-							</Button>
-						</a>
-						<a onClick={() => handleJSExport('objjs')}>
-							<Button aria="Export Current Colors as Array">
-								Export Colorset as Object (JS)
-							</Button>
-						</a>
+						<Button
+							aria="Export Current Colors as Object"
+							onClick={() => handleColorExport('obj')}
+						>
+							Export Colorset
+						</Button>
+						<Button
+							aria="Export Current Colors as Object"
+							onClick={() => handleColorExport('arr')}
+						>
+							Export Colorset as Array
+						</Button>
+						<Button
+							aria="Export Current Colors as Object"
+							onClick={() => handleJSExport('arrjs')}
+						>
+							Export Colorset as Array (JS)
+						</Button>
+						<Button
+							aria="Export Current Colors as Object"
+							onClick={() => handleJSExport('objjs')}
+						>
+							Export Colorset as Object (JS)
+						</Button>
+
 						<ToggleColorScale />
 					</div>
 				</div>

diff --git a/src/pages/comingSoonPage.tsx b/src/pages/comingSoonPage.tsx
@@ -7,7 +7,7 @@ const ComingSoonPage: Component = () => {
 		<>
 			<div class="flex justify-center px-4 sm:px-6">
 				<div class="flex flex-col justify-center items-center text-center max-w-screen-md gap-y-1 pb-6 px-auto">
-					<img aria-label="Unlinked Image" src={LinkUrl} class="w-20 pb-4" />
+					<img aria-label="Unlinked Image" src={LinkUrl} class="w-20 pb-4" alt="Link image" />
 					<h1 class="font-semibold font-display text-3xl text-slate-800 dark:text-slate-200 pb-2">
 						I haven't created this yet!
 					</h1>
@@ -19,11 +19,12 @@ const ComingSoonPage: Component = () => {
 						If you have any questions, you can also send me a email!
 					</p>
 					<div>
-						<a onClick={() => history.back()}>
-							<Button aria="Navigate to previous page">
-								Take me back!
-							</Button>
-						</a>
+						<Button
+							aria="Navigate to previous page"
+							onClick={() => history.back()}
+						>
+							Take me back!
+						</Button>
 					</div>
 				</div>
 			</div>