Accordion content has padding right 25% applies

[nicoxxie]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.
Accordion content has 25% padding, this is taking a lot of space and didn't used to be like this in v9.

Is this issue related to a specific component?
AccordionItem

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

What browser are you working in?
Chrome Version 79.0.3945.88 (Official Build) (64-bit)

What version of the Carbon Design System are you using?
carbon-components-react: 7.9.0
carbon-components: 10.9.0

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

IBM Cloud

Steps to reproduce the issue

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

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Additional information

• Screenshots or code
• Notes

[tw15egan]

Pretty sure this is a design pattern introduced in v10, so it seems to be working as expected. Pinging @carbon-design-system/design to confirm.

[nicoxxie]

I see, the problem is that we have an accordion on the left half of the page, then other contents on the right. And there is a big empty space now after upgrading to v10.

please keep me updated. thanks

[ashpc]

@tw15egan as Nicole mentioned it occupies a lot of white space and would like to make sure we don't have to override everything.

[loganmccaul]

@nicoxxie @ashpc Do you have a screenshot of the issue? We'd like to avoid overriding Carbon components with Carbon 10 so we can meet the IBM Design Language's expectation the best we can

[aagonzales]

What size if your accordion on the page? As TJ said this is the expected behavior to help prevent line length from being too long but I think we can maybe change it at smaller sizes to allow the content to span 100% of the accordion, we've just started doing this with modal as well. Let me mock something up.

But the larger padding right will remain on certain larger sizes.

[aagonzales]

Updates

Ok let's actually update the accordion component to work like as below. This is help when in smaller area and use that valuable real estate.

Width	padding-right
>420	16px
420-640px	64px
<640	25%

[nicoxxie]

@aagonzales here is screencap of what we want to achieve. We have a table under an accordion content, and a side panel next to the accordions. So 25% does leave a big gap, we talked with UX and they don't like that. We think maybe align with the caret would be a good choice?

In v9

In v10

[aagonzales]

Hmm ok that's a more complicated scenario. Y'all are using them more like page sections/dividers than just for content. This brings up two thoughts:

1. We can treat accordion content like we do in modals, where text keeps the original 25% padding right but then other components inside of it can still span the full width of the accordion.
   

2. I'm wondering if accordion drawers as page sections needs to be a variation of accordion with its own treatment and styles. It already looks like you're overriding the accordion title to be larger.

[nicoxxie]

@aagonzales yes our design went through research and testing and decided on accodion and we don't see other similar components. For the title, the component can takes component directly so we didn't use just text.

[tw15egan]

Currently, we just reduce the padding-right to 3rem on screens less than 800something px. We could add another breakpoint to make it just 16px under certain screen sizes (mobile)

[ashpc]

@tw15egan is there a fix for this being worked on?

[tw15egan]

@ashpc I can get a fix in for this today. I will take specs from #4993 (comment)