Skip to content

Commit f73d03b

Browse files
thetaPCthetaPC
authored
Merge branch 'feature-8.8' into patch-3
2 parents a660675 + 46806bd commit f73d03b

File tree

46 files changed

+1002
-34
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1002
-34
lines changed

‎core/api.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,7 @@ ion-datetime,part,calendar-day today
569569
ion-datetime,part,month-year-button
570570
ion-datetime,part,time-button
571571
ion-datetime,part,time-button active
572+
ion-datetime,part,wheel
572573
ion-datetime,part,wheel-item
573574
ion-datetime,part,wheel-item active
574575

@@ -1692,6 +1693,7 @@ ion-segment-content,shadow
16921693

16931694
ion-segment-view,shadow
16941695
ion-segment-view,prop,disabled,boolean,false,false,false
1696+
ion-segment-view,prop,swipeGesture,boolean,true,false,false
16951697
ion-segment-view,event,ionSegmentViewScroll,SegmentViewScrollEvent,true
16961698

16971699
ion-select,shadow
@@ -1766,6 +1768,7 @@ ion-select,part,supporting-text
17661768
ion-select,part,text
17671769

17681770
ion-select-modal,scoped
1771+
ion-select-modal,prop,cancelText,string,'Close',false,false
17691772
ion-select-modal,prop,header,string | undefined,undefined,false,false
17701773
ion-select-modal,prop,multiple,boolean | undefined,undefined,false,false
17711774
ion-select-modal,prop,options,SelectModalOption[],[],false,false

‎core/src/components.d.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3113,6 +3113,11 @@ export namespace Components {
31133113
* @param smoothScroll : Whether to animate the scroll transition.
31143114
*/
31153115
"setContent": (id: string, smoothScroll?: boolean) => Promise<void>;
3116+
/**
3117+
* If `true`, users will be able to swipe the segment view to navigate between segment contents.
3118+
* @default true
3119+
*/
3120+
"swipeGesture": boolean;
31163121
}
31173122
interface IonSelect {
31183123
/**
@@ -3223,6 +3228,11 @@ export namespace Components {
32233228
"value"?: any | null;
32243229
}
32253230
interface IonSelectModal {
3231+
/**
3232+
* The text to display on the cancel button.
3233+
* @default 'Close'
3234+
*/
3235+
"cancelText": string;
32263236
"header"?: string;
32273237
"multiple"?: boolean;
32283238
/**
@@ -8419,6 +8429,11 @@ declare namespace LocalJSX {
84198429
* Emitted when the segment view is scrolled.
84208430
*/
84218431
"onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<SegmentViewScrollEvent>) => void;
8432+
/**
8433+
* If `true`, users will be able to swipe the segment view to navigate between segment contents.
8434+
* @default true
8435+
*/
8436+
"swipeGesture"?: boolean;
84228437
}
84238438
interface IonSelect {
84248439
/**
@@ -8548,6 +8563,11 @@ declare namespace LocalJSX {
85488563
"value"?: any | null;
85498564
}
85508565
interface IonSelectModal {
8566+
/**
8567+
* The text to display on the cancel button.
8568+
* @default 'Close'
8569+
*/
8570+
"cancelText"?: string;
85518571
"header"?: string;
85528572
"multiple"?: boolean;
85538573
/**

‎core/src/components/content/content.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,7 @@ export class Content implements ComponentInterface {
462462
role={isMainContent ? 'main' : undefined}
463463
class={createColorClasses(this.color, {
464464
[mode]: true,
465+
'content-fullscreen': this.fullscreen,
465466
'content-sizing': hostContext('ion-popover', this.el),
466467
overscroll: forceOverscroll,
467468
[`content-${rtl}`]: true,

‎core/src/components/content/test/fullscreen/content.e2e.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,38 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
1313

1414
await expect(page).toHaveScreenshot(screenshot(`content-fullscreen`));
1515
});
16+
17+
/**
18+
* The content-fullscreen class is added when fullscreen is true. The
19+
* fullscreen attribute is not reflected in Angular, Vue, or React, so
20+
* the class is needed for users to create custom themes.
21+
*/
22+
test('should have content-fullscreen class when fullscreen is true', async ({ page }) => {
23+
await page.setContent(
24+
`
25+
<ion-content fullscreen>
26+
<p>Hello</p>
27+
</ion-content>
28+
`,
29+
config
30+
);
31+
32+
const content = page.locator('ion-content');
33+
await expect(content).toHaveClass(/content-fullscreen/);
34+
});
35+
36+
test('should not have content-fullscreen class when fullscreen is false', async ({ page }) => {
37+
await page.setContent(
38+
`
39+
<ion-content>
40+
<p>Hello</p>
41+
</ion-content>
42+
`,
43+
config
44+
);
45+
46+
const content = page.locator('ion-content');
47+
await expect(content).not.toHaveClass(/content-fullscreen/);
48+
});
1649
});
1750
});

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ import { checkForPresentationFormatMismatch, warnIfTimeZoneProvided } from './ut
7979
* @slot buttons - The buttons in the datetime.
8080
* @slot time-label - The label for the time selector in the datetime.
8181
*
82+
* @part wheel - The wheel container when using a wheel style layout, or in the month/year picker when using a grid style layout.
8283
* @part wheel-item - The individual items when using a wheel style layout, or in the
8384
* month/year picker when using a grid style layout.
8485
* @part wheel-item active - The currently selected wheel-item.
@@ -1724,6 +1725,7 @@ export class Datetime implements ComponentInterface {
17241725

17251726
return (
17261727
<ion-picker-column
1728+
part={WHEEL_PART}
17271729
aria-label="Select a date"
17281730
class="date-column"
17291731
color={this.color}
@@ -1844,6 +1846,7 @@ export class Datetime implements ComponentInterface {
18441846

18451847
return (
18461848
<ion-picker-column
1849+
part={WHEEL_PART}
18471850
aria-label="Select a day"
18481851
class="day-column"
18491852
color={this.color}
@@ -1888,6 +1891,7 @@ export class Datetime implements ComponentInterface {
18881891

18891892
return (
18901893
<ion-picker-column
1894+
part={WHEEL_PART}
18911895
aria-label="Select a month"
18921896
class="month-column"
18931897
color={this.color}
@@ -1931,6 +1935,7 @@ export class Datetime implements ComponentInterface {
19311935

19321936
return (
19331937
<ion-picker-column
1938+
part={WHEEL_PART}
19341939
aria-label="Select a year"
19351940
class="year-column"
19361941
color={this.color}
@@ -2005,6 +2010,7 @@ export class Datetime implements ComponentInterface {
20052010

20062011
return (
20072012
<ion-picker-column
2013+
part={WHEEL_PART}
20082014
aria-label="Select an hour"
20092015
color={this.color}
20102016
disabled={disabled}
@@ -2045,6 +2051,7 @@ export class Datetime implements ComponentInterface {
20452051

20462052
return (
20472053
<ion-picker-column
2054+
part={WHEEL_PART}
20482055
aria-label="Select a minute"
20492056
color={this.color}
20502057
disabled={disabled}
@@ -2088,6 +2095,7 @@ export class Datetime implements ComponentInterface {
20882095

20892096
return (
20902097
<ion-picker-column
2098+
part={WHEEL_PART}
20912099
aria-label="Select a day period"
20922100
style={isDayPeriodRTL ? { order: '-1' } : {}}
20932101
color={this.color}
@@ -2716,5 +2724,6 @@ export class Datetime implements ComponentInterface {
27162724
let datetimeIds = 0;
27172725
const CANCEL_ROLE = 'datetime-cancel';
27182726
const CONFIRM_ROLE = 'datetime-confirm';
2727+
const WHEEL_PART = 'wheel';
27192728
const WHEEL_ITEM_PART = 'wheel-item';
27202729
const WHEEL_ITEM_ACTIVE_PART = `active`;

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

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,140 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
4242
await expect(datetime).toHaveScreenshot(screenshot(`datetime-custom-calendar-days`));
4343
});
4444
});
45+
46+
test.describe(title('CSS shadow parts'), () => {
47+
test('should be able to customize wheel part within the wheel style', async ({ page }, testInfo) => {
48+
testInfo.annotations.push({
49+
type: 'issue',
50+
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
51+
});
52+
53+
await page.setContent(
54+
`
55+
<style>
56+
ion-datetime::part(wheel) {
57+
background-color: red;
58+
}
59+
</style>
60+
<ion-datetime
61+
prefer-wheel="true"
62+
value="2020-03-14T14:23:00.000Z"
63+
></ion-datetime>
64+
`,
65+
config
66+
);
67+
68+
const datetime = page.locator('ion-datetime');
69+
const pickerColumn = datetime.locator('ion-picker-column').first();
70+
71+
const backgroundColor = await pickerColumn.evaluate((el) => {
72+
return window.getComputedStyle(el).backgroundColor;
73+
});
74+
75+
expect(backgroundColor).toBe('rgb(255, 0, 0)');
76+
});
77+
78+
test('should be able to customize wheel part within the month/year picker', async ({ page }, testInfo) => {
79+
testInfo.annotations.push({
80+
type: 'issue',
81+
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
82+
});
83+
84+
await page.setContent(
85+
`
86+
<style>
87+
ion-datetime::part(wheel) {
88+
background-color: orange;
89+
}
90+
</style>
91+
<ion-datetime
92+
value="2020-03-14T14:23:00.000Z"
93+
></ion-datetime>
94+
`,
95+
config
96+
);
97+
98+
const datetime = page.locator('ion-datetime');
99+
const monthYearButton = datetime.locator('.calendar-month-year-toggle');
100+
101+
await monthYearButton.click();
102+
103+
const pickerColumn = datetime.locator('ion-picker-column').first();
104+
105+
const backgroundColor = await pickerColumn.evaluate((el) => {
106+
return window.getComputedStyle(el).backgroundColor;
107+
});
108+
109+
expect(backgroundColor).toBe('rgb(255, 165, 0)');
110+
});
111+
112+
test('should be able to customize wheel part within the time picker', async ({ page }, testInfo) => {
113+
testInfo.annotations.push({
114+
type: 'issue',
115+
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
116+
});
117+
118+
await page.setContent(
119+
`
120+
<style>
121+
ion-picker-column {
122+
background-color: green;
123+
}
124+
</style>
125+
<ion-datetime
126+
value="2020-03-14T14:23:00.000Z"
127+
></ion-datetime>
128+
`,
129+
config
130+
);
131+
132+
const datetime = page.locator('ion-datetime');
133+
const timeButton = datetime.locator('.time-body');
134+
135+
await timeButton.click();
136+
137+
const pickerColumn = page.locator('ion-picker-column').first();
138+
139+
const backgroundColor = await pickerColumn.evaluate((el) => {
140+
return window.getComputedStyle(el).backgroundColor;
141+
});
142+
143+
expect(backgroundColor).toBe('rgb(0, 128, 0)');
144+
});
145+
146+
test('should be able to customize wheel part when focused', async ({ page }, testInfo) => {
147+
testInfo.annotations.push({
148+
type: 'issue',
149+
description: 'https://github.com/ionic-team/ionic-framework/issues/30420',
150+
});
151+
152+
await page.setContent(
153+
`
154+
<style>
155+
ion-datetime::part(wheel):focus {
156+
background-color: blue;
157+
}
158+
</style>
159+
<ion-datetime
160+
prefer-wheel="true"
161+
value="2020-03-14T14:23:00.000Z"
162+
></ion-datetime>
163+
`,
164+
config
165+
);
166+
167+
const datetime = page.locator('ion-datetime');
168+
const pickerColumn = datetime.locator('ion-picker-column').first();
169+
170+
await pickerColumn.click({ position: { x: 10, y: 10 } });
171+
172+
const backgroundColor = await pickerColumn.evaluate((el) => {
173+
return window.getComputedStyle(el).backgroundColor;
174+
});
175+
176+
expect(backgroundColor).toBe('rgb(0, 0, 255)');
177+
});
178+
});
45179
});
46180

47181
/**

‎core/src/components/datetime/test/custom/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,13 @@
7474
color: rgb(128, 30, 171);
7575
}
7676

77+
/* Targets the month/year picker and the wheel style datetime */
78+
.custom-grid-wheel::part(wheel):focus,
79+
/* Targets the time picker */
80+
ion-picker-column:focus {
81+
background-color: rgba(138, 238, 69, 0.37);
82+
}
83+
7784
/*
7885
* Custom Datetime Day Parts
7986
* -------------------------------------------

‎core/src/components/range/range.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -883,7 +883,7 @@ export class Range implements ComponentInterface {
883883
}
884884

885885
render() {
886-
const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this;
886+
const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label, dualKnobs, min, max } = this;
887887

888888
const inItem = hostContext('ion-item', el);
889889

@@ -906,6 +906,13 @@ export class Range implements ComponentInterface {
906906

907907
const mode = getIonMode(this);
908908

909+
/**
910+
* Determine if any knob is at the min or max value to
911+
* apply Host classes for styling.
912+
*/
913+
const valueAtMin = dualKnobs ? this.valA === min || this.valB === min : this.valA === min;
914+
const valueAtMax = dualKnobs ? this.valA === max || this.valB === max : this.valA === max;
915+
909916
renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
910917

911918
return (
@@ -922,6 +929,8 @@ export class Range implements ComponentInterface {
922929
[`range-label-placement-${labelPlacement}`]: true,
923930
'range-item-start-adjustment': needsStartAdjustment,
924931
'range-item-end-adjustment': needsEndAdjustment,
932+
'range-value-min': valueAtMin,
933+
'range-value-max': valueAtMax,
925934
})}
926935
>
927936
<label class="range-wrapper" id="range-label">

0 commit comments

Comments
 (0)