@ionic/core 8.2.3-dev.11718879673.1a3f486b → 8.2.3-dev.11719301373.17616928

package/dist/collection/components/item-sliding/test/shapes/item-sliding.e2e.js

@@ -0,0 +1,28 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
+/**
+ * The shapes on the `item-option` do not vary by direction
+ * when they are not being dragged.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('item-sliding: shapes'), () => {
+        test('should not have visual regressions when not expanded', async ({ page }) => {
+            await page.goto(`/src/components/item-sliding/test/shapes`, config);
+            const itemIDs = ['round', 'soft', 'rectangular'];
+            for (const itemID of itemIDs) {
+                const item = page.locator(`#${itemID}`);
+                /**
+                 * Negative dragByX value to drag element from the right to the left
+                 * to reveal the options on the right side.
+                 */
+                const dragByX = -150;
+                await dragElementBy(item, page, dragByX);
+                await page.waitForChanges();
+                await expect(item).toHaveScreenshot(screenshot(`item-sliding-${itemID}`));
+            }
+        });
+    });
+});

package/dist/collection/components/list/list.ionic.css

@@ -0,0 +1,174 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
+/**
+ * This is an auto-generated file, please do not change it directly.
+ * Ionic Design System
+ */
+/**
+ * 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;
+ *   }
+ * }
+ */
+/**
+ * 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.
+ */
+ion-list {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  display: block;
+  contain: content;
+  list-style-type: none;
+}
+
+.list-ionic.list-inset {
+  -webkit-margin-start: var(--ionic-space-100, 4px);
+  margin-inline-start: var(--ionic-space-100, 4px);
+  -webkit-margin-end: var(--ionic-space-100, 4px);
+  margin-inline-end: var(--ionic-space-100, 4px);
+  margin-top: var(--ionic-space-100, 4px);
+  margin-bottom: var(--ionic-space-100, 4px);
+}
+
+.list-ionic:has(ion-list-header) {
+  /* Round */
+  /* Soft */
+  /* Rectangular */
+}
+.list-ionic:has(ion-list-header).list-round {
+  /**
+   * Only apply the border radius to the bottom of the list.
+   * The top of the list should not have a border radius because
+   * that would include the header.
+   */
+  border-start-start-radius: initial;
+  border-start-end-radius: initial;
+  border-end-end-radius: var(--ionic-border-radius-400, 16px);
+  border-end-start-radius: var(--ionic-border-radius-400, 16px);
+}
+.list-ionic:has(ion-list-header).list-round ion-list-header + * {
+  /**
+   * Only apply the border radius to the top of the first element.
+   * The bottom of the first element should not have a border radius
+   * because that would not look connected to the rest.
+   */
+  border-start-start-radius: var(--ionic-border-radius-400, 16px);
+  border-start-end-radius: var(--ionic-border-radius-400, 16px);
+  border-end-end-radius: initial;
+  border-end-start-radius: initial;
+}
+.list-ionic:has(ion-list-header).list-soft {
+  /**
+   * Only apply the border radius to the bottom of the list.
+   * The top of the list should not have a border radius because
+   * that would include the header.
+   */
+  border-start-start-radius: initial;
+  border-start-end-radius: initial;
+  border-end-end-radius: var(--ionic-border-radius-200, 8px);
+  border-end-start-radius: var(--ionic-border-radius-200, 8px);
+}
+.list-ionic:has(ion-list-header).list-soft ion-list-header + * {
+  /**
+   * Only apply the border radius to the top of the first element.
+   * The bottom of the first element should not have a border radius
+   * because that would not look connected to the rest.
+   */
+  border-start-start-radius: var(--ionic-border-radius-200, 8px);
+  border-start-end-radius: var(--ionic-border-radius-200, 8px);
+  border-end-end-radius: initial;
+  border-end-start-radius: initial;
+}
+.list-ionic:has(ion-list-header).list-rectangular {
+  /**
+   * Only apply the border radius to the bottom of the list.
+   * The top of the list should not have a border radius because
+   * that would include the header.
+   */
+  border-start-start-radius: initial;
+  border-start-end-radius: initial;
+  border-end-end-radius: var(--ionic-border-radius-0, 0px);
+  border-end-start-radius: var(--ionic-border-radius-0, 0px);
+}
+.list-ionic:has(ion-list-header).list-rectangular ion-list-header + * {
+  /**
+   * Only apply the border radius to the top of the first element.
+   * The bottom of the first element should not have a border radius
+   * because that would not look connected to the rest.
+   */
+  border-start-start-radius: var(--ionic-border-radius-0, 0px);
+  border-start-end-radius: var(--ionic-border-radius-0, 0px);
+  border-end-end-radius: initial;
+  border-end-start-radius: initial;
+}
+
+.list-ionic:not(:has(ion-list-header)) {
+  /* Round */
+  /* Soft */
+  /* Rectangular */
+}
+.list-ionic:not(:has(ion-list-header)).list-round {
+  border-radius: var(--ionic-border-radius-400, 16px);
+}
+.list-ionic:not(:has(ion-list-header)).list-soft {
+  border-radius: var(--ionic-border-radius-200, 8px);
+}
+.list-ionic:not(:has(ion-list-header)).list-rectangular {
+  border-radius: var(--ionic-border-radius-0, 0px);
+}

package/dist/collection/components/list/list.js

@@ -11,6 +11,7 @@ export class List {
     constructor() {
         this.lines = undefined;
         this.inset = false;
+        this.shape = undefined;
     }
     /**
      * If `ion-item-sliding` are used inside the list, this method closes
@@ -25,16 +26,33 @@ export class List {
         }
         return false;
     }
+    getShape() {
+        const theme = getIonTheme(this);
+        const { shape, inset } = this;
+        // TODO(ROU-10831): Remove theme check when shapes are defined for all themes.
+        if (theme !== 'ionic') {
+            return undefined;
+        }
+        if (shape === undefined && inset) {
+            return 'round';
+        }
+        if (shape === undefined) {
+            return 'rectangular';
+        }
+        return shape;
+    }
     render() {
         const theme = getIonTheme(this);
+        const shape = this.getShape();
         const { lines, inset } = this;
-        return (h(Host, { key: '740f69ef6cfe4503fc7ca77dddf8ea912db8b52c', role: "list", class: {
+        return (h(Host, { key: '9dc48461bc98a22e3592ea35af053016a4ace586', role: "list", class: {
                 [theme]: true,
                 // Used internally for styling
                 [`list-${theme}`]: true,
                 'list-inset': inset,
                 [`list-lines-${lines}`]: lines !== undefined,
                 [`list-${theme}-lines-${lines}`]: lines !== undefined,
+                [`list-${shape}`]: shape !== undefined,
             } }));
     }
     static get is() { return "ion-list"; }
@@ -42,14 +60,14 @@ export class List {
         return {
             "ios": ["list.ios.scss"],
             "md": ["list.md.scss"],
-            "ionic": ["list.md.scss"]
+            "ionic": ["list.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["list.ios.css"],
             "md": ["list.md.css"],
-            "ionic": ["list.md.css"]
+            "ionic": ["list.ionic.css"]
         };
     }
     static get properties() {
@@ -88,6 +106,23 @@ export class List {
                 "attribute": "inset",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'soft' | 'round' | 'rectangular'",
+                    "resolved": "\"rectangular\" | \"round\" | \"soft\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to `\"soft\"` for slightly rounded corners,\n`\"round\"` for fully rounded corners,\nor `\"rectangular\"` for no rounded corners.\n\nDefaults to `\"round\"` for the `ionic` theme\nwhen inset is `true`\ndefaults to `\"rectangular\"` for the `ionic`\ntheme when inset is `false`,\nundefined for all other themes."
+                },
+                "attribute": "shape",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/list/list.md.css

@@ -230,8 +230,8 @@ ion-list.list-inset {
  * These selectors ensure the last item in the list
  * has the correct border.
  * We need to consider the following scenarios:
- 1. The last item in a list as long as it is not the only item.
- 2. The item in the last item-sliding in a list.
+ * 1. The last item in a list as long as it is not the only item.
+ * 2. The item in the last item-sliding in a list.
  * Note that we do not select "ion-item-sliding ion-item:last-of-type"
  * because that will cause the borders to disappear on
  * items in an item-sliding when the item is the last

package/dist/collection/components/list/test/shape/list.e2e.js

@@ -0,0 +1,204 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('list: shape'), () => {
+        test.describe(title('shape: round'), () => {
+            test('should render without header', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="round">
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, config);
+                const listWrapper = page.locator('.wrapper');
+                await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-round-without-header`));
+            });
+            test('should render with header', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="round">
+                <ion-list-header>
+                  <ion-label>Header</ion-label>
+                </ion-list-header>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, config);
+                const listWrapper = page.locator('.wrapper');
+                await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-round-with-header`));
+            });
+        });
+        test.describe(title('shape: soft'), () => {
+            test('should render without header', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="soft">
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, config);
+                const listWrapper = page.locator('.wrapper');
+                await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-soft-without-header`));
+            });
+            test('should render with header', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="soft">
+                <ion-list-header>
+                  <ion-label>Header</ion-label>
+                </ion-list-header>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, config);
+                const listWrapper = page.locator('.wrapper');
+                await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-soft-with-header`));
+            });
+        });
+        test.describe(title('shape: rectangular'), () => {
+            test('should render without header', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="rectangular">
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, config);
+                const listWrapper = page.locator('.wrapper');
+                await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-rectangular-without-header`));
+            });
+            test('should render with header', async ({ page }) => {
+                await page.setContent(`
+          <style>
+            ion-content {
+              --background: #e5e5e5;
+            }
+          </style>
+
+          <ion-content>
+            <div class="wrapper" style="display: flex">
+              <ion-list inset="true" style="width: 100%" shape="rectangular">
+                <ion-list-header>
+                  <ion-label>Header</ion-label>
+                </ion-list-header>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+                <ion-item>
+                  <ion-label>
+                    Title
+                    <p>Subtitle</p>
+                  </ion-label>
+                </ion-item>
+              </ion-list>
+            </div>
+          </ion-content>
+        `, config);
+                const listWrapper = page.locator('.wrapper');
+                await expect(listWrapper).toHaveScreenshot(screenshot(`list-shape-rectangular-with-header`));
+            });
+        });
+    });
+});