Currently there is no good way to access data passed to a modal.

• My button h('ion-button.next-button', { props: { slot: 'md-end', color: 'primary'}, on: { click: () => this.next() } }, 'next')

• Dom that gets rendered:

Run gulp lint in https://github.com/ionic-team/ionic/tree/mono-refactor/packages/ionic-angular

There will be several Sass errors. It should be pointing only to the Sass files in the packages for both the TS and Sass linter.

I have to call Ionic.modal.create twice to have it resolve and create the modal.

Do we want to support some kind of limited DI system that auto injects known singletons/objects into props?

export class MyComponent {
  @Prop({ connect: true }) nav: Navigator;
}

And then this automagically knows where to find Navigator to inject it into this prop?

Here and here we add event listeners but do not mark them as passive.

ion-list has this rule margin: -1px 0 16px 0;. This causes the list to not completely cover the ion-scroll component and leaves you with a gap at the bottom of the list where the ion-scroll shows through (the grey gap in the below screenshot)

toggle.ios.scss
toggle.ios.vars.scss
toggle.md.scss
toggle.md.vars.scss
toggle.scss
toggle.vars.scss
toggle.wp.scss
toggle.wp.vars.scss

See issue ionic-team/ionic-framework#9192

See commit ionic-team/ionic-framework@e3c60c5

If the render function of a component returns null after having returned children, those children are not removed from the element.

It seems to be related to this call here not checking explicitly for null:

Instead of dynamically figuring out which named slots are available at runtime, if any, let's collect an array of slot names so we can know ahead of time.

Set the namedSlotsMeta property on the ComponentMeta.

Related to #29

When a button is focused it currently has the default button outline style that browsers apply

Buttons in ionic-angular do not have this outline

see title

Adding the following to a Component:

@Component({
  tag: 'ion-fixed',
  styleUrl: 'fixed.scss'
})

generates the following, and doesn't get the right styles:

"tagNameMeta": "ion-fixed",
"styleMeta": {
  "$": {
    "styleUrls": [
      "components/fixed/fixed.scss"
    ]
  }
},

However, if I include styleUrls for all of the modes:

@Component({
  tag: 'ion-fixed',
  styleUrl: 'fixed.scss',
  styleUrls: {
    ios: 'fixed.scss',
    md: 'fixed.scss',
    wp: 'fixed.scss'
  }
})

it works fine and generates the following

"tagNameMeta": "ion-fixed",
"styleMeta": {
  "$": {
    "styleUrls": [
      "components/fixed/fixed.scss"
    ]
  },
  "ios": {
    "styleUrls": [
      "components/fixed/fixed.scss"
    ]
  },
  "md": {
    "styleUrls": [
      "components/fixed/fixed.scss"
    ]
  },
  "wp": {
    "styleUrls": [
      "components/fixed/fixed.scss"
    ]
  }
},

Setting color: "blah color"; on an ion-button does not override the default color of the button.

They should get the following:

bar-button bar-button-md bar-button-default bar-button-md-default

We have some components in Ionic which override the visibility to hidden by default. For example:

ion-item-options {
  visibility: hidden;
}

The styling added by the hydrated class overrides this:

ion-item-options.hydrated {
  visibility: visible;
}

If it is possible to just add the style directly to the element and remove it once hydrated that might be the best solution. I'm up for discussion though!

If the component doesn't have:

@Prop() mode: string;

then adding the mode as an attribute will not apply the proper theme classes. An example:

<ion-searchbar mode="md">

will still add .searchbar-ios if you are viewing on iOS.

On that note, it seems there are some cases where mode and color are added as a @Prop and others where they aren't...see:

button, icon, item, modal, spinner, toggle

  @Prop() mode: string;
  @Prop() color: string;

Should position menuToggle properly.

Compiler should figure out if a component has default or named slots at all. Set the hasSlotsMeta boolean on the component's meta.

This allows us to have a fast path for components that don't need to check for slots, and to speed up the runtime slot stuff.

Running build on the demos isn't copying the proper font files to dist/

Something with an async bug is causing children to get duplicated.

Possible place it happens:

Erroneous DOM:

When trying to use ion-buttons slot="start" and ion-buttons slot="end" they do not get the correct css for start and end.

The parent item needs to get the item-${component}-disabled class added to it, and when it doesn't the label doesn't get the proper opacity.

In the case of toggle, it should get the item-toggle-disabled class.

If you change stencil.config.js the build doesn't rebuild

Button needs to get both button-outline and button-full in order to apply the proper border styles, it is currently only getting button-full.

If you run npm start and your code has an error already, the watch will output your typescript errors and then exit. It should watch anyways instead of exiting immediately

Users can write attrs and props, so that means we can't safely property rename those. Instead, let's have the compiler rename them to vattrs and vprops so users could still write them, but our runtime can property rename them.

This will probably go along with #27

<ion-icon isActive="true"></ion-icon> should work just like <ion-icon is-active="true">

The use of camel case is prevalent in Angular applications and ionic-core should support its use.

<ion-header>
    <ion-toolbar color="primary">
       <ion-button class="closeButton" clear>
           close
        </ion-button>
    </ion-toolbar>
</ion-header> 

In ionic-angular a button inside a primary toolbar will have color: white on it. This does not currently happen in core

<ion-button> with nested <a> does change its color on mouse over, but it does on for the nested <button> version.

The styles added in <style> tags are taking priority over all other css, this includes css that is included via a CSS file and imported in the <head>, as well as any ionic CSS that was previously imported after the (now web) component in Sass and therefore took precedence.

Some examples of this:

CSS file imported in the head

<html dir="ltr" lang="en">
<head>
   ...

  <link id="ionicLink" href="./build/main.css" rel="stylesheet">
  <link href="build/e2e.shared.css" rel="stylesheet">
</head>
<body>
  ...
</body>

Because the <style> tag is injected at the end of the <head>, all of the card styles are taking precedence over the ones in the e2e.shared.css file. We could change where our style tags are injected in the head, or recommend the user moves any css imports to a specific place like the <body>.

Item styling is not applying inside of a card

Previously item was imported after the card SCSS file so it would take precedence when using an item inside of a card, but now the card styling is overriding it.

There isn’t an easy fix for this - we could add more css to the styles that are now being overridden but then it wouldn’t be very decoupled (adding card css into item for example), and it might be fixed when the other component is converted to a web component itself. I tried removing the styles that were overriding the item styles but it causes issues in other places, specifically the paragraph colors when not in an item.

See this image for an example of what happens when the card color styles are removed:

Im using this.$el to get the element that a component is "attached to". In chrome, which does not need the polyfills it works fine, but in browsers that need the polyfilll, like edge, this.$el is undefined. After discussing this with adam this morning this is most likely caused by some async nature in the custom elements polyfill, while the real implementation in the browser is sync.

Have the compiler hardcode exact h() arguments, so that at runtime we don’t need to figure out how h() was written and what args match up to what.

Basically have the compiler do the same thing that the runtime h() is doing to create a vnode object.

Currently icon-left, icon-right, and icon-only are not applying to the buttons since they are not the same element anymore.

Currently button requires the icon-only class in order to remove the padding from the button when it only has an icon. Is there a way we can do this that doesn't require the user to add this attribute?

ion-header does not get class="header header-md" which makes it not render the shadow.

Classes it gets:

alert-tappable alert-radio hydrated

Classes it needs:

alert-tappable alert-radio disable-hover alert-radio-button alert-radio-button-ios alert-radio-button-default alert-radio-button-default-ios

Running gulp e2e.prod --f=badge --debug on the v4-alpha branch produces:

[11:00:37] Starting 'e2e.prod'...
Compiling 1 E2E tests ...
Starting to do a prod build test /Users/brandyscarney/Documents/git/ionic/src/components/badge/test/basic/app/main.ts
[11:00:38]  build started ...
[11:00:38]  transpile started ...
[11:00:38]  build finished in 1 ms

core, buildAnimationsMinified: /Users/brandyscarney/Documents/git/ionic-core/dist/compiled-ionic-angular/core/ionic.core.es5.dev.js
core, buildCoreMinified: /Users/brandyscarney/Documents/git/ionic-core/dist/compiled-ionic-angular/core/ionic.core.js
core, buildCoreES5Minified: /Users/brandyscarney/Documents/git/ionic-core/dist/compiled-ionic-angular/core/ionic.core.es5.dev.js
core, customElementPolyfillDev: /Users/brandyscarney/Documents/git/ionic-core/dist/compiled-ionic-angular/core/ionic.core.ce.dev.js
core, shadyDomCustomElementPolyfillDev: /Users/brandyscarney/Documents/git/ionic-core/dist/compiled-ionic-angular/core/ionic.core.sd.ce.dev.js
core, customElementPolyfillMin: /Users/brandyscarney/Documents/git/ionic-core/dist/compiled-ionic-angular/core/ionic.core.ce.js
core, shadyDomCustomElementPolyfillMin: /Users/brandyscarney/Documents/git/ionic-core/dist/compiled-ionic-angular/core/ionic.core.sd.ce.js
[11:00:45] 'core' errored after 26 s
[11:00:45] Error: task completion callback called too many times
    at finish (/Users/brandyscarney/Documents/git/ionic/node_modules/orchestrator/lib/runTask.js:15:10)
    at cb (/Users/brandyscarney/Documents/git/ionic/node_modules/orchestrator/lib/runTask.js:29:3)
    at ChildProcess.<anonymous> (/Users/brandyscarney/Documents/git/ionic/scripts/gulp/tasks/core.ts:51:5)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at maybeClose (internal/child_process.js:850:16)
    at Socket.<anonymous> (internal/child_process.js:323:11)
    at emitOne (events.js:96:13)
    at Socket.emit (events.js:188:7)
    at Pipe._handle.close [as _onclose] (net.js:485:12)
[11:00:46]  ionic-app-scripts 1.3.7-201705101551
[11:00:46]  build dev started ... MEM: 140.6MB
[11:00:46]  clean started ... MEM: 141.2MB
[ DEBUG! ]  [Clean] clean: cleaning
            /Users/brandyscarney/Documents/git/ionic/dist/e2e/components/badge/test/basic/www/build  MEM:
            141.2MB
[11:00:46]  clean finished in 3 ms MEM: 141.2MB
[11:00:46]  copy started ... MEM: 141.2MB
[11:00:46]  ngc started ... MEM: 141.2MB
[ DEBUG! ]  [AotCompiler] compile: starting codegen ...  MEM: 220.5MB

The following needs to be repeated for navbar:
https://github.com/ionic-team/ionic-core/blob/master/src/components/toolbar/toolbar.tsx#L116-L122

Instead of icon-left/icon-start, and icon-right/icon-end we should use slots for the button and style the icons that way.

Due to a timing issue of when measurements are taken the content sometimes shows up slightly hidden under the header

There are a few places in our build scripts where we use Unix specific commands or paths. This causes things to not work right ootb on Windows 10. Can be worked around with certain shells or the Microsoft bash on windows project, but obviously, that's not ideal.

It seems like children cannot be conditionally rendered if they are specified in a parent component.

For example, I have a <ion-route> component and I only want to render the children inside of <ion-route> when the route matches.

Here's the markup I might write as the user:

          <ion-route url="/" router="#router">
            <landing-page></landing-page>
          </ion-route>
          <ion-route url="/docs" router="#router">
            <docs-page></docs-page>
          </ion-route>
          <ion-route url="/demos" router="#router">
            <demos-page></demos-page>
          </ion-route>

And <ion-route> has this render function:

  render() {
    return null;
}

Even though <ion-route> is not rendering its children, they are still rendered.

This conflicts with how this works in react. For example, this doesn't render the children even though they are written in the markup:

<ion-header>
  <ion-toolbar>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
  </ion-list>
</ion-content>

When using this markup in a modal i get the following error :

  Uncaught TypeError: Cannot read property 'children' of null
    at Content.readDimensions (ionic.ion-app.md.ion-content.md.ion-title.md.ion-toolbar.md.js:256)
    at rafFlush (ionic.core.js:73)
    at rafCallback (ionic.core.js:65)

With the refactoring going on, it's getting confusing mentally switching between ionic, ionic-core (our UI components), and stencil