search

Chicago / design-cds-bootstrap

The Chicago Design System as a Bootstrap 4 theme
https://chicago.github.io/design-cds-bootstrap/
MIT License
8 stars 2 forks source link

UI - Top bar: New component, "this is a city of chicago site" #24

Closed jdkunesh closed 4 years ago

jdkunesh commented 4 years ago
Screen Shot 2019-11-12 at 9 30 25 AM
alaeder16 commented 4 years ago

@mario-duran - I added it to figma. @jdkunesh - Do we have an icon library or do we need to create these two icons?

jdkunesh commented 4 years ago

Thanks @alaeder16!

@mario-duran @chrisjcalderon You had some recommendations of which icon systems Bootstrap currently has available. I would like to base the system UI icons off whatever's already there.

For these two graphics, for now it's fine to use what's there. We can shake out and refine items like this once we have given everything a good once over, I believe.

alaeder16 commented 4 years ago

OK, will provide the graphics. @jdkunesh - Do we use SVG or PNG files?

jdkunesh commented 4 years ago

¯_(ツ)_/¯ Those two items are a couple SVGs currently, that works for me?

dpmesa commented 4 years ago

In several of the webapps we use fontawesome icons -see example below. They are easy to use/include and there is a decent number of icon available (1544) on the free version gallery: https://fontawesome.com/icons?d=gallery&m=free

image

jdkunesh commented 4 years ago

that works for me.

alaeder16 commented 4 years ago

@dpmesa @jdkunesh @mario-duran - ok we can use font awesome however some icons will not be available in that exact format. I can replace with the similar and get it for your review.

jdkunesh commented 4 years ago

@dpmesa @alaeder16 @mario-duran Also, Big Shoulders Display & Text are now available in all Google Docs, so should be available in Figma natively as well.

Thanks!

j

alaeder16 commented 4 years ago

yes! I saw it :). @jdkunesh I have couple of items:

  1. for the instance when we have cancel | submit action buttons we need to define color for the primary and secondary. Per USWDS - to use secondary for the previous step. However the cancel or clear are not prev. steps. Should we use base grey button in this case?
  2. For the apps we are working on we using banner in some cases. I waht to make sure we have standards put in place for that. Here is the suggested: https://federalist-proxy.app.cloud.gov/preview/uswds/uswds/release-2.2.1/components/preview/layout--landing.html. Should we create section in figma for the visual elements like banner, images, etc?
jdkunesh commented 4 years ago

cool!

  1. I would use Submit as the primary and Cancel as the secondary, so each would start out as the first item in the two rows below. Grey would only appear for disabled states.
Screen Shot 2019-11-15 at 2 29 59 PM
  1. We definitely should create sections for these. We use that element on occasion today, and it's certainly there in the USWDS as you say. I would add this particular component as an issue for us to consider in our sprint planning: do we want to carry this one forward or look at the carousel component in Bootstrap and base a standard off that? For now, I would love to make sure we have headers squared away.

thanks @alaeder16! TGIF!

alaeder16 commented 4 years ago

OK Roger that.

Sent from my Samsung Galaxy smartphone.

-------- Original message -------- From: Jason Kunesh notifications@github.com Date: 11/15/19 2:34 PM (GMT-06:00) To: Chicago/design-cds-bootstrap design-cds-bootstrap@noreply.github.com Cc: Anna Laeder alaeder@eki-consulting.com, Mention mention@noreply.github.com Subject: Re: [Chicago/design-cds-bootstrap] Top bar: New component, "this is a city of chicago site" (#24)

cool!

  1. I would use Submit as the primary and Cancel as the secondary, so each would start out as the first item in the two rows below. Grey would only appear for disabled states.

[Screen Shot 2019-11-15 at 2 29 59 PM]https://user-images.githubusercontent.com/157725/68973645-6f3d0880-07b4-11ea-80c4-8d669f45f62f.png

  1. We definitely should create sections for these. We use that element on occasion today, and it's certainly there in the USWDS as you say. I would add this particular component as an issue for us to consider in our sprint planning: do we want to carry this one forward or look at the carousel component in Bootstrap and base a standard off that?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://github.com/Chicago/design-cds-bootstrap/issues/24?email_source=notifications&email_token=ANWKKU5CKRD6VIQS2ABGVVDQT4BWZA5CNFSM4JMFDSGKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEEGUN6Q#issuecomment-554518266, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANWKKU2OTHHSY2NKPS7KMT3QT4BWZANCNFSM4JMFDSGA.

mario-duran commented 4 years ago

This item is now included in the new code base and it is available here: https://chicago.github.io/design-cds-bootstrap/