Ionic-framework: [4.0.0-rc.1] ion-input clearInput color

[lordcoste]

Bug Report

Ionic version:


[x] 4.0.0-rc.1

Current behavior:
I can't change the color of the clearInput button inside the ion-input (not searchbar).
Probably because the svg is rendered as:

background-image: url("data:image/svg+xml;charset=utf-8,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20512%20512'><path%20fill='var(--ion-color-step-600,%20%23666666)'%20d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z%20M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/>

The relevant part is var(--ion-color-step-600,%20%23666666): no matter if I override the --ion-color-step-600 variable, it's always rendered as a dark grey.

Expected behavior:
It should reflect the color of --ion-color-step-600

Steps to reproduce:
<ion-input type="email" placeholder="Email" clearInput></ion-input>

ion-input { --ion-color-step-600: #ffffff; }

Other information:
Also can't understand why the svg use --ion-color-step-600 when in the code --ion-color-step-400 is used:

https://github.com/ionic-team/ionic/blob/a30f760d9292b857033247d4cd1581d3bf40d5db/core/src/components/input/input.md.vars.scss#L26

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.12.1
   @angular-devkit/schematics    : 7.0.7
   @angular/cli                  : 7.0.7
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/lordcoste/Library/Android/sdk/)
   ios-deploy        : 1.9.4
   NodeJS            : v10.15.0 (/usr/local/bin/node)
   npm               : 6.5.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[paulstelzer]

Thanks for the issue! You are right, at the moment it's not a nice implementation.

[SidiBecker]

This bug is fixed?

[SnowBases]

This does the trick, put in global.css, but I didn't recommend this method.

.input-clear-icon.sc-ion-input-md,
.input-clear-icon.sc-ion-input-ios  {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='white' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>") !important;
  width: 30px;
  height: 30px;
  background-size: 22px;
}

[SidiBecker]

This does the trick, put in global.css, but I didn't recommend this method.

.input-clear-icon.sc-ion-input-md,
.input-clear-icon.sc-ion-input-ios  {
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='white' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>") !important;
  width: 30px;
  height: 30px;
  background-size: 22px;
}

YEAH! I forgot to talk here, I did it like you did.

But instead of using fill='white' i used %23[HEXCOLOR] (encode of #[HEXCOLOR]). Example: fill='%23858585'