refactor(back-button): convert to shadow component (#19411)

references #18899

angular/src/providers/config.ts

@@ -33,7 +33,7 @@ export class Config {
   }
 
   set(key: keyof IonicConfig, value?: any) {
-    console.warn(`[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in the next major release.`);
+    console.warn(`[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in Ionic Framework 6.0. Please see https://ionicframework.com/docs/angular/config for alternatives.`);
     const c = getConfig();
     if (c) {
       c.set(key, value);

core/api.txt

@@ -77,7 +77,7 @@ ion-app,none
 ion-avatar,shadow
 ion-avatar,css-prop,--border-radius
 
-ion-back-button,scoped
+ion-back-button,shadow
 ion-back-button,prop,color,string | undefined,undefined,false,false
 ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
 ion-back-button,prop,disabled,boolean,false,false,true

core/src/components/back-button/back-button.scss

@@ -102,7 +102,6 @@
 // Back Button States
 // --------------------------------------------------
 
-:host-context(.can-go-back > ion-header),
 :host(.show-back-button) {
   display: block;
 }

core/src/components/back-button/back-button.tsx

@@ -15,7 +15,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
     ios: 'back-button.ios.scss',
     md: 'back-button.md.scss'
   },
-  scoped: true
+  shadow: true
 })
 export class BackButton implements ComponentInterface, ButtonInterface {
 
@@ -106,10 +106,10 @@ export class BackButton implements ComponentInterface, ButtonInterface {
           'show-back-button': showBackButton
         }}
       >
-        <button type={type} disabled={disabled} class="button-native">
+        <button type={type} disabled={disabled} class="button-native" part="button">
           <span class="button-inner">
-            {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
-            {backButtonText && <span class="button-text">{backButtonText}</span>}
+            {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false} part="icon"></ion-icon>}
+            {backButtonText && <span class="button-text" part="text">{backButtonText}</span>}
           </span>
           {mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
         </button>

core/src/components/item/item.scss

@@ -404,7 +404,6 @@ button, a {
   position: relative;
 }
 
-
 // Item Textarea
 // --------------------------------------------------
 

core/src/components/item/item.tsx

@@ -136,9 +136,14 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     // input cover on top of those interfering with their clicks
     const inputs = this.el.querySelectorAll('ion-input, ion-range, ion-searchbar, ion-segment, ion-textarea, ion-toggle');
 
+    // The following elements should also stay clickable when an input with cover is present
+    const clickables = this.el.querySelectorAll('ion-anchor, ion-button, a, button');
+
     // Check for multiple inputs to change the position of the input cover to relative
     // for all of the covered inputs above
-    this.multipleInputs = covers.length + inputs.length > 1;
+    this.multipleInputs = covers.length + inputs.length > 1
+      || covers.length + clickables.length > 1
+      || covers.length > 0 && this.isClickable();
   }
 
   // If the item contains an input including a checkbox, datetime, select, or radio

core/src/components/item/test/inputs/e2e.ts

@@ -2,12 +2,15 @@ import { E2EPage, newE2EPage } from '@stencil/core/testing';
 
 test('item: inputs', async () => {
   const page = await newE2EPage({
-    url: '/src/components/item/test/inputs?ionic:_testing=true'
+    url: '/src/components/item/test/inputs?ionic:_testing=true',
   });
 
   // check form
   await page.click('#submit');
-  await checkFormResult(page, '{"date":"","select":"n64","toggle":"","input":"","input2":"","checkbox":"","range":"10"}');
+  await checkFormResult(
+    page,
+    '{"date":"","select":"n64","toggle":"","input":"","input2":"","checkbox":"","range":"10"}'
+  );
   await page.waitFor(100);
 
   // Default case, enabled and no value
@@ -22,6 +25,7 @@ test('item: inputs', async () => {
 
   // check form
   await page.click('#submit');
+  await page.waitFor(100);
   await checkFormResult(page, '{}');
   await page.waitFor(100);
 
@@ -36,7 +40,10 @@ test('item: inputs', async () => {
 
   // check form
   await page.click('#submit');
-  await checkFormResult(page, '{"date":"2016-12-09","select":"nes","toggle":"on","input":"Some text","input2":"Some text","checkbox":"on","range":"20"}');
+  await checkFormResult(
+    page,
+    '{"date":"2016-12-09","select":"nes","toggle":"on","input":"Some text","input2":"Some text","checkbox":"on","range":"20"}'
+  );
   await page.waitFor(100);
 
   compare = await page.compareScreenshot('should reenable and set value');
@@ -62,6 +69,22 @@ test('item: inputs', async () => {
 
   compare = await page.compareScreenshot('should set empty');
   expect(compare).toMatchScreenshot();
+
+  // Test multiple
+  await page.click('#checkbox-start');
+  await page.click('#datetime-end');
+  await page.waitFor(300);
+
+  compare = await page.compareScreenshot(
+    'should check checkbox and open datepicker'
+  );
+  expect(compare).toMatchScreenshot();
+
+  await page.click('#button-end');
+  await page.waitFor(100);
+
+  compare = await page.compareScreenshot('should change button color to red');
+  expect(compare).toMatchScreenshot();
 });
 
 const checkFormResult = async (page: E2EPage, content: string) => {

core/src/components/item/test/inputs/index.html

@@ -22,62 +22,62 @@
 
     <ion-content class="ion-padding-vertical">
       <form onsubmit="return onSubmit(event)">
-      <ion-list>
-        <ion-item>
-          <ion-label>Simple item</ion-label>
-        </ion-item>
+        <ion-list class="basic">
+          <ion-item>
+            <ion-label>Simple item</ion-label>
+          </ion-item>
 
-        <ion-item id="item" button onclick="testClick(event)">
-          <ion-label>Item Button</ion-label>
-        </ion-item>
+          <ion-item id="item" button onclick="testClick(event)">
+            <ion-label>Item Button</ion-label>
+          </ion-item>
 
-        <ion-item>
-          <ion-label>DateTime</ion-label>
-          <ion-datetime name="date" id="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
-        </ion-item>
+          <ion-item>
+            <ion-label>DateTime</ion-label>
+            <ion-datetime name="date" id="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
+          </ion-item>
 
-        <ion-item>
-          <ion-label>Select</ion-label>
-          <ion-select name="select" id="select">
-            <ion-select-option value="">No Game Console</ion-select-option>
-            <ion-select-option value="nes">NES</ion-select-option>
-            <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
-            <ion-select-option value="ps">PlayStation</ion-select-option>
-            <ion-select-option value="genesis">Sega Genesis</ion-select-option>
-            <ion-select-option value="saturn">Sega Saturn</ion-select-option>
-            <ion-select-option value="snes">SNES</ion-select-option>
-          </ion-select>
-        </ion-item>
+          <ion-item>
+            <ion-label>Select</ion-label>
+            <ion-select name="select" id="select">
+              <ion-select-option value="">No Game Console</ion-select-option>
+              <ion-select-option value="nes">NES</ion-select-option>
+              <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
+              <ion-select-option value="ps">PlayStation</ion-select-option>
+              <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+              <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+              <ion-select-option value="snes">SNES</ion-select-option>
+            </ion-select>
+          </ion-item>
 
-        <ion-item>
-          <ion-label>Toggle</ion-label>
-          <ion-toggle name="toggle" id="toggle" name="Actually" slot="end"></ion-toggle>
-        </ion-item>
+          <ion-item>
+            <ion-label>Toggle</ion-label>
+            <ion-toggle name="toggle" id="toggle" name="Actually" slot="end"></ion-toggle>
+          </ion-item>
 
-        <ion-item>
-          <ion-label>Input (text)</ion-label>
-          <ion-input name="input" id="text"></ion-input>
-        </ion-item>
+          <ion-item>
+            <ion-label>Input (text)</ion-label>
+            <ion-input name="input" id="text"></ion-input>
+          </ion-item>
 
-        <ion-item>
-          <ion-label>Input (placeholder)</ion-label>
-          <ion-input name="input2" id="placeholder" placeholder="Placeholder"></ion-input>
-        </ion-item>
+          <ion-item>
+            <ion-label>Input (placeholder)</ion-label>
+            <ion-input name="input2" id="placeholder" placeholder="Placeholder"></ion-input>
+          </ion-item>
 
-        <ion-item>
-          <ion-label>Checkbox</ion-label>
-          <ion-checkbox name="checkbox" id="checkbox" slot="start"></ion-checkbox>
-        </ion-item>
+          <ion-item>
+            <ion-label>Checkbox</ion-label>
+            <ion-checkbox name="checkbox" id="checkbox" slot="start"></ion-checkbox>
+          </ion-item>
 
-        <ion-item>
-          <ion-label>Range</ion-label>
-          <ion-range name="range" id="range" value="10"></ion-range>
-        </ion-item>
-      </ion-list>
+          <ion-item>
+            <ion-label>Range</ion-label>
+            <ion-range name="range" id="range" value="10"></ion-range>
+          </ion-item>
+        </ion-list>
 
-      <ion-button id="submit" type="submit">Submit</ion-button>
-      <p id="form-result"></p>
-    </form>
+        <ion-button id="submit" type="submit">Submit</ion-button>
+        <p id="form-result"></p>
+      </form>
 
       <ion-list>
         <ion-list-header>Controls</ion-list-header>
@@ -112,14 +112,66 @@
           Fixed
         </ion-item>
       </ion-list>
-    </ion-content>
 
+      <ion-list-header>Multiple inputs/clickables</ion-list-header>
+      <ion-list class="multiple">
+        <ion-item>
+          <ion-checkbox slot="start" id="checkbox-start"></ion-checkbox>
+          <ion-label>Multiple inputs w/ cover</ion-label>
+          <ion-datetime placeholder="startTime" display-format="HH:mm" id="datetime-end"></ion-datetime>
+          <ion-checkbox slot="end" id="checkbox-end"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-select slot="start" placeholder="month" id="select-start">
+            <ion-select-option value="1">January</ion-select-option>
+            <ion-select-option value="2">February</ion-select-option>
+            <ion-select-option value="3">March</ion-select-option>
+          </ion-select>
+          <ion-label>Input w/ clickable</ion-label>
+          <ion-button slot="end" id="button-end" onclick="setButtonColorRed()">Button</ion-button>
+        </ion-item>
+
+        <ion-item>
+          <ion-radio slot="start" id="radio-start"></ion-radio>
+          <ion-label>Input w/ cover + input</ion-label>
+          <ion-range value="45" id="range-end"></ion-range>
+        </ion-item>
+
+        <ion-item>
+          <ion-range value="60" id="range-start"></ion-range>
+          <ion-label>Multiple inputs w/o cover</ion-label>
+          <ion-toggle id="toggle-1-end"></ion-toggle>
+          <ion-toggle id="toggle-2-end"></ion-toggle>
+        </ion-item>
+
+        <ion-item button id="clickableItem">
+          <ion-label>Clickable item</ion-label>
+          <ion-checkbox slot="end"></ion-checkbox>
+        </ion-item>
+
+        <ion-item>
+          <ion-checkbox slot="start"></ion-checkbox>
+          <ion-label>Checkbox w/ disabled button</ion-label>
+          <ion-button slot="end" onclick="setButtonColorRed()" disabled>Button</ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-content>
   </ion-app>
 
   <script>
-    var ids = ['item', 'datetime', 'select', 'toggle', 'text', 'placeholder', 'checkbox', 'toggle', 'range']
+    var ids = ['item', 'datetime', 'select', 'toggle', 'text', 'placeholder', 'checkbox', 'toggle', 'range'];
     var isDisabled = false;
 
+    const clickableItem = document.querySelector('#clickableItem')
+
+    clickableItem.addEventListener('click', function() {
+      console.log('Clicked item', clickableItem);
+      const color = clickableItem.color;
+      clickableItem.color = color === undefined ? 'primary' : undefined;
+    });
+
+
     function toggleDisabled() {
       isDisabled = !isDisabled;
       Object.values(getInputs()).forEach(el => el.disabled = isDisabled);
@@ -171,7 +223,7 @@
     }
 
     function setLabelPosition(position) {
-      Array.from(document.querySelectorAll('ion-label'))
+      Array.from(document.querySelectorAll('ion-list.basic ion-label'))
         .forEach(label => label.position = position);
     }
 
@@ -197,6 +249,11 @@
       return false;
     }
 
+    function setButtonColorRed() {
+      const button = document.getElementById('button-end');
+      button.style.setProperty('--background', '#ff0000');
+    }
+
   </script>
 
 </html>

core/src/components/virtual-scroll/readme.md

@@ -82,7 +82,7 @@ how many items should be built. With "approx" property inputs, such as
 therefore allowing virtual scroll to decide how many items should be
 created.
 
-#### Changing dataset should use `virtualTrackBy`
+#### Changing dataset should use `trackBy`
 
 It is possible for the identities of elements in the iterator to change
 while the data does not. This can happen, for example, if the iterator

core/src/css/core.scss

@@ -103,6 +103,11 @@ ion-toast-controller,
   opacity: 0;
 }
 
+.can-go-back > ion-header ion-back-button {
+  display: block;
+}
+
+
 // Ionic Safe Margins
 // --------------------------------------------------
 

core/src/utils/transition/ios.transition.ts

@@ -99,8 +99,8 @@ const animateBackButton = (rootAnimation: Animation, rtl: boolean, backDirection
 
   const clonedBackButtonEl = getClonedElement('ion-back-button');
 
-  const backButtonTextEl = clonedBackButtonEl.querySelector('.button-text');
-  const backButtonIconEl = clonedBackButtonEl.querySelector('ion-icon');
+  const backButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
+  const backButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
 
   clonedBackButtonEl.text = backButtonEl.text;
   clonedBackButtonEl.mode = backButtonEl.mode;