Input Group utilities added, docs updated, Combobox updated

skeletonlabs · Feb 13, 2025 · 4d75bab · 4d75bab
1 parent 2f62bed
commit 4d75bab
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 59 deletions.
diff --git a/packages/skeleton-svelte/src/lib/components/Combobox/Combobox.svelte b/packages/skeleton-svelte/src/lib/components/Combobox/Combobox.svelte
@@ -21,8 +21,8 @@
 		labelClasses = '',
 		// Input
 		inputGroupBase = 'input-group grid-cols-[1fr_auto]',
-		inputGroupInput = '',
-		inputGroupButton = 'input-group-cell',
+		inputGroupInput = 'ig-input',
+		inputGroupButton = 'ig-btn hover:preset-tonal',
 		inputGroupArrow = '',
 		inputGroupClasses = '',
 		// Positioner

diff --git a/packages/skeleton/src/utilities/form-groups.css b/packages/skeleton/src/utilities/form-groups.css
@@ -1,13 +1,51 @@
 /* Components: Forms > Input Group */
 
-/*
-@utilityinput-group {}
+@utility input-group {
+	display: grid;
+	align-items: stretch;
+	border-radius: var(--radius-base);
+	border-width: var(--default-border-width);
+	border-color: var(--color-surface-200-800);
+	overflow: hidden;
 
-@utilityig-cell {}
+	& > * + * {
+		border-left-width: 1px !important;
+		border-color: var(--color-surface-200-800);
+	}
+}
 
-@utilityig-input {}
+/* Child Elements -- */
 
-@utilityig-select {}
+@utility ig-cell {
+	font-size: var(--text-sm);
+	display: flex;
+	justify-contents: center;
+	align-items: center;
+	padding-inline: --spacing(4);
+}
 
-@utilityig-button {}
-*/
+@utility ig-input {
+	--tw-ring-inset: inset;
+	background-color: transparent;
+	border-width: 0;
+}
+
+@utility ig-select {
+	--tw-ring-inset: inset;
+	background-color: transparent;
+	border-width: 0;
+}
+
+@utility ig-btn {
+	--tw-ring-inset: inset;
+	cursor: pointer;
+	font-size: var(--text-base);
+	font-weight: var(--font-weight-medium);
+	text-decoration-line: none;
+	display: flex;
+	justify-contents: center;
+	align-items: center;
+	gap: --spacing(2);
+	padding-inline: --spacing(4);
+	white-space: nowrap;
+}
diff --git a/packages/skeleton/src/utilities/form-inputs.css b/packages/skeleton/src/utilities/form-inputs.css
@@ -14,16 +14,15 @@
 	padding: --spacing(2);
 
 	outline-color: transparent;
-	--tw-ring-color: transparent;
 
 	@variant active {
-		border-color: var(--color-primary-500);
+		--tw-ring-color: var(--color-primary-500);
 	}
 	@variant focus {
-		border-color: var(--color-primary-500);
+		--tw-ring-color: var(--color-primary-500);
 	}
 	@variant focus-within {
-		border-color: var(--color-primary-500);
+		--tw-ring-color: var(--color-primary-500);
 	}
 
 	/* File Date/Time --- */

diff --git a/packages/skeleton/src/utilities/form-selects.css b/packages/skeleton/src/utilities/form-selects.css
@@ -20,16 +20,15 @@
 	padding-block: 0px;
 
 	outline-color: transparent;
-	--tw-ring-color: transparent;
 
 	@variant active {
-		border-color: var(--color-primary-500);
+		--tw-ring-color: var(--color-primary-500);
 	}
 	@variant focus {
-		border-color: var(--color-primary-500);
+		--tw-ring-color: var(--color-primary-500);
 	}
 	@variant focus-within {
-		border-color: var(--color-primary-500);
+		--tw-ring-color: var(--color-primary-500);
 	}
 
 	& > * + * {

diff --git a/packages/skeleton/src/utilities/form-textareas.css b/packages/skeleton/src/utilities/form-textareas.css
@@ -15,15 +15,14 @@
 	padding: --spacing(2);
 
 	outline-color: transparent;
-	--tw-ring-color: transparent;
 
 	@variant active {
-		border-color: var(--color-primary-500);
+		--tw-ring-color: var(--color-primary-500);
 	}
 	@variant focus {
-		border-color: var(--color-primary-500);
+		--tw-ring-color: var(--color-primary-500);
 	}
 	@variant focus-within {
-		border-color: var(--color-primary-500);
+		--tw-ring-color: var(--color-primary-500);
 	}
 }
diff --git a/packages/skeleton/src/utilities/typography.css b/packages/skeleton/src/utilities/typography.css
@@ -178,7 +178,7 @@
 }
 
 @utility code {
-	&:not(pre, .ec-line) > & {
+	&:not(pre &, .ec-line &) {
 		background-color: var(--color-primary-100-900);
 		border-radius: var(--radius-base);
 		color: var(--color-primary-contrast-50-950);

diff --git a/playgrounds/skeleton-core/src/pages/components/forms.astro b/playgrounds/skeleton-core/src/pages/components/forms.astro
@@ -205,15 +205,15 @@ import Layout from '@layouts/Layout.astro';
 		<!-- Groups -->
 		<section class="space-y-4">
 			<h2 class="h2">Groups</h2>
-			<form class="w-full max-w-md space-y-8">
+			<form class="w-full space-y-4">
 				<!-- Website -->
-				<div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
-					<div class="ig-cell preset-tonal-surface">https://</div>
+				<div class="input-group grid-cols-[auto_1fr_auto]">
+					<div class="ig-cell preset-tonal">https://</div>
 					<input class="ig-input" type="text" placeholder="www.example.com" />
 				</div>
 				<!-- Amount -->
-				<div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
-					<div class="ig-cell preset-tonal-surface">$</div>
+				<div class="input-group grid-cols-[auto_1fr_auto]">
+					<div class="ig-cell preset-tonal">$</div>
 					<input class="ig-input" type="text" placeholder="Amount" />
 					<select class="ig-select">
 						<option>USD</option>
@@ -222,13 +222,13 @@ import Layout from '@layouts/Layout.astro';
 					</select>
 				</div>
 				<!-- Username -->
-				<div class="input-group divide-surface-200-800 grid-cols-[1fr_auto] divide-x">
-					<input type="text" placeholder="Enter Username..." />
+				<div class="input-group grid-cols-[1fr_auto]">
+					<input class="ig-input" type="text" placeholder="Enter Username..." />
 					<button class="ig-btn preset-filled" title="Username already in use.">&check;</button>
 				</div>
 				<!-- Search -->
-				<div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
-					<div class="input-group-cell">🔍</div>
+				<div class="input-group grid-cols-[auto_1fr_auto]">
+					<div class="ig-cell preset-tonal">🔍</div>
 					<input class="ig-input" type="search" placeholder="Search..." />
 					<button class="ig-btn preset-filled">Submit</button>
 				</div>

diff --git a/sites/next.skeleton.dev/src/content/docs/tailwind/forms.mdx b/sites/next.skeleton.dev/src/content/docs/tailwind/forms.mdx
@@ -128,3 +128,13 @@ export default {
 		<Code code={ExampleGroupsRaw} lang="astro" />
 	</Fragment>
 </Preview>
+
+| Class | Usage |
+| --- | --- |
+| `input-group` | Defines the parent input group set. |
+| `ig-cell` | Defines a child cell for text or icons. |
+| `ig-input` | Defines a child input of `type="text"`. |
+| `ig-select` | Defines a child select element. |
+| `ig-btn` | Defines a child button. |
+
+Note that cells and buttons support Preset utility classes.
diff --git a/sites/next.skeleton.dev/src/examples/tailwind/forms/ExampleGroups.astro b/sites/next.skeleton.dev/src/examples/tailwind/forms/ExampleGroups.astro
@@ -1,42 +1,38 @@
 ---
-// import { CircleDollarSign, Check, Search } from 'lucide-react';
+import { CircleDollarSign, Check, Search } from 'lucide-react';
 ---
 
-<div class="card p-4 bg-red-500 text-center">
-	<p>Input Groups needs to be updated or removed.</p>
-</div>
-
-<!-- <form class="mx-auto w-full max-w-md space-y-8">
-	// Website
-	<div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
-		<div class="input-group-cell preset-tonal-surface">https://</div>
-		<input type="text" placeholder="www.example.com" />
+<form class="w-full space-y-8">
+	<!-- Website -->
+	<div class="input-group grid-cols-[auto_1fr_auto]">
+		<div class="ig-cell preset-tonal">https://</div>
+		<input class="ig-input" type="text" placeholder="www.example.com" />
 	</div>
-	// Amount
-	<div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
-		<div class="input-group-cell preset-tonal-surface">
+	<!-- Amount -->
+	<div class="input-group grid-cols-[auto_1fr_auto]">
+		<div class="ig-cell preset-tonal">
 			<CircleDollarSign size={16} />
 		</div>
-		<input type="text" placeholder="Amount" />
-		<select>
+		<input class="ig-input" type="text" placeholder="Amount" />
+		<select class="ig-select">
 			<option>USD</option>
 			<option>CAD</option>
 			<option>EUR</option>
 		</select>
 	</div>
-	// Username
-	<div class="input-group divide-surface-200-800 grid-cols-[1fr_auto] divide-x">
-		<input type="text" placeholder="Enter Username..." />
-		<button class="btn preset-filled" title="Username already in use.">
+	<!-- Username -->
+	<div class="input-group grid-cols-[1fr_auto]">
+		<input class="ig-input" type="text" placeholder="Enter Username..." />
+		<button class="ig-btn preset-filled" title="Username already in use.">
 			<Check size={16} />
 		</button>
 	</div>
-	// Search
-	<div class="input-group divide-surface-200-800 grid-cols-[auto_1fr_auto] divide-x">
-		<div class="input-group-cell">
+	<!-- Search -->
+	<div class="input-group grid-cols-[auto_1fr_auto]">
+		<div class="ig-cell preset-tonal">
 			<Search size={16} />
 		</div>
-		<input type="search" placeholder="Search..." />
-		<button class="btn preset-filled">Submit</button>
+		<input class="ig-input" type="search" placeholder="Search..." />
+		<button class="ig-btn preset-filled">Submit</button>
 	</div>
-</form> -->
+</form>
diff --git a/sites/next.skeleton.dev/src/styles/app.css b/sites/next.skeleton.dev/src/styles/app.css
@@ -77,11 +77,13 @@ html {
 [data-theme='seafoam'],
 [data-theme='vintage'],
 [data-theme='wintry'] {
-	background-attachment: fixed;
-	/* prettier-ignore */
-	background-image:
+	& body {
+		background-attachment: fixed;
+		/* prettier-ignore */
+		background-image:
 		radial-gradient(at 0% 25%, color-mix(in oklab, var(--color-primary-500) 10%, transparent) 0px, transparent 30%),
 		radial-gradient(at 15% 06%, color-mix(in oklab, var(--color-success-500) 5%, transparent) 0px, transparent 30%);
+	}
 }
 
 /* Filled Cards */