Skip to content

Commit f16b118

Browse files
brandyscarneybrandyscarney
authored
fix(overlays): fallback to step color if overlay background variable is unset (#18709)
fixes #18658
1 parent 24840d4 commit f16b118

File tree

3 files changed

+200
-7
lines changed

3 files changed

+200
-7
lines changed

‎core/src/themes/ionic.theme.default.ios.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
$backdrop-ios-color: var(--ion-backdrop-color, #000) !default;
1010
$border-ios-color: var(--ion-border-color, var(--ion-color-step-150, #dedede)) !default;
1111
$box-shadow-ios-color: var(--ion-box-shadow-color, #000) !default;
12-
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-150, #f9f9f9)) !default;
12+
$overlay-ios-background-color: var(--ion-overlay-background-color, var(--ion-color-step-50, #f9f9f9)) !default;
1313

1414
// iOS Tabs & Tab bar
1515
// --------------------------------------------------

‎core/src/themes/ionic.theme.default.md.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
$backdrop-md-color: var(--ion-backdrop-color, #000) !default;
1111
$border-md-color: var(--ion-border-color, var(--ion-color-step-150, #c1c4cd)) !default;
1212
$box-shadow-md-color: var(--ion-box-shadow-color, #000) !default;
13-
$overlay-md-background-color: var(--ion-overlay-background-color, #fff) !default;
13+
$overlay-md-background-color: var(--ion-overlay-background-color, var(--ion-background-color, #fff)) !default;
1414

1515
// Material Design Tabs & Tab bar
1616
// --------------------------------------------------

‎core/src/themes/test/css-variables/index.html

Lines changed: 198 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@
6262
<ion-label>Colors</ion-label>
6363
<ion-icon name="brush"></ion-icon>
6464
</ion-tab-button>
65-
<ion-tab-button tab="other">
66-
<ion-label>Other</ion-label>
65+
<ion-tab-button tab="overlays">
66+
<ion-label>Overlays</ion-label>
6767
<ion-icon name="more"></ion-icon>
6868
</ion-tab-button>
6969
</ion-tab-bar>
@@ -700,10 +700,10 @@
700700
</ion-content>
701701
</ion-tab>
702702

703-
<ion-tab tab="other">
703+
<ion-tab tab="overlays">
704704
<ion-header>
705705
<ion-toolbar>
706-
<ion-title>Other</ion-title>
706+
<ion-title>Overlays</ion-title>
707707
<div slot="end" class="right-container">
708708
<ion-label>Select a Theme:</ion-label>
709709
<ion-select interface="popover" class="theme-picker">
@@ -717,11 +717,51 @@
717717
</ion-header>
718718
<ion-content>
719719
<div class="wrapper">
720-
720+
<!-- <section> -->
721+
<ion-list>
722+
<ion-item button onClick="presentAlert()">
723+
<ion-label>Present Alert</ion-label>
724+
</ion-item>
725+
<ion-item button onClick="presentActionSheet()">
726+
<ion-label>Present Action Sheet</ion-label>
727+
</ion-item>
728+
<ion-item button onClick="presentLoading()">
729+
<ion-label>Present Loading</ion-label>
730+
</ion-item>
731+
<ion-item button onClick="presentModal()">
732+
<ion-label>Present Modal</ion-label>
733+
</ion-item>
734+
<ion-item button onClick="presentPopover(event)">
735+
<ion-label>Present Popover</ion-label>
736+
</ion-item>
737+
<ion-item button onClick="presentToast()">
738+
<ion-label>Present Toast</ion-label>
739+
</ion-item>
740+
<ion-item>
741+
<ion-label>Datetime</ion-label>
742+
<ion-datetime></ion-datetime>
743+
</ion-item>
744+
<ion-item>
745+
<ion-label>Select</ion-label>
746+
<ion-select>
747+
<ion-select-option>1</ion-select-option>
748+
<ion-select-option>2</ion-select-option>
749+
<ion-select-option>3</ion-select-option>
750+
</ion-select>
751+
</ion-item>
752+
</ion-list>
753+
<!-- </section> -->
721754
</div>
722755
</ion-content>
723756
</ion-tab>
724757
</ion-tabs>
758+
759+
<ion-alert-controller></ion-alert-controller>
760+
<ion-action-sheet-controller></ion-action-sheet-controller>
761+
<ion-loading-controller></ion-loading-controller>
762+
<ion-modal-controller></ion-modal-controller>
763+
<ion-popover-controller></ion-popover-controller>
764+
<ion-toast-controller></ion-toast-controller>
725765
</ion-app>
726766

727767
<script>
@@ -752,6 +792,159 @@
752792
selects[i].value = theme;
753793
}
754794
}
795+
796+
async function presentAlert() {
797+
const alertController = document.querySelector('ion-alert-controller');
798+
await alertController.componentOnReady();
799+
800+
const alert = await alertController.create({
801+
header: 'Alert',
802+
subHeader: 'Subtitle',
803+
message: 'This is an alert message.',
804+
buttons: ['OK']
805+
});
806+
return await alert.present();
807+
}
808+
809+
async function presentActionSheet() {
810+
const actionSheetController = document.querySelector('ion-action-sheet-controller');
811+
await actionSheetController.componentOnReady();
812+
813+
const actionSheet = await actionSheetController.create({
814+
header: "Albums",
815+
buttons: [{
816+
text: 'Delete',
817+
role: 'destructive',
818+
icon: 'trash',
819+
handler: () => {
820+
console.log('Delete clicked');
821+
}
822+
}, {
823+
text: 'Share',
824+
icon: 'share',
825+
handler: () => {
826+
console.log('Share clicked');
827+
}
828+
}, {
829+
text: 'Play (open modal)',
830+
icon: 'arrow-dropright-circle',
831+
handler: () => {
832+
console.log('Play clicked');
833+
}
834+
}, {
835+
text: 'Favorite',
836+
icon: 'heart',
837+
handler: () => {
838+
console.log('Favorite clicked');
839+
}
840+
}, {
841+
text: 'Cancel',
842+
icon: 'close',
843+
role: 'cancel',
844+
handler: () => {
845+
console.log('Cancel clicked');
846+
}
847+
}]
848+
});
849+
await actionSheet.present();
850+
}
851+
852+
async function presentLoading() {
853+
const loadingController = document.querySelector('ion-loading-controller');
854+
await loadingController.componentOnReady();
855+
856+
const loading = await loadingController.create({
857+
message: 'Hellooo',
858+
duration: 2000
859+
});
860+
861+
await loading.present();
862+
863+
const { role, data } = await loading.onDidDismiss();
864+
865+
console.log('Loading dismissed!');
866+
}
867+
868+
async function createModal() {
869+
// initialize controller
870+
const modalController = document.querySelector('ion-modal-controller');
871+
await modalController.componentOnReady();
872+
873+
// create component to open
874+
const element = document.createElement('div');
875+
element.innerHTML = `
876+
<ion-header>
877+
<ion-toolbar>
878+
<ion-title>Super Modal</ion-title>
879+
</ion-toolbar>
880+
</ion-header>
881+
<ion-content>
882+
<h1>Content of doom</h1>
883+
<div>Here's some more content</div>
884+
<ion-button class="dismiss">Dismiss Modal</ion-button>
885+
</ion-content>
886+
`;
887+
888+
// listen for close event
889+
const button = element.querySelector('ion-button');
890+
button.addEventListener('click', () => {
891+
modalController.dismiss();
892+
});
893+
894+
// present the modal
895+
const modalElement = await modalController.create({
896+
component: element
897+
});
898+
return modalElement;
899+
}
900+
901+
async function presentModal() {
902+
const modal = await createModal();
903+
await modal.present();
904+
}
905+
906+
async function presentPopover(event) {
907+
const popoverController = document.querySelector('ion-popover-controller');
908+
await popoverController.componentOnReady();
909+
const popoverElement = await popoverController.create({
910+
component: 'profile-page',
911+
event: event
912+
});
913+
return await popoverElement.present();
914+
}
915+
916+
class ProfilePage extends HTMLElement {
917+
constructor() {
918+
super();
919+
}
920+
921+
connectedCallback() {
922+
this.innerHTML = `
923+
<ion-content>
924+
<ion-list>
925+
<ion-list-header>Ionic</ion-list-header>
926+
<ion-item><ion-label>Item 0</ion-label></ion-item>
927+
<ion-item><ion-label>Item 1</ion-label></ion-item>
928+
<ion-item><ion-label>Item 2</ion-label></ion-item>
929+
<ion-item><ion-label>Item 3</ion-label></ion-item>
930+
</ion-list>
931+
</ion-content>
932+
`;
933+
}
934+
}
935+
936+
customElements.define('profile-page', ProfilePage);
937+
938+
async function presentToast() {
939+
const toastController = document.querySelector('ion-toast-controller');
940+
await toastController.componentOnReady();
941+
942+
const toast = await toastController.create({
943+
message: 'Your settings have been saved.',
944+
duration: 2000
945+
});
946+
return await toast.present();
947+
}
755948
</script>
756949
</body>
757950

0 commit comments

Comments
 (0)