extract styles

cotton-coding · Apr 3, 2024 · 08d566c · 08d566c
1 parent 8347737
commit 08d566c
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 75 deletions.
diff --git a/packages/form-input/src/lib/components/info.svelte b/packages/form-input/src/lib/components/info.svelte
@@ -2,28 +2,15 @@
 
 </script>
 
-<span><slot></slot></span>
+<span class="group-element"><slot></slot></span>
 
 <style>
+
+	@import './input.css';
 	span {
 		all: unset;
 		padding: var(--input-spacing-x) var(--input-spacing-y);
-		border: 1px solid var(--input-border-color);
-		border-left: none;
 		background-color: var(--input-label-background-color);
 	}
 
-	:global(.input-group):focus-within span {
-		border-color: var(--input-border-color-focus, var(--primary-color));
-	}
-	span:first-child {
-		border-top-left-radius: var(--border-radius);
-		border-bottom-left-radius: var(--border-radius);
-		border-left: 1px solid var(--input-border-color);
-	}
-
-	span:last-child {
-		border-top-right-radius: var(--border-radius);
-		border-bottom-right-radius: var(--border-radius);
-	}
 </style>
diff --git a/packages/form-input/src/lib/components/input-group.svelte b/packages/form-input/src/lib/components/input-group.svelte
@@ -1,16 +1,15 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { getRandomString } from '$lib/utils/random.js';
 	import { setContext } from 'svelte';
 
-	setContext('input-group');
+	setContext('input-group', {});
 
 	const id: string = getRandomString(21);
 	let { note, status, ...props } = $props();
 </script>
 
 <div class="input-group" class:has-note={note}>
-	<div class="inputs">
+	<div class="inputs {status}">
 		<slot {id}></slot>
 	</div>
 	{#if note}<small>{note}</small>{/if}

diff --git a/packages/form-input/src/lib/components/input.css b/packages/form-input/src/lib/components/input.css
@@ -0,0 +1,29 @@
+.group-element {
+	border: 1px solid var(--input-border-color);
+	border-left: none;
+}
+
+:global(.input-group .inputs):focus-within .group-element {
+	border-color: var(--input-border-color-focus, var(--primary-color));
+}
+
+:global(.input-group .inputs.invalid) .group-element {
+	border-color: var(--danger-color);
+}
+
+:global(.input-group):focus-within label {
+	background-color: var(--input-border-color-focus, var(--primary-color));
+	border-color: var(--input-border-color-focus, var(--primary-color));
+	color: var(--input-label-text-color-focus);
+}
+
+.group-element:first-child {
+	border-top-left-radius: var(--border-radius);
+	border-bottom-left-radius: var(--border-radius);
+	border-left: 1px solid var(--input-border-color);
+}
+
+.group-element:last-child {
+	border-top-right-radius: var(--border-radius);
+	border-bottom-right-radius: var(--border-radius);
+}
diff --git a/packages/form-input/src/lib/components/input.svelte b/packages/form-input/src/lib/components/input.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import ErrorIcon from '$lib/icons/error-warning-fill.svg?raw';
 	import CheckIcon from '$lib/icons/check-line.svg?raw';
+	import { getContext } from 'svelte';
 
 	type InputProps = {
 		status?: 'invalid' | 'valid';
@@ -18,24 +19,20 @@
 </script>
 
 {#if status == null}
-<input class="input-element" {...props} />
+<input class="group-element" {...props} />
 {:else}
-<div class="input-element {status}">
+<div class="group-element {status}">
 	<input {...props} />
 	{@html getIcon()}
 </div>
 {/if}
 
 <style>
+	@import './input.css';
 	div {
 		position: relative;
 	}
 
-
-	:global(.input-group):focus-within .input-element {
-		border-color: var(--input-border-color-focus, var(--primary-color));
-	}
-
 	div > :global(svg) {
 		position: absolute;
 		top: 0;
@@ -52,27 +49,13 @@
 		color: var(--success-color);
 	}
 
-	.input-element {
+	.group-element {
 		position: relative;
-
-		border: 1px solid var(--input-border-color);
-		border-left: none;
 		background: var(--content-background-color);
 	}
 
 	input {
 		all: unset;
 		padding: var(--input-spacing-x) var(--input-spacing-y);
 	}
-
-	.input-element:first-child {
-		border-top-left-radius: var(--border-radius);
-		border-bottom-left-radius: var(--border-radius);
-		border-left: 1px solid var(--input-border-color);
-	}
-
-	.input-element:last-child {
-		border-top-right-radius: var(--border-radius);
-		border-bottom-right-radius: var(--border-radius);
-	}
 </style>
diff --git a/packages/form-input/src/lib/components/label.svelte b/packages/form-input/src/lib/components/label.svelte
@@ -6,9 +6,10 @@
 	let { for: id }: LabelProps = $props();
 </script>
 
-<label for={id}><slot></slot></label>
+<label class="group-element" for={id}><slot></slot></label>
 
 <style>
+	@import './input.css';
 	label {
 		all: unset;
 		padding: var(--input-spacing-x) var(--input-spacing-y);
@@ -17,20 +18,6 @@
 		background-color: var(--input-label-background-color);
 	}
 
-	:global(.input-group):focus-within label {
-		background-color: var(--input-border-color-focus, var(--primary-color));
-		border-color: var(--input-border-color-focus, var(--primary-color));
-		color: var(--input-label-text-color-focus);
-	}
 
-	label:first-child {
-		border-top-left-radius: var(--border-radius);
-		border-bottom-left-radius: var(--border-radius);
-		border-left: 1px solid var(--input-border-color);
-	}
 
-	label:last-child {
-		border-top-right-radius: var(--border-radius);
-		border-bottom-right-radius: var(--border-radius);
-	}
 </style>
diff --git a/packages/form-input/src/lib/components/select.svelte b/packages/form-input/src/lib/components/select.svelte
@@ -9,40 +9,26 @@
 
 </script>
 
-<select {id}>
+<select {id} class="group-element">
 	{#each options as option}
 		<option value={option}>{option}</option>
 	{/each}
 </select>
 
 <style>
 
-
+	@import './input.css';
 	select {
 		all: unset;
 		padding: var(--input-spacing-x) var(--input-spacing-y);
 		border: 1px solid var(--input-border-color);
-		border-right: none;
+		border-left: none;
 		background-color: var(--input-label-background-color);
 		background-image: url("../icons/arrow-down-s-line.svg");
 		background-position: right var(--input-spacing-y) center;
 		background-repeat: no-repeat;
   	background-size: 1rem;
 		padding-right: calc(var(--input-spacing-y) + 1.25rem);
-	}
-
-	:global(.input-group):focus-within select {
-		border-color: var(--input-border-color-focus, var(--primary-color));
-	}
-
-	select:first-child {
-		border-top-left-radius: var(--border-radius);
-		border-bottom-left-radius: var(--border-radius);
-		border-left: 1px solid var(--input-border-color);
-	}
-
-	select:last-child {
-		border-top-right-radius: var(--border-radius);
-		border-bottom-right-radius: var(--border-radius);
+		overflow: hidden;
 	}
 </style>
diff --git a/packages/form-input/src/routes/+page.svelte b/packages/form-input/src/routes/+page.svelte
@@ -19,7 +19,13 @@
 	<Info>mt</Info>
 </InputGroup>
 
-<InputGroup let:id note="Status is error" status="error">
+<InputGroup let:id note="Status is error" status="invalid">
+	<Input {id} value="John Doe" name="name" type="text" status="invalid" />
+	<Select id="dropdown" label="Dropdown" options={['Option 1', 'Option 2', 'Option 3']} />
+</InputGroup>
+
+<InputGroup let:id note="Status is error" status="invalid">
+	<Label for={id} >Invalid status</Label>
 	<Input {id} value="John Doe" name="name" type="text" status="invalid" />
 	<Select id="dropdown" label="Dropdown" options={['Option 1', 'Option 2', 'Option 3']} />
 </InputGroup>