Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(alert): apply styling to disabled items (#18545)
* 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 b7ac867

* update disabled css to use classes
  • Loading branch information
kelvindart authored and liamdebeasi committed Aug 20, 2019
1 parent cbd230c commit 67ed89d
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 5 deletions.
11 changes: 11 additions & 0 deletions core/src/components/alert/alert.scss
Expand Up @@ -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);
Expand Down
21 changes: 18 additions & 3 deletions core/src/components/alert/alert.tsx
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
))}
Expand Down
11 changes: 9 additions & 2 deletions core/src/components/alert/test/basic/index.html
Expand Up @@ -129,6 +129,11 @@
value: 'hello',
placeholder: 'Placeholder 2'
},
{
type: 'text',
placeholder: 'Placeholder 3',
disabled: true
},
{
name: 'name3',
type: 'text',
Expand Down Expand Up @@ -207,7 +212,8 @@
{
type: 'radio',
label: 'Radio 5',
value: 'value5'
value: 'value5',
disabled: true
},
{
type: 'radio',
Expand Down Expand Up @@ -267,7 +273,8 @@
{
type: 'checkbox',
label: 'Checkbox 5',
value: 'value5'
value: 'value5',
disabled: true
},

{
Expand Down

0 comments on commit 67ed89d

Please sign in to comment.