Carbon: [button] add `xl` and `large` button size variant

[aagonzales]

Background

In the new creation flow pattern we need larger 80px height button. I think we should also add the modal's 64px buttons to the button component as well for consistency.

Reasoning:
the smaller buttons at the bottom right of the page can easily get lost or overlooked. Having the option for a larger button can add weight and help with usability. It will also stay in proportion to how buttons are treated elsewhere (like modal).

Task

Add new button size variants:

• [x] height: 80px / 10rem = xl
• [x] height: 64px / 8rem = large

Spec

[Abdul-Sen]

Hi @aagonzales , As I understand the issue, you want a dev to impliment the xl varient to the current button based on the spec provided. If that is the task, then please assign me this issue as I would love to work on it.

[Abdul-Sen]

Hi @aagonzales , I've taken some time to setup the project locally and familiarize myself with different parts of this monorepo. I noticed that the button is implimented as both an SCSS partial (under carbon/packages/components/src/components/button/ ) and a react component under carbon/packages/react/src/components/Button.

Does this issue encompass implementing this feature to both react button and vanilla JS button separately? Sorry if this is an ignorant question 😅

[aagonzales]

@Abdul-Sen Hello! Thanks for picking this up. We only require the React version to be built but the Vanilla JS would be extra credit.

And yes adding the xl variant is the task. There is also a task of adding the large variant as well at 64px.

[dianatran18]

Hey @aagonzales is this fixed button concept primarily for page wizard flows? Or does this apply to forms as well?