No indentation accordion variation

[carkod]

Done

Variation to remove indendation for checkboxes.

Removing 2 rems will adjust the indentation/padding for the default accordion, but if we add checkboxes, it will push the content further, therefore, I removed 1 rem to specifically accomodate for checkboxes.

Therefore, something we need to decides is whether we want to accomodate the indentation for checkboxes or general accordions without checkboxes.

Fixes #3913
Fixes #3885

QA

• Open https://vanilla-framework-3963.demos.haus/docs/examples/patterns/accordion/tick-elements
• Check that paddings have been removed, compare with /docs/examples/patterns/accordion/default
• Review updated documentation:
  • Added example in documentation https://vanilla-framework-3963.demos.haus/docs/examples/patterns/accordion/tick-elements
  • Standalone should also work now: https://vanilla-framework-3963.demos.haus/docs/examples/standalone/patterns/accordion/tick-elements
  • What's new page updated https://vanilla-framework-3963.demos.haus/docs/whats-new

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.
• Documentation side navigation should be updated with the relevant labels.

Screenshots

[webteam-app]

Demo starting at https://vanilla-framework-3963.demos.haus

[lyubomir-popov]

@carkod on lod the expanded icon hasa + instead of - icon:

[carkod]

@carkod on lod the expanded icon hasa + instead of - icon:

Fixed, thanks!

[carkod]

Example of long text/tiny device (220px width):

[lyubomir-popov]

Example of long text/tiny device (220px width):

this shouldn't happen, any text next to acheckbox should lign to itself. There was a trick with overflow:auto that does this.

[carkod]

Example of long text/tiny device (220px width):

this shouldn't happen, any text next to acheckbox should lign to itself. There was a trick with overflow:auto that does this.

mm ok but this is happening in the default checkbox example
https://codepen.io/carkod/pen/eYRzYow

So maybe this should be fixed in checkbox rather than accordion?

[carkod]

I approved my percy build, but I suppose someone else needs to check them

[lyubomir-popov]

@carkod why does the spacing in the percy screenshots change between examples?

[bartaz]

@carkod why does the spacing in the percy screenshots change between examples?

@carkod The style of checkboxes doesn't work in standalone example. Because standalone example uses only accordion. To make checkboxes work we need to add them to standalone SCSS for accordion. We do it for other components that have examples that depend on other styles as well.

I think adding @include vf-p-form-tick-elements; to accordion standalone CSS should make it work.

[lyubomir-popov]

yes, I don't see another valid use atm - maybe bulletted lists - but lets see if sucha need arises and we can add it

[lyubomir-popov]

So maybe this should be fixed in checkbox rather than accordion?

true. can you please file an issue for it?

[carkod]

So maybe this should be fixed in checkbox rather than accordion?

true. can you please file an issue for it?

Issue

[bartaz]

Standalone example needs adding the checkboxes in it.

So the scss/standalone/patterns_accordion.scss need to @include@include vf-p-form-tick-elements; to make the standalone example contain styling for checkboxes as well

[bartaz]

@carkod Thanks for updates. One last thing is adding a label to side navigation to accordion.

So in line:
https://github.com/canonical-web-and-design/vanilla-framework/blob/9e7e04f2f4277c76f89867a4829117e302824a82/templates/_layouts/docs.html#L60

Add a 'updated' as third param, in same way as currtenly forms have it:
https://github.com/canonical-web-and-design/vanilla-framework/blob/9e7e04f2f4277c76f89867a4829117e302824a82/templates/_layouts/docs.html#L51

You can actually remove the one from form, because it's from previous version of Vanilla.

[carkod]

@carkod Thanks for updates. One last thing is adding a label to side navigation to accordion.

So in line:
https://github.com/canonical-web-and-design/vanilla-framework/blob/9e7e04f2f4277c76f89867a4829117e302824a82/templates/_layouts/docs.html#L60

Add a 'updated' as third param, in same way as currtenly forms have it:
https://github.com/canonical-web-and-design/vanilla-framework/blob/9e7e04f2f4277c76f89867a4829117e302824a82/templates/_layouts/docs.html#L51

You can actually remove the one from form, because it's from previous version of Vanilla.

Done. Thanks for pointing that out

[bartaz]

LGTM, thanks!

[lyubomir-popov]

Looks great thanks @carkod !