You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .github/COMPONENT-GUIDE.md
+17-3Lines changed: 17 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -93,6 +93,11 @@ The following styles should be set for the CSS to work properly. Note that the `
93
93
94
94
The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element.
95
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
+
96
101
> Make sure the component has the correct [component structure](#component-structure) before continuing.
97
102
98
103
#### JavaScript
@@ -109,7 +114,7 @@ render() {
109
114
}
110
115
```
111
116
112
-
Once that is done, the element will get the `ion-activated` class added on press.
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.
113
118
114
119
In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay:
115
120
@@ -212,7 +217,13 @@ TODO
212
217
213
218
### Focused
214
219
215
-
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.
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.
221
+
222
+
> [!WARNING]
223
+
> 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.
224
+
225
+
> [!NOTE]
226
+
> 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).
216
227
217
228
> Make sure the component has the correct [component structure](#component-structure) before continuing.
218
229
@@ -275,7 +286,10 @@ ion-button {
275
286
276
287
### Hover
277
288
278
-
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.
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.
290
+
291
+
> [!NOTE]
292
+
> 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.
279
293
280
294
> Make sure the component has the correct [component structure](#component-structure) before continuing.
Copy file name to clipboardExpand all lines: .github/ISSUE_TEMPLATE/bug_report.yml
+14-9Lines changed: 14 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -20,12 +20,10 @@ body:
20
20
id: affected-versions
21
21
attributes:
22
22
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).
24
24
options:
25
-
- v4.x
26
-
- v5.x
27
-
- v6.x
28
25
- v7.x
26
+
- v8.x (Beta)
29
27
- Nightly
30
28
multiple: true
31
29
validations:
@@ -51,20 +49,27 @@ body:
51
49
id: steps-to-reproduce
52
50
attributes:
53
51
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.
55
53
placeholder: |
56
-
1.
57
-
2.
58
-
3.
54
+
1. Go to '...'
55
+
2. Click on '...'
56
+
3. Observe: '...'
59
57
validations:
60
58
required: true
61
59
62
60
- type: input
63
61
id: reproduction-url
64
62
attributes:
65
63
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.
0 commit comments