diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml new file mode 100644 index 00000000000..d35a183f9ac --- /dev/null +++ b/.github/workflows/CI.yml @@ -0,0 +1,27 @@ +# GitHub Actions docs +# https://help.github.com/en/articles/about-github-actions +# https://help.github.com/en/articles/workflow-syntax-for-github-actions + +name: Install Dependencies, Lint + +on: [pull_request] + +jobs: + test: + name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }} + runs-on: ${{ matrix.os }} + strategy: + matrix: + node_version: [16] + os: [windows-latest, macOS-latest] + + steps: + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node_version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node_version }} + - name: Install Dependencies + run: npm ci --legacy-peer-deps + - name: Lint + run: npm run lint diff --git a/.prettierignore b/.prettierignore index 85fee6b4234..c9e0e72442c 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,13 +1,15 @@ src/theme/DocItem src/theme/DocPage legacy-stencil-components -node_modules scripts/bak -src/styles.bak -src/pages + docs/api docs/native docs/cli/commands +static/code/stackblitz + .docusaurus -.github \ No newline at end of file +.github +build +node_modules diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index 4122fc68e28..00000000000 --- a/.prettierrc.js +++ /dev/null @@ -1,11 +0,0 @@ -module.exports = { - ...require("@ionic/prettier-config"), - overrides: [ - { - files: "*.md", - options: { - "parser": "mdx" - } - } - ] -}; \ No newline at end of file diff --git a/docs/angular/slides.md b/docs/angular/slides.md index f294bcc351c..7f40b012881 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -75,7 +75,7 @@ If you would like to use the Core version instead, which does not include additi To migrate over your CSS, first update your selectors to target the new custom elements instead: | ion-slides Selector | Swiper Selector | -| ------------------- | ------------------ | +| ------------------- | ------------------ | | `ion-slides` | `swiper-container` | | `ion-slide` | `swiper-slide` | @@ -155,9 +155,7 @@ export class HomePage { ```html - - ... - + ... ``` :::note @@ -190,11 +188,11 @@ To set these options as properties directly on `` we would do Below is a full list of property changes when going from `ion-slides` to Swiper Element: -| Name | Notes | -| --------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| options | Set each option as a property directly on the `` component. | -| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. | -| pager | Use the `pagination` property instead. | +| Name | Notes | +| ------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| options | Set each option as a property directly on the `` component. | +| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. | +| pager | Use the `pagination` property instead. | :::note All properties available in Swiper Element can be found at https://swiperjs.com/swiper-api#parameters. @@ -306,9 +304,7 @@ All methods and properties available on the Swiper instance can be found at - ... - + ... ``` :::note diff --git a/docs/cli/livereload.md b/docs/cli/livereload.md index 23703954a9e..4d2d160ee78 100644 --- a/docs/cli/livereload.md +++ b/docs/cli/livereload.md @@ -64,8 +64,9 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS. For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS: + ```shell ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key' ``` -Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). \ No newline at end of file +Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). diff --git a/docs/developing/config.md b/docs/developing/config.md index 10ad73cec8d..1bb117883fa 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -21,7 +21,6 @@ Ionic Config is not reactive. Updating the config's value after the component ha import PerComponentExample from '@site/docs/developing/config/per-component/index.md'; - ## Per-Platform Config @@ -33,7 +32,6 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index. - ### Fallbacks The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: @@ -59,7 +57,7 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config. | | | | --------------- | -------------------------------------------------------------------------------- | | **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. | -| **Signature** | `get(key: string, fallback?: any) => any` | +| **Signature** | `get(key: string, fallback?: any) => any` | #### Examples @@ -79,7 +77,7 @@ class AppComponent { | | | | --------------- | ------------------------------------------------------------------------------------ | | **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. | -| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` | +| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` | #### Examples @@ -99,7 +97,7 @@ class AppComponent { | | | | --------------- | ------------------------------------------------------------------------------- | | **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. | -| **Signature** | `getNumber(key: string, fallback?: number) => number` | +| **Signature** | `getNumber(key: string, fallback?: number) => number` | ## Interfaces @@ -107,41 +105,41 @@ class AppComponent { Below are the config options that Ionic uses. -| Config | Type | Description | -| ------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | -| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | -| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | -| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | -| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | -| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | -| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | -| `backButtonText` | `string` | Overrides the default text in all `` components. | -| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | -| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | -| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | -| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | -| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | -| `menuIcon` | `string` | Overrides the default icon in all `` components. | -| `menuType` | `string` | Overrides the default menu type for all `` components. | -| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | -| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | -| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | -| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | -| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | -| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | -| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | -| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | -| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | -| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | -| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | -| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | -| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | -| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | -| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | -| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | -| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | +| Config | Type | Description | +| --------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | +| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | +| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | +| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | +| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | +| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | +| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | +| `backButtonText` | `string` | Overrides the default text in all `` components. | +| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | +| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | +| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | +| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | +| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | +| `menuIcon` | `string` | Overrides the default icon in all `` components. | +| `menuType` | `string` | Overrides the default menu type for all `` components. | +| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | +| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | +| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | +| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | +| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | +| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | +| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | +| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | +| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | +| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | +| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | +| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | +| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | +| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | +| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | +| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | +| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | +| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md index bbfbaa83a71..c2358647c26 100644 --- a/docs/developing/config/global/index.md +++ b/docs/developing/config/global/index.md @@ -17,10 +17,11 @@ import TabItem from '@theme/TabItem'; window.Ionic = { config: { rippleEffect: false, - mode: 'md' - } -} + mode: 'md', + }, +}; ``` + @@ -38,10 +39,12 @@ import { IonicModule } from '@ionic/angular'; ... }) ``` + The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`). + ```tsx title="App.tsx" import { setupIonicReact } from '@ionic/react'; @@ -50,18 +53,19 @@ setupIonicReact({ mode: 'md', }); ``` + ```tsx title="main.ts" - import { IonicVue } from '@ionic/vue'; import { createApp } from 'vue'; - + createApp(App).use(IonicVue, { rippleEffect: false, mode: 'md', }); ``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md index 64b868a70ee..0e4aadeee60 100644 --- a/docs/developing/config/per-component/index.md +++ b/docs/developing/config/per-component/index.md @@ -19,9 +19,9 @@ import TabItem from '@theme/TabItem'; window.Ionic = { config: { // Not recommended when your app requires reactive values - backButtonText: 'Go Back' - } -} + backButtonText: 'Go Back', + }, +}; ``` **Recommended** @@ -31,7 +31,7 @@ window.Ionic = { ``` + @@ -75,6 +76,7 @@ class MyComponent { backButtonText = 'Go Back'; } ``` + @@ -85,7 +87,7 @@ import { setupIonicReact } from '@ionic/react'; setupIonicReact({ // Not recommended when your app requires reactive values - backButtonText: 'Go Back' + backButtonText: 'Go Back', }); ``` @@ -106,6 +108,7 @@ const ExampleComponent = () => { ) } ``` + @@ -114,10 +117,10 @@ const ExampleComponent = () => { ```ts import { IonicVue } from '@ionic/vue'; import { createApp } from 'vue'; - - // Not recommended when your app requires reactive values + +// Not recommended when your app requires reactive values createApp(App).use(IonicVue, { - backButtonText: 'Go Back' + backButtonText: 'Go Back', }); ``` @@ -139,5 +142,6 @@ createApp(App).use(IonicVue, { const backButtonText = ref('Go Back'); ``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md index 02a5f27a3c0..6390a6120d1 100644 --- a/docs/developing/config/per-platform-fallback/index.md +++ b/docs/developing/config/per-platform-fallback/index.md @@ -34,6 +34,7 @@ const getConfig = () => { ... }); ``` + @@ -43,18 +44,18 @@ import { isPlatform, setupIonicReact } from '@ionic/react'; const getConfig = () => { if (isPlatform('hybrid')) { return { - tabButtonLayout: 'label-hide' - } + tabButtonLayout: 'label-hide', + }; } - + return { - tabButtonLayout: 'icon-top' + tabButtonLayout: 'icon-top', }; }; setupIonicReact(getConfig()); - ``` + @@ -64,16 +65,17 @@ import { IonicVue, isPlatform } from '@ionic/vue'; const getConfig = () => { if (isPlatform('hybrid')) { return { - tabButtonLayout: 'label-hide' - } + tabButtonLayout: 'label-hide', + }; } - + return { - tabButtonLayout: 'icon-top' + tabButtonLayout: 'icon-top', }; }; createApp(App).use(IonicVue, getConfig()); -```` +``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md index 243cfa9c2fc..a5b8cdc490a 100644 --- a/docs/developing/config/per-platform-overrides/index.md +++ b/docs/developing/config/per-platform-overrides/index.md @@ -37,6 +37,7 @@ const getConfig = () => { ... }); ``` + @@ -59,8 +60,8 @@ const getConfig = () => { }; setupIonicReact(getConfig()); - ``` + @@ -83,6 +84,7 @@ const getConfig = () => { }; createApp(App).use(IonicVue, getConfig()); -```` +``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md index 7d17299d0f8..d21553ad1cf 100644 --- a/docs/developing/config/per-platform/index.md +++ b/docs/developing/config/per-platform/index.md @@ -31,6 +31,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; ... }) ``` + @@ -45,6 +46,7 @@ setupIonicReact({ animated: !isPlatform('mobileweb'), }); ``` + @@ -58,6 +60,7 @@ import { IonicVue, isPlatform } from '@ionic/vue'; createApp(App).use(IonicVue, { animated: !isPlatform('mobileweb'), }); -```` +``` + - \ No newline at end of file + diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md index 2f3271613dc..6813f9b4ceb 100644 --- a/docs/developing/hardware-back-button.md +++ b/docs/developing/hardware-back-button.md @@ -338,8 +338,8 @@ It is recommended to check whether or not the user is on the root page prior to The table below lists all of the internal hardware back button event handlers that Ionic Framework uses. The `Propagates` column notes whether or not that particular handler tells Ionic Framework to call the next back button handler. -| Handler | Priority | Propagates | Description | -| ---------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| Handler | Priority | Propagates | Description | +| ---------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- | | Overlays | 100 | No | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. | -| Menu | 99 | No | Applies to `ion-menu`. | -| Navigation | 0 | Yes | Applies to routing navigation (i.e. Angular Routing). | +| Menu | 99 | No | Applies to `ion-menu`. | +| Navigation | 0 | Yes | Applies to routing navigation (i.e. Angular Routing). | diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md index d23ea52b4b4..05bb0a88aaa 100644 --- a/docs/layout/css-utilities.md +++ b/docs/layout/css-utilities.md @@ -141,8 +141,7 @@ The float CSS property specifies that an element should be placed along the left src="https://ionicframework.com/docs/img/demos/avatar.svg" height="50px" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac - vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.

float-left

@@ -152,8 +151,7 @@ The float CSS property specifies that an element should be placed along the left height="50px" class="ion-float-left" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac - vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.

float-right

@@ -163,8 +161,7 @@ The float CSS property specifies that an element should be placed along the left height="50px" class="ion-float-right" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac - vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. diff --git a/docs/layout/structure.md b/docs/layout/structure.md index 5315d0cd9de..700e77372fa 100644 --- a/docs/layout/structure.md +++ b/docs/layout/structure.md @@ -34,17 +34,14 @@ import Footer from '@site/static/usage/v7/footer/basic/index.md';