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

[component index] design refinement and spec #1266

Closed
4 tasks done
aagonzales opened this issue Jun 8, 2020 · 8 comments
Closed
4 tasks done

[component index] design refinement and spec #1266

aagonzales opened this issue Jun 8, 2020 · 8 comments

Comments

@aagonzales
Copy link
Member

aagonzales commented Jun 8, 2020

Remaining tasks:

  • define filters and sorting to include in MVP.
  • Quick audit on where kits are on the PAL sites
  • Create final spec.
  • Create component images
@aagonzales
Copy link
Member Author

aagonzales commented Jun 24, 2020

Design spec

Deliverables:

File includes:

  • Responsive break points
  • Filtering behavior
  • Scrolling behavior
  • Card spec

Responsive behavior

See Sketch file for higher fidelity

image

Scrolling behavior

Sketch file has behavior at all breakpoints.

  1. Start state
    image

  2. Begin scrolling
    image

  3. Search and sort tool bar sticks
    image

  4. Filters scroll independent once they stick
    image

Filtering behavior

Large break points

  • Filter exist in a right panel as checkbox lists.
  • Select filters appear as purple tags in the sticky header bar beside sort

image

Smaller break points

  • Filters combine into one long multi-select filter
  • note: I have a design for categories in the dropdown if we think this is possible.

image

Sorting behavior

image

Card spec

OUTDATED! , follow new spec here #1266 (comment)

Original card spec

image

States

image

Framework icons

image

Structure:

image

@mjabbink
Copy link
Contributor

Sweet

@aagonzales
Copy link
Member Author

aagonzales commented Jul 29, 2020

Updates

Updates are based on the user feedback sessions and feasibility concerns. Responsive behaviors and other interactions have largely stayed same as list above in the previous comment.

  1. Remove status from cards, filter and sort.
    • Status is applied inconsistently across PAL sites and need a cross system agreed status before adding.
    • For the first round of community components they will all be "production ready." Only things that have design and code will be added for the initial mvp.
  2. Filter content changes:
    • Remove component type for now, may add back in future when categories become more clear, intuitive.
    • Change "Source" to "Availability"
  3. Card structure and content updates. New cards structured as follows:
    Card specs 7-30

@kimberlyandersson
Copy link

@aagonzales This looks fantastic. Do you see any way of IBM business partners like Rocket getting access to these components for use in building IBM products?

@aagonzales
Copy link
Member Author

@kimberlyandersson because these are community owned it will depend on if the teams who make them open source them or not. I know some orgs do have open source components so business partners could use those.

@vpicone
Copy link
Contributor

vpicone commented Aug 7, 2020

Wondering if we want to use the same inline dropdown solution as the icon library rather than having the whole page width for the dropdown? At least on desktop screen sizes. Either way, I think the dropdown is slightly smaller than the search at present.

Screen Shot 2020-08-07 at 11 38 15 AM

vs.

Screen Shot 2020-08-07 at 11 37 58 AM

@aagonzales
Copy link
Member Author

@vpicone we talked about it, in fact it started that way but in the icon library search and the dropdown are related. In the component index they are two separate functions that aren't associated. It was also causing weird hierarchy issue with the filters as well.

image

We'll also be using the sort bar to show the filtered tags so it wont be completely wasted space.

image

@joshblack
Copy link
Contributor

Hey @aagonzales! 👋

Going through the Zenhub pipelines and wanted to confirm if this was still in-progress or if we should move to another pipeline? 👀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants