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

feat(many): expand global config for icons (#29373)

Browse Source 
Co-authored-by: Brandy Carney <brandyscarney@users.noreply.github.com>
This commit is contained in:
Maria Hutt
2024-05-08 16:22:12 -07:00
committed by GitHub
parent 7c7c483ab9
commit a58d9fa2e1
16 changed files with 370 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import { createColorClasses, hostContext } from '@utils/theme';
import { watchForOptions } from '@utils/watch-options';
import { caretDownSharp, chevronExpand } from 'ionicons/icons';
import { config } from '../../global/config';
import { getIonTheme } from '../../global/ionic-global';
import type {
ActionSheetOptions,
@ -863,15 +864,11 @@ export class Select implements ComponentInterface {
* next to the select text.
*/
private renderSelectIcon() {
const theme = getIonTheme(this);
const { isExpanded, toggleIcon, expandedIcon } = this;
let icon: string;
const { isExpanded, selectExpandIcon, selectCollapsedIcon } = this;
let icon = selectCollapsedIcon;
if (isExpanded && expandedIcon !== undefined) {
icon = expandedIcon;
} else {
const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
icon = toggleIcon ?? defaultIcon;
if (isExpanded) {
icon = selectExpandIcon;
}
return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>;
@ -925,6 +922,53 @@ export class Select implements ComponentInterface {
);
}
/**
* Get the icon to use for the expand icon.
* If an icon is set on the component, use that.
* Otherwise, use the icon set in the config.
* If no icon is set in the config, use the default icon.
*
* @returns {string} The icon to use for the expand icon.
*/
get selectExpandIcon(): string {
const theme = getIonTheme(this);
const icon = this.expandedIcon;
let defaultExpandIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
if (icon !== undefined) {
// Icon is set on the component.
return icon;
}
if (this.toggleIcon) {
// If the toggleIcon is set, use that as the default expand icon.
defaultExpandIcon = this.toggleIcon;
}
return config.get('selectExpandIcon', defaultExpandIcon);
}
/**
* Get the icon to use for the collapsed icon.
* If an icon is set on the component, use that.
* Otherwise, use the icon set in the config.
* If no icon is set in the config, use the default icon.
*
* @returns {string} The icon to use for the collapsed icon.
*/
get selectCollapsedIcon(): string {
const theme = getIonTheme(this);
const icon = this.toggleIcon;
const defaultIcon = theme === 'ios' ? chevronExpand : caretDownSharp;
if (icon !== undefined) {
// Icon is set on the component.
return icon;
}
return config.get('selectCollapsedIcon', defaultIcon);
}
render() {
const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } =
this;