feature[patterns]:modified table for status indicator pattern

[jeanservaas]

feature[pattern]:modified table for status indicator pattern

We are enhancing and migrating the Status Indicator pattern from the Carbon for Cloud & Cognitive PAL over to the Carbon website. A table like this already exists on that PAL, I've just modified it slightly.

https://pages.github.ibm.com/cdai-design/pal/patterns/status-icons

Modifications of the C&CC table

• We've removed one of the columns (the status column)
• We added the outlined versions of the status icons
• We increased the width of the g100 strip in the table so that it's on the responsive column grid at all breakpoints
• We are specifying that the rule, when it is on the g100 background pull in the $interactive-02 token (g80), not the $ui-03 token (g20); i.e. the rule will be g20 on the white background and g80 on the dark background, as if the dark area is a dark theme zone.

Specs and Behavior

The vertical spacing, type hierarchy and horizontal scrolling behavior will operate just like a normal Gatsby table, except this one has a white background. At mobile, the table will scroll horizontally, just like the C&CC table does.

At the table and mobile breakpoints, the dark logos have been removed so that the table can still fit at 672px and will be more light weight in the mobile experience.

Designs

Full layout (@vpicone the new content is in the file)

Breakpoints

1312

1056

Tablet

Mobile

Sketch file (new)

032421_CarbonPatterns_IconTable.sketch 4.zip

@thyhmdo For future ref this is where these enhancements go and how they get spec'd out more or less.

[vpicone]

@jeanservaas do we have content to replace the lorem ipsum yet?

[aagonzales]

@vpicone I believe this issue is just about the table not the page content. They have page with additional content on it that they will be adding in a PR

[jeanservaas]

@vince I am working on the copy right now, is it needed to build the table? Jan will also have to review it. Or will it be easily editable?

Basically all the content is what we plan to have complete before the end of the sprint so that we can put it in PR with the hot new and improved table.

[jeanservaas]

@vpicone There has been an addition to this page that I hope won't be too much extra effort. We basically want to use the same table for status symbols that Conrad Ennis is going to create as we're using for status icons.

specs

The difference is that the symbol column width only takes up 1 column, vs. the two column width of the status icon table above.

1312 breakpoint

1056 breakpoint

tablet breakpoint

mobile breakpoint

New Sketch file

042721_CarbonPatterns_IconTable.sketch.zip

[jeanservaas]

Related issue:
carbon-design-system/carbon#8546

From Conrad:

status glyphs.zip