[Design] Left Padding causing centering issues for accordion content

[gusnaughton]

ADO link: https://dev.azure.com/itsals/E_Retain_Content/_workitems/edit/1311527

What browser client(s) are you seeing the issue on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

What devices platform(s) are you seeing the issue on?

• Desktop
• Mobile

Steps to reproduce

It appears that there are new styles here:

auro-accordion/src/style.scss

Line 64 in 51b1007

.contentWrapper {

Expected behavior

I would like the accordion to fill the space without an asymmetrical padding value

Which version of auro-templates do you have installed?

5.2.0

Reproducible on the Auro doc site

• I am able to reproduce this issue on the Auro doc site.

Exit criteria (To be determined by the Auro team)

Make padding optional

[sun-mota]

Hi @gusnaughton ,

If you want to customize and remove padding on a particular accordion,
This is the example that you can apply.

<style>
  #basicAcc::part(contentWrapper) {
    padding-left: 0;
    padding-bottom: 0;
  }
</style>
<auro-accordion id="basicAcc">
  <span slot="trigger">Trigger</span>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</auro-accordion>

[gusnaughton]

Thank you, the override works as described. I will leave it to the design system team to determine if this change was intentional or inadvertent and worth rolling back - it does appear to make each accordion's content in the mobile view seem offset to the right.

[megrenn]

@jason-capsule42 check out gus's comment above in terms of closing the ticket or not

[jason-capsule42]

This needs to go to the designers to see if they want to make any changes to the current layout of this component.