Skip to content

Commit c69d7f4

Browse files
pheekuspheekus
committed
fix: preserve input space when helper text is present
1 parent 0e77ed6 commit c69d7f4

File tree

6 files changed

+116
-111
lines changed

6 files changed

+116
-111
lines changed

‎src/elements/internal/InternalFrequencyControl/InternalFrequencyControl.ts

+10-9
Original file line numberDiff line numberDiff line change
@@ -164,16 +164,10 @@ export class InternalFrequencyControl extends InternalEditableControl {
164164
: this.options.find(v => v.value === units);
165165

166166
return html`
167-
<div class="flex items-start gap-m leading-xs">
168-
<div>
169-
<label class="text-m text-body" for="input">${this.label}</label>
170-
<p class="text-xs text-secondary">${this.helperText}</p>
171-
<p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
172-
${this._errorMessage}
173-
</p>
174-
</div>
167+
<div class="leading-xs">
168+
<div class="flex items-center gap-xs">
169+
<label class="text-m text-body flex-1 whitespace-nowrap" for="input">${this.label}</label>
175170
176-
<div class="flex-1 flex items-center gap-xs">
177171
<input
178172
placeholder=${this.placeholder}
179173
inputmode="numeric"
@@ -264,6 +258,13 @@ export class InternalFrequencyControl extends InternalEditableControl {
264258
</select>
265259
</div>
266260
</div>
261+
262+
<div style="max-width: 32rem">
263+
<p class="text-xs text-secondary">${this.helperText}</p>
264+
<p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
265+
${this._errorMessage}
266+
</p>
267+
</div>
267268
</div>
268269
`;
269270
}

‎src/elements/internal/InternalNumberControl/InternalNumberControl.ts

+15-23
Original file line numberDiff line numberDiff line change
@@ -101,28 +101,12 @@ export class InternalNumberControl extends InternalEditableControl {
101101
}
102102

103103
private __renderSummaryItemLayout() {
104-
const sharedTextStyles = {
105-
'text-disabled': this.disabled,
106-
'text-tertiary': !this.readonly && !this.disabled,
107-
'font-medium': !this.readonly,
108-
};
109104
return html`
110-
<div class="flex items-start gap-m leading-xs">
111-
<div>
112-
<label class="text-m text-body" for="input">${this.label}</label>
113-
<p class="text-xs text-secondary">${this.helperText}</p>
114-
<p
115-
class="text-xs text-error"
116-
?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
117-
>
118-
${this._errorMessage}
119-
</p>
120-
</div>
105+
<div class="leading-xs">
106+
<div class="flex items-center gap-xs">
107+
<label class="text-m text-body flex-1 whitespace-nowrap" for="input">${this.label}</label>
121108
122-
<div class="flex-1 flex items-center gap-xs">
123-
<span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
124-
${this.prefix}
125-
</span>
109+
${this.prefix ? html`<div>${this.prefix}</div>` : ''}
126110
127111
<input
128112
placeholder=${this.placeholder}
@@ -151,9 +135,7 @@ export class InternalNumberControl extends InternalEditableControl {
151135
}}
152136
/>
153137
154-
<span class=${classMap({ 'text-secondary': this.readonly, ...sharedTextStyles })}>
155-
${this.suffix}
156-
</span>
138+
${this.suffix ? html`<div class="font-medium text-secondary">${this.suffix}</div>` : ''}
157139
158140
<button
159141
aria-label=${this.t('clear')}
@@ -174,6 +156,16 @@ export class InternalNumberControl extends InternalEditableControl {
174156
${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`}
175157
</button>
176158
</div>
159+
160+
<div style="max-width: 32rem">
161+
<p class="text-xs text-secondary">${this.helperText}</p>
162+
<p
163+
class="text-xs text-error"
164+
?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
165+
>
166+
${this._errorMessage}
167+
</p>
168+
</div>
177169
</div>
178170
`;
179171
}

‎src/elements/internal/InternalResourcePickerControl/InternalResourcePickerControl.ts

+10-9
Original file line numberDiff line numberDiff line change
@@ -117,16 +117,10 @@ export class InternalResourcePickerControl extends InternalEditableControl {
117117
};
118118

119119
return html`
120-
<div class="flex items-start leading-xs gap-m">
121-
<div class="flex-1">
122-
<div class="text-m text-body whitespace-nowrap">${this.label}</div>
123-
<div class="text-s text-secondary">${this.helperText}</div>
124-
<div class="text-s text-error" ?hidden=${this.disabled || this.readonly}>
125-
${this._errorMessage}
126-
</div>
127-
</div>
128-
120+
<div class="leading-xs">
129121
<div class="flex items-center gap-xs">
122+
<div class="text-m text-body whitespace-nowrap flex-1">${this.label}</div>
123+
130124
<button
131125
aria-label=${this.t('select')}
132126
class=${classMap({
@@ -172,6 +166,13 @@ export class InternalResourcePickerControl extends InternalEditableControl {
172166
${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`}
173167
</button>
174168
</div>
169+
170+
<div style="max-width: 32rem">
171+
<div class="text-xs text-secondary">${this.helperText}</div>
172+
<div class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
173+
${this._errorMessage}
174+
</div>
175+
</div>
175176
</div>
176177
177178
<foxy-nucleon

‎src/elements/internal/InternalSelectControl/InternalSelectControl.ts

+59-55
Original file line numberDiff line numberDiff line change
@@ -84,9 +84,65 @@ export class InternalSelectControl extends InternalEditableControl {
8484
const selection = this.options.find(v => v.value === this._value);
8585

8686
return html`
87-
<div class="flex items-start leading-xs">
88-
<div class="flex-1">
89-
<label class="text-m text-body" for="select">${this.label}</label>
87+
<div class="leading-xs">
88+
<div class="flex items-center gap-s">
89+
<label class="text-m text-body flex-1 whitespace-nowrap" for="select">
90+
${this.label}
91+
</label>
92+
<div
93+
class=${classMap({
94+
'relative rounded-s transition-colors transition-opacity min-w-0': true,
95+
'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,
96+
'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,
97+
'text-secondary': this.readonly,
98+
'text-disabled': this.disabled,
99+
'font-medium': !this.readonly,
100+
})}
101+
>
102+
<div class="flex items-center gap-xs min-w-0">
103+
<div class="truncate min-w-0">
104+
${selection
105+
? 'label' in selection
106+
? this.t(selection.label)
107+
: selection.rawLabel
108+
: this.placeholder}
109+
</div>
110+
${this.readonly
111+
? ''
112+
: svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="flex-shrink-0" style="width: 1em; height: 1em; transform: scale(1.25)"><path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>`}
113+
</div>
114+
115+
<select
116+
class=${classMap({
117+
'absolute inset-0 opacity-0': true,
118+
'cursor-pointer': !this.disabled && !this.readonly,
119+
})}
120+
id="select"
121+
?disabled=${this.disabled}
122+
?hidden=${this.readonly}
123+
@blur=${() => (this.__isErrorVisible = true)}
124+
@change=${(evt: Event) => {
125+
evt.stopPropagation();
126+
this._value = (evt.target as HTMLSelectElement).value;
127+
}}
128+
>
129+
<option value="" ?selected=${!selection} disabled hidden>${this.placeholder}</option>
130+
${this.options.map(
131+
option =>
132+
html`
133+
<option
134+
value=${option.value}
135+
?selected=${selection && option.value === this._value}
136+
>
137+
${'label' in option ? this.t(option.label) : option.rawLabel}
138+
</option>
139+
`
140+
)}
141+
</select>
142+
</div>
143+
</div>
144+
145+
<div style="max-width: 32rem">
90146
<p class="text-xs text-secondary">${this.helperText}</p>
91147
<p
92148
class="text-xs text-error"
@@ -95,58 +151,6 @@ export class InternalSelectControl extends InternalEditableControl {
95151
${this._errorMessage}
96152
</p>
97153
</div>
98-
99-
<div
100-
class=${classMap({
101-
'relative rounded-s transition-colors transition-opacity': true,
102-
'focus-within-ring-2 focus-within-ring-primary-50': !this.disabled && !this.readonly,
103-
'text-body hover-opacity-80 cursor-pointer': !this.disabled && !this.readonly,
104-
'text-secondary': this.readonly,
105-
'text-disabled': this.disabled,
106-
'font-medium': !this.readonly,
107-
})}
108-
>
109-
<div class="flex items-center gap-xs">
110-
<div>
111-
${selection
112-
? 'label' in selection
113-
? this.t(selection.label)
114-
: selection.rawLabel
115-
: this.placeholder}
116-
</div>
117-
${this.readonly
118-
? ''
119-
: svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25)"><path fill-rule="evenodd" d="M10.53 3.47a.75.75 0 0 0-1.06 0L6.22 6.72a.75.75 0 0 0 1.06 1.06L10 5.06l2.72 2.72a.75.75 0 1 0 1.06-1.06l-3.25-3.25Zm-4.31 9.81 3.25 3.25a.75.75 0 0 0 1.06 0l3.25-3.25a.75.75 0 1 0-1.06-1.06L10 14.94l-2.72-2.72a.75.75 0 0 0-1.06 1.06Z" clip-rule="evenodd" /></svg>`}
120-
</div>
121-
122-
<select
123-
class=${classMap({
124-
'absolute inset-0 opacity-0': true,
125-
'cursor-pointer': !this.disabled && !this.readonly,
126-
})}
127-
id="select"
128-
?disabled=${this.disabled}
129-
?hidden=${this.readonly}
130-
@blur=${() => (this.__isErrorVisible = true)}
131-
@change=${(evt: Event) => {
132-
evt.stopPropagation();
133-
this._value = (evt.target as HTMLSelectElement).value;
134-
}}
135-
>
136-
<option value="" ?selected=${!selection} disabled hidden>${this.placeholder}</option>
137-
${this.options.map(
138-
option =>
139-
html`
140-
<option
141-
value=${option.value}
142-
?selected=${selection && option.value === this._value}
143-
>
144-
${'label' in option ? this.t(option.label) : option.rawLabel}
145-
</option>
146-
`
147-
)}
148-
</select>
149-
</div>
150154
</div>
151155
`;
152156
}

‎src/elements/internal/InternalSwitchControl/InternalSwitchControl.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,14 @@ export class InternalSwitchControl extends InternalEditableControl {
2929
<label class="text-m text-body" for="input">${this.label}</label>
3030
${this.helperTextAsToolip
3131
? ''
32-
: html`<p class="text-xs text-secondary">${this.helperText}</p>`}
33-
<p class="text-xs text-error" ?hidden=${this.disabled || this.readonly}>
32+
: html`<p class="text-xs text-secondary" style="max-width: 32rem">
33+
${this.helperText}
34+
</p>`}
35+
<p
36+
class="text-xs text-error"
37+
style="max-width: 32rem"
38+
?hidden=${this.disabled || this.readonly}
39+
>
3440
${this._errorMessage}
3541
</p>
3642
</div>

‎src/elements/internal/InternalTextControl/InternalTextControl.ts

+14-13
Original file line numberDiff line numberDiff line change
@@ -89,19 +89,10 @@ export class InternalTextControl extends InternalEditableControl {
8989

9090
private __renderSummaryItemLayout() {
9191
return html`
92-
<div class="flex items-start gap-m leading-xs">
93-
<div>
94-
<label class="text-m text-body" for="input">${this.label}</label>
95-
<p class="text-xs text-secondary">${this.helperText}</p>
96-
<p
97-
class="text-xs text-error"
98-
?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
99-
>
100-
${this._errorMessage}
101-
</p>
102-
</div>
92+
<div class="leading-xs">
93+
<div class="flex items-center gap-xs">
94+
<label class="text-m text-body flex-1 whitespace-nowrap" for="input">${this.label}</label>
10395
104-
<div class="flex-1 flex items-center gap-xs" style="min-width: 30%">
10596
${this.prefix ? html`<div>${this.prefix}</div>` : ''}
10697
10798
<input
@@ -131,7 +122,7 @@ export class InternalTextControl extends InternalEditableControl {
131122
<button
132123
aria-label=${this.t('clear')}
133124
class=${classMap({
134-
'rounded-full transition-colors': true,
125+
'flex-shrink-0 rounded-full transition-colors': true,
135126
'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
136127
'cursor-pointer text-tertiary hover-text-body': !this.disabled,
137128
'cursor-default text-disabled': this.disabled,
@@ -147,6 +138,16 @@ export class InternalTextControl extends InternalEditableControl {
147138
${svg`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" style="width: 1em; height: 1em; transform: scale(1.25); margin-right: -0.16em"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>`}
148139
</button>
149140
</div>
141+
142+
<div style="max-width: 32rem">
143+
<p class="text-xs text-secondary">${this.helperText}</p>
144+
<p
145+
class="text-xs text-error"
146+
?hidden=${!this.__isErrorVisible || this.disabled || this.readonly}
147+
>
148+
${this._errorMessage}
149+
</p>
150+
</div>
150151
</div>
151152
`;
152153
}

0 commit comments

Comments
 (0)