Investigate hanging grid components

[aagonzales]

Component that would/could hang in the gutter of the grid:

• Accordion
• Button
• Code snippet
• Content switcher
• Data table
• Modal
• Progress indicator
• Structured list
• Tab
• Tile

[joshblack]

@aagonzales diving into this with @tw15egan, any chance we could get some examples for how these would be used in product to try so that we can try and build them out and see how things work? 👀

[joshblack]

Hey @aagonzales! 👋 Was hoping to work with @tw15egan this week on this, any chance you had examples handy?

[aagonzales]

@joshblack @tw15egan can you try looking at example on the website first. Most of the product example I have will be screen shots and not files with the grid turned on. After I finish my release work I can look at digging up and documenting some clear specs.

Good places to look in the mean time:
https://www.carbondesignsystem.com/guidelines/2x-grid/code#grid-modes
https://www.carbondesignsystem.com/components/accordion/usage#placement
https://carbon-website-git-fork-jeanservaas-update-component-doc-205a6c.carbon-design-system.vercel.app/components/button/usage#button-groups
https://www.carbondesignsystem.com/patterns/notification-pattern#banner

Also there are a lot of great Watson example work in this folder (i can't speak to its correct grid usage though atm): https://ibm.box.com/s/xtsoax4i4jsgy7fnevmm8hidbzqtcm2o

[joshblack]

@aagonzales when we were diving in last week we looked at the website and I think we found the following examples for hanging content:

Button and tile

Tab and tile

Tile

Tab

Website tabs, tiles, and search

Let me know if I missed any!

---

Based on the list above, it seemed like we were missing:

• Code snippet
• Content switcher
• Data table
• Modal
• Progress indicator
• Structured list

For the watson folder, are there any particular files I should be looking for? It's hard navigating through and seeing which files include a hanging moment or not.

---

For more info, a lot of the grid work is challenging since it involves aligning containers on columns and, unfortunately, anything inside a container can't really align to a column since there is no sub grid support on the web (Although we're hopeful that this will be better supported in the future for CSS Grid).

This is where the request for examples come from so we can see if we can fit a component in this model or if it would need to be nested in a container 👀

[aagonzales]

Accordion:
Redesigned from IBM Cloud Support
(oh the last tile is wrong in this example fyi)

Data table:
From: WS_My-projects_HIFI_200302.sketch

Code snippets
You can see at work hanging in the gutter on our website

Modal
Theoretically it hangs but since its not grid aware it width is a percentage. So maybe modal doesn't actually apply to this.

I'll try and dig up some more. I think I can find some in Slack, i'll also see if Jeannie has some more example. Full product screen example in V10 correctly are hard to get. I'm always begging designers to share files with me, most of the time we just get screen shots.

[jeanservaas]

Here's some examples from product:

Tomorrow I will keep looking for these (I know they exist):

• content switcher
• Progress indicator
• structured list

Baremetal provisioning

tile

underline tabs

container tabs

input fields
This was an interesting example that we found in the wild, a lot of Cloud designers were using the right side hang to allow input fields to have a 16px gutter. We haven't necessarily outlawed it but we haven't shown it in any guidance yet either.

Cloud dashboard

button

Cloud Direct Link Dedicated

selectable tiles with labels

data table

Cloud Catalog from Voltron

hanging filterable search

Security ISC

Threat landscape layout
I'm not really noticing a lot of hanging data tables in product, even Security usually keeps them on the columns, but often puts data tables on tiles to create the effect of a hang.

Threat report layout
Here I do notice a fluid button on a tile... we don't show this in our guidance but it exists out in product.

Gatsby

Search

This isn't technically a product example, but I'm sure this is also done in product... hanging the search

[joshblack]

Hell yeah, thanks you two! This rocks 🎸

[alisonjoseph]

TLDR: Trying to replicate all the grid modes in code is super messy and hard, and developers will likely get it wrong even if we give them ways to do it.

I started playing around in codesandbox with some ideas and seeing how things could be laid out.
https://codesandbox.io/s/hanging-explorations-ludzt?file=/index.js

Trying to build these layouts is super confusing and tricky, since components aren't grid aware, any dev building will have to either manually hang something if using the wide/standard grid, or manually add padding back in for components that should not hang if using condensed or narrow modes.

For designs using “narrow” you could just use the default/wide grid mode and add a hang class/prop manually. Alternatively you could also use the narrow prop per row or column to remove the left padding/margin, but then you run into the issue if there are other items in that row/column that should not hang. Which is why it might make sense to do it per component.

Where things get really weird is condensed. A dev would likely only use this at the row level or column level, however you’d have to be careful not to put anything in that column/row that shouldn’t hang.

Note: our grid doesn't currently support column level modes/classnames, although could be added. Only supported at entire grid or row levels.

To manually "hang" components it would be on the developer to know which components should hang so they can add the correct class (or prop if we added that) to each of them. Could get messy real quick when building out an entire application. We've seen this ourselves when building out components for the gatsby theme and website, and that's with our designers who understand how the grid should work by our side working closely.

Could possibly do something where if "narrow" was set at the grid level, then any components inside the grid that should hang, would hang, this would need a lot of testing and could get messy. Not sure there would be a logical way to do this with condensed. Condensed would need to stay at grid/row/column level, and again, then its on the developer to make sure they manually add padding back in for components that shouldn't hang if inside those grid classes.

[alisonjoseph]

Proposed next steps for Grid

• Add support to nest grids and have columns calculate correctly (one level)
• Add column level support for grid modes .bx--col--condensed and .bx--col--narrow
• Add a hang prop for certain components that need to hang
• Overhaul dev docs for grid to explain the grid modes more clearly and how to use at column/row level and hang
• Create a gallery of example layouts/templates