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

revert(): revert base components feature (#26692)

Browse Source 
The Ionic Framework team would like to re-evaluate our approach to improving customization options when building mobile applications. We are looking at other solutions that a) make customizing an app UI easier and b) are applicable to a broader set of developers.
This commit is contained in:
Liam DeBeasi
2023-01-30 11:52:36 -05:00
committed by GitHub
parent 592a4f1a37
commit b78b454e08
114 changed files with 387 additions and 1587 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import { printIonWarning } from '@utils/logging';
import { isRTL } from '@utils/rtl';
import { caretDownSharp } from 'ionicons/icons';
import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
import { getIonMode } from '../../global/ionic-global';
import type {
ActionSheetButton,
ActionSheetOptions,
@ -32,7 +32,6 @@ import type { SelectCompareFn } from './select-interface';
// 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.
*
* @part placeholder - The text displayed in the select when there is no value.
@ -42,7 +41,6 @@ import type { SelectCompareFn } from './select-interface';
@Component({
tag: 'ion-select',
styleUrls: {
base: 'select.scss',
ios: 'select.ios.scss',
md: 'select.md.scss',
},
@ -459,8 +457,7 @@ export class Select implements ComponentInterface {
private async openPopover(ev: UIEvent) {
const { fill } = this;
const interfaceOptions = this.interfaceOptions;
const style = getIonStylesheet(this);
const mode = getIonBehavior(this);
const mode = getIonMode(this);
const showBackdrop = mode === 'md' ? false : true;
const multiple = this.multiple;
const value = this.value;
@ -486,9 +483,9 @@ export class Select implements ComponentInterface {
} else {
/**
* The popover should take up the full width
* when using a fill in MD style.
* when using a fill in MD mode.
*/
if (style === 'md' && fill !== undefined) {
if (mode === 'md' && fill !== undefined) {
size = 'cover';
/**
@ -543,7 +540,7 @@ export class Select implements ComponentInterface {
}
private async openActionSheet() {
const mode = getIonBehavior(this);
const mode = getIonMode(this);
const interfaceOptions = this.interfaceOptions;
const actionSheetOpts: ActionSheetOptions = {
mode,
@ -574,7 +571,7 @@ export class Select implements ComponentInterface {
const interfaceOptions = this.interfaceOptions;
const inputType = this.multiple ? 'checkbox' : 'radio';
const mode = getIonBehavior(this);
const mode = getIonMode(this);
const alertOpts: AlertOptions = {
mode,
@ -700,7 +697,7 @@ export class Select implements ComponentInterface {
* when fill="outline".
*/
private renderLabelContainer() {
const mode = getIonStylesheet(this);
const mode = getIonMode(this);
const hasOutlineFill = mode === 'md' && this.fill === 'outline';
if (hasOutlineFill) {
@ -734,7 +731,7 @@ export class Select implements ComponentInterface {
private renderSelect() {
const { disabled, el, isExpanded, labelPlacement, justify, placeholder, fill, shape } = this;
const mode = getIonStylesheet(this);
const mode = getIonMode(this);
const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
const justifyEnabled = !hasFloatingOrStackedLabel;
const rtl = isRTL(el) ? 'rtl' : 'ltr';
@ -804,7 +801,7 @@ For inputs that do not have a visible label, developers should use "aria-label"
}
const { disabled, el, inputId, isExpanded, name, placeholder, value } = this;
const mode = getIonStylesheet(this);
const mode = getIonMode(this);
const { labelText, labelId } = getAriaLabel(el, inputId);
renderHiddenInput(true, el, name, parseValue(value), disabled);