ionic-team / ionic-docs

Ionic Docs

The official Ionic documentation, built with Docusaurus.

---

• Contributing Guide 🔦

ionic-docs's Issues

Font-size too big for code snippets in mobile

[beta docs] Embedded preview is shown with serif fonts

https://beta.ionicframework.com/docs/components/#alert

(Windows 10, FF61)

side-nav 2nd pass

• auto open to the right section
• close one section as another is opened
• improve animation
• mobile drawer style

Update Community Dropdown

Simplify the Community dropdown design. Remove icons. Update typeface/color.

Reference to ion-split-pane

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request

URL:
https://beta.ionicframework.com/docs/components#nav

Current behavior:
References ion-split-pane

Expected behavior:
Should not reference a removed component

Steps to reproduce:
Navigation is how users move between different pages in your app. Ionic’s navigation follows standard navigation concepts and animated transitions. Ionic's nav can also adapt to larger viewports using ion-split-pane

Other information:

Color generator format is off

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

URL:
https://beta.ionicframework.com/docs/theming/color-generator/

Current behavior:
Color pickers are inline with the intro

Expected behavior:
The intro paragraph should not be on the same line as the color pickers

Steps to reproduce:
Go to the URL

Other information:

Show components sidebar list

Gotta get dat components list in there:

Remove "Preview" tab for inline Nav content

I think we can keep the "Markup" content, but since the real "preview" is the actual demo on the right, we can just remove the inline "Preview" tab. Could look like this when we want to just show code/markup:

docs: add documentation on fixed content

ionic-team/ionic-framework#5987

[beta docs] Components: Broken previews

https://beta.ionicframework.com/docs/components/#fab

https://beta.ionicframework.com/docs/components/#toast
If you scroll down to "Virtual Scroll" the preview is not triggered (unless text size is increased enough so that the headline is moved up enough to trigger the loading)

Component Demo/Preview - Button

Design for the Button component demo:

All of the button demo examples can up modified into a Solid (default), Outline, and Clear mode from an inline "tabs" design:

[beta docs] CSS Variables link broken

[X] bug report
[ ] feature request

URL:
The css-variables link found on the theming/basics page is broken.

https://beta.ionicframework.com/docs/theming/basics/css-variables <- 404
https://beta.ionicframework.com/docs/theming/basics/

Current behavior:
404

Expected behavior:
Should go to this page:
https://beta.ionicframework.com/docs/theming/css-variables/

[beta docs] Components preview: Switching between iOS/MD only possible by scrolling to top

Switcher is only visible when scrolled to top, not matter if space would be available or not.

document the way to include Ionic CSS

We need to document the new way to get the Ionic minified CSS / import only the ones you need, see: https://gist.github.com/manucorporat/4a8955134bb90fa7f6ed0bb80b21ef59

I've already begun this in breaking changes, just need to find a spot for it here.

Navigating to grid scrolls focus to the first input

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

URL:

https://beta.ionicframework.com/docs/layout/grid

Current behavior:

Navigate to layout -> structure -> grid and see that it is scrolled halfway down the page to the input box in the example

Expected behavior:

I would expect the page to be at the top of the document upon navigation

API Documentation not Found

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

URL:

http://localhost:3333/docs/api/action-sheet

Current behavior:

Unable to fetch api/action-sheet: Not Found

Expected behavior:

It should show the component api documentation.

Steps to reproduce:

1. $ git clone https://github.com/ionic-team/ionic-docs.git
2. $ git submodule update --init
3. $ npm install
4. $ npm run dev
5. Open http://localhost:3333/docs/api/action-sheet

Other information:

$ npm -v
6.1.0

$ node -v
v8.11.1

Add sticky-header UX to component sections

Would be nice to add more context for which component you're previewing in the Component docs. One way to help with this is making each section's heading stick to the top of the content area, and then scroll away once the next section scrolls in.

Spacing info:

Will look like this:

Recombobulate the Nav

• use this format to add more sub-tasks

Increase Headings font-sizes

Still think the font-size for our <h1> and <h2> headings could be a tad larger to help each section stand out a little more. Let's try:

docs-content h1 { font-size: 36px; ... }

and

docs-content h2 { font-size: 28px; ... }

and

docs-content h3 { font-size: 20px; ... }

chore(typo)

s/no/now

URL:
https://beta.ionicframework.com/docs/publishing/progressive-web-app

[beta docs] Broken links don't return 404

Broken links like https://beta.ionicframework.com/docs/this/doesnt/exist return a HTTP status code 200, only the fetch for https://beta.ionicframework.com/docs/content/this/doesnt/exist.md that is run internally returns a 404. Google and Co won't be able to understand that.

Discuss usage examples

I noticed on the card usage we only have the javascript tab: https://beta.ionicframework.com/docs/api/card#usage

I understand why, because the angular usage would be the same in this case. Should we make it so that there are no tabs, maybe rename the file to something else for cases like this, or should we make it a point to show an Angular usage even if it's something such as getting the ViewChild/ContentChild or just make it a duplicate of the JavaScript usage to avoid confusion?

It's up for discussion in Slack, but I wanted to make an issue so I remembered to bring it up.

typo

s/A/An

Component Demo/Preview - Nav

Updated design for the Nav component demo (mockup is in Android mode):

Update iOS/Android demo toggle design

Visual design and spacing update to the iOS/Android component demo platform toggle at the top. This also includes making the toggle visible at all times.

Some more info:

font-family: -apple-system,BlinkMacSystemFont...; font-size: 10px; color: #9da7b9 / #3880ff font-weight: 600 / 700; letter-spacing: 0.04em;

Active border bottom:
border-bottom: 2px solid #b7d4ff

Cannot read property 'radio' of undefined

THIS ISSUE CAN BE CLOSED

I'm submitting a ... (check one with "x")
[X] bug report
[ ] feature request

URL:

https://beta.ionicframework.com/docs/components

Current behavior:
Shows nothing except:

Cannot read property 'radio' of undefined Please report this to https://github.com/markedjs/marked.

Expected behavior:

Should show the components docs.

Other information:

"Starting an App" steps on v4 docs website creates ionic v3 app...?

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

URL:
https://beta.ionicframework.com/docs/installation/cli/

Current behavior:
I followed the direction at the link abovefor creating an App. and when I inspect package.json I see:

"ionic-angular": "3.9.2"

Expected behavior:
I expect this to create an Ionic v4 app.

Steps to reproduce:
described at link above

site-preview-app causing overflow

On a 13" MBP, the site-preview-app component is overflowing its grid cell and causes a horizontal scroll.

Ionic Doc Demo Source link: 404

A lot of Demo Source link in the Ionic Api Doc (for ex. Ionic Item) are wrong and it link to not found urls.
Example: https://ionicframework.com/docs/api/components/item/Item/
Demo source (under the smartphone emulator) link: https://github.com/ionic-team/ionic/tree/master/demos/src/item (404 not found)

[beta docs] Broken links

A list of broken links in the new docs:

• https://beta.ionicframework.com/docs/faq/tips/ionic/cli linked from https://beta.ionicframework.com/docs/faq/tips/ionic/cli
• https://beta.ionicframework.com/docs/action-sheet-controller/ActionSheetController linked from https://beta.ionicframework.com/docs/api/action-sheet/
• https://beta.ionicframework.com/docs/alert-controller/AlertController linked from https://beta.ionicframework.com/docs/api/alert/
• https://beta.ionicframework.com/docs/alert/AlertController/ and https://beta.ionicframework.com/docs/alert/AlertController linked from https://beta.ionicframework.com/docs/api/select/
• https://beta.ionicframework.com/docs/api/grid/(../Col linked from https://beta.ionicframework.com/docs/api/grid/
• https://beta.ionicframework.com/docs/api/item-sliding/(../item-options linked from https://beta.ionicframework.com/docs/api/item-sliding/
• https://beta.ionicframework.com/docs/intro/support/versioning linked from https://beta.ionicframework.com/docs/intro/support/

Missing images:

• https://beta.ionicframework.com/docs/faq/assets/img/running/ios-xcode-identity-setup.png and https://beta.ionicframework.com/docs/faq/assets/img/running/ios-xcode-signing-setup.png used on https://beta.ionicframework.com/docs/faq/native/
• https://beta.ionicframework.com/docs/components/assets/img/avatar-finn.png linked from https://beta.ionicframework.com/docs/components/

and probably many more, but finding them is a pain because of #37

Ionic API doc 'git submodule' not fetched

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

URL:

Current behavior:

Expected behavior:

API doc necessary for http://localhost:3333/docs/api/* pages are not fetched when being fetched from git submodules.

Steps to reproduce:

$ git submodule update --init
Cloning into '/home/kael/Project/dev/ionic-docs/sources/component-preview'...
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.
fatal: clone of '[email protected]:ionic-team/component-preview.git' into submodule path '/home/kael/Project/dev/ionic-docs/sources/component-preview' failed
Failed to clone 'sources/component-preview'. Retry scheduled
...

Other information:

Quite a bunch things wrong here..

Can you please update the readme.md in a way so that I can build api-docs without any issues. There's no api-scripts-build command, So, what's the procedure to really have all docs including API running with npm run start?

Using windows 10.

$ node --version
v9.6.1

$ npm --version
6.0.1

Currently, this is the issue after doing npm run api-docs and npm run start:

Toasts not working

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

URL:
https://beta.ionicframework.com/docs/components#toast

Current behavior:
Clicking on any of the 5 toast variations brings up error:

Expected behavior:
Toasts work in docs.

No link found for editors and ides

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

URL:
https://github.com/ionic-team/ionic-docs/blob/master/src/content/developer-resources/tools.md#editors-and-ides is a 404 url and shows Unable to fetch resources/editors_and_ides: Not Found in the new documentation here.

The older site content -> https://github.com/ionic-team/ionic-site/blob/master/content/docs/developer-resources/editors_and_ides/index.md

Also, there is an editor section in FAQ.

Should the content be moved over or the link removed?

[beta docs] Trailing slash inconsistency

If you surf around the new beta docs, you get URLs like https://beta.ionicframework.com/docs/building/contributing (note no trailing slash). But if you open that URL directly (e.g. by clicking that previous link) you are redirected with a 301 to https://beta.ionicframework.com/docs/building/contributing/ (note the trailing slash).

The added redirect makes opening docs pages via referring links (forum, Google, ...) a bit slower.

Solutions:
a) Remove this redirect
b) Change all links to include the trailing slash

[beta docs] Last component Virtual Scroll does not get loaded into component preview

I'm submitting a ...
[x] bug report
[ ] feature request

URL:
https://beta.ionicframework.com/docs/components/#toast

Current behavior:
If I scroll all the way down on my monitor (1080p resolution) on the component docs page, the last component that gets displayed in the component preview on the right is Toast. Since I cannot scroll further down, the Virtual Scroll-component never gets loaded into the preview:

Expected behavior:
I would expect that I am able to scroll further down to the point where the Virtual Scroll-component gets loaded into preview.

Steps to reproduce:

• Open the component docs in Chrome or Firefox on a 1080p-display.
• Scroll all the way down

Add generic phone status bars

Both our iOS and Android versions need to have some abstract reference to top/bottom utility bars. Here's what I propose for designs:

Android:

iOS:

We can probably do this pretty easily with some SVGs or even just CSS. LMK how you want to proceed when you're ready.

Need to add Toggle and Radio demos

The Toggle and Radio component demos are missing from the components page

Header disappears after page load on mobile

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request

URL:

https://beta.ionicframework.com/docs/api/action-sheet/
Current behavior:

No menu on mobile (it flashes and disappears)
Expected behavior:

Menu
Steps to reproduce:

Open https://beta.ionicframework.com/docs/api/action-sheet/ on chrome or safari in mobile
Other information:

Responsive Grid links to center of page

When I click the "Responsive Grid" item in the side menu (under Layout), it links me to the center of the page's content, not the top.

Using Ionic-API with Vue.js

Hi,

I evaluate the combination vue.js + Ionic v.4.0.0-alpha2 and I'm curious about how to use the Ionic-API.

I have the Slides of the demo and would like to call the method slideNext from the Vue-Component. Is that possible? If yes - how?

<ion-slides>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>

Regards,
Ricko

npm run api-docs throws exception

Issue - all hell broke lose

Gregor@skynet /c/Development/ionic-docs (master)
$ npm run api-docs

> @ionic/[email protected] preapi-docs C:\Development\ionic-docs
> tsc -p scripts/tsconfig.json


> @ionic/[email protected] api-docs C:\Development\ionic-docs
> node scripts/build/scripts

 √ Precheck
 > Generating
   \ API Docs
     → Updating...
   \ CLI Docs
     → Updating...
   \ Native Docs
     → Updating...
   \ Storage Docs
     → Updating...
{ Error: Command failed: git clone https://github.com/ionic-team/ionic-native.git sources/ionic-native
fatal: destination path 'sources/ionic-native' already exists and is not an empty directory.

    at ChildProcess.exithandler (child_process.js:272:12)
 √ Precheck
 > Generating
   / API Docs
     → NPM Installing 4.0.0-alpha.6
   / CLI Docs
     → NPM Installing & Building...
   × Native Docs
     → operable program or batch file.
   √ Storage Docs
{ Error: Command failed: cd sources/ionic-native && ../../node_modules/.bin/typedoc --json dist/docs.json --mode modules src/@ionic-native/plugins/*/index.ts
'..' is not recognized as an internal or external command,
operable program or batch file.

    at ChildProcess.exithandler (child_process.js:272:12)
    at ChildProcess.emit (events.js:127:13)
    at maybeClose (internal/child_process.js:933:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:220:5)
  killed: false,
  code: 1,
  signal: null,
  cmd: 'cd sources/ionic-native && ../../node_modules/.bin/typedoc --json dist/docs.json --mode modules src/@ionic-native/plugins/*/index.ts',
  stdout: '',
  stderr: '\'..\' is not recognized as an internal or external command,\r\noperable program or batch file.\r\n',  context: {} }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ionic/[email protected] api-docs: `node scripts/build/scripts`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ionic/[email protected] api-docs script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Gregor\AppData\Roaming\npm-cache\_logs\2018-05-23T20_15_38_156Z-debug.log

OS Window 10, latest

$ node --version && npm --version
v9.6.1
6.0.1

So I cannot compile or use the API docs at all since this issue is appearing all the time.

Where's the catch?

1. not using npx command when calling typedoc
2. meanwhile, you will most probably have this issue: zkat/npx#144. Fix it by following the instructions in comment: zkat/npx#144 (comment)
3. Try building locally,

$ npx typedoc --json dist/docs.json --mode modules src/@ionic-native/plugins/*/index.ts
ENOENT: no such file or directory, stat 'C:\Development\ionic-docs\src\@ionic-native\plugins\*\index.ts'

Oh right, proper folder!

Gregor@skynet /c/Development/ionic-docs/sources/ionic-native (v5)
$ npx typedoc --json dist/docs.json --mode modules src/@ionic-native/plugins/*/index.ts
npx: installed 61 in 11.431s

Using TypeScript 2.7.2 from C:\Users\Gregor\AppData\Roaming\npm-cache\_npx\10692\node_modules\typedoc\node_modules\typescript\lib

JSON written to C:\Development\ionic-docs\sources\ionic-native\dist\docs.json

This shouldn't be such a failure :(

Components Section should include the Radio Button component

I'm submitting a ... (check one with "x")
[ ] bug report
[x ] feature request

URL:
https://beta.ionicframework.com/docs/components

Current behavior:
This list of key Ionic components does not list the radio component, while other inputs are listed.

Expected behavior:
Have a radio button component section.

Steps to reproduce:
N/A

Other information:
N/A

Docs - Changelog not loading

I'm submitting a ... (check one with "x")
[x ] bug report
[ ] feature request

URL:
https://beta.ionicframework.com/docs/faq/changelog

Current behavior:
Error: Unable to fetch faq/changelog:

Expected behavior:
The page should load and display the change log

Steps to reproduce:
Go to https://beta.ionicframework.com/docs/faq/changelog

Other information:
No other information needed.

Documentation: Custom Page Transitions

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[ ] 3.x
[X ] 4.x

I'm submitting a ... (check one with "x")
[ ] bug report
[X ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
Currently there is no documentation on how to create custom page transitions, although it is already very easy to do by extending the existing PageTransition class.
This is a super cool feature and I really think you should add a simpel example (e.g. zoom in/out) to your documentation. I had to search quite a while to figure out how to integrate custom page transitions.

Expected behavior:
Documentation available

Steps to reproduce:
Search documentation for custom page transitions.

Document Environments

We don't seem to have a page for development vs production, and other environments that the Angular CLI supports:

https://github.com/angular/angular-cli/wiki/stories-application-environments

Open Preview buttons needs some love

I love the "Open Preview" feature of the docs, but right now looks like second-citizen UI component.

• More spacing
• Bigger button?

cc @bensperry thoughts?

Redo FAQ

Everything in the "Build Errors", "Runtime Errors", "Native Errors", and "Developer Tips" pages is basically outdated, duplicated elsewhere, not useful, and/or inaccurate.

A better place for this stuff would be a knowledge base people could search.

[beta docs] Components, "Open Preview" doesn't work

If your viewport is too small to display the preview on the page, it displays a "Open Preview" link. That opens a new window/tab when clicked with URL https://beta.ionicframework.com/docs/content/component-preview-app/docs-www/. That URL only shows an Ionic logo but doesn't do anything.

[beta docs] Popover not working correctly

I'm submitting a ...
[x] bug report
[ ] feature request

URL:
https://beta.ionicframework.com/docs/components/#popover

Current behavior:
When opening the popover by clicking on the icon in the top-menu, you can select multiple fonts, but the font of the text only changes on the first click.

Expected behavior:
Font selection should be radio boxes and only one should be selectable.

Steps to reproduce:

• Go to https://beta.ionicframework.com/docs/components/#popover
• Click on the popover menu in the component preview
• Select a font -> Text gets updated
• Select another font -> Text doesnt get updated but font is still selected.

Tested Environment:

Operating System:   Linux Ubuntu 18.04.
Platform:           UNIX
Browser:            Google Chrome, Version 67.0.3396.99 (Official Build) (64-bit)