search

material-components / material-components-web-react

Material Components for React (MDC React)
MIT License
2.02k stars 227 forks source link

NotchedOutline docs #558

Open nworden opened 5 years ago

nworden commented 5 years ago

IMO it doesn't seem clear how to use NotchedOutline component based on the docs: https://github.com/material-components/material-components-web-react/tree/master/packages/notched-outline

In particular, it's unclear:

This might be related to issue #488 -- maybe this was previously more intuitive than it is now.

moog16 commented 5 years ago

@nworden ya you're totally right. The docs don't say much, so I'll leave this issue open to update docs.

The notchWidth needs to be passed as the width of your text in the "floating" state. the notch prop is a boolean of when the label should float.

<NotchedOutline notch={true | false} notchWidth={100} />

Does this help?

nworden commented 5 years ago

Thanks Matt, but what I'm confused about is how to establish the relationship between the NotchedOutline component and the label and content within the outline. Are you supposed to create them totally separately (i.e., use absolute positioning or something to put an otherwise-unrelated floating label where the notch happens to be)? And for the stuff being outlined, do you put it within the the NotchedOutline component (like <NotchedOutline>here is my text field or whatever</NotchedOutline>) or something like that? Or do you need to specify the height/width of the outline too (as with the notch width)?

moog16 commented 5 years ago

Ah ya you need to render them together in another component with the appropriate Sass or CSS files:

import '@material/react-notched-outline/index.scss';
import '@material/react-floating-label/index.scss';

render ...
<...your text field>
<NotchedOutline notch={true | false} notchWidth={100} />
<FloatingLabel float={true|false} />

A full example can be found in /packages/text-field/index.js. Might be difficult to follow, if so let me know

nworden commented 5 years ago

I wasn't importing the floating-label CSS so I've added that, but it seems like there's still more to it: if I just put the text field, outline, and label in a row like that, the outline has no apparent effect and the label ends up near the bottom of the page. I noticed that the TextField implementation passes a number of adapters (including one for the notched outline) to the MDCTextFieldFoundation; would I need to do something similar (somehow)? https://github.com/material-components/material-components-web-react/blob/2ee4c80efb514f86fbab0504e183461b6ee5605d/packages/text-field/index.js#L76

moog16 commented 5 years ago

Do you have a project you could share? It might be faster/easier for me to help out if I get a concrete example of what you're trying to do.

But yes, if you're creating a custom text-field, then the adapter methods must be implemented. There also needs to be a wrapper around the textfield, floating label and notched outline, which is position relative or absolute.

nworden commented 5 years ago

I'm trying to do two things:

  1. As mentioned above, figure out if there's a way to use the NotchedOutline for things other than input fields (here's the mock I'm implementing).
  2. See if I can find a workaround (or a fix) for issue #559.

I don't necessarily need a custom text field for either of those things (maybe the textarea workaround), but I do need to get my head around how NotchedOutlines interact with other components.

moog16 commented 5 years ago

@nworden Sorry I dropped the ball on this issue. What's your status on this?

nworden commented 5 years ago

For (1), I implemented my own. For (2), I'm putting off doing anything about it until I've implemented the rest of my UI. If you haven't gotten a chance to address #559 at that point, I'll either take a stab at fixing the bug myself or write my own React component that uses the new version of the underlying MDC web components. Honestly I don't really want to reverse-engineer text-field/index.js if I don't have to.

moog16 commented 5 years ago

I wouldn't want you to either! I would love it to work for you, however I've been reassigned for the month or 2 to focus on MDC Web. I'll be continuing to field issues and pull requests here. So if you do get a chance to fix one of the issues I will definitely work with you.

Just for some perspective, upgrading to the new notched outline might take around 1 week for me (haven't looked at it in detail). I know when I upgrade I'll have a slew of conflicts with fixes in text field as well.

lbell commented 5 years ago

For (1), I implemented my own.

I'd be curious to see how you did this @nworden