Skip to content

feat(item): add styles for disabled state in ionic theme #29583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Jun 6, 2024
Merged

feat(item): add styles for disabled state in ionic theme #29583

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6625b99
Adding disabled state to item
rugoncalves Jun 4, 2024
7cdf80e
Using mixins
rugoncalves Jun 4, 2024
628700e
Formatting code
rugoncalves Jun 4, 2024
5aff9f5
Removing button from test page
rugoncalves Jun 4, 2024
d7cdd90
Update based on code review
rugoncalves Jun 5, 2024
72d6d4b
Adding test to ionic theme
rugoncalves Jun 6, 2024
d3be49d
chore(): add updated snapshots
Ionitron Jun 6, 2024
4ed7af0
Merge branch 'next' into ROU-10764
brandyscarney Jun 6, 2024
70fac45
chore(): add updated snapshots
brandyscarney Jun 6, 2024
81bf662
Merge branch 'next' into ROU-10764
rugoncalves Jun 6, 2024
9a5c414
Missing bracket
rugoncalves Jun 6, 2024
a3bf4a1
Lint fix
rugoncalves Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions core/src/components/item/item.ionic.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,22 @@
box-sizing: border-box;
}
}

// Item: Disabled
// --------------------------------------------------

:host(.item-disabled) {
cursor: default;
pointer-events: none;

&::after {
@include globals.position-horizontal(0, 0);
position: absolute;
top: 0;
bottom: 0;

background: #{globals.$ionic-state-disabled};

content: "";
}
}
36 changes: 36 additions & 0 deletions core/src/components/item/test/theme-ionic/index.html
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we plan to add e2e tests for this component later? We could probably just add the ionic theme here: https://github.com/ionic-team/ionic-framework/blob/next/core/src/components/item/test/disabled/item.e2e.ts

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gnbm thoughts?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rugoncalves Ideally, IMO we should have them separated. But for the sake of speed, I agree with @brandyscarney about adding it to that file.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @brandyscarney for the help on this. @gnbm automated screenshot tests are running on the ionic theme for the disabled state.

Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,42 @@ <h1>Heading</h1>
</ion-label>
<ion-button slot="end" fill="outline">Outline</ion-button>
</ion-item>

<ion-text color="primary">
<h2>Disabled Item</h2>
</ion-text>

<ion-item disabled>
<ion-label>
<h1>Heading</h1>
<p>Normal paragraph</p>
</ion-label>
</ion-item>

<ion-item disabled>
<ion-label>
<h1>Heading</h1>
<p>Normal paragraph</p>
</ion-label>
<ion-button slot="end" fill="outline">Outline</ion-button>
</ion-item>

<ion-item disabled>
<ion-label slot="start">Start</ion-label>
<ion-label>
<h1>Heading</h1>
<p>Normal paragraph</p>
</ion-label>
</ion-item>

<ion-item disabled>
<ion-label slot="start">Start</ion-label>
<ion-label>
<h1>Heading</h1>
<p>Normal paragraph</p>
</ion-label>
<ion-button slot="end" fill="outline">Outline</ion-button>
</ion-item>
</ion-content>

<ion-footer>
Expand Down
Loading