Skip to content

Commit 97d6fac

Browse files
brandyscarneybrandyscarney
committed
refactor(datetime): remove usage of ion-buttons and phosphor icons
1 parent 0361bf0 commit 97d6fac

File tree

7 files changed

+138
-95
lines changed

7 files changed

+138
-95
lines changed

‎core/src/components/datetime/datetime.common.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160
width: 100%;
161161
}
162162

163-
:host .datetime-action-buttons ion-buttons,
163+
:host .datetime-action-buttons,
164164
/**
165165
* The confirm and clear buttons are grouped in a
166166
* container so that they appear on the end opposite

‎core/src/components/datetime/datetime.ionic.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,14 +227,14 @@
227227
);
228228
}
229229

230-
:host .datetime-buttons ion-buttons,
230+
:host .datetime-buttons .datetime-action-buttons,
231231
.datetime-action-buttons .datetime-action-buttons-container {
232232
flex-flow: column;
233233
align-items: stretch;
234234
gap: globals.$ion-space-200;
235235
}
236236

237-
:host .datetime-buttons ion-buttons ion-button {
237+
:host .datetime-buttons ion-button {
238238
@include globals.typography(globals.$ion-body-action-md);
239239

240240
min-height: globals.$ion-space-1200;

‎core/src/components/datetime/datetime.ios.scss‎

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,16 +55,41 @@
5555
}
5656

5757
:host .calendar-action-buttons .calendar-month-year-toggle ion-icon,
58-
:host .calendar-action-buttons ion-buttons ion-button {
58+
:host .calendar-action-buttons ion-button {
5959
color: current-color(base);
6060
}
6161

62-
:host .calendar-action-buttons ion-buttons {
62+
:host .calendar-action-buttons ion-button {
63+
@include margin(0, 0, 0, 0);
64+
}
65+
66+
:host .calendar-next-prev {
6367
@include padding($datetime-ios-padding * 0.5, 0, 0, 0);
6468
}
6569

66-
:host .calendar-action-buttons ion-buttons ion-button {
67-
@include margin(0, 0, 0, 0);
70+
// These styles are copied from buttons.ios.scss
71+
.calendar-next-prev ion-button {
72+
--padding-top: 0;
73+
--padding-bottom: 0;
74+
--padding-start: 5px;
75+
--padding-end: 5px;
76+
77+
@include margin-horizontal(2px, 2px);
78+
79+
min-height: 32px;
80+
}
81+
82+
// These styles are copied from buttons.ios.scss
83+
.calendar-next-prev ion-button ion-icon[slot="icon-only"] {
84+
@include padding(0);
85+
@include margin(0);
86+
87+
// This value is calculated by dividing the font size the
88+
// icon should be in px (28px) by the font size of its
89+
// parent button (17px). e.g. 28 / 17 = 1.647
90+
font-size: 1.65em;
91+
92+
line-height: 0.67;
6893
}
6994

7095
// Calendar / Header / Days of Week
@@ -297,6 +322,7 @@
297322

298323
// Footer
299324
// -----------------------------------
325+
300326
:host .datetime-buttons {
301327
@include padding(
302328
$datetime-ios-padding * 0.5,
@@ -308,8 +334,7 @@
308334
border-top: $datetime-ios-border-color;
309335
}
310336

311-
:host .datetime-buttons ::slotted(ion-buttons),
312-
:host .datetime-buttons ion-buttons {
337+
:host .datetime-buttons {
313338
display: flex;
314339

315340
align-items: center;
@@ -319,3 +344,15 @@
319344
:host .datetime-action-buttons {
320345
width: 100%;
321346
}
347+
348+
// These styles are copied from buttons.ios.scss
349+
:host .datetime-action-buttons ion-button {
350+
--padding-top: 3px;
351+
--padding-bottom: 3px;
352+
--padding-start: 5px;
353+
--padding-end: 5px;
354+
355+
@include margin(0px, 2px, 0px, 2px);
356+
357+
min-height: 32px;
358+
}

‎core/src/components/datetime/datetime.md.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,28 @@
4343
--color: #{$text-color-step-350};
4444
}
4545

46+
// These styles are copied from buttons.md.scss
47+
.calendar-next-prev ion-button {
48+
--padding-top: 12px;
49+
--padding-end: 12px;
50+
--padding-bottom: 12px;
51+
--padding-start: 12px;
52+
--border-radius: 50%;
53+
54+
@include margin(0);
55+
56+
width: 3rem;
57+
height: 3rem;
58+
}
59+
60+
// These styles are copied from buttons.md.scss
61+
.calendar-next-prev ion-button ion-icon[slot="icon-only"] {
62+
@include padding(0);
63+
@include margin(0);
64+
65+
font-size: 1.8em;
66+
}
67+
4668
.calendar-month-year-toggle {
4769
@include padding(12px, 16px, 12px, #{$datetime-md-header-padding});
4870

@@ -166,6 +188,7 @@
166188

167189
// Footer
168190
// -----------------------------------
191+
169192
:host .datetime-buttons {
170193
@include padding(10px, 10px, 10px, 10px);
171194

@@ -175,3 +198,16 @@
175198

176199
justify-content: flex-end;
177200
}
201+
202+
// These styles are copied from buttons.md.scss
203+
:host .datetime-action-buttons ion-button {
204+
--padding-top: 3px;
205+
--padding-bottom: 3px;
206+
--padding-start: 8px;
207+
--padding-end: 8px;
208+
--box-shadow: none;
209+
210+
@include margin(0px, 2px, 0px, 2px);
211+
212+
min-height: 32px;
213+
}

‎core/src/components/datetime/datetime.native.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,6 @@ ion-picker {
128128
// Calendar / Footer / Action Buttons
129129
// -----------------------------------
130130

131-
:host .datetime-action-buttons ion-buttons {
131+
:host .datetime-action-buttons {
132132
justify-content: space-between;
133133
}

‎core/src/components/datetime/datetime.tsx‎

Lines changed: 53 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import caretLeftRegular from '@phosphor-icons/core/assets/regular/caret-left.svg';
2-
import caretRightRegular from '@phosphor-icons/core/assets/regular/caret-right.svg';
31
import type { ComponentInterface, EventEmitter } from '@stencil/core';
42
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, writeTask } from '@stencil/core';
53
import { startFocusVisible } from '@utils/focus-visible';
@@ -1519,7 +1517,7 @@ export class Datetime implements ComponentInterface {
15191517
* is disabled or readonly.
15201518
*/
15211519
const isButtonDisabled = disabled || readonly;
1522-
const confirmFill = theme === 'ionic' ? 'solid' : undefined;
1520+
const confirmFill = theme === 'ionic' ? 'solid' : 'clear';
15231521
const hasSlottedButtons = this.el.querySelector('[slot="buttons"]') !== null;
15241522
if (!hasSlottedButtons && !showDefaultButtons && !showClearButton) {
15251523
return;
@@ -1547,41 +1545,41 @@ export class Datetime implements ComponentInterface {
15471545
}}
15481546
>
15491547
<slot name="buttons">
1550-
<ion-buttons>
1548+
{showDefaultButtons && (
1549+
<ion-button
1550+
id="cancel-button"
1551+
fill="clear"
1552+
color={this.color}
1553+
onClick={() => this.cancel(true)}
1554+
disabled={isButtonDisabled}
1555+
>
1556+
{this.cancelText}
1557+
</ion-button>
1558+
)}
1559+
<div class="datetime-action-buttons-container">
1560+
{showClearButton && (
1561+
<ion-button
1562+
id="clear-button"
1563+
fill="clear"
1564+
color={this.color}
1565+
onClick={() => clearButtonClick()}
1566+
disabled={isButtonDisabled}
1567+
>
1568+
{this.clearText}
1569+
</ion-button>
1570+
)}
15511571
{showDefaultButtons && (
15521572
<ion-button
1553-
id="cancel-button"
1573+
id="confirm-button"
1574+
fill={confirmFill}
15541575
color={this.color}
1555-
onClick={() => this.cancel(true)}
1576+
onClick={() => this.confirm(true)}
15561577
disabled={isButtonDisabled}
15571578
>
1558-
{this.cancelText}
1579+
{this.doneText}
15591580
</ion-button>
15601581
)}
1561-
<div class="datetime-action-buttons-container">
1562-
{showClearButton && (
1563-
<ion-button
1564-
id="clear-button"
1565-
color={this.color}
1566-
onClick={() => clearButtonClick()}
1567-
disabled={isButtonDisabled}
1568-
>
1569-
{this.clearText}
1570-
</ion-button>
1571-
)}
1572-
{showDefaultButtons && (
1573-
<ion-button
1574-
id="confirm-button"
1575-
color={this.color}
1576-
onClick={() => this.confirm(true)}
1577-
disabled={isButtonDisabled}
1578-
fill={confirmFill}
1579-
>
1580-
{this.doneText}
1581-
</ion-button>
1582-
)}
1583-
</div>
1584-
</ion-buttons>
1582+
</div>
15851583
</slot>
15861584
</div>
15871585
</div>
@@ -2156,28 +2154,26 @@ export class Datetime implements ComponentInterface {
21562154
</div>
21572155

21582156
<div class="calendar-next-prev">
2159-
<ion-buttons>
2160-
<ion-button aria-label="Previous month" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
2161-
<ion-icon
2162-
dir={hostDir}
2163-
aria-hidden="true"
2164-
slot="icon-only"
2165-
icon={datetimePreviousIcon}
2166-
lazy={false}
2167-
flipRtl
2168-
></ion-icon>
2169-
</ion-button>
2170-
<ion-button aria-label="Next month" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
2171-
<ion-icon
2172-
dir={hostDir}
2173-
aria-hidden="true"
2174-
slot="icon-only"
2175-
icon={datetimeNextIcon}
2176-
lazy={false}
2177-
flipRtl
2178-
></ion-icon>
2179-
</ion-button>
2180-
</ion-buttons>
2157+
<ion-button aria-label="Previous month" fill="clear" disabled={prevMonthDisabled} onClick={() => this.prevMonth()}>
2158+
<ion-icon
2159+
dir={hostDir}
2160+
aria-hidden="true"
2161+
slot="icon-only"
2162+
icon={datetimePreviousIcon}
2163+
lazy={false}
2164+
flipRtl
2165+
></ion-icon>
2166+
</ion-button>
2167+
<ion-button aria-label="Next month" fill="clear" disabled={nextMonthDisabled} onClick={() => this.nextMonth()}>
2168+
<ion-icon
2169+
dir={hostDir}
2170+
aria-hidden="true"
2171+
slot="icon-only"
2172+
icon={datetimeNextIcon}
2173+
lazy={false}
2174+
flipRtl
2175+
></ion-icon>
2176+
</ion-button>
21812177
</div>
21822178
</div>
21832179
<div class="calendar-days-of-week" aria-hidden="true">
@@ -2621,45 +2617,19 @@ export class Datetime implements ComponentInterface {
26212617
}
26222618

26232619
/**
2624-
* Get the icon to use for the next icon.
2625-
* Otherwise, use the icon set in the config.
2620+
* Get the next month icon from the config.
26262621
* If no icon is set in the config, use the default icon.
26272622
*/
26282623
get datetimeNextIcon(): string {
2629-
// Determine the theme and map to default icons
2630-
const theme = getIonTheme(this);
2631-
const defaultIcons = {
2632-
ios: chevronForward,
2633-
ionic: caretRightRegular,
2634-
md: chevronForward,
2635-
};
2636-
2637-
// Get the default icon based on the theme, falling back to 'md' icon if necessary
2638-
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
2639-
2640-
// Return the configured datetime next icon or the default icon
2641-
return config.get('datetimeNextIcon', defaultIcon);
2624+
return config.get('datetimeNextIcon', chevronForward);
26422625
}
26432626

26442627
/**
2645-
* Get the icon to use for the previous icon.
2646-
* Otherwise, use the icon set in the config.
2628+
* Get the previous month icon from the config.
26472629
* If no icon is set in the config, use the default icon.
26482630
*/
26492631
get datetimePreviousIcon(): string {
2650-
// Determine the theme and map to default icons
2651-
const theme = getIonTheme(this);
2652-
const defaultIcons = {
2653-
ios: chevronBack,
2654-
ionic: caretLeftRegular,
2655-
md: chevronBack,
2656-
};
2657-
2658-
// Get the default icon based on the theme, falling back to 'md' icon if necessary
2659-
const defaultIcon = defaultIcons[theme] || defaultIcons.md;
2660-
2661-
// Return the configured datetime previous icon or the default icon
2662-
return config.get('datetimePreviousIcon', defaultIcon);
2632+
return config.get('datetimePreviousIcon', chevronBack);
26632633
}
26642634

26652635
/**

‎core/src/components/datetime/test/basic/datetime.e2e.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -296,9 +296,9 @@ configs({ modes: ['ios', 'md', 'ionic-md'] }).forEach(({ title, screenshot, conf
296296
await page.setContent(
297297
`
298298
<ion-datetime value="2022-05-03">
299-
<ion-buttons slot="buttons">
299+
<div slot="buttons">
300300
<ion-button id="custom-button" color="primary">Hello!</ion-button>
301-
</ion-buttons>
301+
</div>
302302
</ion-datetime>
303303
`,
304304
config

0 commit comments

Comments
 (0)