Open nworden opened 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?
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)?
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
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
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.
I'm trying to do two things:
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.
@nworden Sorry I dropped the ball on this issue. What's your status on this?
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.
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.
For (1), I implemented my own.
I'd be curious to see how you did this @nworden
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.