Cupcake website page creation - Components/Button page

jeffchew commented 5 years ago

chsanche created the following on Sep 18:

User Story

As an IBM.com page creator

I need to: have a good understanding of the components, patterns, etc

so that I can: do my day to day work without confusion.

Additional information

Cupcake website page development priority can be viewed via https://github.com/carbon-design-system/ibm-dotcom-library/issues/462.
Button page on v19a website can be viewed here.
Button page on the current Carbon Design website can be viewed here

Task

Collaborate with @Olivia-Flory for the content creation.

Acceptance criteria

[ ] Content and design created and reviewed with the stream lead, the developer and Wonil.
[ ] Shared with the Carbon and IDL team for feedback.
[ ] Content and design accepted by Wonil and Linda.
[ ] Create the dev. issue for coding as the next step.

Original issue: https://github.ibm.com/webstandards/digital-design/issues/1730

jeffchew commented 5 years ago

On Oct 07, chsanche commented: @Wonil-Suh1 @Olivia-Flory Below is the Cupcake version Button page. Please take a look and let me know what we need to edit, add, or take off.

FYI - The Documentation section is a placeholder and will update once I have the info from Jeff. button

Here is the demo set up for the four-color theme variants.

button_primary white button_primary gray 10 button_primary gray 90 button_primary gray 100

jeffchew commented 5 years ago

On Oct 08, Olivia-Flory commented: Thank you @chsanche, here are my comments for the content:

Demo

change "Icon + text" to "Text + icon". If this came from Anna we can double check with her because we call it "text + icon" in the design kit, and how we refer to it in the "Styles" documentation.
remove medium button option from demo, we will only have small and default
Update small button size to (40px)
Note: icon only should be disabled when tertiary, ghost, or danger button variant is selected. saw your comment on the link page of the demo being coded to the proper

Formatting

Styles

The description for Text only button is a little confusing to me, I see that's how we have it on the current page. Maybe we say something about Text only is the default for buttons, use when the context is clear through the button description. cc @jamespistilli can probably make this more clear.

Styles

should include icon only? (I don't know the exact use case for this 😅 )
Sets of buttons has a double "a a" in the second line.

Content

Label

do you think we should use examples that are more specific to marketing / editorial pages? "Add, delete, save, discard, ok and cancel" are all very product centric, my brain isn't able to come up with a better example right now. cc @jamespistilli

Icon

Do not adjust the size of the icon within buttons
is the ghost button a separate list item or part of the sentence above?

Color

I don't think we need to include the sentence: "If color accessibility does not pass use modifier classes...blue 50." We don't want anyone changing the buttons.

jeffchew commented 5 years ago

On Oct 09, jamespistilli commented: @Olivia-Flory @chsanche I can provide some suggestions, what's the time frame needed?

jeffchew commented 5 years ago

On Oct 09, chsanche commented: @jamespistilli Any chance you can take a look and provide recommendation before Friday? 👉 Areas highlighted in pink are the areas we need your help with.

button v2

jeffchew commented 5 years ago

On Oct 09, chsanche commented: @Olivia-Flory

I chatted with Anna and confirmed there is no set format for the Icon section to be displayed either "Icon + text" or "Text + icon". For now, let's keep it in the same format as the design kit.

As mentioned, the selections on the panel will change based on the variant selected. Let me know if you have any further questions about it so we can be aligned on how it functions.

For the Style under Formatting and Label under Content copy, we can have Jim take a look and make an update once it's ready.

The rest updates are confirmed and made.

Updated content and design:

button v2

Button variant panel view:

button_primary button_secondary button_tertiary button_ghost button_danger button_button set

Four color themes:

button_primary white button_primary gray 10 button_primary gray 90 button_primary gray 100

jeffchew commented 5 years ago

On Oct 09, jamespistilli commented: @chsanche Sure, I can work on this tomorrow. cc: @Olivia-Flory

jeffchew commented 5 years ago

On Oct 10, jamespistilli commented: @chsanche @Olivia-Flory Hey there, working on this now but any overall guidance on how the copy should be edited?

My initial thought would be brief and concise over longer and more wordy? Thanks

jeffchew commented 5 years ago

On Oct 10, Olivia-Flory commented: Caught up with Jim on Slack and documenting here: I believe we are trying to be as succinct as possible, but longer is OK if needed to properly explain something

jeffchew commented 5 years ago

On Oct 10, jamespistilli commented: Many thanks

jeffchew commented 5 years ago

On Oct 10, jamespistilli commented: @chsanche @Olivia-Flory Suggested edits below. I started with the original copy from the page (just the parts in pink as Jenny mentioned) and then turned on track changes so you can see my edits. Recommend viewing in Word over Box. Happy to discuss if necessary.

https://ibm.box.com/s/0ogd2hxzr8edysda83gr186125825pex

jeffchew commented 5 years ago

On Oct 11, chsanche commented: @jamespistilli Thank you for the updated content. The design is updated and can be viewed below.

button v2

carbon-design-system / carbon-for-ibm-dotcom