ionic-team / ionic-team/ionic-framework

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

Ouverte
#18,514 2 commentaires 5 réactions 0 personnes assignées Voir sur GitHub
package: core type: feature request
Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
1 j 15 h
PR mergées (30 j)
51

Description

# 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

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.