search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.72k stars 1.79k forks source link

Pictograms have extra padding #5550

Closed oliviaflory closed 4 years ago

oliviaflory commented 4 years ago

What package(s) are you using?

Detailed description

Describe in detail the issue you're having.

The pictograms have a much larger padding around them than expected from the specs on the IDL documentation Example of SVG

Screen Shot 2020-03-05 at 3 55 42 PM

Expected padding

Screen Shot 2020-03-05 at 3 54 04 PM

The extra padding is causing alignment issues between the pictograms and text because the artwork doesn't span to the edge of the container as it did before. Design intent using 1px border specs

Screen Shot 2020-03-05 at 2 48 27 PM

What is happening using svg from pictogram package

Screen Shot 2020-03-05 at 2 47 09 PM

link to storybook

Is this issue related to a specific component?

All pictogram svg files

What did you expect to happen? What happened instead? What would you like to see changed?

Is the extra padding around the pictograms an intended, permanent change to the pictogram svgs that designers need to account for?

I would have thought the pictograms would adhere to the size they were drawn to, accounting for the 1px padding specified on the IDL page

Screen Shot 2020-03-05 at 1 35 44 PM

What browser are you working in?

All browsers

What version of the Carbon Design System are you using?

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Digital Design System and Web simplification – launching May 2020

Steps to reproduce the issue

  1. Step one
  2. Step two
  3. Step three
  4. etc.

Please create a reduced test case in CodeSandbox

Additional information

laurenmrice commented 4 years ago

@conradennis ^

I do not have permissions to move this into the pictogram repo, otherwise I would have .

conradennis commented 4 years ago

@laurenmrice thanks for the heads up, the repo is still private and is mostly intended for artwork creation and contribution so it might be worth keeping this one here.

@oliviaflory thanks for calling attention to this issue. The extra padding around the pictogram is intentional and is actually the corresponding container size for the pictograms as in the image shown below.

Screen Shot 2020-03-06 at 4 56 18 PM

While the intent is to include this extra space for container shapes in the SVG file for ease of use, it seems like the inclusion of the container space is causing issues with alignment when a container is not needed. I'm not sure how we might address this issue in code but it's something I can bring up with the production team on the brand side and it'll be good to get some perspective from the Carbon folks on how we can avoid this issue moving forward.

conradennis commented 4 years ago

Russ to set up a meeting between Brand team and Carbon to discuss how to deal with this issue.

wonilsuhibm commented 4 years ago

@conradennis Hey, can you include Olvia Flory in the meeting, please? We are getting questions around this one a lot, we'd like to stay tuned as well.

conradennis commented 4 years ago

@wonilsuhibm yup will let Russ know to include her. Thanks!

joshblack commented 4 years ago

Looking into this, it seems like the artboard is being drawn at 48x48 but the path is not growing to fill the entire space:

Screen Shot 2020-03-20 at 12 43 38 PM

Screen Shot 2020-03-20 at 12 43 32 PM

joshblack commented 4 years ago

Closing this in favor of #5693! We're going to move forward with processing the SVGs to be in a 32x32 artboard in code and Sketch 👍