Legacy layout updates

[ramoneguru]

In the past, we've used this kind of style below for laying out form data:

Updating to the new Paste, it looks like the <Form> items are laid out in a more vertical fashion. What might be a good way to go about adding Paste to accommodate the layout in the above screenshot?

[ramoneguru]

Meh, this was accomplished by setting a non-consistent margin on the value column. Ended up with this...

            <div className="form-group">
              <label className="control-label col-sm-5" htmlFor={AddressField.EMERGENCY_VALIDATED}>
                {AddressesInstanceFormFieldDisplayNames.emergencyValidated}
              </label>
              <div className="col-sm-18">
                <Text as="p" className="form-control-static" style={{ marginTop: '6px' }}>
                  {address.emergencyEnabled ? 'Yes' : 'No'}
                </Text>
              </div>
            </div>

[SiTaggart]

So, the fundamental question is what are you trying to achieve? Because through out console there are different problems/solutions to displaying this type of data. Are you solving for content density? A "view" of a particular edit form?

On places like the dashboard you are more in a pure view mode of data, and the traditional key/value pair layout that you can get from an HTML description list might be logical. It has some downsides in that horizontal pairs are more difficult to scan visually, and more difficult to handle with language translation and RTL support. It's partly the reason Paste forms are stack vertically.

In places where you are presenting 2 views of the same data/object in a details page (a view mode and an edit mode) you probably don't want to switch the layout.

We don't yet have a solidified opinion on it yet.

What I will say is, yes you can create this using the Text primitive. Please don't have HTML labels that don't point to HTML inputs.

Final question, I'm curious why you're mixing old bootstrap html with new Paste components?

[ramoneguru]

So, the fundamental question is what are you trying to achieve?

In think for this page the data is pretty straightforward since it's address data and doesn't have much variation. A vertical layout seems to work fine here vs. the input layout style we use when entering an address:

In places where you are presenting 2 views of the same data/object in a details page (a view mode and an edit mode) you probably don't want to switch the layout.

Agreed, I see why form elements were used in making the layout in order to keep it more consistent.

Please don't have HTML labels that don't point to HTML inputs.

I think for this one maybe those values should be in disabled inputs instead vs. having a label associated with text? We shouldn't be displaying data like this anymore, correct? Read-only data should be in a read-only input?

Final question, I'm curious why you're mixing old bootstrap html with new Paste components?

I'm lazy. I couldn't quite find the right settings for a text value (color/size/spacing/transform -> #666/12px/0.5px/uppercase), but I also didn't want to create a custom styled component (we have too many already). Decided to reuse the Bootstrap class since it worked for now. When we migrate to Paste - Forms I can address these forms in one go on our pages.

Thanks for the info btw :)

[SiTaggart]

We shouldn't be displaying data like this anymore, correct? Read-only data should be in a read-only input?

Depends, if you have 2 distinct views, then swapping the HTML from label input pair to just something like dl >dt dd might be perfectly appropriate. If you only have one view then readonly input might be the way to go.

I couldn't quite find the right settings for a text value (color/size/spacing/transform -> #666/12px/0.5px/uppercase)

I wouldn't recommend trying to recreate the old styles, you're right there. We're moving away from uppercase labels and that color isn't part of our palette anymore. I'd be tempted to try and replicate the Paste form label styles by using Text. This is by no means good, but to show you what I mean I've created a little codesandbox https://codesandbox.io/s/view-mode-compositional-example-bntcy