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(select): add props to customize toggle icons (#27648)

Browse Source 
Issue number: resolves #17248

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

While the `icon` shadow part allows customization of the existing toggle
icon, developers do not have a way to specify a different icon to use
entirely.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

New props `toggleIcon` and `expandedIcon` added. (Design docs are
[here](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/select/0002-custom-icons.md)
and
[here](https://github.com/ionic-team/ionic-framework-design-documents/blob/main/projects/ionic-framework/components/select/0003-custom-icon-on-open.md)
respectively.)

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Docs PR: https://github.com/ionic-team/ionic-docs/pull/2996
Dev build: `7.0.15-dev.11687278023.161b97d8`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
Amanda Johnston
2023-06-20 12:18:36 -05:00
committed by GitHub
parent 8179366845
commit 95e28b6629
14 changed files with 151 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -183,6 +183,19 @@ export class Select implements ComponentInterface {
*/
@Prop() selectedText?: string | null;
/**
* The toggle icon to use. Defaults to `chevronExpand` for `ios` mode,
* or `caretDownSharp` for `md` mode.
*/
@Prop() toggleIcon?: string;
/**
* The toggle icon to show when the select is open. If defined, the icon
* rotation behavior in `md` mode will be disabled. If undefined, `toggleIcon`
* will be used for when the select is both open and closed.
*/
@Prop() expandedIcon?: string;
/**
* The shape of the select. If "round" it will have an increased border radius.
*/
@ -820,7 +833,8 @@ export class Select implements ComponentInterface {
}
private renderSelect() {
const { disabled, el, isExpanded, labelPlacement, justify, placeholder, fill, shape, name, value } = this;
const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } =
this;
const mode = getIonMode(this);
const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
const justifyEnabled = !hasFloatingOrStackedLabel;
@ -839,6 +853,7 @@ export class Select implements ComponentInterface {
'in-item-color': hostContext('ion-item.ion-color', el),
'select-disabled': disabled,
'select-expanded': isExpanded,
'has-expanded-icon': expandedIcon !== undefined,
'has-value': this.hasValue(),
'has-placeholder': placeholder !== undefined,
'ion-focusable': true,
@ -893,7 +908,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
this.hasLoggedDeprecationWarning = true;
}
const { disabled, el, inputId, isExpanded, name, placeholder, value } = this;
const { disabled, el, inputId, isExpanded, expandedIcon, name, placeholder, value } = this;
const mode = getIonMode(this);
const { labelText, labelId } = getAriaLabel(el, inputId);
@ -926,6 +941,7 @@ Developers can use the "legacy" property to continue using the legacy form marku
'in-item-color': hostContext('ion-item.ion-color', el),
'select-disabled': disabled,
'select-expanded': isExpanded,
'has-expanded-icon': expandedIcon !== undefined,
'legacy-select': true,
}}
>
@ -974,7 +990,16 @@ Developers can use the "legacy" property to continue using the legacy form marku
*/
private renderSelectIcon() {
const mode = getIonMode(this);
const icon = mode === 'ios' ? chevronExpand : caretDownSharp;
const { isExpanded, toggleIcon, expandedIcon } = this;
let icon: string;
if (isExpanded && expandedIcon !== undefined) {
icon = expandedIcon;
} else {
const defaultIcon = mode === 'ios' ? chevronExpand : caretDownSharp;
icon = toggleIcon ?? defaultIcon;
}
return <ion-icon class="select-icon" part="icon" aria-hidden="true" icon={icon}></ion-icon>;
}