feat(base-components): add ability to remove ios and md theme (#26669)

This commit is contained in:
Liam DeBeasi
2023-01-24 16:18:35 -05:00
committed by GitHub
parent 4d24b328e2
commit 18f109c7da
114 changed files with 1585 additions and 383 deletions

View File

@ -1,7 +1,7 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Method, Prop, Watch, forceUpdate, h } from '@stencil/core';
import { getIonMode } from '../../global/ionic-global';
import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
import type {
AlertButton,
AlertInput,
@ -36,11 +36,13 @@ import { mdLeaveAnimation } from './animations/md.leave';
// TODO(FW-2832): types
/**
* @virtualProp {true | false} useBase - useBase determines if base components is enabled.
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-alert',
styleUrls: {
base: 'alert.scss',
ios: 'alert.ios.scss',
md: 'alert.md.scss',
},
@ -348,7 +350,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
* 2. App is running in MD mode
* 3. A wrapper ref does not exist
*/
if (this.gesture || getIonMode(this) === 'md' || !this.wrapperEl) {
if (this.gesture || getIonBehavior(this) === 'md' || !this.wrapperEl) {
return;
}
@ -505,7 +507,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
private renderCheckbox() {
const inputs = this.processedInputs;
const mode = getIonMode(this);
const mode = getIonStylesheet(this);
if (inputs.length === 0) {
return null;
@ -654,7 +656,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
private renderAlertButtons() {
const buttons = this.processedButtons;
const mode = getIonMode(this);
const mode = getIonStylesheet(this);
const alertButtonGroupClass = {
'alert-button-group': true,
'alert-button-group-vertical': buttons.length > 2,
@ -679,7 +681,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
render() {
const { overlayIndex, header, subHeader, message, htmlAttributes } = this;
const mode = getIonMode(this);
const mode = getIonStylesheet(this);
const hdrId = `alert-${overlayIndex}-hdr`;
const subHdrId = `alert-${overlayIndex}-sub-hdr`;
const msgId = `alert-${overlayIndex}-msg`;