@ionic/core 8.2.3-dev.11723022900.1196a7bf → 8.2.3-dev.11724345963.10ca6051

package/dist/collection/components/ripple-effect/ripple-effect.ionic.css

@@ -0,0 +1,154 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
+:host {
+  right: 0;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  contain: strict;
+  pointer-events: none;
+}
+
+:host(.unbounded) {
+  contain: layout size style;
+}
+
+.ripple-effect {
+  border-radius: 50%;
+  position: absolute;
+  background-color: currentColor;
+  color: inherit;
+  contain: strict;
+  opacity: 0;
+  animation: 225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;
+  will-change: transform, opacity;
+  pointer-events: none;
+}
+
+.fade-out {
+  transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  animation: 150ms fadeOutAnimation forwards;
+}
+
+@keyframes rippleAnimation {
+  from {
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transform: scale(1);
+  }
+  to {
+    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  }
+}
+@keyframes fadeInAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0;
+  }
+  to {
+    opacity: 0.16;
+  }
+}
+@keyframes fadeOutAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0.16;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.ripple-effect {
+  animation-name: rippleAnimation, fadeInAnimation;
+}
+
+.fade-out {
+  animation-name: fadeOutAnimation;
+}
+
+@keyframes rippleAnimation {
+  from {
+    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transform: scale(1);
+  }
+  to {
+    transform: translate(var(--translate-end)) scale(var(--final-scale, 1));
+  }
+}
+@keyframes fadeInAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: 0;
+  }
+  to {
+    opacity: var(--ripple-opacity, 0.16);
+  }
+}
+@keyframes fadeOutAnimation {
+  from {
+    animation-timing-function: linear;
+    opacity: var(--ripple-opacity, 0.16);
+  }
+  to {
+    opacity: 0;
+  }
+}

package/dist/collection/components/ripple-effect/ripple-effect.js

@@ -63,7 +63,7 @@ export class RippleEffect {
     }
     render() {
         const theme = getIonTheme(this);
-        return (h(Host, { key: 'f1e6f4a3fc8ae9761f8aba243f2866721b839398', role: "presentation", class: {
+        return (h(Host, { key: '8ae91c86a67ffd14458eb733a207f01a64d59307', role: "presentation", class: {
                 [theme]: true,
                 unbounded: this.unbounded,
             } }));
@@ -72,12 +72,16 @@ export class RippleEffect {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["ripple-effect.scss"]
+            "ios": ["ripple-effect.common.scss"],
+            "md": ["ripple-effect.common.scss"],
+            "ionic": ["ripple-effect.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["ripple-effect.css"]
+            "ios": ["ripple-effect.common.css"],
+            "md": ["ripple-effect.common.css"],
+            "ionic": ["ripple-effect.ionic.css"]
         };
     }
     static get properties() {

package/dist/collection/components/spinner/spinner.js

@@ -4,7 +4,7 @@
 import { Host, h } from "@stencil/core";
 import { createColorClasses } from "../../utils/theme";
 import { config } from "../../global/config";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonTheme, getIonMode } from "../../global/ionic-global";
 import { SPINNERS } from "./spinner-configs";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
@@ -18,14 +18,13 @@ export class Spinner {
         this.paused = false;
         this.size = undefined;
     }
-    // TODO(ROU-10920): Switch `theme` to `mode`.
     getName() {
         const spinnerName = this.name || config.get('spinner');
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         if (spinnerName) {
             return spinnerName;
         }
-        return theme === 'ios' ? 'lines' : 'circular';
+        return mode === 'ios' ? 'lines' : 'circular';
     }
     getSize() {
         const theme = getIonTheme(this);
@@ -58,7 +57,7 @@ export class Spinner {
                 svgs.push(buildLine(spinner, duration, i, spinner.lines));
             }
         }
-        return (h(Host, { key: '6cac09975f1088551e71b1c60033d3571438f374', class: createColorClasses(self.color, {
+        return (h(Host, { key: '49fd776ff3793a76b111c1f0e0fc0755d1d28d6c', class: createColorClasses(self.color, {
                 [theme]: true,
                 [`spinner-${spinnerName}`]: true,
                 'spinner-paused': self.paused || config.getBoolean('_testing'),

package/dist/collection/components/textarea/test/size/textarea.e2e.js

@@ -0,0 +1,123 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+/**
+ * Size is only available in the Ionic theme
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('textarea: size'), () => {
+        test.describe('textarea: size small', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+          <ion-textarea
+            size="small"
+            label="Email"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `, config);
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-small`));
+            });
+            test('should render correctly with stacked label', async ({ page }) => {
+                await page.setContent(`
+          <ion-textarea
+            size="small"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `, config);
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-small-label-stacked`));
+            });
+            test('should not have visual regressions with fill outline', async ({ page }) => {
+                await page.setContent(`
+          <ion-textarea
+            size="small"
+            fill="outline"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `, config);
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-small-outline`));
+            });
+        });
+        test.describe('textarea: size medium', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+          <ion-textarea
+            label="Email"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `, config);
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium`));
+            });
+            test('should render correctly with stacked label', async ({ page }) => {
+                await page.setContent(`
+          <ion-textarea
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `, config);
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium-label-stacked`));
+            });
+            test('should not have visual regressions with fill outline', async ({ page }) => {
+                await page.setContent(`
+          <ion-textarea
+            fill="outline"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `, config);
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-medium-outline`));
+            });
+        });
+        test.describe('textarea: size large', () => {
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+          <ion-textarea
+            size="large"
+            label="Email"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `, config);
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-large`));
+            });
+            test('should render correctly with stacked label', async ({ page }) => {
+                await page.setContent(`
+          <ion-textarea
+            size="large"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `, config);
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-large-label-stacked`));
+            });
+            test('should not have visual regressions with fill outline', async ({ page }) => {
+                await page.setContent(`
+          <ion-textarea
+            size="large"
+            fill="outline"
+            label="Email"
+            label-placement="stacked"
+            value="hi@ionic.io"
+          ></ion-textarea>
+        `, config);
+                const textarea = page.locator('ion-textarea');
+                await expect(textarea).toHaveScreenshot(screenshot(`textarea-size-large-outline`));
+            });
+        });
+    });
+});