[button] add button expressive

[oliviaflory]

Detailed description

Describe in detail the issue you're having. Please include whether or not this is part of Sketch Libraries or the larger Sketch Kit file.

The Carbon for IBM.com team and all dotcom designers will be transitioning to use the Carbon design kits as we integrate the Expressive variants needed into Carbon. The designers will need access to the new expressive button added to accommodate expressive experience needs, which were previously provided through the Carbon Expressive kits maintained by Carbon for IBM.com team.

Add the new expressive button to the Carbon design kits.

Based on the current hierarchy, I would expect the expressive variant to appear with the other sizes [button] / [type] / [size]

All themes

• [ ] white
• [ ] gray 10
• [ ] gray 90
• [ ] gray 100

All variants

• [ ] primary
• [ ] secondary
• [ ] tertiary
• [ ] ghost
• [ ] ~danger~ danger may not be necessary?

What version of the Carbon Design System Kit are you using?

v10, Carbon for IBM.com is on v10 until we determine a migration plan.

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.

New expressive button

What did you expect to happen? What happened instead? What would you like to see changed?

Is this issue being filed based on a discrepancy between the website/code and the kit? If so what is the inconsistency?

The button variant has been added https://github.com/carbon-design-system/carbon/blob/374e454e607709293d17117c8e7a5bc025023034/packages/components/src/components/button/_button.scss#L443-L462

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Carbon for IBM.com, we are hoping to deprecate the Expressive theme in July

Steps to reproduce the issue

1. Step one
2. Step two
3. Step three
4. etc.

Additional information

• Carbon for IBM.com would need these added in order to transition our current users to use the Carbon kit
• I am happy to help update the kit if needed (@oliviaflory)

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized (i.e.use the libraries label for any issue relating to the Carbon Sketch Library). This will help us to better understand and address your issue.

[shixiedesign]

Also missing List (ordered & unordered) in expressive, but this one is less critical for our adoption. If you guys think it's good to maintain parity with code, this is another thing that's missing in kit ATM.

[mariuszmickiewicz]

@oliviaflory Is the font size the only difference between Carbon's "default" (48px high) button and the expressive one?

[oliviaflory]

Is the font size the only difference between Carbon's "default" (48px high) button and the expressive one?

@mariuszmickiewicz The icon is also larger, 20px icon paired with 16px text

[mariuszmickiewicz]

@aagonzales @laurenmrice @oliviaflory What's the desired folder structure? I think the separation would be needed (at what level?) as regular buttons also need these variants.

[aagonzales]

I think its just a new size as Olivia mention. They're both technically "large" but just with different type size.

Or we can just add another modifier level in for productive and expressive inside the Lg button.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale[bot]]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.