NotchedOutline docs

[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:

• What I should do with the content that should be outlined -- presumably NotchedOutline has to know about it, but it doesn't look like you're supposed to wrap the content in the NotchedOutline component (?).
• What I should do with the label that should go in the notch (same as above).
• Whether the NotchedOutline component can be used to outline things other than form elements (e.g., could I wrap a whole section of the page in a NotchedOutline).

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

[moog16]

@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]

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]

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]

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]

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]

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]

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

[nworden]

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]

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]

For (1), I implemented my own.

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