[Dev]: Random cleanup issues

[alisonjoseph]

List of dev issues on new site that need to be fixed/cleaned up

Staging link: https://deploy-preview-516--carbon-website.netlify.com/

• [x] Add IBM logo to footer https://github.com/carbon-design-system/carbon-website/issues/505
• [x] codesandbox http://localhost:8000/components/dropdown/code
• [x] image grid component http://localhost:8000/components/checkbox/style
• [x] iframes/codepen http://localhost:8000/data-visualization/gauge/code
• [x] ui shell http://localhost:8000/experimental-components/ui-shell/code
• [x] check do/dont component responsive after grid is fixed
• [x] Anchor links need to be hooked up across the board. https://github.com/carbon-design-system/carbon-website/issues/513 @claycrenshaw

[claycrenshaw]

~Anchor links need to be hooked up across the board.~ duplicate tracked in #513

[claycrenshaw]

On Chrome (on my machine, but not Tyler's, using the same version of Chrome) The side nav scroll bar is rendering white instead of the intended dark grey color.

should be tracked as UI Shell issue in components repo

[claycrenshaw]

~https://deploy-preview-516--carbon-website.netlify.com/guidelines/grid/design This page should be changed to "Layout" on the page itself, as well as in the nav. "Grid" will be removed as a label in the nav.~

this is being tracked here https://github.com/carbon-design-system/carbon-website/issues/484

[claycrenshaw]

• [x] https://deploy-preview-516--carbon-website.netlify.com/data-visualization/overview/colors (Rogue piece of copy appearing on left side of page)

[claycrenshaw]

~Bar graph component getting cut off on left side of page https://deploy-preview-516--carbon-website.netlify.com/data-visualization/bar-graph/code *This seems to be an issue with all of the data viz components.~

duplicate

[claycrenshaw]

• [x] Clicking on the thumbnail image for these articles opens the image itself in a new tab, rather than the desired behavior of opening the article.

https://deploy-preview-516--carbon-website.netlify.com/resources

[designertyler]

App switcher icon should be vertically centered. Right now there's too much space below.

@designertyler this should probably be created as a bug in carbon-components for the UI Shell.

[designertyler]

~"Skip to main content" appears in top left after clicking search link. Steps to reproduce: Search for a term in search bar. Click a link in the results. You're linked from staging site to prod. (Could be part of the issue)~

being tracked here https://github.com/carbon-design-system/carbon-website/issues/574

[jeanservaas]

• [x] Hey guys,

Just noticed that the H3s (sorry, I referred to them as secondary) are the wrong size... they're a little big.

They need to be 20px or 1.25rem... right now they're set at 1.5rem and they look very close to the Headlines.

[jeanservaas]

• [x] Take underlines out of index items pweese
• [x] Match Secondary anchor links to this style too (see Layout page)

They should look like this to align with IDL:

Primary index style

enabled

hover:

Secondary anchor link index style

This only happens on the Layout page, but we will use it on other pages too:

Type size:

16px (1rem) 24 px (1.5rem)

instead of this:

[alisonjoseph]

Homepage todo:

• [x] tiles should match aspect ratio on IDL site when scaling (have fixed height)
• [x] update article images for homepage and resources (get size from @jeanservaas )

[jeanservaas]

Type tokens/classes and alignment

• H1 size (it's fluid) needs to be $expressive-heading-04 token (I also just made a PR! for a value change for this token too that @joshblack is aware of); it's not currently fluid now and it's displaying much smaller at the large / xlg breakpoints than IDL

• H2 uses the token $heading-03 (you have this correct! just letting you know what the token name is for that value)

• We seem to be missing the H3 size which used the token $heading-02 (it's the 16px semi-bold). I included a grab for our layout page... I haven't combed the whole site, but I don't think we're using this style currently... maybe on FAQ page...

• This ONLY happens on grid page, but these secondary indexes should be calling the $body-long-02 because they need to be smaller, otherwise it's confusing

Also, this one should follow the same pattern

• All tokens should be displaying in inline code snippet for consistency, since we're doing it on the Typography page

• We should never be bolding inline links (I found this on the Getting Started Designers page) but we can make that rule across the board

Also found on: Getting started Developers, Accessibility (a lot), Support and FAQ

Captions are not done in italic now (see layout page for correct treatment) — they pull $body-short-01

Image sizing

• For most part (with a few exceptions, like the Type page, our 1-up rectangular images should be displayed at the large size (928px at 1312 breakpoint)... right now they're still at 640 from old Carbon.

• I thought @shixiedesign exported new image assets here, if not I will get them to you. These are old images from the TT and they still have the gray 100 background.

Inline Code Snippet Component

• Always use the gray 20 (#dcdcdc) background highlight for inline code snippet, whether it's on a white background or a gray 10 background it works; I'm seeing a lot of white backgrounds:

Type Spec Component

• those example lines to the right should also be on the grid; so the line lengths for those guys are getting way too long

• code snippet is getting bumped out of alignment (there should also be 16px of padding beneath it)

Code Snippet Spec Component

• would like it to have dark theme now that we have values, but if it can't maybe we could have a 1px #dcdcdc line separating it from our type specs.

• it's not aligning to image

Spacing

• I know we don't have fluid spacers figured out yet... but just trying to get consistent margin tops / bottoms for now site wide; sometimes spacing above the H2s are inconsistent:

Type page examples

Table (Structured list) Component

• Ideally we want two sizes for this component — a 12 column component and a 6 column component for less information

it does actually looks like you're using two sizes now... I see the 12 col component on the accessibility page and a shorter one on layout

Not ideal (we want to avoid these long line lengths and make sure the first column has enough space so it doesn't have to break) Examples of these are on the Spacing, Accessibility and Disabled State and Overflow Content pages:

Ideal:

• Even if it can't be a shorter width table, we should still follow the grid and clip the line length to follow our guidance

• The majority of our tables will be the 12 column format, if we had to choose, I would make that one... this from layout is a great example of where 12 column would be better

[alisonjoseph]

@jeanservaas moving this to its own issue since thats a lot of stuff https://github.com/carbon-design-system/carbon-website/issues/608

also closing out this one