feat(datetime-button): add support for custom, disabled, and accessible buttons (#25622)

Author: liamdebeasi

core/api.txt

@@ -414,6 +414,7 @@ ion-datetime-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary
 ion-datetime-button,prop,datetime,string | undefined,undefined,false,false
 ion-datetime-button,prop,disabled,boolean,false,false,true
 ion-datetime-button,prop,mode,"ios" | "md",undefined,false,false
+ion-datetime-button,part,native
 
 ion-fab,shadow
 ion-fab,prop,activated,boolean,false,false,false

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

@@ -16,6 +16,8 @@
   @include padding(6px, 12px, 6px, 12px);
   @include margin(0px, 2px, 0px, 2px);
 
+  position: relative;
+
   transition: 150ms color ease-in-out;
 
   border: none;
@@ -30,9 +32,19 @@
   cursor: pointer;
 
   appearance: none;
+
+  overflow: hidden;
 }
 
 :host(.time-active) #time-button,
 :host(.date-active) #date-button {
   color: current-color(base);
 }
+
+:host(.datetime-button-disabled) {
+  pointer-events: none;
+}
+
+:host(.datetime-button-disabled) button {
+  opacity: 0.4;
+}

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

@@ -15,6 +15,8 @@ import { parseDate } from '../datetime/utils/parse';
  *
  * @slot date-target - Content displayed inside of the date button.
  * @slot time-target - Content displayed inside of the time button.
+ *
+ * @part native - The native HTML button that wraps the slotted text.
  */
 @Component({
   tag: 'ion-datetime-button',
@@ -254,7 +256,7 @@ export class DatetimeButton implements ComponentInterface {
   };
 
   render() {
-    const { color, dateText, timeText, selectedButton, datetimeActive } = this;
+    const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
 
     const mode = getIonMode(this);
 
@@ -263,31 +265,35 @@ export class DatetimeButton implements ComponentInterface {
         class={createColorClasses(color, {
           [mode]: true,
           [`${selectedButton}-active`]: datetimeActive,
+          ['datetime-button-disabled']: disabled,
         })}
       >
         {dateText && (
-          <div class="date-target-container" onClick={() => this.handleDateClick()}>
-            <slot name="date-target">
-              {/*
-                The button is added inside of the <slot> so that
-                devs do not create nested interactives if they
-                decide to add in a custom ion-button.
-              */}
-              <button id="date-button" aria-expanded={datetimeActive ? 'true' : 'false'}>
-                {dateText}
-              </button>
-            </slot>
-          </div>
+          <button
+            class="ion-activatable"
+            id="date-button"
+            aria-expanded={datetimeActive ? 'true' : 'false'}
+            onClick={() => this.handleDateClick()}
+            disabled={disabled}
+            part="native"
+          >
+            <slot name="date-target">{dateText}</slot>
+            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+          </button>
         )}
 
         {timeText && (
-          <div class="time-target-container" onClick={() => this.handleTimeClick()}>
-            <slot name="time-target">
-              <button id="time-button" aria-expanded={datetimeActive ? 'true' : 'false'}>
-                {timeText}
-              </button>
-            </slot>
-          </div>
+          <button
+            class="ion-activatable"
+            id="time-button"
+            aria-expanded={datetimeActive ? 'true' : 'false'}
+            onClick={() => this.handleTimeClick()}
+            disabled={disabled}
+            part="native"
+          >
+            <slot name="time-target">{timeText}</slot>
+            {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+          </button>
         )}
       </Host>
     );

core/src/components/datetime-button/test/basic/datetime-button.e2e.ts

@@ -16,15 +16,15 @@ test.describe('datetime-button: switching to correct view', () => {
     const datetime = page.locator('ion-datetime');
     expect(datetime).toHaveJSProperty('presentation', 'date-time');
 
-    await page.locator('.date-target-container').click();
+    await page.locator('#date-button').click();
 
     expect(datetime).toHaveJSProperty('presentation', 'date');
   });
   test('should switch to a time-only view when the time button is clicked', async ({ page }) => {
     const datetime = page.locator('ion-datetime');
     expect(datetime).toHaveJSProperty('presentation', 'date-time');
 
-    await page.locator('.time-target-container').click();
+    await page.locator('#time-button').click();
 
     expect(datetime).toHaveJSProperty('presentation', 'time');
   });
@@ -43,8 +43,8 @@ test.describe('datetime-button: labels', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    await expect(page.locator('.date-target-container')).toContainText('Jan 1, 2022');
-    await expect(page.locator('.time-target-container')).toContainText('6:30 AM');
+    await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
+    await expect(page.locator('#time-button')).toContainText('6:30 AM');
   });
   test('should set only month and year', async ({ page }) => {
     await page.setContent(`
@@ -53,8 +53,8 @@ test.describe('datetime-button: labels', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    await expect(page.locator('.date-target-container')).toContainText('January 2022');
-    await expect(page.locator('.time-target-container')).toBeHidden();
+    await expect(page.locator('#date-button')).toContainText('January 2022');
+    await expect(page.locator('#time-button')).toBeHidden();
   });
   test('should set only year', async ({ page }) => {
     await page.setContent(`
@@ -63,8 +63,8 @@ test.describe('datetime-button: labels', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    await expect(page.locator('.date-target-container')).toContainText('2022');
-    await expect(page.locator('.time-target-container')).toBeHidden();
+    await expect(page.locator('#date-button')).toContainText('2022');
+    await expect(page.locator('#time-button')).toBeHidden();
   });
   test('should set only month', async ({ page }) => {
     await page.setContent(`
@@ -73,8 +73,8 @@ test.describe('datetime-button: labels', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    await expect(page.locator('.date-target-container')).toContainText('January');
-    await expect(page.locator('.time-target-container')).toBeHidden();
+    await expect(page.locator('#date-button')).toContainText('January');
+    await expect(page.locator('#time-button')).toBeHidden();
   });
   test('should set only time', async ({ page }) => {
     await page.setContent(`
@@ -83,8 +83,8 @@ test.describe('datetime-button: labels', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    await expect(page.locator('.date-target-container')).toBeHidden();
-    await expect(page.locator('.time-target-container')).toContainText('6:30 AM');
+    await expect(page.locator('#time-button')).toContainText('6:30 AM');
+    await expect(page.locator('#date-button')).toBeHidden();
   });
   test('should update the label when the value of the datetime changes', async ({ page }) => {
     await page.setContent(`
@@ -94,7 +94,7 @@ test.describe('datetime-button: labels', () => {
     await page.waitForSelector('.datetime-ready');
 
     const datetime = page.locator('ion-datetime');
-    const dateTarget = page.locator('.date-target-container');
+    const dateTarget = page.locator('#date-button');
 
     await expect(dateTarget).toContainText('Jan 1, 2022');
 
@@ -123,8 +123,8 @@ test.describe('datetime-button: locale', () => {
      * a period after "ene". Just checking ene allows us to verify the
      * behavior while avoiding these cross browser differences.
      */
-    await expect(page.locator('.date-target-container')).toContainText(/ene/);
-    await expect(page.locator('.time-target-container')).toContainText('6:30');
+    await expect(page.locator('#date-button')).toContainText(/ene/);
+    await expect(page.locator('#time-button')).toContainText('6:30');
   });
   test('should respect hour cycle even if different from locale default', async ({ page }) => {
     await page.setContent(`
@@ -133,7 +133,7 @@ test.describe('datetime-button: locale', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    await expect(page.locator('.time-target-container')).toContainText('16:30');
+    await expect(page.locator('#time-button')).toContainText('16:30');
   });
   test('should ignore the timezone when selecting a date', async ({ page }) => {
     await page.setContent(`
@@ -142,7 +142,7 @@ test.describe('datetime-button: locale', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    const timeTarget = page.locator('.time-target-container');
+    const timeTarget = page.locator('#time-button');
     await expect(timeTarget).toContainText('6:30');
 
     const firstOfMonth = page.locator('ion-datetime .calendar-day[data-month="1"][data-day="1"]');
@@ -168,8 +168,8 @@ test.describe('datetime-button: wheel', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    await expect(page.locator('.date-target-container')).toContainText('Jan 1, 2022 6:30 AM');
-    await expect(page.locator('.time-target-container')).not.toBeVisible();
+    await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
+    await expect(page.locator('#time-button')).not.toBeVisible();
   });
   test('should only show a single date button when presentation="time-date" and prefer-wheel="true"', async ({
     page,
@@ -180,7 +180,7 @@ test.describe('datetime-button: wheel', () => {
     `);
     await page.waitForSelector('.datetime-ready');
 
-    await expect(page.locator('.date-target-container')).toContainText('Jan 1, 2022 6:30 AM');
-    await expect(page.locator('.time-target-container')).not.toBeVisible();
+    await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
+    await expect(page.locator('#time-button')).not.toBeVisible();
   });
 });

core/src/components/datetime-button/test/buttons/index.html

@@ -20,12 +20,8 @@
         <ion-item>
           <ion-input value="March 15, 2022 at 12:43 AM"></ion-input>
           <ion-datetime-button slot="end" id="default-button" datetime="default-datetime">
-            <ion-button id="custom-date-button" slot="date-target" fill="clear">
-              <ion-icon slot="icon-only" name="calendar"></ion-icon>
-            </ion-button>
-            <ion-button id="custom-time-button" slot="time-target" fill="clear">
-              <ion-icon name="time"></ion-icon>
-            </ion-button>
+            <ion-icon color="primary" id="custom-date-button" slot="date-target" name="calendar"></ion-icon>
+            <ion-icon color="primary" id="custom-time-button" slot="time-target" name="time"></ion-icon>
           </ion-datetime-button>
         </ion-item>
 

core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts

@@ -0,0 +1,30 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime-button: disabled buttons', () => {
+  test('buttons should not be enabled when component is disabled', async ({ page }, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === 'rtl', 'No layout tests');
+    test.skip(testInfo.project.metadata.mode === 'ios', 'No mode-specific logic');
+
+    await page.setContent(`
+      <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
+      <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+    `);
+    await page.waitForSelector('.datetime-ready');
+
+    await expect(page.locator('#date-button')).toBeDisabled();
+    await expect(page.locator('#time-button')).toBeDisabled();
+  });
+  test('buttons should visually be disabled', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime-button datetime="datetime" disabled="true"></ion-datetime-button>
+      <ion-datetime id="datetime" presentation="date-time" value="2022-01-01T16:30:00"></ion-datetime>
+    `);
+    await page.waitForSelector('.datetime-ready');
+
+    const datetimeButton = page.locator('ion-datetime-button');
+    expect(await datetimeButton.screenshot()).toMatchSnapshot(
+      `datetime-button-disabled-${page.getSnapshotSettings()}.png`
+    );
+  });
+});

core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts-snapshots/datetime-button-disabled-ios-ltr-Mobile-Chrome-linux.png

@@ -57,18 +57,14 @@ <h2>Custom Button Disabled</h2>
 
             <ion-item>
               <ion-label>Start Date</ion-label>
-              <ion-datetime-button disabled="true" slot="end" id="year-button" datetime="year-datetime">
-                <ion-button disabled="true" id="custom-date-button" slot="date-target" fill="clear">
-                  <ion-icon slot="icon-only" name="calendar"></ion-icon>
-                </ion-button>
-                <ion-button disabled="true" id="custom-time-button" slot="time-target" fill="clear">
-                  <ion-icon name="time"></ion-icon>
-                </ion-button>
+              <ion-datetime-button disabled="true" slot="end" id="custom-button" datetime="custom-datetime">
+                <ion-icon color="primary" id="custom-date-button" slot="date-target" name="calendar"></ion-icon>
+                <ion-icon color="primary" id="custom-time-button" slot="time-target" name="time"></ion-icon>
               </ion-datetime-button>
             </ion-item>
 
-            <ion-popover arrow="false" trigger="year-button">
-              <ion-datetime locale="en-US" id="year-datetime" value="2022-03-15T00:43:00"></ion-datetime>
+            <ion-popover arrow="false" trigger="custom-button">
+              <ion-datetime locale="en-US" id="custom-datetime" value="2022-03-15T00:43:00"></ion-datetime>
             </ion-popover>
           </div>
         </div>