[dev-v5][Docs] Update code examples for easy copy and paste

[MarvinKlein1508]

Pull Request

📖 Description

This PR updates the code examples for FluentDivider to make them easy to copy and paste into existing projects.

(Old left; new right)

🎫 Issues

👩‍💻 Reviewer Notes

This can be seen as a draft as a result of:

Saw your comment on the Wizard PR about expanding the example with a top/side switch...
Think we should strive for more "ready to copy" examples. Adding things like switches and list to try all different options of a
component make this harder (especially for beginner devs). We need to think of a way to facilitate both variants (complex multi
option showcase and straightforward copy-ready examples). Maybe we can discuss coming Tuesday?

✅ Checklist

General

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.

[dvoituron]

Do you think we need ALL possibilities? :-)
I don't think the dev is so stupid to have difficulties about DividerAlignContent.Start, DividerAlignContent.End , ... 🤣

I think your proposition interesting but maybe we need to select 2 or 3 values. Your opinion?

[MarvinKlein1508]

@dvoituron that'S up for discussion! :) It's not about being stupid. It's about being lazy.

You could say we don't need todo this for buttons then as well (https://fluentui-blazor-v5.azurewebsites.net/Buttons/Button).

I actually like that you can see all possible configurations at once and then copy over the one you like. I remember doing so from Bootstrap docs in the past as well. Open the docs - search what you want - copy over and exchange text.

[vnbaaij]

Do you think we need ALL possibilities? :-) I don't think the dev is so stupid to have difficulties about DividerAlignContent.Start, DividerAlignContent.End , ... 🤣

I think your proposition interesting but maybe we need to select 2 or 3 values. Your opinion?

It is how they do it in Storybook a lot of times as well (example from WC site):

We should discuss which 'standard' we want to follow on this.

[dvoituron]

I agree, but I don't think it helps the documentation to include every single option: it makes sense to show “Appearance” or “Inset,” but not ‘Alignment’ or “Horizontal/Vertical”... that just adds more unnecessary content to the documentation, in my opinion.

My philosophy is that the simpler, the better :-)

[vnbaaij]

I agree with @dvoituron that this is a bit too much...😂

[MarvinKlein1508]

@dvoituron I partially agree here. IMO we should show everything which is visual. How else is the user supposed to know that he can use the component in vertical mode without digging into the API parameters.

In my case I have seen the demo for the FluentWizard back when I started working with this library. But I never used it because I never knew there was a horizontal option available. Sure I could have read the documentation and I would have figured out that it has a parameter for it but I believe we should promote our visual options in the docs to show the developers what is possible and what not.

People are lazy and I would argue that you won't read a documentation if your first impression of it is "what I trying to achieve is not possible".

Just think about the vertical demo if we do not include it. What will happen then? There a quite a few scenarios:

1. The developer knows the parameter and types it out blindly
2. He thinks it is not possible at all
3. He tries to manually do it via custom CSS although there is a built in feature
4. He looks into the docs and searches for an existing parameter
5. He has to remember what's the enum name and look it up everytime. (Even I forget some of the enums from time to time and have to search them)

With the simple visual demo we elimate all 5 of those reasons.

[MarvinKlein1508]

I really like the docs from here: https://demos.blazorbootstrap.com/alerts they show a lot of basic stuff which you would get by simply changing one enum value but it helps out a lot and looks like the library is ofering much functionality out of the box.

But we can discuss this tomorrow :)

[vnbaaij]

Continuing with your FluentWizard example: yes, we should have both a horizontal and a vertical example...

But, we should not try to cram both into 1 example. It that makes copy/paste for a developer a lot harder/labor intense as they need to remove the 'switches'.

We are not responsible for a dev not reading the documentation. And enum values are presented in the API section (hovering the i icon)