ionic-team / ionic-team/ionic-framework

bug: ActionSheet CSS custom properties are applied to 'selected' role button since 8.7.12

Đang mở
#30,921 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: core type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 14 giờ
Pull request đã merge (30 ngày)
50

Mô tả

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

When we set the `role: 'selected'` property on an ActionSheetButton the rendered html button is missing class `action-sheet-selected`. This results in missing applied css styles applied, e.g. if we set `--button-color-selected` on for the action sheet's custom css class, that style is not shown.

Example ActionSheetButton

```
{
text: 'Share',
role: 'selected',
data: {
action: 'share',
},
},
```

Other `action-sheet-ROLE` classes (e.g. `destructive` are still applied to the button.

### Expected Behavior

The css class `action-sheet-selected` is applied if a button's role is set to `selected` and therefore the custom css properties are taking action.

For instance if I set ` --button-color-selected: purple;` (with a proper css class attached to my action sheet) I expect that the button with role `selected` is showing a purple text color.

### Steps to Reproduce

1. go to https://github.com/pjaecks-carecompass/ionic-action-sheet-bug
2. clone repository
3. `npm ci` - this will install `@ionic/angular@8.7.12`
4. `npm start`, open `http://localhost:4200`
5. tap the "Open" button to show the `ActionSheet`
6. check for the text color of the "Share" button - it is the default text color
7. now install previous ionic angular version with `npm install --save --save-exact @ionic/angular@8.7.11`
8. repeat step 4 and 5
9. check the text color of the "Share" button - this is now purple because the styling defined in `app.component.scss` is applied

### Code Reproduction URL

https://github.com/pjaecks-carecompass/ionic-action-sheet-bug

### Ionic Info

```
Ionic:

Ionic CLI : 5.4.16 (/home/USER/.npm/_npx/864a9e3c2cd0cf50/node_modules/ionic)
Ionic Framework : not installed
@angular-devkit/build-angular : 20.3.14
@angular-devkit/schematics : 20.3.14
@angular/cli : 20.3.14
@ionic/angular-toolkit : 12.3.0

Utility:

cordova-res : not installed
native-run (update available: 2.0.3) : 2.0.1

System:

NodeJS : v22.21.0 (/home/USER/.nvm/versions/node/v22.21.0/bin/node)
npm : 10.9.4
OS : Linux 6.6
```

### Additional Information

I suspect https://github.com/ionic-team/ionic-framework/pull/30769 to introduce this.

This change (bug?) was introduced in `8.7.12`.

With `8.7.11` it is still working fine.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Tái hiện sự cố với repository ionic-action-sheet-bug được liên kết, so sánh @ionic/angular 8.7.12 với 8.7.11. Sau đó, kiểm tra thay đổi được tham chiếu trong pull request #30769 và xác minh rằng nút ActionSheet được chọn nhận action-sheet-selected và áp dụng style tùy chỉnh --button-color-selected.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, css, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
48/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.