lovemecomputer
commented
5 years ago hi @carbon-design-system/design / @jeanservaas / @shixiedesign / @claycrenshaw ! i'm working through the issues in this PR. Have a few requests/feedback/input. More may come in a future comment, but this is a cursory glace at the moment:
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
this sounds like a content rule that should have its own Issue/PR, as it can be controlled via editing the markdown file so it isn't just a development issue.
This is actually not a particular caption, just a paragraph made to be italic? Captions on the Do/Don't Examples were implemented to match the IDL site, but then some last-minute hurried revision kind of broke the implementation.
For proper implementation, we need to see a Github Issue with caption specs and a list of which components we would like captions to be used for
this is a bit more complicated of an issue and should be tracked in its own PR. the rectangle with the white background is it's own element that the header margin is pushing away from. we'd need to compile a list of special cases like this and figure out an implementation strategy to make it consistent & easy to get right when editing the markdown file. would rather have that discussion in its own Issue & PR, along with the necessary details to implement!
Table (Structured list) Component
- Ideally we want two sizes for this component — a 12 column component and a 6 column component for less information
We should also put this into its own Issue with some specification behind what the desired options and implementation should be. table spacing and swapping numbers of columns can be pretty complicated!
Can you elaborate on this in its own Issue? I've hunted through the site, but I'm not sure I understand what content should go into the table. I could use a verbose explanation so I understand correctly!
Can you open a separate issue for this too? I have 2 questions about it to ensure that we implement the correct rules!
- What spacing token(s) should be used on the type spec element's margin? we don't have the same grid on the web as we do in a sketch document, so we need to make sure we're using the right token to control either the maximum width of the paragraph, or the size of the margine (and it's possible to use different tokens and different screen widths if necessary)
- i'm not seeing the same issue the code snippet misalignment. i will continue to look for it, but it'll be easier to talk about it once this is in a separate issue :)
The images are being displayed full-width, looks like we just need to get the correct image assets in here. feel free to send them over, or open a separate issue with the updated files attached/linked. Thanks!
will need to see specs & comp to implement dark theme. alison already fixed the misalignment issue globally in a separate Issue/PR, but i'll see what's the best way to add the border for now!
alisonjoseph
From @jeanservaas
Type tokens/classes and alignment
Also, this one should follow the same pattern
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
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
Type page examples
Table (Structured list) Component
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: