paper-input-container-input font-size: inherit no longer works.

freshp86 commented 6 years ago

When using the latest iron-input (which wraps a native <input>), font-size inherit no longer works inside the paper-input-container-input mixin, because it instead inherits from the parent iron-input. Minimal example below:

<!DOCTYPE html>                                                                                                                                                                                                     
<html>
  <head>
    <script>
       Polymer = {
         dom: 'shadow',
         lazyRegister: true,
         suppressBindingNotifications: true,
         suppressTemplateNotifications: true,
         useNativeCSSProperties: true,
       };
    </script>
    <!-- Import a base URL for this to actually work-->
    <link href="polymer/polymer.html" rel="import">
    <link href="paper-input/paper-input.html" rel="import">
  </head>
  <body>
    <style>
      body {
        font-size: 10px;
      }   
    </style>
    <dom-module id="x-example">
      <template>
       <style>
         paper-input {
           --paper-input-container-input: {
             font-size: inherit;
           };
         }
       </style>
       <paper-input value="foo"></paper-input>
      </template>
    </dom-module>

    <div>I am 10px</div>
    <x-example></x-example>
    <script>
      Polymer({is: 'x-example'});
    </script>
  </body>
</html>

Before versions: paper-input: 2.1.0 iron-input: 1.0.10 Observing <input is="iron-input"> inheriting 10px font from body.

After versions: paper-input: 2.2.0 iron-input: 2.1.2 Observing the inner <input> inheriting 16px from it's parent <iron-input>.

Proposed fix?

See line https://github.com/PolymerElements/paper-input/blob/master/paper-input-container.html#L293 and compare with lines 300-301. Shouldn't both mixins also be applied on the iron-input, such that iron-input does not end up with a 16px font size?

cc @notwaldorf. mostly as FYI cc @kevinpschaaf, @sorvell

feuerste commented 6 years ago

I agree, the --paper-input-container-input mixin should be applied to .input-content ::slotted(iron-input) as well.

notwaldorf commented 6 years ago

Yeah, I think this is also needed for other mixins, like https://github.com/PolymerElements/paper-input/blob/master/paper-input-container.html#L309

notwaldorf commented 6 years ago

Fixed in https://github.com/PolymerElements/paper-input/pull/639

PolymerElements / paper-input

paper-input-container-input font-size: inherit no longer works. #636

Proposed fix?