ionic-team / ionic-team/ionic-framework

feat: Set custom --opacity for disabled labels/inputs/select

Offen
#18,514 2 Kommentare 5 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
package: core type: feature request
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

# Feature Request

**Ionic version:**
- [x] **4.x**

**Describe the Feature Request**

Availability to overwrite the default opacity of disabled form elements in the following scenarios:
1. When an `ion-input` or `ion-select` is disabled
1. When an `ion-label` is inside an `ion-item` with the class `item-interactive-disabled` (allow to overwrite label's opacity from parent)

Leave a comment if there might be any other scenario I missed.

**Describe Preferred Solution**

- Setting the value of the variable `--opacity` in the disabled `ion-item`, `ion-input` or `ion-select` (or another parent, e.g. `ion-list`) overwrites its default opacity

**Related Code**

`input.scss`:
```scss
// Change
.native-input[disabled] {
opacity: .4;
}

// To
.native-input[disabled] {
opacity: var(--opacity, .4);
}
```

`select.scss`:
```scss
// Change
:host(.select-disabled) {
opacity: .4;
pointer-events: none;
}

// To
:host(.select-disabled) {
opacity: var(--opacity, .4);
pointer-events: none;
}
```

`label.scss`:
```scss
// Change
:host-context(.item-interactive-disabled) {
cursor: default;
opacity: .3;
pointer-events: none;
}

// To
:host-context(.item-interactive-disabled) {
cursor: default;
opacity: var(--opacity, .3);
pointer-events: none;
}
```

**Additional Context**

I will submit the PR myself, if that's OK.

Related Issues: #17166, https://github.com/ionic-team/ionic/issues/16965#issuecomment-456422796

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.