Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom icons have a small stroke applied to them #16483

Closed
brane53 opened this issue Nov 28, 2018 · 18 comments

Comments

7 participants
@brane53
Copy link

commented Nov 28, 2018

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)             : 4.4.0 (C:\Users\Brane\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.16
   @angular-devkit/build-angular : 0.10.6
   @angular-devkit/schematics    : 7.0.6
   @angular/cli                  : 7.0.6
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v10.10.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Describe the Bug

When rendering a custom icon via <ion-icon src="/path/to/svg.svg"></ion-icon> a noticeble stroke gets applied to the svg icon. This makes the icon not appear as intended and even has some undesired side effects on certain icons as in the case with the done_all material design icon explained below.

Steps to Reproduce

  1. Generate a new ionic project ionic start iconBug blank --type="angular"
  2. Create a new svg file src/assets/icon/done_all.svg with the following contents
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 7l-1.41-1.41-6.34 6.34 1.41 1.41L18 7zm4.24-1.41L11.66 16.17 7.48 12l-1.41 1.41L11.66 19l12-12-1.42-1.41zM.41 13.41L6 19l1.41-1.41L1.83 12 .41 13.41z"/></svg>
  1. In src/app/home/home.page.html replace the contents of ion-content with:
    <ion-icon src="/assets/icon/done_all.svg"></ion-icon>
  2. Run ionic serve

You should see the icon rendered with a thin border around it. As well the icon itself has a little bit of stroke added to it as well.

Expected Behavior
The icon should not have this stroke added. ion-icon should render the svg as it is suppose to be. In this case the icon in question is the done_all icon from Google's Material Design Icons. The icon should appear as it does on google's site; with no border around the icon or added stroke.

Additional Info
This is currently happening with all material design icon svg files. When inspecting the element in devtools the stroke is being set in teh shadow dom as follows:

.icon-inner, svg {
  display: block;
  fill: currentColor;
  stroke: currentColor;
  height: 100%;
  width: 100%;
}

I've implemented a workaround where I add style="stroke:none" or stroke-width="0" to the svg element directly. This works, but I feel like the default should be for ionic to leave the svg as is and not change its stroke.

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Nov 30, 2018

Thanks for the issue! We'll look into this.

Note to team: this is technically an issue in the ionicons repository but I didn't want it to get lost over there.

Here is the code in question: https://github.com/ionic-team/ionicons/blob/master/src/components/icon/icon.css#L28-L29

@Mazus

This comment has been minimized.

Copy link

commented Feb 4, 2019

Hey,
What's the actual workaround for this ? Am I suppose to add (style = "stroke:none") to the ion-icon ?
Why can't I override .icon-inner, svg in the global.scss ?

@Mazus

This comment has been minimized.

Copy link

commented Feb 6, 2019

Hi @brane53 ,
Can you explain how you implemented the workaround. I'm struggling to understand how shadow dom is working, but as said on google docs, outside style applied to an element should override shadow DOM, still I can't find the proper selector to do this, I tried to apply it to svg, .icon-inner, ::slotted(*)... etc nothing works except when I manually disable the stroke property in devTools.

How are you doing it ?

Thanks a lot

@Mazus

This comment has been minimized.

Copy link

commented Feb 6, 2019

@brandyscarney anything new about this issue ?

@kaspaddy

This comment has been minimized.

Copy link

commented Feb 6, 2019

@Mazus
if you have direct access to the svg files, a current workaround would be adding a style atrribute the the svg image:
for example turn

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 
<path fill="#FFD64F" fill-rule="nonzero" d="M8.593 8.138l2.274-6.442.005-.014a1.206 1.206 0 0 1 2.264.014l2.272 6.442h6.386a1.206 1.206 0 0 1 .775 2.13l-5.383 4.463 2.257 6.778a1.206 1.206 0 0 1-1.858 1.353L12 18.765l-5.592 4.102a1.206 1.206 0 0 1-1.85-1.358l2.257-6.778-5.393-4.47a1.206 1.206 0 0 1 .784-2.123h6.387z"/>
</svg>

to

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="stroke: none !important;">
    <path fill="#FFD64F" fill-rule="nonzero" d="M8.593 8.138l2.274-6.442.005-.014a1.206 1.206 0 0 1 2.264.014l2.272 6.442h6.386a1.206 1.206 0 0 1 .775 2.13l-5.383 4.463 2.257 6.778a1.206 1.206 0 0 1-1.858 1.353L12 18.765l-5.592 4.102a1.206 1.206 0 0 1-1.85-1.358l2.257-6.778-5.393-4.47a1.206 1.206 0 0 1 .784-2.123h6.387z"/>
</svg>
@brane53

This comment has been minimized.

Copy link
Author

commented Feb 7, 2019

@Mazus
Appologies for the late reply. I added the style directly to the svg file as @kaspaddy suggests. It's a total hack, but it works. Ionic is going to pull in that svg file into the ion-icon element's shadow dom at which point there is no way to change the style via css unless ionic exposes a custom css variable. I thought that this was close to being implemented though. There's a pull request by @btsiders to add a css variable, but nothing has been done about it. ionic-team/ionicons#643

@Mazus

This comment has been minimized.

Copy link

commented Feb 7, 2019

@brane53 @kaspaddy Thanks a lot, that works perfectly fine for now.
Until the css variable is properly merged in Ionic, that will do :)

@eyexpo-dan

This comment has been minimized.

Copy link

commented Mar 8, 2019

Issue persists on most custom svg I have encountered still.

@brane53 brane53 changed the title Custom icons have a getting a small stroke applied to them Custom icons have a small stroke applied to them Mar 14, 2019

@LayZeeDK

This comment has been minimized.

Copy link

commented Mar 24, 2019

Here's an Angular directive to fix the issue until the Ionic team merges a bugfix.

removeSvgStroke directive

import { isPlatformBrowser } from '@angular/common';
import {
  AfterViewInit,
  Directive,
  ElementRef,
  Inject,
  OnDestroy,
  PLATFORM_ID,
} from '@angular/core';

@Directive({
  selector: 'ion-icon[src][removeSvgStroke]',
})
export class RemoveIonIconSvgStrokeDirective
implements AfterViewInit, OnDestroy {
  private _noStrokeStyles?: HTMLStyleElement;
  private get ionIconShadowDom() {
    return (this.element.nativeElement as HTMLElement).shadowRoot;
  }
  private isBrowser: boolean;
  private get noStrokeStyles() {
    if (!this._noStrokeStyles) {
      this._noStrokeStyles = document.createElement('style');
      this._noStrokeStyles.innerHTML = `
      svg,
      .icon-inner {
        stroke: initial;
      }`;
    }

    return this._noStrokeStyles;
  }

  constructor(
    private element: ElementRef,
    @Inject(PLATFORM_ID) platformId: string,
  ) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngAfterViewInit() {
    if (this.isBrowser) {
      this.applyNoStrokeStyles();
    }
  }

  ngOnDestroy() {
    if (this.isBrowser) {
      this.removeNoStrokeStyles();
    }
  }

  private applyNoStrokeStyles() {
    // We have to wait for an event loop tick before the Ionic Icon shadow DOM
    // becomes accessible
    return Promise.resolve()
      .then(() => this.ionIconShadowDom.appendChild(this.noStrokeStyles));
  }

  private removeNoStrokeStyles() {
    this.ionIconShadowDom.removeChild(this.noStrokeStyles);
  }
}

Example usage

<ion-icon src="/assets/my-icon.svg" removeSvgStroke></ion-icon>
@javiersoto15

This comment has been minimized.

Copy link

commented Apr 5, 2019

Here's an Angular directive to fix the issue until the Ionic team merges a bugfix.

removeSvgStroke directive

import { isPlatformBrowser } from '@angular/common';
import {
  AfterViewInit,
  Directive,
  ElementRef,
  Inject,
  OnDestroy,
  PLATFORM_ID,
} from '@angular/core';

@Directive({
  selector: 'ion-icon[src][removeSvgStroke]',
})
export class RemoveIonIconSvgStrokeDirective
implements AfterViewInit, OnDestroy {
  private _noStrokeStyles?: HTMLStyleElement;
  private get ionIconShadowDom() {
    return (this.element.nativeElement as HTMLElement).shadowRoot;
  }
  private isBrowser: boolean;
  private get noStrokeStyles() {
    if (!this._noStrokeStyles) {
      this._noStrokeStyles = document.createElement('style');
      this._noStrokeStyles.innerHTML = `
      svg,
      .icon-inner {
        stroke: initial;
      }`;
    }

    return this._noStrokeStyles;
  }

  constructor(
    private element: ElementRef,
    @Inject(PLATFORM_ID) platformId: string,
  ) {
    this.isBrowser = isPlatformBrowser(platformId);
  }

  ngAfterViewInit() {
    if (this.isBrowser) {
      this.applyNoStrokeStyles();
    }
  }

  ngOnDestroy() {
    if (this.isBrowser) {
      this.removeNoStrokeStyles();
    }
  }

  private applyNoStrokeStyles() {
    // We have to wait for an event loop tick before the Ionic Icon shadow DOM
    // becomes accessible
    return Promise.resolve()
      .then(() => this.ionIconShadowDom.appendChild(this.noStrokeStyles));
  }

  private removeNoStrokeStyles() {
    this.ionIconShadowDom.removeChild(this.noStrokeStyles);
  }
}

Example usage

<ion-icon src="/assets/my-icon.svg" removeSvgStroke></ion-icon>

i have an error in the directive spec.ts file, about not passing arguments to the directive, how could i fix it?

@LayZeeDK

This comment has been minimized.

Copy link

commented Apr 5, 2019

i have an error in the directive spec.ts file, about not passing arguments to the directive, how could i fix it?

What does your spec look like?

@javiersoto15

This comment has been minimized.

Copy link

commented Apr 5, 2019

i have an error in the directive spec.ts file, about not passing arguments to the directive, how could i fix it?

What does your spec look like?

import { RemoveIonIconSvgStrokeDirective } from './remove-ion-icon-svg-stroke.directive'; describe('RemoveIonIconSvgStrokeDirective', () => { it('should create an instance', () => { const directive = new RemoveIonIconSvgStrokeDirective(); expect(directive).toBeTruthy(); }); });

@LayZeeDK

This comment has been minimized.

Copy link

commented Apr 5, 2019

@javiersoto15 The directive has two dependencies, seen in its constructor:

  • ElementRef from @angular/core
  • PLATFORM_ID from @angular/core

In your test case, you do not pass any arguments to its constructor.

To test it, you should create a test host component with this template

<ion-icon src="/assets/my-icon.svg" removeSvgStroke></ion-icon>

then declare it in the testing module and finally create a component fixture. This will set up the dependencies for you. However, it only does DOM manipulation on the browser platform. Not sure what platform is used in tests. Maybe it depends on whether you use Karma or a browserless environment like Jest or Mocha.

@javiersoto15

This comment has been minimized.

Copy link

commented Apr 6, 2019

@javiersoto15 The directive has two dependencies, seen in its constructor:

  • ElementRef from @angular/core
  • PLATFORM_ID from @angular/core

In your test case, you do not pass any arguments to its constructor.

To test it, you should create a test host component with this template

<ion-icon src="/assets/my-icon.svg" removeSvgStroke></ion-icon>

then declare it in the testing module and finally create a component fixture. This will set up the dependencies for you. However, it only does DOM manipulation on the browser platform. Not sure what platform is used in tests. Maybe it depends on whether you use Karma or a browserless environment like Jest or Mocha.

I applied the directive but it does not seem to action any change in my svg, i have applied it to difference but there is no difference

@LayZeeDK

This comment has been minimized.

Copy link

commented Apr 7, 2019

Which version of Ionic do you use? This is for @ionic/angular v4.x.

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation May 9, 2019

@brandyscarney brandyscarney moved this from Backlog 🤖 to On deck ⚾️ in Ionic Core May 9, 2019

brandyscarney added a commit that referenced this issue May 9, 2019

@brandyscarney brandyscarney moved this from On deck ⚾️ to In progress 🤺 in Ionic Core May 9, 2019

@brandyscarney brandyscarney self-assigned this May 9, 2019

@brandyscarney

This comment has been minimized.

Copy link
Member

commented May 9, 2019

Thank you for the easy-to-follow steps to reproduce this! I've created two pull requests for this:

I also published an Ionicons dev build which I am currently testing: ionicons@4.5.7-1. So far the colors are all looking fine in Ionic.

If anyone would like to test this out please do so and let me know if you see any problems with this approach, thank you!

@brandyscarney brandyscarney moved this from In progress 🤺 to Needs review 🤔 in Ionic Core May 10, 2019

Ionic Core automation moved this from Needs review 🤔 to Done 🎉 May 10, 2019

brandyscarney added a commit to ionic-team/ionicons that referenced this issue May 10, 2019

fix(icon): set fill on host element and remove stroke (#688)
- fixes the border box around custom icons

references ionic-team/ionic#16483
@brandyscarney

This comment has been minimized.

Copy link
Member

commented May 10, 2019

I released a dev build of Ionic with this fix in if anyone would like to try it:

4.5.0-dev.201905101544.3041241

The fix will be in the next release. Thanks again for reporting! 🙂

brandyscarney added a commit that referenced this issue May 10, 2019

fix(icon): remove stroke and move fill to host element (#18241)
This removes the weird border around custom SVGs used in an ion-icon.

fixes #16483

Kiku-git added a commit to Kiku-git/ionic that referenced this issue May 16, 2019

fix(icon): remove stroke and move fill to host element (ionic-team#18241
)

This removes the weird border around custom SVGs used in an ion-icon.

fixes ionic-team#16483

brandyscarney added a commit that referenced this issue May 22, 2019

merge release-4.4.1
* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* 4.4.0

* Release 4.3.1 (#18152)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* merge release-4.4.0

* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* 4.4.0

* fix other merge conflict

* chore(): resolve conflicts from older hotifx

* Release 4.3.1 (#18152)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* merge release-4.4.0

* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* 4.4.0

* chore(): resolve merge conflicts from older hotfix

* docs(process): update release process

* docs(fab-list): update the activated description (#18026)

* docs(breaking): add ionDrag event arguments change (#17989)

* docs(slides): add swiper prefix in animation usage (#18073)

* feat(searchbar): add disabled property (#17935)

closes #17921

* fix(reorder-group): remove required parameter for the complete method (#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

* docs(components): update method and parameter descriptions (#18075)

* fix(datetime): default to current date when value is null (#18105)

fixes #18099

* docs(toolbar): fix end slot documentation (#18092)

* fix(item): use the global activated background for md ripple color (#16752)

fixes #16585

* fix(textarea): reposition textarea when keybard appears (#18098)

fixes #17847

* fix(button): apply round property to button sizes in iOS (#18125)

fixes #18108

* fix(): add prefixed transform for older versions of chrome (#18128)

fixes #17729

* fix(segment): decrease icon size on ios and stretch segment buttons to fill height (#17751)

fixes #17069

* fix(): sanitize components using innerHTML (#18083)

fixes #18065

* Release 4.3.1 (#18152) (#18154)

* fix(angular): support replaceUrl with angular <7.2 (#18106)

* fix(angular): support replaceUrl with angular <7.2

* run linter

* fix(): sanitize components using innerHTML (#18146)

* 4.3.1 (#18150)

* doc(loading): remove mention of undefined "content" property (#18126)

* feat(img): add ionImgWillLoad event and emit ionImgDidLoad when image is loaded (#18159)

- Adds `ionImgWillLoad` event that emits when the img src is set
- Moves the `ionImgDidLoad` event emit so that it happens when the image actually finishes loading

fixes #17652 closes #18161

* fix(toast): allow button-color CSS variable to be overridden (#18133)

fixes #18127

* fix(label): use primary color on focus for md input labels (#18183)

fixes #15602

* feat(item-sliding): add open method (#17964)

resolves #17899

* feat(menu-button): add css variables for padding (#18188)

fixes #18187

* feat(card): add button functionality (#17997)

closes #17773

* feat(textarea): add option to expand textarea as value changes (#16916)

* feat(textarea): add autoGrow - set height to scrollHeight

* change 1px to inherit, remove additional 4px

* feat(refresher): add pullFactor property to control speed (#16697)

closes #15425

* fix(input): clear on edit from inside native input (#17115)

fixes #17055

* test(angular): increase timeout for tab switch (#18221)

* fix other merge conflict

* fix(react): Support for adding css classes via `className` in Ionic React components (#18231)

* fix(react): adding classname to react props

* fix(react): updating rtl to latest to fix ts error

* fix(react): changes to support className

* fix(loading): allow html content (#18242)

fixes #18135

* fix(icon): remove stroke and move fill to host element (#18241)

This removes the weird border around custom SVGs used in an ion-icon.

fixes #16483

* bug(security): allow name and slot attributes when sanitizing (#18246)

* allow name attribute

* also add slot

* fix(input): keep entire input in view when scrolling with keyboard open (#18253)

fixes #17457

* fix(tab-button): apply background-focused when tabbing into tab button (#17502)

fixes #17042

* test(theming): update theming tests

* fix(react): defaultHref fixes (#18278)

* fix(react): making children prop optional on overlay components

* fix(react): passing in defaultHref so it can be used if there is no prev view

* fix(react): making children prop optional on overlay components (#18243)

* fix(buttons): use theme/color toolbar colors for buttons (#18191)

- Updates the iOS buttons in a toolbar to use the proper global theming variables
- Updates the iOS segment to use the correct background variable when checked
- Updates the iOS back button and menu button to use the proper color in a toolbar
- Updates the iOS buttons in a toolbar w/ color to use the proper contrast colors (background, borders, text, hover, focus), mostly solid and outline buttons were affected
- Updates the CSS that applies the global toolbar variables so that it won't affect toolbars w/ a color

fixes #18184, fixes #17840

* fix(overlay): hide scrollbars on non-scrollable content (#16767)

fixes #14178

* fix(slides): disable swiper touch preventDefault (#16728)

* fix(slides): disable swiper touch preventDefault

* fix(slides): update Swiper types

* add screenshots to test

* add screenshot descriptions

* fix(toolbar): update md toolbar button spacing and padding to match spec (#17537)

- Removes the padding from the main toolbar and individually style the components inside of it
- Adds a `has-icon-only` class to button, this is used to switch between `unbounded` and `bounded` ripples on buttons in a toolbar. If the button is clear and only has an icon, we use the unbounded "circular" ripple effect, otherwise still use the bounded one. This matches the MD spec, without making the other buttons look off.
- Using the class above, style the button differently to match the MD spec
- Updates the back button and menu button to use the proper size / icon size
- Removes the opacity on an activated back button, it should use the ripple for activated
- Moves the margin to the slots in a toolbar by grabbing the "first" and "last" slot and applying a class to them
- Makes the segment in a toolbar use the min height from the toolbar
- Updates the back button so that it matches the MD spec
- Updates the header box shadow to use the old v3 datauri 

fixes #16950 fixes #14444

* fix(tabs): initialize select in the willLoad before the select call is made (#18300)

#17957

* fix(angular): preserve queryParams and fragment when going back (#18298)

fixes #16744

* fix(angular): ensure active page is not removed from change detection (#18299)

fixes #18293

* docs(toast-controller): fix description typo  (#18312)

Fix typo in component description text.

* test(components): add rtl tests and remove skips (#18319)

references #17012

* fix(css): update rtl function to prepend selectors with host-context properly (#18315)

references #17012

* chore(): remove debug and log statements (#18245)

fixes #18190

* docs(datetime): add note about timezones, fix typo (#18289)

* fix(range): update border-radius on range pin for rtl (#18321)

references #17012

* fix(angular): preserve special characters encoding when going back (#18323)

* fix(rtl): updates searchbar, fab and toggle icon positioning in rtl (#18325)

- fixes tab badge (in Chrome)
- fixes searchbar buttons
- fixes fab positioning
- fixes toggle

references #17012

* fix(segment): update segment border for rtl (#18326)

references #17012

* fix(datetime): update label direction in rtl (#18340)

* fix(picker): update the column positions in rtl (#18339)

references #17012

* fix(button): only apply has-icon-only if icon has the slot for icon-only (#18343)

fixes #18329

* tests(): add missing test statements (#18346)

* 4.4.1

* remove react changelog
@ionitron-bot

This comment has been minimized.

Copy link

commented Jun 9, 2019

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Jun 9, 2019

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.