Pluto - Input - Placeholder that Accepts JSX

[emilbon99]

The HTML input element's placeholder prop only accepts a string. At some point I'd like to be able to add icons to the placeholder (like a search icon). This involves passing a JSX element to the placeholder prop. To accomplish this, we need to use a few tricks. The gist is that the input element inside the Input component should no longer be given the placeholder prop. Instead, we should change the signature of Input to accept a ReactElement instead of a string for the placeholder prop and then render that placeholder inside the Input component, placing it where the regular input placeholder would be using CSS. When the the input value is empty, (i.e. value.length == 0) we show the placeholder. The placeholder style should resemble that of the existing placeholder (I think the color is var(--pluto-gray-m0)) . The two files relevant to this issue are:

• Input.tsx
• Input.css

Check out a new branch named 271-input-placeholder from 179-streaming and use the pluto:dev command and the core/Standard/Input story to do your development.

As a final note, this stack overflow post may help you out.

_{From SyncLinear.com | SY-54}