Standardizing text inputs and richer responsive columns

Hey gents!

I’m writing to communicate some design challenges that we’re experiencing. I’m not criticizing, we’re LOVING Plasmic. I’m just communicating from a user’s perspective in hopes that it helps you improve the product (or show me the current method in which these things can be accomplished.)

  1. Standardizing Text Inputs - Slot Target are missing style options, including background color: Let’s say we want to create a Component named “textInput” with the intent to standardize the design of all text inputs across the entire application, including Interaction Variants that change the background color while “Focused Within,” we’re unable to do so. If we create a Slot Target with an unstyled text box so HTML attributes can be different on each instance, the “Slot Target” can’t be styled using background color. Essentially, we’d have to style each text input instance independently.
  2. Child Column within Responsive Columns doesn’t contain all styling options like other boxes (vertical/horizontal/free): I understand that some of the design properties don’t need to be included, and they’re managed on the Parent’s “columns” box, however, I believe the children columns should still include other styling properties like “layout (including rows gap), position, spacing, backgrounds, borders, radius, shadows, effects, transitions, and transform. Interestingly enough, these attributes can be copied and pasted into a child column, they’re just not accessible from the Plasmic web interface.
    You guys are awesome!

Appreciate the feedback!

For text input components – rather than making an <input/> element in a slot, it is better to just create a dedicated TextInput component. Your TextInput component would include an <input/> element, and then you can expose that element’s value prop as the component’s value prop. So when you use a TextInput instance, you don’t drop in an <input/> element into a slot to customize it; instead, you do it by editing the props exposed that are linked to the <input/> inside the component.

It is a mouthful to say, but see attached gif, and a little more here: https://docs.plasmic.app/learn/primitive-components/

We can definitely make this easier though :sweat_smile:

For responsive columns – we’re taking a pass at this now, and will incorporate some of this feedback! Thanks :slightly_smiling_face:

Thanks for taking the time, Chung! I’ll read through the Primitives docs!

@chungwu Is there a way to make a Text Input component automatically increase its height (i.e. multi-line) as the user enters text, as opposed to selecting a fixed number of lines?

Not built in at the moment :pensive:

Your method worked well for a text input, thank you!!

How is this accomplished for Text Content on text blocks?

We created a NavLink component that has exposed props for “destination,” however, we’re using child components with Slot Targets for the “NavLinkTitle” and “NavLinkDescription.”

Thoughts? :slight_smile:

Screen Shot 2021-10-04 at 11.22.06 AM.png

Screen Shot 2021-10-04 at 11.25.19 AM.png

Hmm not quite sure what you mean; it sounds like a NavLink component with slot targets for the title and description? You are able to set the style for those slot targets for NavLink (for example, making the “title” slot target have a bigger font).

If you already have a NavLinkTitle component, then you can do something similar through “nested slots”: https://docs.plasmic.app/learn/nested-slots/

Basically, you’d have a NavLink with a NavLinkTitle child. Then you right-click on the slot text for the NavLinkTitle child and “convert to slot” – so you have basically created a slot target for NavLink that feeds into NavLinkTitle's slot.