javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(alert): apply styling to disabled items (#18545)

Browse Source 
* fix(datetime): ensure hasValue returns correct value

* fix(alert): apply styling to disabled items

* test(datetime): add tests for empty value datetime

* fix(): update getter for stencil update

* fix: change default opacity to disabled button opacity

* test(select): add tests to ion-select-option disabled items

* Revert "test(select): add tests to ion-select-option disabled items"

This reverts commit b7ac8675

* update disabled css to use classes
This commit is contained in:
Kelvin Dart
2019-08-20 15:24:30 +01:00
committed by Liam DeBeasi
parent cbd230c67e
commit 67ed89ded8
3 changed files with 38 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
core/src/components/alert/alert.scss
View File

@ -150,6 +150,17 @@
height: 100%;
}
// Alert Button: Disabled
// --------------------------------------------------
.alert-input-disabled,
.alert-checkbox-button-disabled .alert-button-inner,
.alert-radio-button-disabled .alert-button-inner {
cursor: default;
opacity: .5;
pointer-events: none;
}
.alert-tappable {
@include margin(0);
@include padding(0);

21
core/src/components/alert/alert.tsx
View File

@ -303,7 +303,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
disabled={i.disabled}
tabIndex={0}
role="checkbox"
class="alert-tappable alert-checkbox alert-checkbox-button ion-focusable"
class={{
'alert-tappable': true,
'alert-checkbox': true,
'alert-checkbox-button': true,
'ion-focusable': true,
'alert-checkbox-button-disabled': i.disabled || false
}}
>
<div class="alert-button-inner">
<div class="alert-checkbox-icon">
@ -335,7 +341,13 @@ export class Alert implements ComponentInterface, OverlayInterface {
disabled={i.disabled}
id={i.id}
tabIndex={0}
class="alert-radio-button alert-tappable alert-radio ion-focusable"
class={{
'alert-radio-button': true,
'alert-tappable': true,
'alert-radio': true,
'ion-focusable': true,
'alert-radio-button-disabled': i.disabled || false
}}
role="radio"
>
<div class="alert-button-inner">
@ -369,7 +381,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
id={i.id}
disabled={i.disabled}
tabIndex={0}
class="alert-input"
class={{
'alert-input': true,
'alert-input-disabled': i.disabled || false
}}
/>
</div>
))}

11
core/src/components/alert/test/basic/index.html
View File

@ -129,6 +129,11 @@
value: 'hello',
placeholder: 'Placeholder 2'
},
{
type: 'text',
placeholder: 'Placeholder 3',
disabled: true
},
{
name: 'name3',
type: 'text',
@ -207,7 +212,8 @@
{
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
disabled: true
},
{
type: 'radio',
@ -267,7 +273,8 @@
{
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
disabled: true
},
{