Merge branch 'next' of github.com:ionic-team/ionic-framework into ROU-11318

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,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

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';
         /**
           * 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.
          */
@@ -8708,9 +8708,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';
         /**
           * 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.
          */

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};
@@ -168,7 +167,7 @@
 // ----------------------------------------------------------------
 
 // Disabled
-// ----------------------------------------------------------------
+// ---------------------------------------------
 
 :host(.select-disabled) {
   --background: #{globals.$ion-primitives-neutral-100};
@@ -182,6 +181,21 @@
   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};
+}
+
 // Sizes
 // ----------------------------------------------------------------
 
@@ -196,3 +210,4 @@
 :host(.select-size-large) .select-wrapper-inner {
   height: globals.$ion-scale-1400;
 }
+

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.
@@ -1015,6 +1019,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.
@@ -1071,9 +1087,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`));
-      });
     });
   });
 });