WorkRoot/WRNexusJS
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): avoid icon spacing for plain inputs

Browse Source
This commit is contained in:
Clintchiz committed 2026-08-27 22:53:14 +05:30
1 parent 6dea64b84c
commit b1064d442a
4 files changed
+75 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/ui/components/input.wrn
+36 -4
View File
@@ -78,6 +78,7 @@ component Input {
data-inline="{inline}"
data-floating="{variant === 'floating'}"
data-invalid="{error || validationError ? 'true' : 'false'}"
data-input-type="{type}"
>
<div
class="wrn-next__field-heading"
@@ -99,10 +100,11 @@ component Input {
<div
class="wrn-next__field-control"
data-icon-position="{iconPosition}"
data-has-icon="{icon || type === 'date' || type === 'datetime-local' || type === 'time' || type === 'month' || type === 'week' ? 'true' : 'false'}"
>
{#if icon}
{#if icon || type === "date" || type === "datetime-local" || type === "time" || type === "month" || type === "week"}
<span
class="{icon} wrn-next__field-icon"
class="{icon || (type === 'time' ? 'icon-[lucide--clock-3]' : type === 'datetime-local' ? 'icon-[lucide--calendar-clock]' : 'icon-[lucide--calendar-days]')} wrn-next__field-icon"
aria-hidden="true"
>
</span>
@@ -154,6 +156,7 @@ component Input {
id="{(id || name) + '-error'}"
class="wrn-next__field-error"
data-error="{name}"
data-empty="{error || validationError ? 'false' : 'true'}"
aria-live="polite"
>
{error || validationError}
@@ -308,6 +311,12 @@ component Input {
font-size: 0.8125rem;
font-weight: 500;
}
/* Input is a block-level control. Shared field sizing must not cap it when
it participates in a grid or flex layout owned by the consumer. */
.wrn-next--field.wrn-next--input {
width: 100%;
max-width: none;
}
.wrn-next--field.wrn-next--size-sm,
.wrn-next--choice-field.wrn-next--size-sm {
font-size: 0.8125rem;
@@ -346,10 +355,29 @@ component Input {
background: var(--wrn-color-surface);
font-size: 0.8125rem;
}
.wrn-next__field-control[data-icon-position="start"] > :is(input, textarea, select) {
.wrn-next__field-control[data-has-icon="true"][data-icon-position="start"] > :is(input, textarea, select) {
padding-inline-start: 2.5rem;
}
.wrn-next__field-control[data-icon-position="end"] > :is(input, textarea, select) {
.wrn-next--input[data-input-type="date"] .wrn-next__field-control,
.wrn-next--input[data-input-type="datetime-local"] .wrn-next__field-control,
.wrn-next--input[data-input-type="time"] .wrn-next__field-control,
.wrn-next--input[data-input-type="month"] .wrn-next__field-control,
.wrn-next--input[data-input-type="week"] .wrn-next__field-control {
color-scheme: light dark;
}
.wrn-next--input :is(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"]) {
min-width: 0;
font-variant-numeric: tabular-nums;
}
.wrn-next--input :is(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator {
width: 1.1rem;
height: 1.1rem;
margin: 0;
padding: 0;
cursor: pointer;
opacity: 0.72;
}
.wrn-next__field-control[data-has-icon="true"][data-icon-position="end"] > :is(input, textarea, select) {
padding-inline-end: 2.5rem;
}
.wrn-next__field-icon {
@@ -433,6 +461,10 @@ component Input {
.wrn-next__field-error:empty {
display: none;
}
.wrn-next__field-error[data-empty="true"] {
display: none;
min-height: 0;
}
.wrn-next--field[data-invalid="true"] :is(input, textarea, select),
.wrn-next--choice-field[data-invalid="true"] input {
border-color: var(--wrn-color-danger);