@ionic/core 7.7.4 → 8.0.0-beta.1

package/dist/collection/components/{picker-internal/test/keyboard-entry/picker-internal.e2e.js → picker/test/keyboard-entry/picker.e2e.js}

@@ -7,43 +7,50 @@ import { configs, test } from "../../../../utils/test/playwright/index";
  * This behavior does not vary across modes/directions.
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-    test.describe(title('picker-internal: keyboard entry'), () => {
+    test.describe(title('picker: keyboard entry'), () => {
         test('should scroll to and update the value prop for a single column', async ({ page }) => {
             await page.setContent(`
-        <ion-picker-internal>
-          <ion-picker-column-internal></ion-picker-column-internal>
-        </ion-picker-internal>
+        <ion-picker>
+          <ion-picker-column></ion-picker-column>
+        </ion-picker>
 
         <script>
-          const column = document.querySelector('ion-picker-column-internal');
-          column.items = [
+          const column = document.querySelector('ion-picker-column');
+          column.numericInput = true;
+          const items = [
             { text: '01', value: 1 },
             { text: '02', value: 2 },
             { text: '03', value: 3 },
             { text: '04', value: 4 },
             { text: '05', value: 5 }
           ];
-          column.value = 5;
-          column.numericInput = true;
+
+          items.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            column.appendChild(option);
+          });
         </script>
       `, config);
-            const column = page.locator('ion-picker-column-internal');
+            const column = page.locator('ion-picker-column');
             const ionChange = await page.spyOnEvent('ionChange');
-            await column.focus();
+            await column.evaluate((el) => el.setFocus());
             await page.keyboard.press('Digit2');
-            await expect(ionChange).toHaveReceivedEventDetail({ text: '02', value: 2 });
+            await expect(ionChange).toHaveReceivedEventDetail({ value: 2 });
             await expect(column).toHaveJSProperty('value', 2);
         });
         test('should scroll to and update the value prop for multiple columns', async ({ page }) => {
             await page.setContent(`
-        <ion-picker-internal>
-          <ion-picker-column-internal id="first"></ion-picker-column-internal>
-          <ion-picker-column-internal id="second"></ion-picker-column-internal>
-        </ion-picker-internal>
+        <ion-picker>
+          <ion-picker-column id="first"></ion-picker-column>
+          <ion-picker-column id="second"></ion-picker-column>
+        </ion-picker>
 
         <script>
-          const firstColumn = document.querySelector('ion-picker-column-internal#first');
-          firstColumn.items = [
+          const firstColumn = document.querySelector('ion-picker-column#first');
+          const firstItems = [
             { text: '01', value: 1 },
             { text: '02', value: 2 },
             { text: '03', value: 3 },
@@ -53,8 +60,16 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           firstColumn.value = 5;
           firstColumn.numericInput = true;
 
-          const secondColumn = document.querySelector('ion-picker-column-internal#second');
-          secondColumn.items = [
+          firstItems.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            firstColumn.appendChild(option);
+          });
+
+          const secondColumn = document.querySelector('ion-picker-column#second');
+          const secondItems = [
             { text: '20', value: 20 },
             { text: '21', value: 21 },
             { text: '22', value: 22 },
@@ -63,11 +78,19 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ];
           secondColumn.value = 22;
           secondColumn.numericInput = true;
+
+          secondItems.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            secondColumn.appendChild(option);
+          });
         </script>
       `, config);
-            const firstColumn = page.locator('ion-picker-column-internal#first');
-            const secondColumn = page.locator('ion-picker-column-internal#second');
-            const highlight = page.locator('ion-picker-internal .picker-highlight');
+            const firstColumn = page.locator('ion-picker-column#first');
+            const secondColumn = page.locator('ion-picker-column#second');
+            const highlight = page.locator('ion-picker .picker-highlight');
             const firstIonChange = await firstColumn.spyOnEvent('ionChange');
             const secondIonChange = await secondColumn.spyOnEvent('ionChange');
             const box = await highlight.boundingBox();
@@ -77,21 +100,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
             await expect(firstColumn).toHaveClass(/picker-column-active/);
             await expect(secondColumn).toHaveClass(/picker-column-active/);
             await page.keyboard.press('Digit2');
-            await expect(firstIonChange).toHaveReceivedEventDetail({ text: '02', value: 2 });
+            await expect(firstIonChange).toHaveReceivedEventDetail({ value: 2 });
             await expect(firstColumn).toHaveJSProperty('value', 2);
             await page.keyboard.press('Digit2+Digit4');
-            await expect(secondIonChange).toHaveReceivedEventDetail({ text: '24', value: 24 });
+            await expect(secondIonChange).toHaveReceivedEventDetail({ value: 24 });
             await expect(secondColumn).toHaveJSProperty('value', 24);
         });
         test('should select 00', async ({ page }) => {
             await page.setContent(`
-        <ion-picker-internal>
-          <ion-picker-column-internal></ion-picker-column-internal>
-        </ion-picker-internal>
+        <ion-picker>
+          <ion-picker-column></ion-picker-column>
+        </ion-picker>
 
         <script>
-          const column = document.querySelector('ion-picker-column-internal');
-          column.items = [
+          const column = document.querySelector('ion-picker-column');
+          const items = [
             { text: '00', value: 12 },
             { text: '01', value: 1 },
             { text: '02', value: 2 },
@@ -101,13 +124,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ];
           column.value = 5;
           column.numericInput = true;
+
+          items.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            column.appendChild(option);
+          });
         </script>
       `, config);
-            const column = page.locator('ion-picker-column-internal');
+            const column = page.locator('ion-picker-column');
             const ionChange = await page.spyOnEvent('ionChange');
-            await column.focus();
+            await column.evaluate((el) => el.setFocus());
             await page.keyboard.press('Digit0');
-            await expect(ionChange).toHaveReceivedEventDetail({ text: '00', value: 12 });
+            await expect(ionChange).toHaveReceivedEventDetail({ value: 12 });
             await expect(column).toHaveJSProperty('value', 12);
         });
         test('pressing Enter should dismiss the keyboard', async ({ page }) => {
@@ -116,27 +147,33 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
                 description: 'https://github.com/ionic-team/ionic-framework/issues/28325',
             });
             await page.setContent(`
-        <ion-picker-internal>
-          <ion-picker-column-internal></ion-picker-column-internal>
-        </ion-picker-internal>
+        <ion-picker>
+          <ion-picker-column></ion-picker-column>
+        </ion-picker>
 
         <script>
-          const column = document.querySelector('ion-picker-column-internal');
-          column.items = [
-            { text: '00', value: 12 },
+          const column = document.querySelector('ion-picker-column');
+          column.numericInput = true;
+          const items = [
             { text: '01', value: 1 },
             { text: '02', value: 2 },
             { text: '03', value: 3 },
             { text: '04', value: 4 },
             { text: '05', value: 5 }
           ];
-          column.value = 5;
-          column.numericInput = true;
+
+          items.forEach((item) => {
+            const option = document.createElement('ion-picker-column-option');
+            option.value = item.value;
+            option.textContent = item.text;
+
+            column.appendChild(option);
+          });
         </script>
       `, config);
-            const column = page.locator('ion-picker-column-internal');
+            const column = page.locator('ion-picker-column');
             await column.click();
-            const input = page.locator('ion-picker-internal input');
+            const input = page.locator('ion-picker input');
             await expect(input).toBeFocused();
             // pressing Enter should blur the input and therefore close the keyboard
             await page.keyboard.press('Enter');

package/dist/collection/components/{picker-column-internal/picker-column-internal.md.css → picker-column/picker-column.css}

@@ -54,15 +54,48 @@
  * }
  */
 :host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  height: 200px;
+  font-size: 22px;
+  text-align: center;
+}
+
+.picker-opts {
+  /**
+   * This padding must be set here and not on the
+   * host to ensure that the focus highlight on the
+   * column is not overly narrow.
+   */
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;
   -webkit-padding-end: 16px;
   padding-inline-end: 16px;
   padding-top: 0px;
   padding-bottom: 0px;
-  height: 200px;
+  /**
+   * When using reactive data, such as in datetime's
+   * wheel picker, there may be layout shifts between
+   * individual columns in a picker as the columns
+   * shrink to fit the widest item in the column.
+   * Setting a minimum width avoids this layout shifting.
+   *
+   * Note that we need this min-width set on the same
+   * element as the vertical padding (i.e. not on the
+   * host).
+   */
+  min-width: 26px;
+  max-height: 200px;
   outline: none;
-  font-size: 22px;
+  /**
+   * Added so that text-align can be set on the host
+   * from external components. For example, datetime
+   * changes the alignment of specific columns in its
+   * wheel pickers.
+   */
+  text-align: inherit;
   scroll-snap-type: y mandatory;
   /**
    * Need to explicitly set overflow-x: hidden
@@ -71,17 +104,9 @@
   overflow-x: hidden;
   overflow-y: scroll;
   scrollbar-width: none;
-  text-align: center;
 }
 
-/**
- * Hide scrollbars on Chrome and Safari
- */
-:host::-webkit-scrollbar {
-  display: none;
-}
-
-:host .picker-item {
+.picker-item-empty {
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -103,94 +128,82 @@
   text-align: inherit;
   text-overflow: ellipsis;
   white-space: nowrap;
-  cursor: pointer;
   overflow: hidden;
-  scroll-snap-align: center;
 }
 
-:host .picker-item-empty,
-:host .picker-item[disabled] {
-  cursor: default;
+/**
+ * Hide scrollbars on Chrome and Safari
+ */
+.picker-opts::-webkit-scrollbar {
+  display: none;
 }
 
-:host .picker-item-empty,
-:host(:not([disabled])) .picker-item[disabled] {
+::slotted(ion-picker-column-option) {
+  display: block;
+  scroll-snap-align: center;
+}
+
+.picker-item-empty,
+:host(:not([disabled])) ::slotted(ion-picker-column-option.option-disabled) {
   scroll-snap-align: none;
 }
 
-:host([disabled]) {
-  overflow-y: hidden;
+::slotted([slot=prefix]), ::slotted([slot=suffix]) {
+  max-width: 200px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
-:host .picker-item[disabled] {
-  opacity: 0.4;
+::slotted([slot=prefix]) {
+  /**
+   * This is added in addition to the column's own padding so that there is white
+   * space between the slot and the column's focus highlight.
+   */
+  -webkit-padding-start: 16px;
+  padding-inline-start: 16px;
+  -webkit-padding-end: 16px;
+  padding-inline-end: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+  justify-content: end;
 }
 
-:host(.picker-column-active) .picker-item.picker-item-active {
-  color: var(--ion-color-base);
+::slotted([slot=suffix]) {
+  /**
+   * This is added in addition to the column's own padding so that there is white
+   * space between the slot and the column's focus highlight.
+   */
+  -webkit-padding-start: 16px;
+  padding-inline-start: 16px;
+  -webkit-padding-end: 16px;
+  padding-inline-end: 16px;
+  padding-top: 0;
+  padding-bottom: 0;
+  justify-content: start;
+}
+
+:host(.picker-column-disabled) .picker-opts {
+  overflow-y: hidden;
+}
+
+/**
+ * When the column is disabled, none of the options
+ * should be interactive. However, we do not disable
+ * the buttons because that would require overriding the
+ * app's preference for each option. In this case,
+ * the picker column interactive as a whole is
+ * disabled, not individual options.
+ */
+:host(.picker-column-disabled) ::slotted(ion-picker-column-option) {
+  cursor: default;
+  opacity: 0.4;
+  pointer-events: none;
 }
 
 @media (any-hover: hover) {
-  :host(:focus) {
+  :host(:focus) .picker-opts {
     outline: none;
     background: rgba(var(--ion-color-base-rgb), 0.2);
   }
-}
-/**
- * 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 .picker-item-active {
-  color: var(--ion-color-base);
 }