Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Contribute expressive type styles usage on "Typography" page #6252

Closed
shixiedesign opened this issue Jun 3, 2021 · 10 comments
Closed

Contribute expressive type styles usage on "Typography" page #6252

shixiedesign opened this issue Jun 3, 2021 · 10 comments
Assignees
Labels
Carbon Core design Applied to all issues assigned to the design team members. Filter used in planning meetings Feature request A new adopter requested feature priority: high
Milestone

Comments

@shixiedesign
Copy link
Contributor

shixiedesign commented Jun 3, 2021

Details

  • With new the expressive type styles added to Carbon, we still need to provide guidance on when they should be used.
  • New guidance should resolve "When to use expressive vs productive?" question.
  • Content could live between Carbon "Typography" page & Dotcom Type pairing

Draft PR: carbon-design-system/carbon-website#2410

Issue in Carbon repo for dev work to create type set table: carbon-design-system/carbon#8934

@shixiedesign shixiedesign added Carbon Core design Applied to all issues assigned to the design team members. Filter used in planning meetings Feature request A new adopter requested feature labels Jun 3, 2021
@shixiedesign shixiedesign added this to the Sprint 21-12 milestone Jun 3, 2021
@shixiedesign
Copy link
Contributor Author

shixiedesign commented Jun 21, 2021

Here are the content so far and have gone through a rough review already:

PR:
carbon-design-system/carbon-website#2410
Invision link:
https://projects.invisionapp.com/d/main?origin=v7#/projects/prototypes/21476859

Issue in Carbon repo for dev work on type set table: carbon-design-system/carbon#8934

@janchild
Copy link
Collaborator

janchild commented Jun 21, 2021

  • Examples of expressive within productive experience
  • Images
  • Edit content on the Experience and Type set pages
  • Review content on Overview tab
  • Review table behavior and update Carbon issue

@janchild
Copy link
Collaborator

janchild commented Jun 23, 2021

June 22:

  • Met with @oliviaflory to discuss content and behavior of prototype for new type set page. And for Olivia's help with images.
  • Confirmation from Alison Joseph that Carbon dev will be working on table next sprint (week beginning June 28)
  • Meeting with Jean Servaas June 24 to discuss behavior of prototype

@janchild
Copy link
Collaborator

  • @oliviaflory and @janchild met with Jeannie, Lauren, and Tracey to discuss expressive moments in product and draft some content
  • Handing Sketch file over to @oliviaflory to create images. Will add another issue to cover this work.

@oliviaflory
Copy link
Contributor

Uploading the examples I mocked up here for initial look 👀

I used the 3:2 928 (12 column) browser template size from Jeannie's spec template, but also have the 3:2 608px (8 column) created as well. These use a 1px solid border to outline the productive moment areas.

1. Mega menu
3:2_928_ui_full productive-moment-3

2. Products page
3:2_928_ui_full productive-moment-1

3. Search results
3:2_928_ui_full productive-moment-2

4. URX
3:2_928_ui_full productive-moment-4

@janchild
Copy link
Collaborator

janchild commented Jun 28, 2021

@oliviaflory Thank you for these. I can start putting them up in the PR.

For the mega menu, I'm wondering if there's another way to show it because the outline is decoupling the mega menu content from the tab. I'm also wondering if we should scroll down the page a little bit because I'm distracted by the color images at the bottom of the page there. 🤓

image

@oliviaflory
Copy link
Contributor

oliviaflory commented Jun 28, 2021

Update to all images on G20 background, and adjustments to mega menu & filter panel outline

Also just remembered the live Products page is still using Expressive type styles for the filter panel 🙈 I will update with a mock UI I have

3:2_928_ui_full productive-moment-2
3:2_928_ui_full productive-moment-3
3:2_928_ui_full productive-moment-4

@oliviaflory
Copy link
Contributor

Product page updated... let me know if you'd like to adjust the outline for the filter panel, I stuck to just the filter panel container

3:2_928_ui_full productive-moment-1

@oliviaflory
Copy link
Contributor

All final images can be found in the Carbon typography page folder

@janchild
Copy link
Collaborator

The guidance has been completed and the tables updated by the Carbon dev, Scott Strubberg.
Guidance is ready for publishing and can be previewed here: carbon-design-system/carbon-website#2410

The project is moving into the implementation phase now, covered by #6696.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Carbon Core design Applied to all issues assigned to the design team members. Filter used in planning meetings Feature request A new adopter requested feature priority: high
Projects
None yet
Development

No branches or pull requests

4 participants