Clarify default component spacings

[janhassel]

Summary

Right now, most carbon components do not have any margin around them to allow the designer and developer to use them freely in their layout. Some components though (listed below) actually do have margins. Sometimes all around, sometimes only on specific sides.

These margins are not represented in the Sketch Kit, causing designers to build their layouts as if there were no spacings and developer struggling to implement the designs because they have to either (1) override the margins provided by carbon (and maybe shoot themselves in the foot in the long run) or (2) reject / adjust the designs (which can have serious issues on visual hierarchy and obviously makes it hard for the design team to review the implementation).

List of carbon components with default spacings

• Fieldset (affects groups of checkboxes and radio buttons)
  • Bottom
• File Uploader Drop Container (https://react.carbondesignsystem.com/?path=/story/fileuploader--fileuploaderdropcontainer)
  • Bottom
• FormLabel
  • Bottom
• InlineLoading
  • Top
  • Bottom
  • Left
  • The spacings are not defined as margin, but the size of the svg is set to 2rem despite only being 16px
    
• Loading
  • Top
  • Right
  • Bottom
  • Left
  • Spacings are also not defined as margin, same behaviour as with InlineLoading
• Toast Notification
  • Top
  • Right
  • Bottom
• Inline Notification
  • Top
  • Bottom
• Structured list
  • Bottom
• Toggle
  • Top
  • Bottom
• Small Toggle
  • Top
  • Bottom