diff --git a/core/api.txt b/core/api.txt index b4036e6b8e8..b1491fc398a 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1757,6 +1757,7 @@ ion-select,css-prop,--placeholder-opacity,ios ion-select,css-prop,--placeholder-opacity,md ion-select,css-prop,--ripple-color,ios ion-select,css-prop,--ripple-color,md +ion-select,part,bottom ion-select,part,container ion-select,part,error-text ion-select,part,helper-text @@ -1765,6 +1766,8 @@ ion-select,part,label ion-select,part,placeholder ion-select,part,supporting-text ion-select,part,text +ion-select,part,wrapper +ion-select,part,wrapper-inner ion-select-modal,scoped ion-select-modal,prop,cancelText,string,'Close',false,false diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 97309bac332..c33d6131616 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -45,6 +45,9 @@ import type { SelectChangeEventDetail, SelectInterface, SelectCompareFn } from ' * @part supporting-text - Supporting text displayed beneath the select. * @part helper-text - Supporting text displayed beneath the select when the select is valid. * @part error-text - Supporting text displayed beneath the select when the select is invalid and touched. + * @part bottom - The container element for helper text, error text, and counter. + * @part wrapper - The clickable label element that wraps the entire form field (label text, slots, selected values or placeholder, and toggle icons). + * @part wrapper-inner - The inner element of the wrapper that does not include the label text. */ @Component({ tag: 'ion-select', @@ -1173,7 +1176,11 @@ export class Select implements ComponentInterface { return; } - return
{this.renderHintText()}
; + return ( +
+ {this.renderHintText()} +
+ ); } render() { @@ -1246,9 +1253,9 @@ export class Select implements ComponentInterface { [`select-label-placement-${labelPlacement}`]: true, })} > -