feat(docs): Update modal page to use new layout

[MariaJose]

What?

Modal page:

• Add do and don'ts section in the modal page to use new layout
• Add keys to fragments to show the corresponding code inside the code editor.

Button page:

• Update button page to add some <Code primary></Code> tags.

Screenshots/Screen Recordings

Modal page:

Button page:

Kapture.2022-02-11.at.11.13.04.mp4

[MariaJose]

Not sure if Cancel or Primary button should be like this?:

<>... cancel or primary <NextLink href="/button">Button</NextLink>, ...</>

[chanceaclark]

Let's just reword the sentence since it doesn't really make sense.
Modals should close when users press an action button, not when merchants click or tap the area outside the Modal.

[chanceaclark]

My only quandary with this "Do" is that dialogs should behave differently since a user should be able to click outside to close.

[MariaJose]

Sounds good, I'll updated it, makes more sense.

Regarding your comment about the dialog. Noticed that in the dialog example (inside the implementation section), I'm not able to click outside in order to close it. Should I update the prop to closeOnClickOutside={true}?

Also, should we also add this comment in the Do's section? :

When using the variant dialog , users should be able to click outside the dialog to close it by using the closeOnClickOutside prop

[chanceaclark]

Regarding your comment about the dialog. Noticed that in the dialog example (inside the implementation section), I'm not able to click outside in order to close it. Should I update the prop to closeOnClickOutside={true}?

Probably not, it's really up to the consumer to add that prop.

My only quandary with this "Do" is that dialogs should behave differently since a user should be able to click outside to close.

Probably should have put a 🍹 for this, I was just trying to point out that these Do's and Don'ts were probably written with just the modal variant in mind, where it's more of an experience that we want the user to not escape out of. The dialog variant is really intended for destructive actions, like potentially deleting a product, that we want users to escape out of it easily if it wasn't their intended action. Maybe someone from @bigcommerce/product-design can chip in here?