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 shapes for ionic theme (#30016)

Browse Source
This commit is contained in:
Maria Hutt
2024-11-14 13:26:59 -08:00
committed by GitHub
parent c3a804dc75
commit bc3d30c3d2
40 changed files with 186 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -191,9 +191,13 @@ export class Select implements ComponentInterface {
@Prop() expandedIcon?: string;
/**
* The shape of the select. If "round" it will have an increased border radius.
* Set to `"soft"` for a select with slightly rounded corners,
* `"round"` for a select with fully rounded corners,
* or `"rectangular"` for a select without rounded corners.
*
* Defaults to `"round"` for the `"ionic"` theme, undefined for all other themes.
*/
@Prop() shape?: 'round';
@Prop() shape?: 'soft' | 'round' | 'rectangular';
/**
* The value of the select.
@ -990,6 +994,18 @@ export class Select implements ComponentInterface {
);
}
private getShape(): string | undefined {
const theme = getIonTheme(this);
const { shape } = this;
// TODO(ROU-11366): Remove theme check when shapes are defined for all themes.
if (theme === 'ionic' && shape === undefined) {
return 'round';
}
return shape;
}
/**
* Get the icon to use for the expand icon.
* If an icon is set on the component, use that.
@ -1046,9 +1062,9 @@ export class Select implements ComponentInterface {
}
render() {
const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, shape, name, value } =
this;
const { disabled, el, isExpanded, expandedIcon, labelPlacement, justify, placeholder, fill, name, value } = this;
const theme = getIonTheme(this);
const shape = this.getShape();
const hasFloatingOrStackedLabel = labelPlacement === 'floating' || labelPlacement === 'stacked';
const shouldRenderOuterIcon = theme !== 'ionic' && hasFloatingOrStackedLabel;
const shouldRenderInnerIcon = theme === 'ionic' || !hasFloatingOrStackedLabel;