feat(datetime): add preferWheel support for date presentation (#25422)

Author: liamdebeasi

.github/workflows/actions/build-angular/action.yml

@@ -13,14 +13,14 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json')}}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json')}}-v4
     - name: Cache Angular Node Modules
       uses: actions/cache@v2
       env:
         cache-name: angular-node-modules
       with:
         path: ./angular/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./angular/package-lock.json')}}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./angular/package-lock.json')}}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-core/action.yml

@@ -17,7 +17,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - name: Install Dependencies
       run: npm install
       working-directory: ./core

.github/workflows/actions/build-react-router/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - name: Install Dependencies
       run: npm install --legacy-peer-deps
       shell: bash

.github/workflows/actions/build-react/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-vue-router/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/build-vue/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-angular-e2e/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-core-e2e/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-core-lint/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - name: Lint
       run: npm run lint
       shell: bash

.github/workflows/actions/test-core-screenshot/action.yml

@@ -20,7 +20,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-core-spec/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-react-e2e/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

.github/workflows/actions/test-vue-e2e/action.yml

@@ -13,7 +13,7 @@ runs:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v2
+        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json') }}-v4
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core

core/src/components/datetime/datetime.scss

@@ -19,6 +19,19 @@
   overflow: hidden;
 }
 
+/**
+ * When using the wheel picker to switch
+ * between months, sometimes the allowed
+ * dates may be filtered. As a result, it
+ * is possible to get a layout shift as
+ * the picker column will shrink to fit the
+ * widest item in the column. Setting a minimum
+ * width avoids this layout shifting.
+ */
+ion-picker-column-internal {
+  min-width: 26px;
+}
+
 :host(.datetime-size-fixed) {
   width: auto;
   max-width: 350px;
@@ -58,21 +71,19 @@
  * the order we need to manually switch
  * the text alignment too.
  */
-:host .datetime-year .order-month-first .month-column {
-  order: 1;
-}
+:host .wheel-order-year-first .day-column {
+ order: 3;
 
-:host .datetime-year .order-month-first .year-column {
-  order: 2;
+ text-align: end;
 }
 
-:host .datetime-year .order-year-first .month-column {
+:host .wheel-order-year-first .month-column {
   order: 2;
 
   text-align: end;
 }
 
-:host .datetime-year .order-year-first .year-column {
+:host .wheel-order-year-first .year-column {
   order: 1;
 
   text-align: start;