ion-label component inside the stencil-component-starter not getting rendered

Question

I cloned the stencil-component-starter from:

https://github.com/ionic-team/stencil-component-starter

Then on the file: my-component.tsx I have the following code:

import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;
  @Prop() minHeartRate: number;
  @Prop() maxHeartRate: number;

  render() {
    return (
      <div>
        Athlete: {this.first} {this.last} - Heart Rate Range:
        <ion-range mode="ios" dualKnobs={true} min={0} max={200} step={2} pin={true} snaps={true} value={{lower: this.minHeartRate, upper: this.maxHeartRate}}>
          <ion-label range-left>0</ion-label>
          <ion-label range-right>200</ion-label>
        </ion-range>
      </div>
    );
  }
}

as you can see here:

https://github.com/napolev/stencil-ion-range/blob/master/src/components/my-component/my-component.tsx

[Before] It was getting rendered almost properly with two issues 1 and 2:
[Now] It is not getting rendered at all. So, there are three issues 1, 2 and 3:

1. The <ion-label/> tags are ignored.

2. Each knob can move beyond of the other knob (please, ignore this, I think this is on purpose on new version).

3. This is a new issue that I just detected (Current time: 2018-08-26 19:20). Like 12 hours ago (check timestamp on the repo) the repository: https://github.com/napolev/stencil-ion-range/ on commit 12c14b75cca92f19af6c5ccae60091319578cec7 was generating almost properly the <ion-range/> tag above, except issues 1 and 2 (check image below). But now after a clean install of this repository it doesn't render what you see on the image below anymore. This is weird. After doing that commit I checked that after a clean install it rendered that.

Here is what it was rendering before, that it is not getting rendered anymore:

Reference:

https://ionicframework.com/docs/api/components/range/Range/

Any idea on how to solve this issue?

Thanks!

[EDIT 1]

This is a response to the comment from Aaron Saunders below:

ion-label component inside the stencil-component-starter not getting rendered

Aaron, I added the code you suggested as you can see here:

https://github.com/napolev/stencil-ion-range/commit/d3471825131d3d329901c73d8c6803a609b27c3b#diff-34c2a6c626ee2612cd4f12b2c004a0b1L16

but when running the code with: $ npm start the following is what is get rendered:

did you get the component rendered properly?

I removed the node_modules directory and installed them again with no success.

could you maybe try my repository?

as you can see, I have done just 2 commits on top of the official commits:

https://github.com/napolev/stencil-ion-range/commits/master

Just in case here are the versions I'm using for the primary tools:

$ node -v
v8.11.2

$ npm -v
6.1.0

$ ionic -v
ionic CLI 4.1.1

[EDIT 2]

There is a parallel discussion for this topic on:

https://forum.ionicframework.com/t/ion-label-component-inside-the-stencil-component-starter-not-getting-rendered/139763

[EDIT 3]

This is a response to the comment from Alexander Staroselsky below:

ion-label component inside the stencil-component-starter not getting rendered

Alexander, I tried your suggestion with the following changes:

https://github.com/napolev/stencil-ion-range/commit/68fce2abe25536b657f9493beb1cc56e26828e4f

Now the <ion-range/> component gets rendered (that's really good) but there is some problem on the rendering as you can see on the following image. The <ion-label/> components have a big width.

Any idea about how to solve this?

Thanks!

[EDIT 4]

Adding the suggestion from Aaron Saunders does the trick:

<ion-item>
    <ion-range
        mode="ios"
        dualKnobs={true}
        min={0} max={200} step={2}
        pin={true} snaps={true}
        value={{ lower: this.minHeartRate, upper: this.maxHeartRate }}
    >
        <ion-label slot="start" style={{flex: 'none', margin: '0 30px 0 0'}}>0</ion-label>
        <ion-label slot="end" style={{flex: 'none', padding:' 0 0 0 30px'}}>200</ion-label>
    </ion-range>
</ion-item>

Thanks to Alexander Staroselsky and Aaron Saunders because by combining their suggestions I could get this work.

Answer 1

You would need to either explicitly import '@ionic/core'; in your stencil-component-starter component or add CDN scripts/styles to the index.html. I remember at one point either the toolkit or stencil-app-starter specifically had that import in a root element with an earlier version of @ionic/core beta or even an alpha.

Also, per documentation, you would also need to wrap the ion-range with ion-item as well as using slot="start" and slot="end" instead of range-left and range-right.

import { Component, Prop } from '@stencil/core';
import '@ionic/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @Prop() first: string;
  @Prop() last: string;
  @Prop() minHeartRate: number;
  @Prop() maxHeartRate: number;

  render() {
    return (
      <div>
        Athlete: {this.first} {this.last} - Heart Rate Range:
        <ion-item>
          <ion-range mode="ios" dualKnobs={true} min={0} max={200} step={2} pin={true} snaps={true} value={{lower: this.minHeartRate, upper: this.maxHeartRate}}>
            <ion-label slot="start">0</ion-label>
            <ion-label slot="end">200</ion-label>
          </ion-range>
        </ion-item>
      </div>
    );
  }
}

This will help ensure the styles are injected and the component renders properly. In all fairness, when I tried this, most of the styles came through, but there were definitely issues with the positioning of the slotted ion-label elements. There would definitely need to be some adjustments to the styling including flex grow/shrink/basis as well as positioning/margin of the end slot element. It is probably wise to submit the styling issues at @ionic/core github as well.

Hopefully that helps!

Answer 2

based on the latest 4.0 beta... I still do think there is a bug in the styling of the labels by default, but this is a work-around

reference to the doc since stencil uses ionic v4 - https://beta.ionicframework.com/docs/api/range

<ion-range mode="ios" 
           dualKnobs={true} 
           min={0} max={200} 
           step={2} pin={true} 
           snaps={true} 
           value={{lower: 89, upper: 150}}>
   <ion-label slot="start" style={{flex: 'none',padding:'10px'}}>0</ion-label>
   <ion-label slot="end" style={{flex: 'none',padding:'10px'}}>200</ion-label>
</ion-range>