jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve disabled state for select and number button control (#17773)

Browse Source
This commit is contained in:
Paul Bottein 2023-09-01 15:19:28 +02:00 committed by GitHub
parent 6d63028406
commit c291af5d97
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ha-control-number-buttons.ts
View File

@ -81,6 +81,7 @@ export class HaControlNumberButton extends LitElement {
}
_handleKeyDown(e: KeyboardEvent) {
if (this.disabled) return;
if (!A11Y_KEY_CODES.has(e.code)) return;
e.preventDefault();
switch (e.code) {
@ -116,7 +117,7 @@ export class HaControlNumberButton extends LitElement {
const displayedValue =
this.value != null
? formatNumber(this.value, this.locale, this.formatOptions)
: "-";
: "";
return html`
<div class="container">
@ -124,12 +125,12 @@ export class HaControlNumberButton extends LitElement {
id="input"
class="value"
role="number-button"
tabindex="0"
.tabIndex=${this.disabled ? "-1" : "0"}
aria-valuenow=${this.value}
aria-valuemin=${this.min}
aria-valuemax=${this.max}
aria-label=${ifDefined(this.label)}
.disabled=${this.disabled}
?disabled=${this.disabled}
@keydown=${this._handleKeyDown}
>
${displayedValue}
@ -240,6 +241,7 @@ export class HaControlNumberButton extends LitElement {
.button[disabled] {
opacity: 0.4;
pointer-events: none;
cursor: not-allowed;
}
.button.minus {
left: 0;

3
src/components/ha-control-select.ts
View File

@ -217,6 +217,7 @@ export class HaControlSelect extends LitElement {
transition: box-shadow 180ms ease-in-out;
font-style: normal;
font-weight: 500;
color: var(--primary-text-color);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
@ -267,7 +268,6 @@ export class HaControlSelect extends LitElement {
justify-content: center;
border-radius: var(--control-select-button-border-radius);
overflow: hidden;
color: var(--primary-text-color);
/* For safari border-radius overflow */
z-index: 0;
}
@ -331,6 +331,7 @@ export class HaControlSelect extends LitElement {
:host([disabled]) {
--control-select-color: var(--disabled-color);
--control-select-focused-opacity: 0;
color: var(--disabled-color);
}
:host([disabled]) .option {
cursor: not-allowed;