Skip to content

Commit cca824d

Browse files
liamdebeasiliamdebeasi
authored
merge release-7.8.3 (#29265)
2 parents 2417750 + 101ad54 commit cca824d

File tree

278 files changed

+2935
-1008
lines changed

Some content is hidden

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

278 files changed

+2935
-1008
lines changed

‎.github/CODEOWNERS‎

Lines changed: 2 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -21,65 +21,22 @@
2121
/packages/angular-server @sean-perkins @thetaPC
2222
/packages/angular/test @thetaPC
2323

24-
## React
25-
26-
/packages/react/ @amandaejohnston
27-
/packages/react-router @amandaejohnston
28-
/packages/react/test-app/
29-
/packages/react-router/test-app/
30-
3124
## Vue
3225

33-
/packages/vue/ @liamdebeasi @thetaPC
26+
/packages/vue/ @thetaPC
3427
/packages/vue-router/ @liamdebeasi @thetaPC
3528
/packages/vue/test/ @thetaPC
3629
/packages/vue-router/__tests__ @thetaPC
3730

3831
# Components
3932

40-
/core/src/components/accordion/ @liamdebeasi
41-
/core/src/components/accordion-group/ @liamdebeasi
42-
43-
/core/src/components/checkbox/ @amandaejohnston
44-
45-
/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
46-
/core/src/components/datetime-button/ @liamdebeasi
47-
48-
/core/src/components/item/ @brandyscarney
49-
50-
/core/src/components/menu/ @amandaejohnston
51-
/core/src/components/menu-toggle/ @amandaejohnston
33+
/core/src/components/datetime/ @sean-perkins
5234

5335
/core/src/components/nav/ @sean-perkins
5436
/core/src/components/nav-link/ @sean-perkins
5537

56-
/core/src/components/picker-internal/ @liamdebeasi
57-
/core/src/components/picker-column-internal/ @liamdebeasi
58-
59-
/core/src/components/radio/ @amandaejohnston
60-
/core/src/components/radio-group/ @amandaejohnston
61-
62-
/core/src/components/refresher/ @liamdebeasi
63-
/core/src/components/refresher-content/ @liamdebeasi
64-
65-
/core/src/components/searchbar/ @brandyscarney
66-
67-
/core/src/components/segment/ @brandyscarney
68-
/core/src/components/segment-button/ @brandyscarney
69-
70-
/core/src/components/skeleton-text/ @brandyscarney
71-
7238
# Utilities
7339

74-
/core/src/utils/animation/ @liamdebeasi
7540
/core/src/utils/content/ @sean-perkins
7641
/core/src/utils/gesture/ @liamdebeasi
7742
/core/src/utils/input-shims/ @liamdebeasi
78-
/core/src/utils/keyboard/ @liamdebeasi
79-
/core/src/utils/logging/ @amandaejohnston
80-
/core/src/utils/sanitization/ @liamdebeasi
81-
/core/src/utils/tap-click/ @liamdebeasi
82-
/core/src/utils/transition/ @liamdebeasi
83-
84-
/core/src/css/ @brandyscarney
85-
/core/src/themes/ @brandyscarney

‎.github/COMPONENT-GUIDE.md‎

Lines changed: 87 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
- [Button States](#button-states)
44
* [Component Structure](#component-structure)
5-
* [Activated](#activated)
65
* [Disabled](#disabled)
76
* [Focused](#focused)
87
* [Hover](#hover)
8+
* [Activated](#activated)
99
* [Ripple Effect](#ripple-effect)
1010
* [Example Components](#example-components)
1111
* [References](#references)
@@ -21,7 +21,7 @@
2121

2222
## Button States
2323

24-
Any component that renders a button should have the following states: [`activated`](#activated), [`disabled`](#disabled), [`focused`](#focused), [`hover`](#hover). It should also have a [Ripple Effect](#ripple-effect) component added for Material Design.
24+
Any component that renders a button should have the following states: [`disabled`](#disabled), [`focused`](#focused), [`hover`](#hover), [`activated`](#activated). It should also have a [Ripple Effect](#ripple-effect) component added for Material Design.
2525

2626
### Component Structure
2727

@@ -89,78 +89,6 @@ The following styles should be set for the CSS to work properly. Note that the `
8989
```
9090

9191

92-
### Activated
93-
94-
The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element.
95-
96-
> [!WARNING]
97-
>`:active` should not be used here as it is not received on mobile Safari unless the element has a `touchstart` listener (which we don't necessarily want to have to add to every element). From [Safari Web Content Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html):
98-
>
99-
>> On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the `:active` pseudo state is triggered only when there is a touch event set on the HTML element
100-
101-
> Make sure the component has the correct [component structure](#component-structure) before continuing.
102-
103-
#### JavaScript
104-
105-
The `ion-activatable` class needs to be set on an element that can be activated:
106-
107-
```jsx
108-
render() {
109-
return (
110-
<Host class='ion-activatable'>
111-
<slot></slot>
112-
</Host>
113-
);
114-
}
115-
```
116-
117-
Once that is done, the element will get the `ion-activated` class added on press after a small delay. This delay exists so that the active state does not show up when an activatable element is tapped while scrolling.
118-
119-
In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay:
120-
121-
```jsx
122-
<Host class='ion-activatable ion-activatable-instant'>
123-
```
124-
125-
#### CSS
126-
127-
```css
128-
/**
129-
* @prop --color-activated: Color of the button when pressed
130-
* @prop --background-activated: Background of the button when pressed
131-
* @prop --background-activated-opacity: Opacity of the background when pressed
132-
*/
133-
```
134-
135-
Style the `ion-activated` class based on the spec for that element:
136-
137-
```scss
138-
:host(.ion-activated) .button-native {
139-
color: var(--color-activated);
140-
141-
&::after {
142-
background: var(--background-activated);
143-
144-
opacity: var(--background-activated-opacity);
145-
}
146-
}
147-
```
148-
149-
> Order is important! Activated should be after the focused & hover states.
150-
151-
152-
#### User Customization
153-
154-
Setting the activated state on the `::after` pseudo-element allows the user to customize the activated state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on press, or they can leave out `--background-activated-opacity` and the button will use the default activated opacity to match the spec.
155-
156-
```css
157-
ion-button {
158-
--background-activated: red;
159-
--background-activated-opacity: 1;
160-
}
161-
```
162-
163-
16492
### Disabled
16593

16694
The disabled state should be set via prop on all components that render a native button. Setting a disabled state will change the opacity or color of the button and remove click events from firing.
@@ -197,7 +125,8 @@ render() {
197125
}
198126
```
199127

200-
> Note: if the class being added was for `ion-back-button` it would be `back-button-disabled`.
128+
> [!NOTE]
129+
> If the class being added was for `ion-back-button` it would be `back-button-disabled`.
201130
202131
#### CSS
203132

@@ -215,16 +144,18 @@ The following CSS _at the bare minimum_ should be added for the disabled class,
215144

216145
TODO
217146

147+
218148
### Focused
219149

220-
The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element.
150+
The focused state should be enabled for elements with actions when tabbed to via the keyboard. This will only work inside of an `ion-app`. It usually changes the opacity or background of an element.
221151

222152
> [!WARNING]
223153
> Do not use `:focus` because that will cause the focus to apply even when an element is tapped (because the element is now focused). Instead, we only want the focus state to be shown when it makes sense which is what the `.ion-focusable` utility mentioned below does.
224154
225155
> [!NOTE]
226156
> The [`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) pseudo-class mostly does the same thing as our JavaScript-driven utility. However, it does not work well with Shadow DOM components as the element that receives focus is typically inside of the Shadow DOM, but we usually want to set the `:focus-visible` state on the host so we can style other parts of the component. Using other combinations such as `:has(:focus-visible)` does not work because `:has` does not pierce the Shadow DOM (as that would leak implementation details about the Shadow DOM contents). `:focus-within` does work with the Shadow DOM, but that has the same problem as `:focus` that was mentioned before. Unfortunately, a [`:focus-visible-within` pseudo-class does not exist yet](https://github.com/WICG/focus-visible/issues/151).
227157
158+
> [!IMPORTANT]
228159
> Make sure the component has the correct [component structure](#component-structure) before continuing.
229160
230161
#### JavaScript
@@ -234,7 +165,7 @@ The `ion-focusable` class needs to be set on an element that can be focused:
234165
```jsx
235166
render() {
236167
return (
237-
<Host class='ion-focusable'>
168+
<Host class="ion-focusable">
238169
<slot></slot>
239170
</Host>
240171
);
@@ -269,7 +200,8 @@ Style the `ion-focused` class based on the spec for that element:
269200
}
270201
```
271202

272-
> Order is important! Focused should be after the activated and before the hover state.
203+
> [!IMPORTANT]
204+
> Order matters! Focused should be **before** the activated and hover states.
273205
274206

275207
#### User Customization
@@ -286,11 +218,12 @@ ion-button {
286218

287219
### Hover
288220

289-
The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover.
221+
The [hover state](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) happens when a user moves their cursor on top of an element without pressing on it. It should not happen on mobile, only on desktop devices that support hover.
290222

291223
> [!NOTE]
292224
> Some Android devices [incorrectly report their inputs](https://issues.chromium.org/issues/40855702) which can result in certain devices receiving hover events when they should not.
293225
226+
> [!IMPORTANT]
294227
> Make sure the component has the correct [component structure](#component-structure) before continuing.
295228
296229
#### CSS
@@ -321,7 +254,8 @@ Style the `:hover` based on the spec for that element:
321254
}
322255
```
323256

324-
> Order is important! Hover should be before the activated state.
257+
> [!IMPORTANT]
258+
> Order matters! Hover should be **before** the activated state.
325259
326260

327261
#### User Customization
@@ -336,6 +270,79 @@ ion-button {
336270
```
337271

338272

273+
### Activated
274+
275+
The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element.
276+
277+
> [!WARNING]
278+
>`:active` should not be used here as it is not received on mobile Safari unless the element has a `touchstart` listener (which we don't necessarily want to have to add to every element). From [Safari Web Content Guide](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html):
279+
>
280+
>> On iOS, mouse events are sent so quickly that the down or active state is never received. Therefore, the `:active` pseudo state is triggered only when there is a touch event set on the HTML element
281+
282+
> [!IMPORTANT]
283+
> Make sure the component has the correct [component structure](#component-structure) before continuing.
284+
285+
#### JavaScript
286+
287+
The `ion-activatable` class needs to be set on an element that can be activated:
288+
289+
```jsx
290+
render() {
291+
return (
292+
<Host class="ion-activatable">
293+
<slot></slot>
294+
</Host>
295+
);
296+
}
297+
```
298+
299+
Once that is done, the element will get the `ion-activated` class added on press after a small delay. This delay exists so that the active state does not show up when an activatable element is tapped while scrolling.
300+
301+
In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay:
302+
303+
```jsx
304+
<Host class="ion-activatable ion-activatable-instant">
305+
```
306+
307+
#### CSS
308+
309+
```css
310+
/**
311+
* @prop --color-activated: Color of the button when pressed
312+
* @prop --background-activated: Background of the button when pressed
313+
* @prop --background-activated-opacity: Opacity of the background when pressed
314+
*/
315+
```
316+
317+
Style the `ion-activated` class based on the spec for that element:
318+
319+
```scss
320+
:host(.ion-activated) .button-native {
321+
color: var(--color-activated);
322+
323+
&::after {
324+
background: var(--background-activated);
325+
326+
opacity: var(--background-activated-opacity);
327+
}
328+
}
329+
```
330+
331+
> [!IMPORTANT]
332+
> Order matters! Activated should be **after** the focused & hover states.
333+
334+
#### User Customization
335+
336+
Setting the activated state on the `::after` pseudo-element allows the user to customize the activated state without knowing what the default opacity is set at. A user can customize in the following ways to have a solid red background on press, or they can leave out `--background-activated-opacity` and the button will use the default activated opacity to match the spec.
337+
338+
```css
339+
ion-button {
340+
--background-activated: red;
341+
--background-activated-opacity: 1;
342+
}
343+
```
344+
345+
339346
### Ripple Effect
340347

341348
The ripple effect should be added to elements for Material Design. It *requires* the `ion-activatable` class to be set on the parent element to work, and relative positioning on the parent.

‎.github/ISSUE_TEMPLATE/bug_report.yml‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,10 @@ body:
2020
id: affected-versions
2121
attributes:
2222
label: Ionic Framework Version
23-
description: Which version(s) of Ionic Framework does this issue impact? For Ionic Framework 1.x issues, please use https://github.com/ionic-team/ionic-v1. For Ionic Framework 2.x and 3.x issues, please use https://github.com/ionic-team/ionic-v3.
23+
description: Which version(s) of Ionic Framework does this issue impact? [Ionic Framework 1.x to 6.x are no longer supported](https://ionicframework.com/docs/reference/support#framework-maintenance-and-support-status). For extended support, considering visiting [Ionic's Enterprise offering](https://ionic.io/enterprise).
2424
options:
25-
- v4.x
26-
- v5.x
27-
- v6.x
2825
- v7.x
26+
- v8.x (Beta)
2927
- Nightly
3028
multiple: true
3129
validations:
@@ -51,20 +49,27 @@ body:
5149
id: steps-to-reproduce
5250
attributes:
5351
label: Steps to Reproduce
54-
description: Please explain the steps required to duplicate this issue.
52+
description: Explain the steps required to reproduce this issue.
5553
placeholder: |
56-
1.
57-
2.
58-
3.
54+
1. Go to '...'
55+
2. Click on '...'
56+
3. Observe: '...'
5957
validations:
6058
required: true
6159

6260
- type: input
6361
id: reproduction-url
6462
attributes:
6563
label: Code Reproduction URL
66-
description: Please reproduce this issue in a blank Ionic Framework starter application and provide a link to the repo. Try out our [Getting Started Wizard](https://ionicframework.com/start#basics) to quickly spin up an Ionic Framework starter app. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting.
64+
description: |
65+
Reproduce this issue in a blank [Ionic Framework starter application](https://ionicframework.com/start#basics) or a Stackblitz example.
66+
67+
You can use the Stackblitz button available on any of the [component playgrounds](https://ionicframework.com/docs/components) to open an editable example. Remember to save your changes to obtain a link to copy.
68+
69+
Reproductions cases must be minimal and focused around the specific problem you are experiencing. This is the best way to ensure this issue is triaged quickly. Issues without a code reproduction may be closed if the Ionic Team cannot reproduce the issue you are reporting.
6770
placeholder: https://github.com/...
71+
validations:
72+
required: true
6873

6974
- type: textarea
7075
id: ionic-info

0 commit comments

Comments
 (0)