mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 09:34:19 +08:00
chore: sync with main
This commit is contained in:
Liam DeBeasi
16
.github/COMPONENT-GUIDE.md
vendored
16
.github/COMPONENT-GUIDE.md
vendored
@ -93,6 +93,11 @@ The following styles should be set for the CSS to work properly. Note that the `
|
||||
|
||||
The activated state should be enabled for elements with actions on "press". It usually changes the opacity or background of an element.
|
||||
|
||||
> [!WARNING]
|
||||
>`: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):
|
||||
>
|
||||
>> 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
|
||||
|
||||
> Make sure the component has the correct [component structure](#component-structure) before continuing.
|
||||
|
||||
#### JavaScript
|
||||
@ -109,7 +114,7 @@ render() {
|
||||
}
|
||||
```
|
||||
|
||||
Once that is done, the element will get the `ion-activated` class added on press.
|
||||
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.
|
||||
|
||||
In addition to setting that class, `ion-activatable-instant` can be set in order to have an instant press with no delay:
|
||||
|
||||
@ -214,6 +219,12 @@ TODO
|
||||
|
||||
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.
|
||||
|
||||
> [!WARNING]
|
||||
> 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.
|
||||
|
||||
> [!NOTE]
|
||||
> 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).
|
||||
|
||||
> Make sure the component has the correct [component structure](#component-structure) before continuing.
|
||||
|
||||
#### JavaScript
|
||||
@ -277,6 +288,9 @@ ion-button {
|
||||
|
||||
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.
|
||||
|
||||
> [!NOTE]
|
||||
> 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.
|
||||
|
||||
> Make sure the component has the correct [component structure](#component-structure) before continuing.
|
||||
|
||||
#### CSS
|
||||
|
||||
20
.github/dependabot.yml
vendored
20
.github/dependabot.yml
vendored
@ -1,20 +0,0 @@
|
||||
version: 2
|
||||
updates:
|
||||
- package-ecosystem: "npm"
|
||||
directory: "/core"
|
||||
schedule:
|
||||
interval: "daily"
|
||||
versioning-strategy: increase
|
||||
allow:
|
||||
- dependency-name: "@playwright/test"
|
||||
- dependency-name: "@axe-core/playwright"
|
||||
- dependency-name: "@stencil/angular-output-target"
|
||||
- dependency-name: "@stencil/core"
|
||||
- dependency-name: "@stencil/react-output-target"
|
||||
- dependency-name: "@stencil/sass"
|
||||
- dependency-name: "@stencil/vue-output-target"
|
||||
- dependency-name: "ionicons"
|
||||
- dependency-name: "@capacitor/core"
|
||||
- dependency-name: "@capacitor/keyboard"
|
||||
- dependency-name: "@capacitor/haptics"
|
||||
- dependency-name: "@capacitor/status-bar"
|
||||
@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -3,7 +3,7 @@ description: 'Build Ionic Angular'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -8,8 +8,8 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
@ -24,7 +24,7 @@ runs:
|
||||
run: pnpm i @stencil/core@${{ inputs.stencil-version }}
|
||||
shell: bash
|
||||
- name: Build Core
|
||||
run: pnpm run build --ci
|
||||
run: pnpm npm run build -- --ci --debug --verbose
|
||||
working-directory: ./core
|
||||
shell: bash
|
||||
- uses: ./.github/workflows/actions/upload-archive
|
||||
|
||||
@ -8,8 +8,8 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -3,7 +3,7 @@ description: 'Build Ionic React Router'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -3,7 +3,7 @@ description: 'Build Ionic React'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -3,7 +3,7 @@ description: 'Builds Ionic Vue Router'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -3,7 +3,7 @@ description: 'Build Ionic Vue'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -10,7 +10,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/download-artifact@v3
|
||||
- uses: actions/download-artifact@v4
|
||||
with:
|
||||
name: ${{ inputs.name }}
|
||||
path: ${{ inputs.path }}
|
||||
|
||||
@ -19,7 +19,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -3,7 +3,7 @@ description: 'Test Core Clean Build'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@ description: 'Test Core Lint'
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -13,7 +13,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
@ -85,7 +85,7 @@ runs:
|
||||
working-directory: ./core
|
||||
- name: Archive Updated Screenshots
|
||||
if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
|
||||
uses: actions/upload-artifact@v3
|
||||
uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
|
||||
path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
|
||||
|
||||
@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -6,7 +6,7 @@ inputs:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: pnpm/action-setup@v2
|
||||
|
||||
@ -7,10 +7,10 @@ on:
|
||||
runs:
|
||||
using: 'composite'
|
||||
steps:
|
||||
- uses: actions/setup-node@v3
|
||||
- uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 18.x
|
||||
- uses: actions/download-artifact@v3
|
||||
- uses: actions/download-artifact@v4
|
||||
with:
|
||||
path: ./artifacts
|
||||
- name: Extract Archives
|
||||
|
||||
@ -13,7 +13,7 @@ runs:
|
||||
- name: Create Archive
|
||||
run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }}
|
||||
shell: bash
|
||||
- uses: actions/upload-artifact@v3
|
||||
- uses: actions/upload-artifact@v4
|
||||
with:
|
||||
name: ${{ inputs.name }}
|
||||
path: ${{ inputs.output }}
|
||||
|
||||
30
.github/workflows/build.yml
vendored
30
.github/workflows/build.yml
vendored
@ -22,7 +22,7 @@ jobs:
|
||||
build-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-core
|
||||
with:
|
||||
ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
|
||||
@ -31,21 +31,21 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-core-clean-build
|
||||
|
||||
test-core-lint:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-core-lint
|
||||
|
||||
test-core-spec:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-core-spec
|
||||
|
||||
test-core-screenshot:
|
||||
@ -62,7 +62,7 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
@ -90,14 +90,14 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-vue
|
||||
|
||||
build-vue-router:
|
||||
needs: [build-vue]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-vue-router
|
||||
|
||||
test-vue-e2e:
|
||||
@ -108,7 +108,7 @@ jobs:
|
||||
needs: [build-vue, build-vue-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-vue-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@ -126,14 +126,14 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-angular
|
||||
|
||||
build-angular-server:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-angular-server
|
||||
|
||||
test-angular-e2e:
|
||||
@ -144,7 +144,7 @@ jobs:
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-angular-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@ -162,14 +162,14 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-react
|
||||
|
||||
build-react-router:
|
||||
needs: [build-react]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-react-router
|
||||
|
||||
test-react-router-e2e:
|
||||
@ -180,7 +180,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-react-router-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@ -202,7 +202,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-react-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
|
||||
6
.github/workflows/codeql-analysis.yml
vendored
6
.github/workflows/codeql-analysis.yml
vendored
@ -14,8 +14,8 @@ jobs:
|
||||
permissions:
|
||||
security-events: write
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: github/codeql-action/init@v2
|
||||
- uses: actions/checkout@v4
|
||||
- uses: github/codeql-action/init@v3
|
||||
with:
|
||||
languages: javascript
|
||||
- uses: github/codeql-action/analyze@v2
|
||||
- uses: github/codeql-action/analyze@v3
|
||||
|
||||
2
.github/workflows/dev-build.yml
vendored
2
.github/workflows/dev-build.yml
vendored
@ -9,7 +9,7 @@ jobs:
|
||||
outputs:
|
||||
dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: pnpm/action-setup@v2
|
||||
with:
|
||||
version: 8
|
||||
|
||||
2
.github/workflows/nightly.yml
vendored
2
.github/workflows/nightly.yml
vendored
@ -12,7 +12,7 @@ jobs:
|
||||
outputs:
|
||||
nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: pnpm/action-setup@v2
|
||||
with:
|
||||
version: 8
|
||||
|
||||
16
.github/workflows/release-ionic.yml
vendored
16
.github/workflows/release-ionic.yml
vendored
@ -22,7 +22,7 @@ jobs:
|
||||
release-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/publish-npm
|
||||
with:
|
||||
scope: '@ionic/core'
|
||||
@ -48,7 +48,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- name: Restore @ionic/docs built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@ -68,7 +68,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@ -95,7 +95,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@ -121,7 +121,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@ -147,7 +147,7 @@ jobs:
|
||||
needs: [release-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@ -167,7 +167,7 @@ jobs:
|
||||
needs: [release-react]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
@ -193,7 +193,7 @@ jobs:
|
||||
needs: [release-vue]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- name: Restore @ionic/core built cache
|
||||
uses: ./.github/workflows/actions/download-archive
|
||||
with:
|
||||
|
||||
4
.github/workflows/release.yml
vendored
4
.github/workflows/release.yml
vendored
@ -50,7 +50,7 @@ jobs:
|
||||
needs: [release-ionic]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
token: ${{ secrets.IONITRON_TOKEN }}
|
||||
fetch-depth: 0
|
||||
@ -81,7 +81,7 @@ jobs:
|
||||
needs: [finalize-release]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
# Pull the latest version of the reference
|
||||
# branch instead of the revision that triggered
|
||||
# the workflow otherwise we won't get the commit
|
||||
|
||||
32
.github/workflows/stencil-nightly.yml
vendored
32
.github/workflows/stencil-nightly.yml
vendored
@ -26,7 +26,7 @@ jobs:
|
||||
build-core-with-stencil-nightly:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-core-stencil-prerelease
|
||||
with:
|
||||
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
|
||||
@ -35,21 +35,21 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-core-clean-build
|
||||
|
||||
test-core-lint:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-core-lint
|
||||
|
||||
test-core-spec:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-core-spec
|
||||
with:
|
||||
stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
|
||||
@ -72,7 +72,7 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
@ -100,14 +100,14 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-vue
|
||||
|
||||
build-vue-router:
|
||||
needs: [build-vue]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-vue-router
|
||||
|
||||
test-vue-e2e:
|
||||
@ -118,7 +118,7 @@ jobs:
|
||||
needs: [build-vue, build-vue-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-vue-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@ -136,25 +136,25 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-angular
|
||||
|
||||
build-angular-server:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-angular-server
|
||||
|
||||
test-angular-e2e:
|
||||
strategy:
|
||||
fail-fast: false
|
||||
matrix:
|
||||
apps: [ng12, ng13, ng14, ng15]
|
||||
apps: [ng16, ng17]
|
||||
needs: [build-angular, build-angular-server]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-angular-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@ -172,14 +172,14 @@ jobs:
|
||||
needs: [build-core-with-stencil-nightly]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-react
|
||||
|
||||
build-react-router:
|
||||
needs: [build-react]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-react-router
|
||||
|
||||
test-react-router-e2e:
|
||||
@ -190,7 +190,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-react-router-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
@ -212,7 +212,7 @@ jobs:
|
||||
needs: [build-react, build-react-router]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-react-e2e
|
||||
with:
|
||||
app: ${{ matrix.apps }}
|
||||
|
||||
6
.github/workflows/update-screenshots.yml
vendored
6
.github/workflows/update-screenshots.yml
vendored
@ -12,7 +12,7 @@ jobs:
|
||||
build-core:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/build-core
|
||||
|
||||
test-core-screenshot:
|
||||
@ -33,7 +33,7 @@ jobs:
|
||||
needs: [build-core]
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
- uses: ./.github/workflows/actions/test-core-screenshot
|
||||
with:
|
||||
shard: ${{ matrix.shard }}
|
||||
@ -45,7 +45,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: [test-core-screenshot]
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/checkout@v4
|
||||
# Normally, we could just push with the
|
||||
# default GITHUB_TOKEN, but that will
|
||||
# not cause the build workflow
|
||||
|
||||
75
CHANGELOG.md
75
CHANGELOG.md
@ -3,6 +3,81 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** ariaLabel and role are inherited when set via htmlAttributes ([#29099](https://github.com/ionic-team/ionic-framework/issues/29099)) ([de13633](https://github.com/ionic-team/ionic-framework/commit/de13633a182d963876434db773aa346833f956fd))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033)
|
||||
* **overlays:** focus is returned to last focus element when focusing toast ([#28950](https://github.com/ionic-team/ionic-framework/issues/28950)) ([2ed0ada](https://github.com/ionic-team/ionic-framework/commit/2ed0ada9237b3f4dbf5959746ce2d1744936eebe)), closes [#28261](https://github.com/ionic-team/ionic-framework/issues/28261)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **overlays:** do not return focus if application has already moved focus manually ([#28850](https://github.com/ionic-team/ionic-framework/issues/28850)) ([a016670](https://github.com/ionic-team/ionic-framework/commit/a016670a8a46e101d23235b17bc8a2081fb992eb)), closes [#28849](https://github.com/ionic-team/ionic-framework/issues/28849)
|
||||
* **overlays:** ensure that only topmost overlay is announced by screen readers ([#28997](https://github.com/ionic-team/ionic-framework/issues/28997)) ([ba4ba61](https://github.com/ionic-team/ionic-framework/commit/ba4ba6161c1a6c67f7804b07f49c64ac9ad2b14c)), closes [#23472](https://github.com/ionic-team/ionic-framework/issues/23472)
|
||||
* **popover:** render arrow above backdrop ([#28986](https://github.com/ionic-team/ionic-framework/issues/28986)) ([0a8964d](https://github.com/ionic-team/ionic-framework/commit/0a8964d30c76218fe62f7f4aed4f81df7bb80cd0)), closes [#28985](https://github.com/ionic-team/ionic-framework/issues/28985)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
|
||||
* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
|
||||
* **react:** route with redirect will mount page ([#28961](https://github.com/ionic-team/ionic-framework/issues/28961)) ([5777ce2](https://github.com/ionic-team/ionic-framework/commit/5777ce258119d2715b1326cdc103bd4ad7612bd1)), closes [#28838](https://github.com/ionic-team/ionic-framework/issues/28838)
|
||||
* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
|
||||
* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
|
||||
* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
|
||||
* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
|
||||
|
||||
|
||||
|
||||
@ -3,6 +3,80 @@
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [7.7.4](https://github.com/ionic-team/ionic-framework/compare/v7.7.3...v7.7.4) (2024-03-06)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **modal:** ariaLabel and role are inherited when set via htmlAttributes ([#29099](https://github.com/ionic-team/ionic-framework/issues/29099)) ([de13633](https://github.com/ionic-team/ionic-framework/commit/de13633a182d963876434db773aa346833f956fd))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.7.3](https://github.com/ionic-team/ionic-framework/compare/v7.7.2...v7.7.3) (2024-02-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **label:** do not grow when in end slot ([#29036](https://github.com/ionic-team/ionic-framework/issues/29036)) ([1fc4b76](https://github.com/ionic-team/ionic-framework/commit/1fc4b76f5940b38fd89e19561d6b4738dfb8ae5d)), closes [#29033](https://github.com/ionic-team/ionic-framework/issues/29033)
|
||||
* **overlays:** focus is returned to last focus element when focusing toast ([#28950](https://github.com/ionic-team/ionic-framework/issues/28950)) ([2ed0ada](https://github.com/ionic-team/ionic-framework/commit/2ed0ada9237b3f4dbf5959746ce2d1744936eebe)), closes [#28261](https://github.com/ionic-team/ionic-framework/issues/28261)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.7.2](https://github.com/ionic-team/ionic-framework/compare/v7.7.1...v7.7.2) (2024-02-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **overlays:** do not return focus if application has already moved focus manually ([#28850](https://github.com/ionic-team/ionic-framework/issues/28850)) ([a016670](https://github.com/ionic-team/ionic-framework/commit/a016670a8a46e101d23235b17bc8a2081fb992eb)), closes [#28849](https://github.com/ionic-team/ionic-framework/issues/28849)
|
||||
* **overlays:** ensure that only topmost overlay is announced by screen readers ([#28997](https://github.com/ionic-team/ionic-framework/issues/28997)) ([ba4ba61](https://github.com/ionic-team/ionic-framework/commit/ba4ba6161c1a6c67f7804b07f49c64ac9ad2b14c)), closes [#23472](https://github.com/ionic-team/ionic-framework/issues/23472)
|
||||
* **popover:** render arrow above backdrop ([#28986](https://github.com/ionic-team/ionic-framework/issues/28986)) ([0a8964d](https://github.com/ionic-team/ionic-framework/commit/0a8964d30c76218fe62f7f4aed4f81df7bb80cd0)), closes [#28985](https://github.com/ionic-team/ionic-framework/issues/28985)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.7.1](https://github.com/ionic-team/ionic-framework/compare/v7.7.0...v7.7.1) (2024-02-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **action-sheet:** iOS dismiss animation respects safe area ([#28915](https://github.com/ionic-team/ionic-framework/issues/28915)) ([7449fb4](https://github.com/ionic-team/ionic-framework/commit/7449fb4fed4048f5d01ba068dc6f8e2d7727e95d)), closes [#28541](https://github.com/ionic-team/ionic-framework/issues/28541)
|
||||
* **overlays:** tear down animations after dismiss ([#28907](https://github.com/ionic-team/ionic-framework/issues/28907)) ([950fa40](https://github.com/ionic-team/ionic-framework/commit/950fa40c5597c81d5cbaeb9276b09adfea5e79fb)), closes [#28352](https://github.com/ionic-team/ionic-framework/issues/28352)
|
||||
* **select:** popover can be scrolled ([#28965](https://github.com/ionic-team/ionic-framework/issues/28965)) ([35ab6b4](https://github.com/ionic-team/ionic-framework/commit/35ab6b4816bd627239de8d8b25ce0c86db8c74b4)), closes [#28963](https://github.com/ionic-team/ionic-framework/issues/28963)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
# [7.7.0](https://github.com/ionic-team/ionic-framework/compare/v7.6.7...v7.7.0) (2024-01-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* add experimental hardware back button support in browsers ([#28705](https://github.com/ionic-team/ionic-framework/issues/28705)) ([658d1ca](https://github.com/ionic-team/ionic-framework/commit/658d1caccd530350843b85c0e24544ec27dd9eb4)), closes [#28703](https://github.com/ionic-team/ionic-framework/issues/28703)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.6.7](https://github.com/ionic-team/ionic-framework/compare/v7.6.6...v7.6.7) (2024-01-31)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **accordion:** prevent opening of readonly accordion using keyboard ([#28865](https://github.com/ionic-team/ionic-framework/issues/28865)) ([e10f49c](https://github.com/ionic-team/ionic-framework/commit/e10f49c43daa11fe7deb5a9b9bfd34897542b6b1)), closes [#28344](https://github.com/ionic-team/ionic-framework/issues/28344)
|
||||
* **action-sheet, alert, toast:** button roles autocomplete with available options ([#27940](https://github.com/ionic-team/ionic-framework/issues/27940)) ([f6fc22b](https://github.com/ionic-team/ionic-framework/commit/f6fc22bba60388701b80a9421510e3d843d39e9e)), closes [#27965](https://github.com/ionic-team/ionic-framework/issues/27965)
|
||||
* **item:** ensure button focus state on property change ([#28892](https://github.com/ionic-team/ionic-framework/issues/28892)) ([bf7922c](https://github.com/ionic-team/ionic-framework/commit/bf7922c8b37b32dbf90650cb74a2e77bedf0c118)), closes [#28525](https://github.com/ionic-team/ionic-framework/issues/28525)
|
||||
* **item:** only default slot content wraps ([#28773](https://github.com/ionic-team/ionic-framework/issues/28773)) ([9448783](https://github.com/ionic-team/ionic-framework/commit/9448783bb19b187f867054c86d215e3dc97952c1)), closes [#28769](https://github.com/ionic-team/ionic-framework/issues/28769)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@ionic/core",
|
||||
"version": "7.6.6",
|
||||
"version": "7.7.4",
|
||||
"description": "Base components for Ionic",
|
||||
"keywords": [
|
||||
"ionic",
|
||||
@ -31,25 +31,25 @@
|
||||
"loader/"
|
||||
],
|
||||
"dependencies": {
|
||||
"@stencil/core": "^4.10.0",
|
||||
"@stencil/core": "^4.12.2",
|
||||
"ionicons": "^7.2.2",
|
||||
"tslib": "^2.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@axe-core/playwright": "^4.8.4",
|
||||
"@capacitor/core": "^5.6.0",
|
||||
"@capacitor/haptics": "^5.0.6",
|
||||
"@capacitor/keyboard": "^5.0.7",
|
||||
"@capacitor/status-bar": "^5.0.6",
|
||||
"@axe-core/playwright": "^4.8.5",
|
||||
"@capacitor/core": "^5.7.0",
|
||||
"@capacitor/haptics": "^5.0.7",
|
||||
"@capacitor/keyboard": "^5.0.8",
|
||||
"@capacitor/status-bar": "^5.0.7",
|
||||
"@ionic/eslint-config": "^0.3.0",
|
||||
"@ionic/prettier-config": "^2.0.0",
|
||||
"@jest/core": "^27.5.1",
|
||||
"@playwright/test": "^1.39.0",
|
||||
"@rollup/plugin-node-resolve": "^8.4.0",
|
||||
"@rollup/plugin-virtual": "^2.0.3",
|
||||
"@stencil/angular-output-target": "^0.8.3",
|
||||
"@stencil/angular-output-target": "^0.8.4",
|
||||
"@stencil/react-output-target": "^0.5.3",
|
||||
"@stencil/sass": "^3.0.8",
|
||||
"@stencil/sass": "^3.0.9",
|
||||
"@stencil/vue-output-target": "^0.8.7",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^14.6.0",
|
||||
@ -66,7 +66,6 @@
|
||||
"jest": "^27.5.1",
|
||||
"jest-cli": "^27.5.1",
|
||||
"prettier": "^2.6.1",
|
||||
"puppeteer": "21.1.1",
|
||||
"rollup": "^2.26.4",
|
||||
"sass": "^1.33.0",
|
||||
"serve": "^14.0.1",
|
||||
|
||||
14
core/src/components.d.ts
vendored
14
core/src/components.d.ts
vendored
@ -160,7 +160,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the action sheet overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the action sheet. This can be useful in a button handler for determining which button was clicked to dismiss the action sheet. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@ -239,7 +239,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the alert overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the alert. This can be useful in a button handler for determining which button was clicked to dismiss the alert. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@ -1527,7 +1527,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the loading overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the loading. This can be useful in a button handler for determining which button was clicked to dismiss the loading. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@ -1720,7 +1720,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the modal overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'.
|
||||
* @param role The role of the element that is dismissing the modal. For example, 'cancel' or 'backdrop'. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@ -1973,7 +1973,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the picker overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the picker. This can be useful in a button handler for determining which button was clicked to dismiss the picker. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
@ -2110,7 +2110,7 @@ export namespace Components {
|
||||
* Dismiss the popover overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the popover. For example, 'cancel' or 'backdrop'.
|
||||
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`.
|
||||
* @param dismissParentPopover If `true`, dismissing this popover will also dismiss a parent popover if this popover is nested. Defaults to `true`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string, dismissParentPopover?: boolean) => Promise<boolean>;
|
||||
/**
|
||||
@ -3111,7 +3111,7 @@ export namespace Components {
|
||||
/**
|
||||
* Dismiss the toast overlay after it has been presented.
|
||||
* @param data Any data to emit in the dismiss events.
|
||||
* @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
* @param role The role of the element that is dismissing the toast. This can be useful in a button handler for determining which button was clicked to dismiss the toast. Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`. This is a no-op if the overlay has not been presented yet. If you want to remove an overlay from the DOM that was never presented, use the [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
"dismiss": (data?: any, role?: string) => Promise<boolean>;
|
||||
/**
|
||||
|
||||
@ -23,28 +23,22 @@
|
||||
|
||||
<ion-list slot="content">
|
||||
<ion-item>
|
||||
<ion-label>Name</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Name" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Email</ion-label>
|
||||
<ion-input type="email"></ion-input>
|
||||
<ion-input label="Email" type="email"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Phone</ion-label>
|
||||
<ion-input type="tel"></ion-input>
|
||||
<ion-input label="Phone" type="tel"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Extension</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Extension" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Country</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Country" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>City/Province</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="City/Province" type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-accordion>
|
||||
@ -56,24 +50,19 @@
|
||||
|
||||
<ion-list slot="content">
|
||||
<ion-item>
|
||||
<ion-label>Address 1</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Address 1" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Address 2</ion-label>
|
||||
<ion-input type="email"></ion-input>
|
||||
<ion-input label="Address 2" type="email"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>City</ion-label>
|
||||
<ion-input type="tel"></ion-input>
|
||||
<ion-input label="City" type="tel"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>State</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="State" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Zip Code</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Zip Code" type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-accordion>
|
||||
@ -85,24 +74,19 @@
|
||||
|
||||
<ion-list slot="content">
|
||||
<ion-item>
|
||||
<ion-label>Address 1</ion-label>
|
||||
<ion-input id="address1" type="text"></ion-input>
|
||||
<ion-input label="Address 1" id="address1" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Address 2</ion-label>
|
||||
<ion-input type="email"></ion-input>
|
||||
<ion-input label="Address 2" type="email"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>City</ion-label>
|
||||
<ion-input type="tel"></ion-input>
|
||||
<ion-input label="City" type="tel"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>State</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input lable="State" type="text"></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Zip Code</ion-label>
|
||||
<ion-input type="text"></ion-input>
|
||||
<ion-input label="Zip Code" type="text"></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-accordion>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { AnimationBuilder, Mode } from '../../interface';
|
||||
import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
|
||||
|
||||
export interface ActionSheetOptions {
|
||||
header?: string;
|
||||
@ -19,7 +19,7 @@ export interface ActionSheetOptions {
|
||||
|
||||
export interface ActionSheetButton<T = any> {
|
||||
text?: string;
|
||||
role?: 'cancel' | 'destructive' | 'selected' | string;
|
||||
role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
|
||||
icon?: string;
|
||||
cssClass?: string | string[];
|
||||
id?: string;
|
||||
|
||||
@ -26,7 +26,24 @@
|
||||
// ---------------------------------------------------
|
||||
|
||||
.action-sheet-wrapper {
|
||||
@include margin(var(--ion-safe-area-top, 0), auto, var(--ion-safe-area-bottom, 0), auto);
|
||||
@include margin(var(--ion-safe-area-top, 0), auto, null, auto);
|
||||
/**
|
||||
* Bottom safe area is applied as padding so that it impacts the bounding box.
|
||||
* When the action sheet is shown/hidden, this element is transformed by translating
|
||||
* 100% of its height. This translation needs to include the bottom safe area
|
||||
* otherwise part of the action sheet will still be visible at the end of
|
||||
* the show transition.
|
||||
*
|
||||
* If this code is changed, reviewers should verify that the action
|
||||
* sheet still translates out of the viewport completely when the bottom
|
||||
* safe area is a positive value.
|
||||
*/
|
||||
@include padding(null, null, var(--ion-safe-area-bottom, 0), null);
|
||||
|
||||
// Using content-box to increase the height of the action sheet
|
||||
// wrapper by the bottom padding (safe area) to animate the
|
||||
// action sheet completely off the screen when safe area is set.
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
// iOS Action Sheet Container
|
||||
|
||||
@ -216,6 +216,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
|
||||
* This can be useful in a button handler for determining which button was
|
||||
* clicked to dismiss the action sheet.
|
||||
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
*
|
||||
* This is a no-op if the overlay has not been presented yet. If you want
|
||||
* to remove an overlay from the DOM that was never presented, use the
|
||||
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
@Method()
|
||||
async dismiss(data?: any, role?: string): Promise<boolean> {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
|
||||
import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
|
||||
import type { IonicSafeString } from '../../utils/sanitization';
|
||||
|
||||
export interface AlertOptions {
|
||||
@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
|
||||
|
||||
export interface AlertButton {
|
||||
text: string;
|
||||
role?: 'cancel' | 'destructive' | string;
|
||||
role?: LiteralUnion<'cancel' | 'destructive', string>;
|
||||
cssClass?: string | string[];
|
||||
id?: string;
|
||||
htmlAttributes?: { [key: string]: any };
|
||||
|
||||
@ -411,6 +411,10 @@ export class Alert implements ComponentInterface, OverlayInterface {
|
||||
* This can be useful in a button handler for determining which button was
|
||||
* clicked to dismiss the alert.
|
||||
* Some examples include: ``"cancel"`, `"destructive"`, "selected"`, and `"backdrop"`.
|
||||
*
|
||||
* This is a no-op if the overlay has not been presented yet. If you want
|
||||
* to remove an overlay from the DOM that was never presented, use the
|
||||
* [remove](https://developer.mozilla.org/en-US/docs/Web/API/Element/remove) method.
|
||||
*/
|
||||
@Method()
|
||||
async dismiss(data?: any, role?: string): Promise<boolean> {
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 33 KiB |
@ -1,6 +1,8 @@
|
||||
import type { ComponentInterface } from '@stencil/core';
|
||||
import { Build, Component, Element, Host, Method, h } from '@stencil/core';
|
||||
import type { FocusVisibleUtility } from '@utils/focus-visible';
|
||||
import { shoudUseCloseWatcher } from '@utils/hardware-back-button';
|
||||
import { printIonWarning } from '@utils/logging';
|
||||
import { isPlatform } from '@utils/platform';
|
||||
|
||||
import { config } from '../../global/config';
|
||||
@ -34,9 +36,20 @@ export class App implements ComponentInterface {
|
||||
import('../../utils/input-shims/input-shims').then((module) => module.startInputShims(config, platform));
|
||||
}
|
||||
const hardwareBackButtonModule = await import('../../utils/hardware-back-button');
|
||||
if (config.getBoolean('hardwareBackButton', isHybrid)) {
|
||||
const supportsHardwareBackButtonEvents = isHybrid || shoudUseCloseWatcher();
|
||||
if (config.getBoolean('hardwareBackButton', supportsHardwareBackButtonEvents)) {
|
||||
hardwareBackButtonModule.startHardwareBackButton();
|
||||
} else {
|
||||
/**
|
||||
* If an app sets hardwareBackButton: false and experimentalCloseWatcher: true
|
||||
* then the close watcher will not be used.
|
||||
*/
|
||||
if (shoudUseCloseWatcher()) {
|
||||
printIonWarning(
|
||||
'experimentalCloseWatcher was set to `true`, but hardwareBackButton was set to `false`. Both config options must be `true` for the Close Watcher API to be used.'
|
||||
);
|
||||
}
|
||||
|
||||
hardwareBackButtonModule.blockHardwareBackButton();
|
||||
}
|
||||
if (typeof (window as any) !== 'undefined') {
|
||||
|
||||
@ -251,6 +251,7 @@ export class Checkbox implements ComponentInterface {
|
||||
|
||||
return (
|
||||
<Host
|
||||
aria-checked={indeterminate ? 'mixed' : `${checked}`}
|
||||
class={createColorClasses(color, {
|
||||
[mode]: true,
|
||||
'in-item': hostContext('ion-item', el),
|
||||
|
||||
@ -39,3 +39,18 @@ describe('ion-checkbox: disabled', () => {
|
||||
expect(checkbox.checked).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('ion-checkbox: indeterminate', () => {
|
||||
it('should have a mixed value for aria-checked', async () => {
|
||||
const page = await newSpecPage({
|
||||
components: [Checkbox],
|
||||
html: `
|
||||
<ion-checkbox indeterminate="true">Checkbox</ion-checkbox>
|
||||
`,
|
||||
});
|
||||
|
||||
const checkbox = page.body.querySelector('ion-checkbox')!;
|
||||
|
||||
expect(checkbox.getAttribute('aria-checked')).toBe('mixed');
|
||||
});
|
||||
});
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-item>
|
||||
<ion-input value="March 15, 2022 at 12:43 AM"></ion-input>
|
||||
<ion-input aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
|
||||
<ion-datetime-button slot="end" id="default-button" datetime="default-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>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 22 KiB |
@ -323,7 +323,12 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
*/
|
||||
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
|
||||
test.describe(title('datetime: visibility'), () => {
|
||||
test('should reset month/year interface when hiding datetime', async ({ page }) => {
|
||||
// TODO FW-6015 re-enable on webkit when bug is fixed
|
||||
test('should reset month/year interface when hiding datetime', async ({ page, skip }) => {
|
||||
skip.browser(
|
||||
'webkit',
|
||||
'This is buggy in a headless Linux environment: https://bugs.webkit.org/show_bug.cgi?id=270358'
|
||||
);
|
||||
await page.setContent(
|
||||
`
|
||||
<ion-datetime></ion-datetime>
|
||||
|
||||
@ -214,8 +214,7 @@
|
||||
<ion-popover class="options-popover" trigger="popover-trigger">
|
||||
<ion-list lines="none">
|
||||
<ion-item>
|
||||
<ion-label>Dark Mode</ion-label>
|
||||
<ion-checkbox slot="end"></ion-checkbox>
|
||||
<ion-checkbox>Dark Mode</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item detail="true" href="?ionic:mode=ios">
|
||||
<ion-label>iOS Mode</ion-label>
|
||||
@ -225,23 +224,19 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Show Default Title</ion-label>
|
||||
<ion-toggle id="titleToggle"></ion-toggle>
|
||||
<ion-toggle id="titleToggle">Show Default Title</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Show Default Buttons</ion-label>
|
||||
<ion-toggle id="buttonsToggle"></ion-toggle>
|
||||
<ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Locale</ion-label>
|
||||
<ion-input placeholder="default" id="locale"></ion-input>
|
||||
<ion-input label="Locale" placeholder="default" id="locale"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Color</ion-label>
|
||||
<ion-select id="color" value="primary">
|
||||
<ion-select label="Color" id="color" value="primary">
|
||||
<ion-select-option value="primary">Primary</ion-select-option>
|
||||
<ion-select-option value="secondary">Secondary</ion-select-option>
|
||||
<ion-select-option value="tertiary">Tertiary</ion-select-option>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
@ -1,5 +1,5 @@
|
||||
import type { ComponentInterface } from '@stencil/core';
|
||||
import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
|
||||
import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
|
||||
import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
|
||||
import type { Attributes } from '@utils/helpers';
|
||||
import { inheritAttributes, raf } from '@utils/helpers';
|
||||
@ -358,15 +358,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
|
||||
}
|
||||
|
||||
private getFirstInteractive() {
|
||||
if (Build.isTesting) {
|
||||
/**
|
||||
* Pseudo selectors can't be tested in unit tests.
|
||||
* It will cause an error when running the tests.
|
||||
*
|
||||
* TODO: FW-5205 - Remove the build conditional when this is fixed in Stencil
|
||||
*/
|
||||
return undefined;
|
||||
}
|
||||
const controls = this.el.querySelectorAll<HTMLElement>(
|
||||
'ion-toggle:not([disabled]), ion-checkbox:not([disabled]), ion-radio:not([disabled]), ion-select:not([disabled])'
|
||||
);
|
||||
|
||||
@ -16,23 +16,19 @@
|
||||
<h1>Item</h1>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Input</ion-label>
|
||||
<ion-input placeholder="Placeholder"></ion-input>
|
||||
<ion-input label="Item with Input" placeholder="Placeholder"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-label>Item disabled with Input</ion-label>
|
||||
<ion-input placeholder="Placeholder"></ion-input>
|
||||
<ion-input label="Item disabled with Input" placeholder="Placeholder"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Input disabled</ion-label>
|
||||
<ion-input placeholder="Placeholder" disabled></ion-input>
|
||||
<ion-input label="Item with Input disabled" placeholder="Placeholder" disabled></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Item with Select</ion-label>
|
||||
<ion-select>
|
||||
<ion-select label="Item with Select" label-placement="floating">
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
@ -44,8 +40,7 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-label position="floating">Item disabled with Select</ion-label>
|
||||
<ion-select>
|
||||
<ion-select label="Item disabled with Select" label-placement="floating">
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
@ -57,8 +52,7 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label position="floating">Item with Select disabled</ion-label>
|
||||
<ion-select disabled>
|
||||
<ion-select label="Item with Select disabled" label-placement="floating" disabled>
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
@ -70,33 +64,27 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Toggle</ion-label>
|
||||
<ion-toggle slot="end"></ion-toggle>
|
||||
<ion-toggle>Item with Toggle</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-label>Item disabled with Toggle</ion-label>
|
||||
<ion-toggle slot="end"></ion-toggle>
|
||||
<ion-toggle>Item disabled with Toggle</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Toggle disabled</ion-label>
|
||||
<ion-toggle slot="end" disabled></ion-toggle>
|
||||
<ion-toggle disabled>Item with Toggle disabled</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Radio</ion-label>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
<ion-radio value="biff">Item with Radio</ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item disabled>
|
||||
<ion-label>Item disabled with Radio</ion-label>
|
||||
<ion-radio slot="start" value="biff"></ion-radio>
|
||||
<ion-radio value="biff">Item disabled with Radio</ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Item with Radio disabled</ion-label>
|
||||
<ion-radio slot="start" value="biff" disabled></ion-radio>
|
||||
<ion-radio value="biff" disabled>Item with Radio disabled</ion-radio>
|
||||
</ion-item>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@ -98,8 +98,9 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="overflow-visible">
|
||||
<ion-label position="fixed">PIN:</ion-label>
|
||||
<ion-input
|
||||
label="PIN:"
|
||||
label-placement="fixed"
|
||||
type="number"
|
||||
pattern="[0-9]*"
|
||||
inputmode="numeric"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
@ -31,32 +31,27 @@
|
||||
<ion-content class="ion-padding-vertical">
|
||||
<ion-list class="basic">
|
||||
<ion-item>
|
||||
<ion-label>No Helper/Error</ion-label>
|
||||
<ion-input name="input" id="text"></ion-input>
|
||||
<ion-input label="No Helper/Error" name="input" id="text"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Helper and Error</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Helper and Error"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Helper Only</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Helper Only"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Error Only</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Error Only"></ion-input>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="custom">
|
||||
<ion-label>Both w/ Custom CSS</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Both w/ Custom CSS"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
@ -66,16 +61,14 @@
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-item fill="solid">
|
||||
<ion-label>Helper and Error (Fill Solid)</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Helper and Error (Fill Solid)"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
<ion-col>
|
||||
<ion-item fill="outline">
|
||||
<ion-label>Helper and Error (Fill Outline)</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input label="Helper and Error (Fill Outline)"></ion-input>
|
||||
<ion-note slot="helper">Helper Text</ion-note>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
@ -84,8 +77,7 @@
|
||||
<ion-row>
|
||||
<ion-col>
|
||||
<ion-item>
|
||||
<ion-label>Toggle Error</ion-label>
|
||||
<ion-toggle slot="start" id="error-toggle" color="danger"></ion-toggle>
|
||||
<ion-toggle id="error-toggle" color="danger">Toggle Error</ion-toggle>
|
||||
</ion-item>
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
@ -39,18 +39,6 @@
|
||||
<ion-item id="btnUndefinedValue" button="true" onclick="setUndefinedValue()">
|
||||
<ion-label>Set "undefined" values</ion-label>
|
||||
</ion-item>
|
||||
<ion-item id="btnLabelsDefault" button="true" onclick="setLabelDefault()">
|
||||
<ion-label>Labels: Default</ion-label>
|
||||
</ion-item>
|
||||
<ion-item id="btnLabelsFloating" button="true" onclick="setLabelFloating()">
|
||||
<ion-label>Labels: Floating</ion-label>
|
||||
</ion-item>
|
||||
<ion-item id="btnLabelsStacked" button="true" onclick="setLabelStacked()">
|
||||
<ion-label>Labels: Stacked</ion-label>
|
||||
</ion-item>
|
||||
<ion-item id="btnLabelsFixed" button="true" onclick="setLabelFixed()">
|
||||
<ion-label>Labels: Fixed</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-popover>
|
||||
</ion-toolbar>
|
||||
@ -60,28 +48,23 @@
|
||||
<form onsubmit="return onSubmit(event)">
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Input</ion-label>
|
||||
<ion-input name="input" id="input" placeholder="Input"></ion-input>
|
||||
<ion-input label="Input" name="input" id="input" placeholder="Input"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Textarea</ion-label>
|
||||
<ion-textarea name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
|
||||
<ion-textarea label="Textarea" name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Toggle</ion-label>
|
||||
<ion-toggle name="toggle" id="toggle" slot="end"></ion-toggle>
|
||||
<ion-toggle name="toggle" id="toggle">Toggle</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Checkbox</ion-label>
|
||||
<ion-checkbox name="checkbox" id="checkbox" slot="end"></ion-checkbox>
|
||||
<ion-checkbox name="checkbox" id="checkbox">Checkbox</ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Select</ion-label>
|
||||
<ion-select name="select" id="select" placeholder="Select">
|
||||
<ion-select label="Select" name="select" id="select" placeholder="Select">
|
||||
<ion-select-option value="1">1</ion-select-option>
|
||||
<ion-select-option value="2">2</ion-select-option>
|
||||
<ion-select-option value="3">3</ion-select-option>
|
||||
@ -93,8 +76,7 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Range</ion-label>
|
||||
<ion-range name="range" id="range" value="10"></ion-range>
|
||||
<ion-range label="Range" name="range" id="range" value="10"></ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
@ -147,28 +129,6 @@
|
||||
toggle.checked = checkbox.checked = false;
|
||||
}
|
||||
|
||||
function setLabelDefault() {
|
||||
setLabelPosition(undefined);
|
||||
}
|
||||
|
||||
function setLabelFixed() {
|
||||
setLabelPosition('fixed');
|
||||
}
|
||||
|
||||
function setLabelFloating() {
|
||||
setLabelPosition('floating');
|
||||
}
|
||||
|
||||
function setLabelStacked() {
|
||||
setLabelPosition('stacked');
|
||||
}
|
||||
|
||||
function setLabelPosition(position) {
|
||||
Array.from(document.querySelectorAll('form ion-list ion-label')).forEach(
|
||||
(label) => (label.position = position)
|
||||
);
|
||||
}
|
||||
|
||||
function getFormControls() {
|
||||
return formControlIds.reduce((acc, id) => {
|
||||
acc[id] = document.querySelector(`#${id}`);
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 21 KiB |
@ -29,14 +29,6 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// TODO(FW-5289): move to :host-context(.item)
|
||||
// Shouldn't need :not(.item-input) as this was
|
||||
// only needed because of the specificity with
|
||||
// :not(.item-legacy)
|
||||
:host-context(.item:not(.item-input):not(.item-legacy)) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
:host(.ion-color) {
|
||||
color: current-color(base);
|
||||
}
|
||||
|
||||
@ -41,58 +41,45 @@
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label color="tertiary">Tertiary</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="custom">Custom</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="fixed">Fixed</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="floating">Floating</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="floating-color">
|
||||
<ion-label position="floating" color="success">Floating: Success</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">Stacked</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="stacked-color">
|
||||
<ion-label position="stacked" color="danger">Stacked: Danger</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-item color="tertiary">
|
||||
<ion-label position="floating">(Item: Tertiary) Floating</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item color="primary">
|
||||
<ion-label position="stacked">(Item: Primary) Stacked</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="floating-color" color="tertiary">
|
||||
<ion-label position="floating" color="success">(Item: Tertiary) Floating: Success</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
<ion-item class="stacked-color" color="primary">
|
||||
<ion-label position="stacked" color="danger">(Item: Primary) Stacked: Danger</ion-label>
|
||||
<ion-input></ion-input>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`
|
||||
<ion-item>
|
||||
<ion-label position="stacked">My Label</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input aria-label="My Label"></ion-input>
|
||||
</ion-item>
|
||||
`,
|
||||
config
|
||||
@ -49,7 +49,7 @@ configs().forEach(({ title, screenshot, config }) => {
|
||||
`
|
||||
<ion-item>
|
||||
<ion-label position="floating">My Label</ion-label>
|
||||
<ion-input></ion-input>
|
||||
<ion-input aria-label="My Label"></ion-input>
|
||||
</ion-item>
|
||||
`,
|
||||
config
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.3 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user