search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
266 stars 157 forks source link

[Flexible component spacing]: Flexible top and bottom spacing should be considered on each component #9323

Open jwitkowski79 opened 2 years ago

jwitkowski79 commented 2 years ago

The problem

IN AEM, we are stacking several components within sections. For example, a use cases section could have multiple components within the section, or we stack a content block over content block cards so we can have a title, subheading and CTA option above the content block cards component. Because of the stacking, we are finding inconsistencies with spacing and large spacing gaps between two things that are related and should have proximity to each other. We have several tickets open on the AEM side of this and developers are finding that because we're stacking or nesting components, we're also inheriting the extra spacing that comes with each component from the IBM.com library. You may also have seen some tickets come over to your team helping to address this issue.

Attached is a Figma file illustrating some of the issues we're having. Also happy to point you to some of the tickets we have open on the ADCMS side of things too if you feel it'll help the team to better understand the issue

overview-with-spacing-issues

The solution

We're looking to have a more flexible spacing system assigned to the top and bottom of components that is controlled by the adopter. We've identified 4 values: 32px, 64px, 128px and collapsed spacing meaning remove the spacing all together. More review and discussion will probably need to happen to make sure everything is covered with the 4 values. It would be good if these values are included as a prop, or someway where the developer could access the spacing to make necessary adjustments for a more consistent spacing on pages when stacking or nesting components. See attached Figma comp for the ideal solution that we're looking for. overview-with-correct-spacing

Also, here a link to a Figma file with all spacing explorations: https://www.figma.com/file/jRBfdIHXa3WrKGI5qeLPVi/Spacing-explorations?node-id=2%3A7444

Application/website

Interfaces team

Business priority

Medium Priority = upcoming release but is not pressing

What time frame would this ideally be needed by (if applicable)

As soon as possible so we can have more consistent spacing between components and sections within AEM

Examples

No response

Code of Conduct

stale[bot] commented 1 year ago

We've marked this issue as stale because there hasn't been any activity for 60 days. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.