Skip to content

Commit

Permalink
feat(translation/jp): 20231030 update (#3217)
Browse files Browse the repository at this point in the history
* fix(release-notes): remove element symbols and names and update design (#2921)

* docs(angular): add missing non-null assertion operator (#2683)

* fix(): page components file structure (#2907)

* docs(your-first-app): mark webviewPath as optional in UserPhoto interface (#2926)

Co-authored-by: derf974 <[email protected]>

* fix(angular-getting-started): type errors (#2688)

Co-authored-by: Greg Billetdeaux <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>

* Revert "fix(): page components file structure (#2907)" (#2928)

This reverts commit d848669.

* refactor(api): v5 docs use internal import (#2929)

* fix(playground): allow automatic mode selection when relevant base file is overwritten (#2922)

* fix: styles for ion-slides migration (#2930)

* refactor(playground): remove unused angularModuleOptions feature (#2933)

* docs(ionicslides): include slides param link (#2934)

Co-authored-by: Arno <[email protected]>

* docs(tab): remove references to using Stencil with tab (#2932)

* chore(crowdin): api docs are no longer ignored (#2938)

* fix(docsdemo, playground): add keys to list items (#2940)

* fix(ColorAccordion, LayeredColorsSelect): add keys to list items (#2942)

* fix(docdemo, coloraccordion): correctly format SVG/CSS props (#2941)

* chore(contributing): remove slack link on v5 (#2939)

* docs(Swiper): fix typo in slidesPerView value (#2945)

* docs(android): update where to find SDK/AVD managers (#2947)

Co-authored-by: rtpHarry <[email protected]>

* chore(intro/next): Elite Ionic -> Ionic Start (#2931)

* docs(developing): tip for changing node_modules permissions (#2950)

Co-authored-by: Utku Demir <[email protected]>

* docs(breadcrumbs): update vue example (#2949)

* docs(lifecycle): clarify method descriptions (#2951)

Co-authored-by: BAYiTUPAi <[email protected]>

* docs(updating): add angular toolkit upgrade to v7 upgrade guide (#2952)

* chore(lint): add prettier and lint on CI (#2946)

- Adds prettier to a lint command (prettier was installed just not used anywhere)
- Runs `npm install` & `npm lint` on CI
- Updates the `.prettierignore` to be more up-to-date with the current docs structure 
  - `static/code/stackblitz` files were ignored because it was modifying the indentation surrounding `{ TEMPLATE }` and this caused the StackBlitz to look worse when opened
- Adds `mdx` as a parser to the `@ionic/prettier-config` and updates this repo to use that version

* docs(support): update angular support policy (#2953)

This PR updates the support table to note that Angular 16 is supported for Ionic v7

* docs(range): update docs to use label prop (#2955)

* fix(tabs): correct router playground src (#2957)

* docs(app-store): add reference to App Store Connect (#2198)

Co-authored-by: Brandy Carney <[email protected]>

* docs(developing): update Java instructions to mention JDK 11 for latest cordova-android (#2200)

Updates the developing android documentation to reflect the latest Cordova guide here: https://cordova.apache.org/docs/en/11.x/guide/platforms/android/#java-development-kit-jdk

---------

Co-authored-by: Brandy Carney <[email protected]>

* docs(react): remove IonContent from tabs example (#2958)

* docs(vue): remove IonContent from tabs example (#2959)

* docs(dark-mode): replace deprecated addListener() usage (#1908)

Co-authored-by: Maria Hutt <[email protected]>

* docs(quickstart): remove typescript for imports and tests (#2216)

* Update quickstart.md

Currently, the "use Javascript" section is incomplete as Jest is still configured to use Typescript and running `npm run test:unit` will throw errors. The section was revised to to include Jest Javascript configuration changes.

---------

Co-authored-by: Shawn Taylor <[email protected]>

* fix(CodeColor, LayeredColorsSelect): fix invalid DOM nesting (#2963)

* docs(react): remove unopened closing tag (#2964)

* fix: Ionic CLI links to latest docs page (#2961)

* docs(tabs): angular usage does not use explicit ion-router-outlet (#2965)

Co-authored-by: skytern <[email protected]>

* doc(CORS): update the native options (#2954)

Include different options for Capacitor and Cordova (legacy).
Also fixes what was a dead link to Ionic Native.

* feat(playground): inline dependencies per framework example (#2970)

* chore: update minor release to happen every 4 weeks if needed (#2972)

* docs(select): add label slot and aria label playgrounds (#2971)

* docs(vue): add community guide by theafolayan (#1795)

Co-authored-by: Maria Hutt <[email protected]>

* docs(PWAs): add Vue to list of PWA deployment guides (#2974)

Co-authored-by: VAS000 <[email protected]>

* docs(spinner): add docs for resizing (#2966)

* docs(spinner): add docs for resizing

* docs(developing): update default Android SDK path (#2771)

Co-authored-by: Brandy Carney <[email protected]>

* docs(native): fix typo (#2976)

* chore: prettier formatting (#2979)

* chore: prettier formatting

* chore: revert invalid changes

* docs(angular): relative routing is supported (#2980)

Co-authored-by: rdlabo<[email protected]>>

* docs(angular): update component testing code snippets (#2985)

* chore(deps): update react and vue playground dependencies (#2989)

* docs(datetime): add playground for styling wheel pickers (#2982)

* docs(angular):updated component photo service (#2986) (#2987)

* docs(angular):updated component photo service (#2986)

* docs(angular):changed component photo service (#2986)

changed photo.path --> photo.path!

* remove extra newline

---------

Co-authored-by: Amanda Johnston <[email protected]>

* docs(android): clarify steps to set up native project and run with Capacitor (#1889)

Co-authored-by: Shawn Taylor <[email protected]>

* docs(security): content security policies (#2975)


Co-authored-by: Liam DeBeasi <[email protected]>

* chore(fundamentals): clarify events (#2992)

* docs(app-store): add release flag (#2990)

Co-authored-by: zhangshengjie <[email protected]>

* docs(vue): fix lifecycle table formatting (#2967)

Adds a new line before the table to allow the markdown to render properly

* docs(infinite-scroll): use the correct custom event (#2995)

* docs(angular): fix indentation in 5-adding-mobile.md (#2855)

* docs: fix indentation in 5-adding-mobile.md

* Also change in v7 docs

---------

Co-authored-by: Shawn Taylor <[email protected]>

* docs(input): add label slot and no visible label demos (#2997)

* docs(select): add playgrounds for toggle icon customization (#2996)

* add playgrounds

* lint

* Update static/usage/v7/select/customization/custom-toggle-icons/index.md

Co-authored-by: Liam DeBeasi <[email protected]>

* Update static/usage/v7/select/customization/icon-flip-behavior/index.md

Co-authored-by: Liam DeBeasi <[email protected]>

* fix icon usage for React and Vue

* rename toggleIconWhenOpen to expandedIcon

---------

Co-authored-by: Liam DeBeasi <[email protected]>

* docs(input): input masking examples (#2993)

* docs(textarea): add label slot examples (#3001)

* chore: add playgrounds for JP docs (#3004)

* chore: upgrade maskito dependencies to v1 (#3005)

* fix(playground-tabs): show arrows on long list (#3009)

* docs(native): improve grammar

fixed wording mistakes

* docs(your-first-app): switch to Date.now() (#2915)

Co-authored-by: Maria Hutt <[email protected]>

* docs(list): use dark mode aware color (#3015)

Co-authored-by: reslear <[email protected]>

* docs(maskito): update credit card mask format (#3007)

* chore(ci): check for diff after running prettier (#2981)

* chore: lint content (#3020)

* docs(animation): add playground for override example (#3018)

Co-authored-by: dillionmegida <[email protected]>

* docs(button): include accessibility section with best practices for text wrapping (#3008)

* docs(vue): Improve documentation for removing Typescript steps in v7 (#3002)

* feat(playground): add support for generating a new playground (#2994)

* Add prompts and generate vue file

* Generate other files

* Use variables in headers

* Add readme

* Add prompt with option to generate css files

* Add version to prompt and modify files accordingly

* Update readme

* Address PR review

* Add hint for component name casing

* Add Angular TS option

* Reformat to use advanced prompting

* Refactor where markdown output comes from

* Remove default value for path; add validation

* Add validation for component name

---------

Co-authored-by: Amanda Johnston <[email protected]>

* chore: enable renovate for component playground deps (#3016)

* Configure Renovate (#3017)

* Add renovate.json

* chore: remove invalid setting

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Sean Perkins <[email protected]>

* docs(modal): clarify swipe to close section (#3021)

* docs(react): clarify IonTabs behavior with IonPage (#3012)

* chore(renovate): remove extending docs config (#3027)

* docs(animation): add playground for group example (#3025)

* docs(animations): add playground for chained animations (#3026)

Co-authored-by: dillionmegida <[email protected]>

* chore(deps): update dependency vite to v2.9.16 [security] (#3028)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(animation): add playground for basic animations (#3031)

Co-authored-by: dillionmegida <[email protected]>

* fix(deps): update dependency @types/node to v16.18.38 (#3033)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(generation): correct angular imports (#3034)

* Refactor: Improve readability

* Combine index files and fix bug with angular ts generation

* docs(animations): buttons in StackBlitz demos do not need id (#3037)

* chore(renovate): limit include paths (#3030)

* chore(renovate): limit include paths

* fix: use matchPackagePatterns

* docs(animations): add playground for before and after hooks (#3035)

Co-authored-by: dillionmegida <[email protected]>

* docs(animations): add playground for preference based (#3036)

Co-authored-by: dillionmegida <[email protected]>

* docs(angular): add type assertion for your first app code snippet (#2910)

Was getting an error: "Type 'string | undefined' is not assignable to type 'string'." Adding an exclamation point at the end of line 111 solves it.

* docs(animation): add playground example for double-click gesture  (#3042)

Co-authored-by: dillionmegida < [email protected]>

Co-authored-by: Maria Hutt <[email protected]>

* docs(animation): add gesture animation playground (#3043)

Co-authored-by: dillionmegida <[email protected]>

* docs(gesture): add playground example for basic usage (#3038)

Co-authored-by: dillionmegida <[email protected]>

* docs(animation): add playground example for keyframes (#3039)

Co-authored-by: dillionmegida < [email protected]>

* docs(item-sliding): clarify expandable behavior (#3044)

* docs(menu): add playgrounds for menu sides and multiple menus (#3049)

* fix(): fix conflict package.json

* chore(): fixed lint

* fix(ci): fix lint and diff

* chore: lint

* fix(script): follow new docs script

* translate

* chore

* chore(): fix confrect

* fmt

* fix(): remove i18n folder from git

* chore: JP docs point to v7 (#3056)

* chore: use correct name for JP docs (#3057)

* docs(android,iOS): link to capacitor getting started guide (#3055)

* docs(theming): add section about safe area padding (#3065)

* docs(quickstart): change wording for installing CLI (#3040)

Co-authored-by: Maria Hutt <[email protected]>

* docs(previewing): adding instruction about "ionic serve --external"  (#3045)

Co-authored-by: Maria Hutt <[email protected]>

* docs(theming): migrate Dark Mode Codepens to playground examples (#3067)

Resolves #2998

Co-authored-by: Colum Ferry <[email protected]>

* docs(api): add accessibility section for new htmlAttributes property (#3064)

* docs(vue): streamline usage examples with script setup syntax (#2956)

* chore(docs): streamline demo using script setup syntax

Simplifies usage demo using Vue’s script setup syntax.

---------

Co-authored-by: Shawn Taylor <[email protected]>

* docs(input): update `Maskito` documentation link (#3072)

* docs(react): document lifecycle hook dependencies arg (#3078)

resolves #1949

* docs(input): update `Maskito` repository link (#3074)

* feat(playground): add prop to display console messages from demo (#3060)

* fix(): consolidate docusaurus tab groupids (#3079)

* fix(vue): fix bug with key type

* fix(): alphabetize sidebar (#3081)

* Revert "fix(): alphabetize sidebar (#3081)" (#3087)

This reverts commit 760204f.

* docs(picker): describe how to set the initial value of a picker column (#3091)

* chore: standardize title tag format (#3092)

* docs(datetime): add best practices for setting value async (#3053)

* fix(docs): fix merge mistake

* translate(core): create translate file

* fmt

* translate(docs): translated

* fmt

* chore(CODEOWNERS): create codeowners file and add me

* feat(generation): generate playgrounds for guides (#3098)

* Conditional prompting

* Improve console.log copy

* Adjust templates for guide playground generation

* Add validation

---------

Co-authored-by: Brandy Carney <[email protected]>

* chore: format generated property types (#3080)

* docs(content): add playground for safe area usage (#3102)

* docs(fab): add playground for safe area workaround (#3105)

* docs(fab): add playground for safe area workaround

* Add safe area sizes for stackblitzes

* Use both component & global css files; use both scoped and global style tags

* feat(checkbox, radio, toggle, range): stacked labels for form controls (#3097)

Co-authored-by: Brandy Carney <[email protected]>

* docs(datetime): adds playground for styling calendar days using shadow parts (#3101)

* chore(angular, html, react, vue): revert package versions on stackblitz (#3106)

* feat(many): update playgrounds to use showConsole prop instead of showing data within demo (#3107)

* docs(input): notes about appropriate uses of counter (#3109)

* docs(input): note deprecated properties

---------

Co-authored-by: Brandy Carney <[email protected]>

* fix(nav-link): opt-out of vue reactivity for component binding (#3113)

Co-authored-by: David Kagiri <[email protected]>

* chore(react): update react router links (#3099)

* Fix doc links

* Fix GH link

* Fix typo

* docs(modal): modifying dismiss behavior in child components (#3117)

* chore: update v7 playground dependencies for React and Vue (#3122)

* update react package.json

* update vue package.json

* chore(ci): renovate configurations for stackblitz templates (#3124)

* fix(deps): update ionic to v6.7.5 (#3125)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency typescript to v4.9.5 (#3126)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update react monorepo (#3131)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(playground): better handle multiple files for Javascript (#3119)

* fix(playground): better handle multiple files for Javascript

* fix(playground): react stackbiltz template files (#3134)

* fix(deps): update dependency vue to v3.3.4 (#3129)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency vue-router to v4.2.4 (#3130)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency clsx to v2 (#3138)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1 (#3136)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vite to v4 (#3135)

* chore(deps): update dependency vite to v4

* chore(deps): update dependency @vitejs/plugin-vue to v4

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Shawn Taylor <[email protected]>

* chore(): update node to v19 (#3139)

* chore(): update node to v19

* chore(): rename status check

* chore: trigger rebuild

---------

Co-authored-by: Sean Perkins <[email protected]>

* fix(deps): update dependency @types/node to v18 (#3137)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(item): add best practices and usage guides (#3123)

* chore: rename dont props to doNot (#3144)

* chore: rename dont files to do-not (#3145)

* fix(deps): update ionic to v7.4.1 (#3146)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(): add cspell and fix spelling errors in docs (#3069)

* docs(select): reorder examples, add alert playground (#3153)

* fix(deps): update dependency @types/node to v18.17.19 (#3154)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update ionic to v7.4.2 (#3161)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/node to v18.18.0 (#3160)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(support): update support table (#3164)

* chore(support): update support table

* update versioned support tables

* fix(deps): update dependency @types/node to v18.18.1 (#3163)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs: add docs for dynamic font scaling (#3111)

* docs(angular): add standalone documentation (#3115)

* docs(dynamic-font): fix font family name (#3149)

* docs: add modules architecture usage (#3151)

* docs(angular): add angular standalone syntax to non-playground examples (#3116)

* fix(angular): standalone guide formatting (#3152)

* docs(angular): include add diff sign (#3157)

* docs(toast): add playground for positionAnchor (#3158)

* chore: resolve cspell errors (#3165)

* chore: resolve cspell errors

* chore: ignore all node_modules folders

* chore: adjust sorting

* docs(select): keyboard navigation (#3156)

* chore(deps): update dependency vue-tsc to v1.8.14 (#3159)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency web-vitals to v3 (#3142)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: team is requested for review for renovatebot prs (#3168)

* fix typo

* chore

* chore

* fix(deps): update dependency vue-router to v4.2.5 (#3147)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/react to v18.2.22 (#3141)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1.8.15 (#3170)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/node to v18.18.3 (#3171)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @vitejs/plugin-vue to v4.4.0 (#3172)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update ionic to v7.4.3 (#3178)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update react monorepo (#3179)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency web-vitals to v3.5.0 (#3173)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: team is requested for review for renovatebot lockfile prs (#3180)

* chore(deps): update dependency vite to v4.4.11 (#3177)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* feat(playground): persist framework and mode selection (#3169)

* fix(deps): update dependency @types/node to v18.18.4 (#3182)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1.8.16 (#3181)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(playground): wait until playground is in view before loading stored framework/mode (#3185)

* docs(menu): clarify multiple side menu behavior (#3186)

* docs(angular): document standalone routing usage (#3167)

* docs(many): remove legacy form control syntax from v7 playgrounds (#3140)

* docs(angular): add a section to standalone migration for migrating components (#3176)

* chore(deps): update dependency vue-tsc to v1.8.18 (#3188)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(jp): re-add files for removed playgrounds (#3189)

* chore: remove unused file

* fix(): fix cspell check

* translate

* chore

* chore: run lint

* feat(keyboard): replace Codepens with playgrounds using modern syntax (#3192)

* fix(deps): update dependency @types/react-dom to v18.2.11 (#3183)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore: update codeowners (#3187)

* fix(deps): update ionic to v7.5.0 (#3197)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update react monorepo (#3196)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/node to v18.18.5 (#3195)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1.8.19 (#3194)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs: clarify IonicSafeString usage (#3198)

I've seen some confusion in threads such as ionic-team/ionic-framework#28365 as to when to use IonicSafeString, so I wanted to clarify this on the docs.

* docs(input, textarea): fix specificity issues with theming playgrounds (#3199)

* fix(backdrop): make backdrop visible in basic playground (#3200)

Co-authored-by: Brandy Carney <[email protected]>

* chore(deps): update dependency vite to v4.5.0 (#3206)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* docs(react): writing tests with testing-library (#2861)

* fix(deps): update dependency vue to v3.3.5 (#3204)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update dependency @types/node to v18.18.6 (#3202)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update react monorepo (#3205)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(deps): update ionic to v7.5.1 (#3203)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* fix(fab): remove unused component from playground (#3207)

* fix(deps): update dependency @types/react to v18.2.31 (#3209)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency @types/node to v20 (#3211)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

* chore(deps): update dependency vue-tsc to v1.8.20 (#3212)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

---------

Co-authored-by: Brandy Carney <[email protected]>
Co-authored-by: Daniel Feliz <[email protected]>
Co-authored-by: jaredcbaum <[email protected]>
Co-authored-by: Amanda Johnston <[email protected]>
Co-authored-by: derf974 <[email protected]>
Co-authored-by: gregbilletdeaux <[email protected]>
Co-authored-by: Greg Billetdeaux <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>
Co-authored-by: Liam DeBeasi <[email protected]>
Co-authored-by: Sean Perkins <[email protected]>
Co-authored-by: Maria Hutt <[email protected]>
Co-authored-by: Arno <[email protected]>
Co-authored-by: Shawn Taylor <[email protected]>
Co-authored-by: rtpHarry <[email protected]>
Co-authored-by: Utku Demir <[email protected]>
Co-authored-by: BAYiTUPAi <[email protected]>
Co-authored-by: Joost Jansen <[email protected]>
Co-authored-by: Brandy Carney <[email protected]>
Co-authored-by: Austine A <[email protected]>
Co-authored-by: Stephan Schmitz <[email protected]>
Co-authored-by: praxxys <[email protected]>
Co-authored-by: Zakuru San <[email protected]>
Co-authored-by: skytern <[email protected]>
Co-authored-by: Ken Sodemann <[email protected]>
Co-authored-by: Oluwaseun Raphael Afolayan <[email protected]>
Co-authored-by: VAS000 <[email protected]>
Co-authored-by: Julien De Coster <[email protected]>
Co-authored-by: Martijn Grendelman <[email protected]>
Co-authored-by: Chandra Nandan <[email protected]>
Co-authored-by: Sanjeed <[email protected]>
Co-authored-by: zhangshengjie <[email protected]>
Co-authored-by: Kevin Cunningham <[email protected]>
Co-authored-by: Bobby Galli <[email protected]>
Co-authored-by: Stefan Kempinger <[email protected]>
Co-authored-by: Biskweet <[email protected]>
Co-authored-by: reslear <[email protected]>
Co-authored-by: dillionmegida <[email protected]>
Co-authored-by: Simo Mafuxwana <[email protected]>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: dillionmegida <[email protected]>
Co-authored-by: Joshua Albrechtsen <[email protected]>
Co-authored-by: Faizanahmed Saiyed <[email protected]>
Co-authored-by: Mohammed Ashfaq <[email protected]>
Co-authored-by: Colum Ferry <[email protected]>
Co-authored-by: Treigh Mawaka <[email protected]>
Co-authored-by: Nikita Barsukov <[email protected]>
Co-authored-by: fc92 <[email protected]>
Co-authored-by: Damian Tarnawsky <[email protected]>
Co-authored-by: Sean Perkins <[email protected]>
Co-authored-by: David Kagiri <[email protected]>
Co-authored-by: Conor <[email protected]>
  • Loading branch information
Show file tree
Hide file tree
Showing 693 changed files with 2,091 additions and 1,391 deletions.
3 changes: 0 additions & 3 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,6 @@
# This should make it easy to add new rules without breaking existing ones.

/_templates/ @mapsandapps
/docs/api/ @mapsandapps
/src/ @mapsandapps
/static/usage/ @mapsandapps

/static/code/stackblitz/**/*/package.json @ionic-team/framework
/static/code/stackblitz/**/*/package-lock.json @ionic-team/framework
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,4 @@ static/code/stackblitz
.github
build
node_modules
src/translate
2 changes: 1 addition & 1 deletion docs/api/backdrop.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Backdropは、他のコンポーネントをオーバーレイするためフル

## 基本的な使い方

バックドロップは、デフォルトで透明です。バックドロップは、その背後にあるコンテンツのクリックやタップを防ぐことができます
Backdropは、その後ろのコンテンツをクリックしたりタップしたりするのを防ぎます。デフォルトでは透明なので、下のデモではCSSで見えるようにしています

import Basic from '@site/static/usage/v7/backdrop/basic/index.md';

Expand Down
125 changes: 4 additions & 121 deletions docs/developing/keyboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
title: Keyboard
---

import Codepen from '@components/global/Codepen';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

Expand All @@ -29,77 +28,9 @@ import TabItem from '@theme/TabItem';

### Usage

````mdx-code-block
<Tabs
defaultValue="javascript"
groupId="framework"
values={[
{ value: 'javascript', label: 'JavaScript' },
{ value: 'angular', label: 'Angular' },
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
]
}>
<TabItem value="javascript">
```html
<ion-item>
<ion-label>Username or Email</ion-label>
<ion-input inputmode="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter a number</ion-label>
<ion-textarea inputmode="numeric"></ion-textarea>
</ion-item>
```
</TabItem>
<TabItem value="angular">
```html
<ion-item>
<ion-label>Username or Email</ion-label>
<ion-input inputmode="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter a number</ion-label>
<ion-textarea inputmode="numeric"></ion-textarea>
</ion-item>
```
</TabItem>
<TabItem value="react">
```html
<IonItem>
<IonLabel>Username or Email</IonLabel>
<IonInput inputmode="email"></IonInput>
</IonItem>
<IonItem>
<IonLabel>Enter a number</IonLabel>
<IonTextarea inputmode="numeric"></IonTextarea>
</IonItem>
```
</TabItem>
<TabItem value="vue">
```html
<ion-item>
<ion-label>Username or Email</ion-label>
<ion-input inputmode="email"></ion-input>
</ion-item>
<ion-item>
<ion-label>Enter a number</ion-label>
<ion-textarea inputmode="numeric"></ion-textarea>
</ion-item>
```
</TabItem>
</Tabs>
````
import Inputmode from '@site/static/usage/v7/keyboard/inputmode/index.md';

<Codepen user="ionic" slug="abvJVVv" height="400" />
<Inputmode />

:::note
`inputmode` 属性は Chrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode
Expand All @@ -115,57 +46,9 @@ import TabItem from '@theme/TabItem';

### Usage

````mdx-code-block
<Tabs
groupId="framework"
defaultValue="javascript"
values={[
{ value: 'javascript', label: 'JavaScript' },
{ value: 'angular', label: 'Angular' },
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
]
}>
<TabItem value="javascript">
```html
<ion-item>
<ion-label>Enter search query</ion-label>
<ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>
```
</TabItem>
<TabItem value="angular">
```html
<ion-item>
<ion-label>Enter search query</ion-label>
<ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>
```
</TabItem>
<TabItem value="react">
```html
<IonItem>
<IonLabel>Enter search query</IonLabel>
<IonInput enterkeyhint="search" type="search"></IonInput>
</IonItem>
```
</TabItem>
<TabItem value="vue">
```html
<ion-item>
<ion-label>Enter search query</ion-label>
<ion-input enterkeyhint="search" type="search"></ion-input>
</ion-item>
```
</TabItem>
</Tabs>
````
import Enterkeyhint from '@site/static/usage/v7/keyboard/enterkeyhint/index.md';

<Codepen user="ionic" slug="GRpWyRB" height="350" />
<Enterkeyhint />

:::note
`enterkeyhint` 属性は Chrome 77+ and iOS Safari 13.4+ のデバイスでサポートされています
Expand Down
21 changes: 21 additions & 0 deletions docs/react/testing/introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
sidebar_label: Introduction
title: Ionic React Testing Introduction
description: Learn how to test an Ionic React application. This document provides an overview of how to test an application built with @ionic/react.
---

# Testing Ionic React

This document provides an overview of how to test an application built with `@ionic/react`. It covers the basics of testing with React, as well as the specific tools and libraries developers can use to test their applications.

## Introduction

Testing is an important part of the development process, and it helps to ensure that an application is working as intended. In `@ionic/react`, testing is done using a combination of tools and libraries, including Jest, React Testing Library, Playwright or Cypress.

## Types of Tests

There are two types of tests that can be written:

**Unit Tests**: Unit tests are used to test individual functions and components in isolation. [Jest](https://jestjs.io) and [React Testing Library](https://testing-library.com) are commonly used for unit testing.

**Integration Tests**: Integration tests are used to test how different components work together. [Cypress](https://www.cypress.io) or [Playwright](https://playwright.dev) are commonly used for integration testing.
51 changes: 51 additions & 0 deletions docs/react/testing/unit-testing/best-practices.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
---
sidebar_label: Best Practices
---

# Best Practices

## IonApp is required for test templates

In your test template when rendering with React Testing Library, you must wrap your component with an `IonApp` component. This is required for the component to be rendered correctly.

```tsx title="Example.test.tsx"
import { IonApp } from '@ionic/react';
import { render } from "@testing-library/react";

import Example from './Example';

test('example', () => {
render(
<IonApp>
<Example />
</IonApp>
);
...
});
```

## Use `user-event` for user interactions

React Testing Library recommends using the `user-event` library for simulating user interactions. This library provides a more realistic simulation of user interactions than the `fireEvent` function provided by React Testing Library.

```tsx title="Example.test.tsx"
import { IonApp } from '@ionic/react';
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import Example from './Example';

test('example', async () => {
const user = userEvent.setup();

render(
<IonApp>
<Example />
</IonApp>
);

await user.click(screen.getByRole('button', { name: /click me!/i }));
});
```

For more information on `user-event`, see the [user-event documentation](https://testing-library.com/docs/user-event/intro/).
112 changes: 112 additions & 0 deletions docs/react/testing/unit-testing/examples.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
---
sidebar_label: Examples
title: Ionic React Testing Examples
description: Learn how to test an Ionic React application. This document provides examples of how to test different types of components.
---

# Examples

## Testing a modal presented from a trigger

This example shows how to test a modal that is presented from a trigger. The modal is presented when the user clicks a button.

### Example component

```tsx title="src/Example.tsx"
import { IonButton, IonModal } from '@ionic/react';

export default function Example() {
return (
<>
<IonButton id="open-modal">Open</IonButton>
<IonModal trigger="open-modal">Modal content</IonModal>
</>
);
}
```

### Testing the modal

```tsx title="src/Example.test.tsx"
import { IonApp } from '@ionic/react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';

import Example from './Example';

test('button presents a modal when clicked', async () => {
render(
<IonApp>
<Example />
</IonApp>
);
// Simulate a click on the button
fireEvent.click(screen.getByText('Open'));
// Wait for the modal to be presented
await waitFor(() => {
// Assert that the modal is present
expect(screen.getByText('Modal content')).toBeInTheDocument();
});
});
```

## Testing a modal presented from useIonModal

This example shows how to test a modal that is presented using the `useIonModal` hook. The modal is presented when the user clicks a button.

### Example component

```tsx title="src/Example.tsx"
import { IonContent, useIonModal, IonHeader, IonToolbar, IonTitle, IonButton, IonPage } from '@ionic/react';

const ModalContent: React.FC = () => {
return (
<IonContent>
<div>Modal Content</div>
</IonContent>
);
};

const Example: React.FC = () => {
const [present] = useIonModal(ModalContent);
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonTitle>Blank</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen={true}>
<IonButton expand="block" className="ion-margin" onClick={() => present()}>
Open
</IonButton>
</IonContent>
</IonPage>
);
};

export default Example;
```

### Testing the modal

```tsx title="src/Example.test.tsx"
import { IonApp } from '@ionic/react';
import { fireEvent, render, screen, waitFor } from '@testing-library/react';

import Example from './Example';

test('should present ModalContent when button is clicked', async () => {
render(
<IonApp>
<Example />
</IonApp>
);
// Simulate a click on the button
fireEvent.click(screen.getByText('Open'));
// Wait for the modal to be presented
await waitFor(() => {
// Assert that the modal is present
expect(screen.getByText('Modal Content')).toBeInTheDocument();
});
});
```
40 changes: 40 additions & 0 deletions docs/react/testing/unit-testing/setup.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
sidebar_label: Setup
title: Ionic React Unit Testing Setup
description: Learn how to set up unit tests for an Ionic React application.
---

# Unit Testing Setup

Ionic requires a few additional steps to set up unit tests. If you are using an Ionic starter project, these steps have already been completed for you.

### Install React Testing Library

React Testing Library is a set of utilities that make it easier to test React components. It's used to interact with components and test their behavior.

```bash
npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event
```

### Initialize Ionic React

Ionic React requires the `setupIonicReact` function to be called before any tests are run. Failing to do so will result in mode-based classes and platform behaviors not being applied to your components.

In `src/setupTest.ts`, add the following code:

```diff
import '@testing-library/jest-dom/extend-expect';

+ import { setupIonicReact } from '@ionic/react';

+ setupIonicReact();

// Mock matchmedia
window.matchMedia = window.matchMedia || function () {
return {
matches: false,
addListener: function () { },
removeListener: function () { }
};
};
```
Loading

0 comments on commit cacaed9

Please sign in to comment.