From 76ef3edabc3a36021132c1992cab7c8a19ffd2cd Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 13 Nov 2024 16:42:52 -0800 Subject: [PATCH 1/7] feat(select): add sizes for ionic theme --- core/api.txt | 1 + core/src/components.d.ts | 8 ++++++ core/src/components/select/select.ionic.scss | 25 ++++++++++++++++-- core/src/components/select/select.tsx | 27 ++++++++++++++++++++ packages/angular/src/directives/proxies.ts | 4 +-- packages/vue/src/proxies.ts | 1 + 6 files changed, 62 insertions(+), 4 deletions(-) diff --git a/core/api.txt b/core/api.txt index e035f35494c..6b7d27448b7 100644 --- a/core/api.txt +++ b/core/api.txt @@ -2065,6 +2065,7 @@ ion-select,prop,okText,string,'OK',false,false ion-select,prop,placeholder,string | undefined,undefined,false,false ion-select,prop,selectedText,null | string | undefined,undefined,false,false ion-select,prop,shape,"round" | undefined,undefined,false,false +ion-select,prop,size,"large" | "medium" | "small" | undefined,undefined,false,false ion-select,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-select,prop,toggleIcon,string | undefined,undefined,false,false ion-select,prop,value,any,undefined,false,false diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 8d3c764b41e..5732a4ebb7c 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3283,6 +3283,10 @@ export namespace Components { * The shape of the select. If "round" it will have an increased border radius. */ "shape"?: 'round'; + /** + * Set to `"small"` for a select with less height, `"medium"` for the default select height, or `"large"` for a select with more height. Defaults to `"medium"` for the ionic theme, and undefined for all other themes. + */ + "size"?: 'small' | 'medium' | 'large'; /** * The theme determines the visual appearance of the component. */ @@ -8707,6 +8711,10 @@ declare namespace LocalJSX { * The shape of the select. If "round" it will have an increased border radius. */ "shape"?: 'round'; + /** + * Set to `"small"` for a select with less height, `"medium"` for the default select height, or `"large"` for a select with more height. Defaults to `"medium"` for the ionic theme, and undefined for all other themes. + */ + "size"?: 'small' | 'medium' | 'large'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/select/select.ionic.scss b/core/src/components/select/select.ionic.scss index 5a7a17f488e..79624d0ba68 100644 --- a/core/src/components/select/select.ionic.scss +++ b/core/src/components/select/select.ionic.scss @@ -85,8 +85,6 @@ position: relative; - height: globals.$ion-scale-1200; - background: var(--background); box-sizing: border-box; @@ -183,3 +181,26 @@ :host(.select-disabled) .select-icon { color: globals.$ion-primitives-neutral-500; } + +// Sizes +// ---------------------------------------------------------------- + +// Small +// --------------------------------------------- + +:host(.select-size-small) .select-wrapper-inner { + height: globals.$ion-scale-1000; +} + +// Medium +// --------------------------------------------- + +:host(.select-size-medium) .select-wrapper-inner { + height: globals.$ion-scale-1200; +} + +// Large +// --------------------------------------------- +:host(.select-size-large) .select-wrapper-inner { + height: globals.$ion-scale-1400; +} diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 3efd9c8acb3..5ac99eb1277 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -200,6 +200,15 @@ export class Select implements ComponentInterface { */ @Prop({ mutable: true }) value?: any | null; + /** + * Set to `"small"` for a select with less height, + * `"medium"` for the default select height, + * or `"large"` for a select with more height. + * + * Defaults to `"medium"` for the ionic theme, and undefined for all other themes. + */ + @Prop() size?: 'small' | 'medium' | 'large'; + /** * Emitted when the value has changed. * @@ -816,6 +825,22 @@ export class Select implements ComponentInterface { this.ionBlur.emit(); }; + private getSize(): string | undefined { + const theme = getIonTheme(this); + const { size } = this; + + // TODO(ROU-11370): Remove theme check when sizes are defined for all themes. + if (theme !== 'ionic') { + return undefined; + } + + if (size === undefined) { + return 'medium'; + } + + return size; + } + private renderLabel() { const { label } = this; @@ -1055,6 +1080,7 @@ export class Select implements ComponentInterface { const justifyEnabled = !hasFloatingOrStackedLabel && justify !== undefined; const rtl = isRTL(el) ? 'rtl' : 'ltr'; const inItem = hostContext('ion-item', this.el); + const size = this.getSize(); const shouldRenderHighlight = theme === 'md' && fill !== 'outline' && !inItem; const hasValue = this.hasValue(); @@ -1101,6 +1127,7 @@ export class Select implements ComponentInterface { [`select-justify-${justify}`]: justifyEnabled, [`select-shape-${shape}`]: shape !== undefined, [`select-label-placement-${labelPlacement}`]: true, + [`select-size-${size}`]: size !== undefined, })} >