feat(select): add sizes for ionic theme

Author: thetaPC

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

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.
          */

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;
+}

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,
         })}
       >
         <label class="select-wrapper" id="select-label">

packages/angular/src/directives/proxies.ts

@@ -2066,15 +2066,15 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
 
 
 @ProxyCmp({
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'theme', 'toggleIcon', 'value'],
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'size', 'theme', 'toggleIcon', 'value'],
   methods: ['open']
 })
 @Component({
   selector: 'ion-select',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'theme', 'toggleIcon', 'value'],
+  inputs: ['cancelText', 'color', 'compareWith', 'disabled', 'expandedIcon', 'fill', 'interface', 'interfaceOptions', 'justify', 'label', 'labelPlacement', 'mode', 'multiple', 'name', 'okText', 'placeholder', 'selectedText', 'shape', 'size', 'theme', 'toggleIcon', 'value'],
 })
 export class IonSelect {
   protected el: HTMLElement;

packages/vue/src/proxies.ts

@@ -800,6 +800,7 @@ export const IonSelect = /*@__PURE__*/ defineContainer<JSX.IonSelect, JSX.IonSel
   'expandedIcon',
   'shape',
   'value',
+  'size',
   'ionChange',
   'ionCancel',
   'ionDismiss',