Merge branch 'next' into ROU-11054

core/api.txt

@@ -2279,7 +2279,7 @@ ion-textarea,prop,placeholder,string | undefined,undefined,false,false
 ion-textarea,prop,readonly,boolean,false,false,false
 ion-textarea,prop,required,boolean,false,false,false
 ion-textarea,prop,rows,number | undefined,undefined,false,false
-ion-textarea,prop,shape,"round" | undefined,undefined,false,false
+ion-textarea,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-textarea,prop,size,"large" | "medium" | "small" | undefined,'medium',false,false
 ion-textarea,prop,spellcheck,boolean,false,false,false
 ion-textarea,prop,theme,"ios" | "md" | "ionic",undefined,false,false

core/src/components.d.ts

@@ -3617,9 +3617,9 @@ export namespace Components {
  */
  "setFocus": () => Promise<void>;
  /**
- * The shape of the textarea. If "round" it will have an increased border radius.
+ * Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
  */
- "shape"?: 'round';
+ "shape"?: 'soft' | 'round' | 'rectangular';
  /**
  * The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme.
  */
@@ -8977,9 +8977,9 @@ declare namespace LocalJSX {
  */
  "rows"?: number;
  /**
- * The shape of the textarea. If "round" it will have an increased border radius.
+ * Set to `"soft"` for a textarea with slightly rounded corners, `"round"` for a textarea with fully rounded corners, or `"rectangular"` for a textarea without rounded corners. Defaults to `"round"` for the `ionic` theme, undefined for all other themes.
  */
- "shape"?: 'round';
+ "shape"?: 'soft' | 'round' | 'rectangular';
  /**
  * The size of the textarea. If "large" it will increase the height of the textarea, while "small" and "medium" provide progressively smaller heights. The default size is "medium". This property only applies to the `"ionic"` theme.
  */

core/src/components/input-password-toggle/input-password-toggle.common.scss

@@ -0,0 +1,4 @@
+@import "../../themes/native/native.globals";
+
+// Input Toggle Password
+// --------------------------------------------------

core/src/components/input-password-toggle/input-password-toggle.ionic.scss

@@ -0,0 +1,12 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./input-password-toggle.common.scss";
+
+// Ionic Input Toggle Password
+// --------------------------------------------------
+:host ion-button.button-has-icon-only {
+ --padding-end: inherit;
+ --color: #{globals.$ionic-color-neutral-500};
+ --margin-end: calc(-1 * var(--padding-end));
+
+ @include globals.margin(0, var(--margin-end), 0, 0);
+}

core/src/components/input-password-toggle/input-password-toggle.tsx

@@ -21,8 +21,9 @@ import type { Color, TextFieldTypes } from '../../interface';
  * and we will default to MD mode.
  */
  styleUrls: {
- ios: 'input-password-toggle.scss',
- md: 'input-password-toggle.scss',
+ ios: 'input-password-toggle.common.scss',
+ md: 'input-password-toggle.common.scss',
+ ionic: 'input-password-toggle.ionic.scss',
  },
  shadow: true,
 })

core/src/components/input-password-toggle/test/basic/index.html

@@ -48,7 +48,14 @@
  <div class="grid">
  <div class="grid-item">
  <h2>Default</h2>
- <ion-input type="password" value="supersecurepassword" label="Password">
+ <ion-input
+ fill="outline"
+ shape="soft"
+ placeholder="Enter your password"
+ type="password"
+ value="supersecurepassword"
+ label="Password"
+ >
  <ion-input-password-toggle slot="end"></ion-input-password-toggle>
  </ion-input>
  </div>

core/src/components/input-password-toggle/test/basic/input-password-toggle.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['md', 'ios', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  test.describe(title('input password toggle: states'), () => {
  test('should be hidden when inside of a readonly input', async ({ page }) => {
  await page.setContent(

core/src/components/textarea/test/shape/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+ <head>
+ <meta charset="UTF-8" />
+ <title>Textarea - Shape</title>
+ <meta
+ name="viewport"
+ content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+ />
+ <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+ <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+ <script src="../../../../../scripts/testing/scripts.js"></script>
+ <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+ <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+ <style>
+ .grid {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(250px, 1fr));
+ grid-row-gap: 20px;
+ grid-column-gap: 20px;
+ }
+
+ h2 {
+ font-size: 12px;
+ font-weight: normal;
+
+ color: #6f7378;
+
+ margin-top: 10px;
+ }
+
+ @media screen and (max-width: 800px) {
+ .grid {
+ grid-template-columns: 1fr;
+ padding: 0;
+ }
+ }
+ </style>
+ </head>
+
+ <body>
+ <ion-app>
+ <ion-header>
+ <ion-toolbar>
+ <ion-title>Textarea - Shape</ion-title>
+ </ion-toolbar>
+ </ion-header>
+
+ <ion-content id="content" class="ion-padding">
+ <div class="grid">
+ <div class="grid-item">
+ <h2>Default</h2>
+ <ion-textarea
+ fill="outline"
+ label="Label"
+ label-placement="stacked"
+ placeholder="Placeholder"
+ ></ion-textarea>
+ </div>
+
+ <div class="grid-item">
+ <h2>Round</h2>
+ <ion-textarea
+ shape="round"
+ fill="outline"
+ label="Label"
+ label-placement="stacked"
+ placeholder="Placeholder"
+ ></ion-textarea>
+ </div>
+
+ <div class="grid-item">
+ <h2>Soft</h2>
+ <ion-textarea
+ shape="soft"
+ fill="outline"
+ label="Label"
+ label-placement="stacked"
+ placeholder="Placeholder"
+ ></ion-textarea>
+ </div>
+
+ <div class="grid-item">
+ <h2>Rectangular</h2>
+ <ion-textarea
+ shape="rectangular"
+ fill="outline"
+ label="Label"
+ label-placement="stacked"
+ placeholder="Placeholder"
+ ></ion-textarea>
+ </div>
+ </div>
+ </ion-content>
+ </ion-app>
+ </body>
+</html>

core/src/components/textarea/test/shape/textarea.e2e.ts

@@ -0,0 +1,100 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions
+ * The round shape is only available in the Ionic and Material Design themes
+ */
+configs({ modes: ['md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('textarea: shape'), () => {
+ test.describe('default', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+ <ion-textarea
+ fill="outline"
+ label="Email"
+ label-placement="stacked"
+ value="[email protected]"
+ ></ion-textarea>
+ `,
+ config
+ );
+
+ const textarea = page.locator('ion-textarea');
+
+ await expect(textarea).toHaveScreenshot(screenshot(`textarea-default`));
+ });
+ });
+
+ test.describe('round', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+ <ion-textarea
+ shape="round"
+ fill="outline"
+ label="Email"
+ label-placement="stacked"
+ value="[email protected]"
+ ></ion-textarea>
+ `,
+ config
+ );
+
+ const textarea = page.locator('ion-textarea');
+
+ await expect(textarea).toHaveScreenshot(screenshot(`textarea-round`));
+ });
+ });
+ });
+});
+
+/**
+ * The soft and rectangular shapes are only available in the Ionic theme
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('textarea: shape'), () => {
+ test.describe('soft', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+ <ion-textarea
+ shape="soft"
+ fill="outline"
+ label="Email"
+ label-placement="stacked"
+ value="[email protected]"
+ ></ion-textarea>
+ `,
+ config
+ );
+
+ const textarea = page.locator('ion-textarea');
+
+ await expect(textarea).toHaveScreenshot(screenshot(`textarea-soft`));
+ });
+ });
+
+ test.describe('rectangular', () => {
+ test('should not have visual regressions', async ({ page }) => {
+ await page.setContent(
+ `
+ <ion-textarea
+ shape="rectangular"
+ fill="outline"
+ label="Email"
+ label-placement="stacked"
+ value="[email protected]"
+ ></ion-textarea>
+ `,
+ config
+ );
+
+ const textarea = page.locator('ion-textarea');
+
+ await expect(textarea).toHaveScreenshot(screenshot(`textarea-rectangular`));
+ });
+ });
+ });
+});

core/src/components/textarea/test/size/index.html

@@ -15,7 +15,7 @@
  <style>
  .grid {
  display: grid;
- grid-template-columns: repeat(2, minmax(250px, 1fr));
+ grid-template-columns: repeat(3, minmax(250px, 1fr));
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  }
@@ -27,7 +27,6 @@
  color: #6f7378;
 
  margin-top: 10px;
- padding-left: 16px;
  }
 
  @media screen and (max-width: 800px) {
@@ -60,18 +59,6 @@ <h2>Outline: Small Size</h2>
  ></ion-textarea>
  </div>
 
- <div class="grid-item">
- <h2>Outline: Small Size, Round Shape</h2>
- <ion-textarea
- size="small"
- fill="outline"
- shape="round"
- label="Label"
- label-placement="stacked"
- placeholder="Placeholder"
- ></ion-textarea>
- </div>
-
  <div class="grid-item">
  <h2>Outline: No Size</h2>
  <ion-textarea
@@ -82,17 +69,6 @@ <h2>Outline: No Size</h2>
  ></ion-textarea>
  </div>
 
- <div class="grid-item">
- <h2>Outline: No Size, Round Shape</h2>
- <ion-textarea
- fill="outline"
- shape="round"
- label="Label"
- label-placement="stacked"
- placeholder="Placeholder"
- ></ion-textarea>
- </div>
-
  <div class="grid-item">
  <h2>Outline: Large Size</h2>
  <ion-textarea
@@ -103,18 +79,6 @@ <h2>Outline: Large Size</h2>
  placeholder="Placeholder"
  ></ion-textarea>
  </div>
-
- <div class="grid-item">
- <h2>Outline: Large Size, Round Shape</h2>
- <ion-textarea
- size="large"
- fill="outline"
- shape="round"
- label="Label"
- label-placement="stacked"
- placeholder="Placeholder"
- ></ion-textarea>
- </div>
  </div>
  </ion-content>
  </ion-app>

core/src/components/textarea/textarea.ionic.scss

@@ -6,7 +6,6 @@
 // --------------------------------------------------
 
 :host {
- --border-radius: #{globals.$ionic-border-radius-400};
  --color: #{globals.$ionic-color-neutral-1200};
  --highlight-color-valid: #{globals.$ionic-color-success-base};
  --highlight-color-invalid: #{globals.$ionic-color-danger-base};
@@ -53,6 +52,21 @@
  min-height: globals.$ionic-scale-3600;
 }
 
+// Ionic Textarea Shapes
+// --------------------------------------------------
+
+:host(.textarea-shape-soft) {
+ --border-radius: #{globals.$ionic-border-radius-200};
+}
+
+:host(.textarea-shape-round) {
+ --border-radius: #{globals.$ionic-border-radius-400};
+}
+
+:host(.textarea-shape-rectangular) {
+ --border-radius: #{globals.$ionic-border-radius-0};
+}
+
 // Textarea Wrapper
 // ----------------------------------------------------------------