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

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

View File

@ -5,6 +5,7 @@ import { inheritAriaAttributes } from '@utils/helpers';
import { createColorClasses, hostContext, openURL } from '@utils/theme';
import { chevronForwardOutline, ellipsisHorizontal } from 'ionicons/icons';
import { config } from '../../global/config';
import { getIonTheme } from '../../global/ionic-global';
import type { AnimationBuilder, Color } from '../../interface';
import type { RouterDirection } from '../router/utils/interface';
@ -167,6 +168,9 @@ export class Breadcrumb implements ComponentInterface {
const clickable = this.isClickable();
const TagType = this.href === undefined ? 'span' : ('a' as any);
const breadcrumbSeparatorIcon = config.get('breadcrumbSeparatorIcon', chevronForwardOutline);
const breadcrumbCollapsedIcon = config.get('breadcrumbCollapsedIcon', ellipsisHorizontal);
// Links can still be tabbed to when set to disabled if they have an href
// in order to truly disable them we can keep it as an anchor but remove the href
const href = disabled ? undefined : this.href;
@ -224,7 +228,7 @@ export class Breadcrumb implements ComponentInterface {
'breadcrumbs-collapsed-indicator': true,
}}
>
<ion-icon aria-hidden="true" icon={ellipsisHorizontal} lazy={false}></ion-icon>
<ion-icon aria-hidden="true" icon={breadcrumbCollapsedIcon} lazy={false}></ion-icon>
</button>
)}
{showSeparator && (
@ -236,7 +240,7 @@ export class Breadcrumb implements ComponentInterface {
<span class="breadcrumb-separator" part="separator" aria-hidden="true">
<slot name="separator">
{theme === 'ios' ? (
<ion-icon icon={chevronForwardOutline} lazy={false} flip-rtl></ion-icon>
<ion-icon icon={breadcrumbSeparatorIcon} lazy={false} flip-rtl></ion-icon>
) : (
<span>/</span>
)}