Cupcake website page creation - Components/Modal page

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

Carbon for IBM.com is based on the Carbon Design System for IBM

https://www.ibm.com/standards/carbon/

Apache License 2.0

264 stars 157 forks source link

Cupcake website page creation - Components/Modal page #423

Closed jeffchew closed 4 years ago

jeffchew commented 4 years ago

chsanche created the following on Sep 10:

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/423.
Modal page on v19a website can be viewed here.
Modal page on the current Carbon Design website can be viewed here

Task

Collaborate with Olivia for the content creation.

Acceptance criteria

[x] Content and design created and reviewed with the stream lead, the developer and Wonil.
[x] 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/1668

jeffchew commented 4 years ago

On Sep 10, chsanche commented: @hahnrob Story point will be adjusted once the https://github.com/carbon-design-system/ibm-dotcom-library/issues/423 is completed - FYI.

jeffchew commented 4 years ago

On Sep 23, chsanche commented: @Olivia-Flory @Wonil-Suh1

The content is crafted based on the content template Jillian created and approved for the Carbon Team. Please take a look of the Modal page content and let me know if there are any changes we need to make.

Reminder: For the Cupcake website, we need to have the page content as lean as possible. We can add other additional information or advanced features later but for now, let's ask IBM.com designers to get started and use the Modal from the Design Kit. For the Wedding Cake website, we will consider adding a Live demo, Theming, and Specs to this page, because Carbon Team is in a discussion about that right now.

modal

jeffchew commented 4 years ago

On Sep 23, Olivia-Flory commented: @chsanche this is super exciting, thank you for sharing! Overall looking awesome, below are a few things I noticed:

In the input modal example, the text input field color should be set to field-02 so it appears as white on the gray background for accessibility. This is how you can change it in the overrides panel
Carbon's coded example of the input modal shows the input field spanning 75% the width of the modal however, the written guidance under "Body" says form inputs can span the full width. Maybe we can get clarification from the Carbon team which is correct.
In the footer section, I think "button" at the end of the first sentence should be plural. "The footer area of a modal typically contains either one or two buttons."

For the cupcake are we showing static examples of each component or are the white fields interactive like in the Code pages on Carbon's website?

jeffchew commented 4 years ago

On Sep 23, chsanche commented: @Olivia-Flory

Good catch and the image is updated now. For the input modal width, I confirmed with Anna. The input field can fill the full width, but the length of the text should always be at 75%.

modal

jeffchew commented 4 years ago

On Sep 26, chsanche commented: @Wonil-Suh1 Follow up on the Modal page review.

I shifted the content order for it to match the Carbon component template. Let me know if there are any edits needed before we close this issue tomorrow.

modal latest

jeffchew commented 4 years ago

On Sep 30, linda-carotenuto commented: This is looking great y'all.