rename input-text class to input

perfect-things · Jul 13, 2023 · 9f003d4 · 9f003d4
1 parent 96e76d9
commit 9f003d4
Show file tree

Hide file tree

Showing 21 changed files with 249 additions and 261 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,11 +8,11 @@ Changelog
 ### Breaking changes
 
 #### Autocomplete
-- HTML structure changed `.autocomplete input` --> `.autocomplete .input-text-inner .input-text-row input`
+- HTML structure changed `.autocomplete input` --> `.autocomplete .input-inner .input-row input`
 
 
 #### Select
-- HTML structure changed `.select-wrap select` --> `.select .input-text-inner .input-text-row select`
+- HTML structure changed `.select-wrap select` --> `.select .input-inner .input-row select`
 
 
 #### Toggle
@@ -57,13 +57,13 @@ Changelog
 - `on:change` is called with a svelte event instead of the native one, so: `e.target.checked` is now `e.detail.checked`
 
 #### InputMath
-- HTML structure changed `.input-math-wrapper input` --> `.input-math .input-text-inner .input-math-row input`
+- HTML structure changed `.input-math-wrapper input` --> `.input-math .input-inner .input-math-row input`
 
 #### InputNumber:
-- HTML structure changed: `input` --> `.input-number .input-text-inner input`
+- HTML structure changed: `input` --> `.input-number .input-inner input`
 
 #### InputPassword
-- HTML structure changed: `.input-password-wrapper .input-password-row input` --> `.input-password .input-text-inner .input-password-row input`
+- HTML structure changed: `.input-password-wrapper .input-password-row input` --> `.input-password .input-inner .input-password-row input`
 
 #### CSS variables changed:
 - `--ui-shadow-invalid` --> `--ui-shadow-danger`

diff --git a/docs-src/components/button-toggle/ButtonToggle.svelte b/docs-src/components/button-toggle/ButtonToggle.svelte
@@ -10,10 +10,6 @@
 	<ButtonToggle items="{buttons}" value="1" />
 </div>
 
-<h3>With label</h3>
-<label class="label" for="bt1">Label for the button toggle</label>
-<ButtonToggle id="bt1" items="{buttons}" value="1" />
-
 <br><br>
 
 <h4>Disabled</h4>

diff --git a/docs-src/pages/changelog.svelte b/docs-src/pages/changelog.svelte
@@ -6,11 +6,11 @@
 <h3>Breaking changes</h3>
 <h4>Autocomplete</h4>
 <ul>
-<li>HTML structure changed <code>.autocomplete input</code> --&gt; <code>.autocomplete .input-text-inner .input-text-row input</code></li>
+<li>HTML structure changed <code>.autocomplete input</code> --&gt; <code>.autocomplete .input-inner .input-row input</code></li>
 </ul>
 <h4>Select</h4>
 <ul>
-<li>HTML structure changed <code>.select-wrap select</code> --&gt; <code>.select .input-text-inner .input-text-row select</code></li>
+<li>HTML structure changed <code>.select-wrap select</code> --&gt; <code>.select .input-inner .input-row select</code></li>
 </ul>
 <h4>Toggle</h4>
 <ul>
@@ -54,15 +54,15 @@
 </ul>
 <h4>InputMath</h4>
 <ul>
-<li>HTML structure changed <code>.input-math-wrapper input</code> --&gt; <code>.input-math .input-text-inner .input-math-row input</code></li>
+<li>HTML structure changed <code>.input-math-wrapper input</code> --&gt; <code>.input-math .input-inner .input-math-row input</code></li>
 </ul>
 <h4>InputNumber:</h4>
 <ul>
-<li>HTML structure changed: <code>input</code> --&gt; <code>.input-number .input-text-inner input</code></li>
+<li>HTML structure changed: <code>input</code> --&gt; <code>.input-number .input-inner input</code></li>
 </ul>
 <h4>InputPassword</h4>
 <ul>
-<li>HTML structure changed: <code>.input-password-wrapper .input-password-row input</code> --&gt; <code>.input-password .input-text-inner .input-password-row input</code></li>
+<li>HTML structure changed: <code>.input-password-wrapper .input-password-row input</code> --&gt; <code>.input-password .input-inner .input-password-row input</code></li>
 </ul>
 <h4>CSS variables changed:</h4>
 <ul>

diff --git a/docs/docs.js b/docs/docs.js
diff --git a/docs/ui.css b/docs/ui.css
diff --git a/src/autocomplete/Autocomplete.css b/src/autocomplete/Autocomplete.css
@@ -1,6 +1,6 @@
-.autocomplete .input-text-inner { position: relative; overflow: unset; }
+.autocomplete .input-inner { position: relative; }
 
-.autocomplete input { width: 100%; padding-right: 36px; }
+.autocomplete input { padding-right: 36px; }
 
 .autocomplete-list {
 	position: absolute;

diff --git a/src/autocomplete/Autocomplete.svelte b/src/autocomplete/Autocomplete.svelte
@@ -1,6 +1,6 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-	class="input-text autocomplete {className}"
+	class="input autocomplete {className}"
 	class:open="{opened}"
 	class:has-error="{error}"
 	bind:this="{el}">
@@ -11,10 +11,10 @@
 
 	<Info msg="{info}" />
 
-	<div class="input-text-inner" class:disabled>
+	<div class="input-inner" class:disabled>
 		<InputError id="{errorMessageId}" msg="{error}" />
 
-		<div class="input-text-row">
+		<div class="input-row">
 			<Button link icon="dots" class="autocomplete-button" on:click="{onIconClick}"/>
 			<input
 				type="text"
@@ -41,7 +41,7 @@
 				on:keypress="{onkeypress}">
 		</div>
 		<!-- svelte-ignore a11y-interactive-supports-focus -->
-		<div class="input-text-row">
+		<div class="input-row">
 			<div
 				id="autocomplete-list-{gui}"
 				class="autocomplete-list {opened ? '' : 'hidden'}"

diff --git a/src/button-toggle/ButtonToggle.css b/src/button-toggle/ButtonToggle.css
@@ -1,4 +1,4 @@
-.button-toggle.input-text {
+.button-toggle.input {
 	width: min-content;
 	min-width: 25ch;
 	padding: 0;
@@ -7,16 +7,11 @@
 	justify-content: flex-start;
 }
 
-.button-toggle .input-text-inner {
-	width: 100%;
-	background-color: var(--ui-color-background-dark-2);
-}
+.button-toggle .input-inner { width: 100%; background-color: var(--ui-color-background-dark-2); }
 
-.button-toggle .input-text-row {
-	gap: 1px;
-}
+.button-toggle .input-row { gap: 1px; }
 
-.button-toggle .input-text-row .button {
+.button-toggle .input-row .button {
 	position: static;
 	color: var(--ui-color-text);
 	box-shadow: none;
@@ -27,12 +22,11 @@
 
 .button-toggle .button input {
 	position: absolute;
-	top: -100%;
+	top: -100px;
 	opacity: 0;
+	pointer-events: none;
 }
 
-.button-toggle .button:has(:checked) {
-	background-color: var(--ui-color-highlight);
-}
+.button-toggle .button:has(:checked) { background-color: var(--ui-color-highlight); }
 
-.button-toggle.round:not(.has-error) .input-text-inner { border-radius: var(--ui-border-radius-xl); }
+.button-toggle.round:not(.has-error) .input-inner { border-radius: var(--ui-border-radius-xl); }
diff --git a/src/button-toggle/ButtonToggle.svelte b/src/button-toggle/ButtonToggle.svelte
@@ -1,5 +1,5 @@
-<div {disabled}
-	class="input-text button-group button-toggle {className}"
+<div
+	class="input button-group button-toggle {className}"
 	class:round
 	class:has-error="{error}"
 	role="radiogroup"
@@ -8,16 +8,16 @@
 	bind:this="{el}">
 
 	{#if label}
-		<label class="label" for="{_id}">{label}</label>
+		<label {disabled} class="label" for="{_id}">{label}</label>
 	{/if}
 
 	<Info msg="{info}" />
 
-	<div class="input-text-inner" class:disabled>
+	<div class="input-inner">
 		<InputError id="{errorMessageId}" msg="{error}" />
 
-		<div class="input-text-row">
-			{#each _items as item, idx}
+		<div class="input-row" id="{_id}">
+			{#each _items as item}
 				<label
 					{disabled}
 					class="button button-normal"
@@ -30,7 +30,6 @@
 						{item.name || ''}
 						<input
 							{disabled}
-							id="{idx === 0 && id ? id : undefined}"
 							type="radio"
 							name="{name}"
 							checked="{item.value === value}"

diff --git a/src/datepicker/Datepicker.svelte b/src/datepicker/Datepicker.svelte
@@ -1,5 +1,5 @@
 <div
-	class="input-text input-date {className}"
+	class="input input-date {className}"
 	class:open
 	aria-expanded="{open}"
 	class:has-error="{error}">
@@ -10,10 +10,10 @@
 
 	<Info msg="{info}" />
 
-	<div class="input-text-inner" class:disabled>
+	<div class="input-inner" class:disabled>
 		<InputError id="{errorMessageId}" msg="{error}" />
 
-		<div class="input-text-row">
+		<div class="input-row">
 			<Button link icon="calendar" class="input-date-button" on:click="{onIconClick}"/>
 			<input
 				type="text"
@@ -23,8 +23,9 @@
 				aria-errormessage="{error ? errorMessageId : undefined}"
 				aria-required="{required}"
 
-				{...props}
 				{placeholder}
+				{title}
+				{name}
 				{disabled}
 				id="{_id}"
 
@@ -44,7 +45,7 @@ import { onMount, createEventDispatcher } from 'svelte';
 import { Datepicker } from 'vanillajs-datepicker';
 import { icons } from '../icon';
 import { Button } from '../button';
-import { pluck, guid } from '../utils';
+import { guid } from '../utils';
 import { Info, InputError } from '../info-bar';
 
 
@@ -60,13 +61,14 @@ export let disabled = false;
 export let required = undefined;
 export let id = '';
 export let label = '';
+export let title = undefined;
+export let name = undefined;
 export let error = undefined;
 export let info = undefined;
 
 
 $:_id = id || name || guid();
 $:elevated = elevate === true || elevate === 'true';
-$:props = pluck($$props, ['id', 'title', 'name', 'disabled', 'required']);
 
 const errorMessageId = guid();
 const dispatch = createEventDispatcher();

diff --git a/src/input/input-error.css b/src/input/input-error.css
@@ -1,4 +1,4 @@
-.input-text .error-wrap,
+.input .error-wrap,
 .input-radio .error-wrap,
 .checkbox .error-wrap {
 	display: flex;
@@ -11,7 +11,7 @@
 .input-radio .error-wrap { overflow: hidden; }
 
 
-.input-text .info-bar-error,
+.input .info-bar-error,
 .input-radio .info-bar-error,
 .textarea .info-bar-error {
 	padding-bottom: calc(0.4rem + 10px);
@@ -28,8 +28,11 @@
 
 
 /* Highlight whole inner div in red, to avoid rendering leaks in corners (safari) */
-.has-error.input-text .input-text-inner,
+.has-error.input .input-inner,
 .has-error.textarea .textarea-inner { background-color: var(--ui-color-danger-semi); }
 
-.has-error.input-text .info-bar-error,
+.has-error.input .input-inner  { border-color: var(--ui-color-danger); }
+.has-error.input .input-inner:focus-within { box-shadow: var(--ui-shadow-danger); }
+
+.has-error.input .info-bar-error,
 .has-error.textarea .info-bar-error { background-color: transparent; }
diff --git a/src/input/input-math/InputMath.svelte b/src/input/input-math/InputMath.svelte
@@ -1,5 +1,5 @@
 <div
-	class="input-text input-math {className}"
+	class="input input-math {className}"
 	class:has-error="{error}">
 
 	{#if label}
@@ -9,10 +9,10 @@
 	<Info msg="{info}" />
 
 
-	<div class="input-text-inner" class:disabled>
+	<div class="input-inner" class:disabled>
 		<InputError id="{errorMessageId}" msg="{error}" />
 
-		<div class="input-text-row">
+		<div class="input-row">
 			<Icon name="calculator"/>
 			<input
 				type="text"

diff --git a/src/input/input-number/InputNumber.svelte b/src/input/input-number/InputNumber.svelte
@@ -1,11 +1,11 @@
-<div class="input-text input-number {className}" class:has-error="{error}">
+<div class="input input-number {className}" class:has-error="{error}">
 	{#if label}
 		<label class="label" for="{_id}">{label}</label>
 	{/if}
 
 	<Info msg="{info}" />
 
-	<div class="input-text-inner">
+	<div class="input-inner">
 		<InputError id="{errorMessageId}" msg="{error}" />
 
 		<input

diff --git a/src/input/input-password/InputPassword.svelte b/src/input/input-password/InputPassword.svelte
@@ -1,5 +1,5 @@
 <div
-	class="input-text input-password {className}"
+	class="input input-password {className}"
 	class:has-error="{error}"
 	class:visible
 	bind:this="{el}">
@@ -10,10 +10,10 @@
 
 	<Info msg="{info}" />
 
-	<div class="input-text-inner">
+	<div class="input-inner">
 		<InputError id="{errorMessageId}" msg="{error}" />
 
-		<div class="input-text-row" class:visible>
+		<div class="input-row" class:visible>
 			<input
 				autocomplete="off"
 				{...props}
@@ -32,12 +32,12 @@
 		</div>
 	</div>
 	{#if strength && lib && value}
-		<div class="input-text-row">
+		<div class="input-row">
 			<div class="password-strength" title="{quality}">
 				<div class="password-strength-progress {colorClass}" style="width: {percent}%"></div>
 			</div>
 		</div>
-		<div class="input-text-row">
+		<div class="input-row">
 			<div class="password-strength-info {colorClass}">
 				<h2>{quality}</h2>
 				<small>{@html strengthInfoText}</small>

diff --git a/src/input/input-text/InputText.css b/src/input/input-text/InputText.css
@@ -1,26 +1,3 @@
-.input-text { width: 25ch; vertical-align: middle; }
-
-.input-text input:not([type=radio]) { width: 100%; border: none; }
-.input-text input:not([type=radio]):focus { box-shadow: none; border: none; }
-.input-text input:not([type=radio]):invalid { border: none; box-shadow: none; }
-
-.input-text-inner {
-	display: flex;
-	flex-flow: column;
-	align-items: stretch;
-	justify-content: stretch;
-	border-radius: var(--ui-border-radius);
-	background: var(--ui-color-background-input);
-	border: 1px solid  var(--ui-color-background-dark-2);
+.input-text .input-inner {
 	overflow: hidden;
 }
-
-.input-text-inner:focus-within {
-	border-color: var(--ui-color-accent);
-	box-shadow: var(--ui-shadow-focus);
-}
-
-
-.has-error .input-text-inner  { border-color: var(--ui-color-danger); }
-
-.has-error .input-text-inner:focus-within { box-shadow: var(--ui-shadow-danger); }
diff --git a/src/input/input-text/InputText.svelte b/src/input/input-text/InputText.svelte
@@ -1,5 +1,5 @@
 <div
-	class="input-text {className}"
+	class="input input-text {className}"
 	class:has-error="{error}">
 
 	{#if label}
@@ -8,7 +8,7 @@
 
 	<Info msg="{info}" />
 
-	<div class="input-text-inner" class:disabled>
+	<div class="input-inner" class:disabled>
 		<InputError id="{errorMessageId}" msg="{error}" />
 
 		<input