feat(select): add shapes for ionic theme (#30016)

Author: thetaPC

core/api.txt

@@ -2064,7 +2064,7 @@ ion-select,prop,name,string,this.inputId,false,false
 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,shape,"rectangular" | "round" | "soft" | 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

@@ -3280,9 +3280,9 @@ export namespace Components {
          */
         "selectedText"?: string | null;
         /**
-          * 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.
          */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -8704,9 +8704,9 @@ declare namespace LocalJSX {
          */
         "selectedText"?: string | null;
         /**
-          * 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.
          */
-        "shape"?: 'round';
+        "shape"?: 'soft' | 'round' | 'rectangular';
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/select/select.ionic.scss

@@ -10,7 +10,6 @@
   // TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
   // ios and md. This will allow us to have a single color map.
   --border-color: #{globals.current-color(neutral)};
-  --border-radius: #{globals.$ion-border-radius-400};
   --border-width: #{globals.$ion-border-size-025};
   --padding-start: #{globals.$ion-space-400};
   --padding-end: #{globals.$ion-space-400};
@@ -170,7 +169,7 @@
 // ----------------------------------------------------------------
 
 // Disabled
-// ----------------------------------------------------------------
+// ---------------------------------------------
 
 :host(.select-disabled) {
   --background: #{globals.$ion-primitives-neutral-100};
@@ -183,3 +182,18 @@
 :host(.select-disabled) .select-icon {
   color: globals.$ion-primitives-neutral-500;
 }
+
+// Shapes
+// ----------------------------------------------------------------
+
+:host(.select-shape-soft) {
+  --border-radius: #{globals.$ion-border-radius-200};
+}
+
+:host(.select-shape-round) {
+  --border-radius: #{globals.$ion-border-radius-400};
+}
+
+:host(.select-shape-rectangular) {
+  --border-radius: #{globals.$ion-border-radius-0};
+}

core/src/components/select/select.tsx

@@ -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;

core/src/components/select/test/fill/select.e2e.ts

@@ -89,24 +89,6 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const select = page.locator('ion-select');
         await expect(select).toHaveScreenshot(screenshot(`select-fill-solid-label-floating`));
       });
-      test('should not have visual regressions with shaped solid', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-select
-            shape="round"
-            fill="solid"
-            label="Fruit"
-            value="apple"
-          >
-            <ion-select-option value="apple">Apple</ion-select-option>
-          </ion-select>
-        `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-solid`));
-      });
       test('padding and border radius should be customizable', async ({ page }) => {
         await page.setContent(
           `
@@ -153,25 +135,6 @@ configs({ modes: ['md'] }).forEach(({ title, screenshot, config }) => {
         const select = page.locator('ion-select');
         await expect(select).toHaveScreenshot(screenshot(`select-fill-outline-label-floating`));
       });
-
-      test('should not have visual regressions with shaped outline', async ({ page }) => {
-        await page.setContent(
-          `
-          <ion-select
-            shape="round"
-            fill="outline"
-            label="Fruit"
-            value="apple"
-          >
-            <ion-select-option value="apple">Apple</ion-select-option>
-          </ion-select>
-        `,
-          config
-        );
-
-        const select = page.locator('ion-select');
-        await expect(select).toHaveScreenshot(screenshot(`select-fill-shaped-outline`));
-      });
     });
   });
 });