js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

update var names and use stylesheet; #1496

Browse Source
This commit is contained in:
Cory LaViska
2023-08-09 15:38:24 -04:00
parent bf15f2fb8a
commit 5b6c1632bd
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/input/input.component.ts
View File

@@ -406,10 +406,8 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
const hasHelpTextSlot = this.hasSlotController.test('help-text');
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;
const hasClearIcon =
this.clearable && !this.disabled && !this.readonly;
const hasClearIconVisible =
hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);
const hasClearIcon = this.clearable && !this.disabled && !this.readonly;
const isClearIconVisible = hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);
return html`
<div
@@ -495,11 +493,13 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
? html`
<button
part="clear-button"
class="input__clear"
class=${classMap({
input__clear: true,
'input__clear--visible': isClearIconVisible
})}
type="button"
aria-label=${this.localize.term('clearEntry')}
@click=${this.handleClearClick}
style="visibility: ${hasClearIconVisible?'visible':'hidden'}"
tabindex="-1"
>
<slot name="clear-icon">

4
src/components/input/input.styles.ts
View File

@@ -248,6 +248,10 @@ export default css`
* Clearable + Password Toggle
*/
.input__clear:not(.input__clear--visible) {
visibility: hidden;
}
.input__clear,
.input__password-toggle {
display: inline-flex;