fix(accordion): header spacing and disabled panel content color

[mivaylo]

PR Checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)
• If applicable, have a visual design approval

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• Other... Please describe:

What is the current behavior?

Issue Number: CDE-1603

What is the new behavior?

Does this PR introduce a breaking change?

• Yes
• No

Other information

This PR introduces changes in the API (removed obsolete custom properties) of the accordion / stepper and the appearance of the stepper.

There are spacing differences (hence it was marked as breaking change) and color differences. Previous version was not following figma specs or was not well defined, so this is marked as a "fix".

Removed obsolete custom property is:
--clr-accordion-header-button-padding

Spacing changes are:

-we used to have stepper header panel padding set to 18px on top and bottom, and the overall height of the header panel was calculated to 56.4px; overall height is calculated to exactly 56px;
-when a step is completed header panel used to have bigger height (60px) because of the size of the complete icon, now it stays to 56px on complete/error etc;
-gap between header panel container children was changed to 24px to reflect figma spec;
-there was smaller padding-left of the header panel container and some margin-left to the first child; changed to bigger padding-left and no margin for the child -> this helps with vertical alignments when there are two rows in smaller screens;
-top and bottom padding for header container was reduced from 18 to 8px for "breathing" space when there is a very long text or a small screen;

Preview link look in normal screen (padding right is 24 and padding left is 32 because of the box-shadow blue indicator which is 8px):

Smaller screen (big enough to have only one row though):

When we have two rows (they are now vertically aligned, the gap is 24px by design and that's why we have so big space between the rows):

When texts are long (there is this "breathing" space and texts are not fixed to the header container border:

BREAKING CHANGE: Changed spacing in stepper header

[github-actions]

👋 @mivaylo,

• 🙏 The Clarity team thanks you for opening a pull request
• 🎉 The build for this PR has succeeded
• 🔍 The PR is now ready for review
• 🍿 In the meantime, view a preview of this PR
• 🖐 You can always follow up here. If you're a VMware employee, you can also reach us on our internal #clarity-support Slack channel

Thank you,

🤖 Clarity Release Bot

[github-actions]

This PR introduces visual changes: ae98060
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git ae98060af08127fa69059531f9440f7c44d12cc8
git cherry-pick ae98060af08127fa69059531f9440f7c44d12cc8
git push

[github-actions]

This PR introduces visual changes: 45a4785
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git 45a47854db8812c1a6f25ddf544c57becf9d0216
git cherry-pick 45a47854db8812c1a6f25ddf544c57becf9d0216
git push

[github-actions]

This PR introduces visual changes: 3697de0
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git 3697de0a9d8a4ee2703b2f36f809345efe185c81
git cherry-pick 3697de0a9d8a4ee2703b2f36f809345efe185c81
git push

[github-actions]

This PR introduces visual changes: 3770e02
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git 3770e02482dbf1889d2c98501954abe0c7ac2eec
git cherry-pick 3770e02482dbf1889d2c98501954abe0c7ac2eec
git push

[github-actions]

This PR introduces visual changes: b8c5fa0
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git b8c5fa002149bdc776651eba92296c20c8d05b3f
git cherry-pick b8c5fa002149bdc776651eba92296c20c8d05b3f
git push

[github-actions]

This PR introduces visual changes: fda3cec
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git fda3cec713f5646b5f7fadbde6d0319cff35d477
git cherry-pick fda3cec713f5646b5f7fadbde6d0319cff35d477
git push

[github-actions]

This PR introduces visual changes: 565645f
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git 565645f2fb759c093e3fe5966b633da06db5d46c
git cherry-pick 565645f2fb759c093e3fe5966b633da06db5d46c
git push

[github-actions]

This PR introduces visual changes: cfb3ad4
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git cfb3ad45de965f6e4c3023297f7c683034e0bd56
git cherry-pick cfb3ad45de965f6e4c3023297f7c683034e0bd56
git push

[github-actions]

This PR introduces visual changes: c5ea391
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git c5ea391939d1e8e43b1bf138496bb8b0422b806d
git cherry-pick c5ea391939d1e8e43b1bf138496bb8b0422b806d
git push

[github-actions]

This PR introduces visual changes: bfb079c
If these changes are intended and correct, please cherry-pick the above commit to this PR.

git checkout cde-1603-accordion-api-color-spacing-changes
git fetch https://github.com/vmware-clarity/ng-clarity.git bfb079c9811ff5be19577fd110bf2b9d5f5947c9
git cherry-pick bfb079c9811ff5be19577fd110bf2b9d5f5947c9
git push

[github-actions]

🎉 This PR is included in version 17.0.0-beta.3 🎉

The release is available on:

• GitHub release
• v17.0.0-beta.3

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 17.0.0-next.2 🎉

The release is available on:

• GitHub release
• v17.0.0-next.2

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 17.0.0 🎉

The release is available on:

• GitHub release
• v17.0.0

Your semantic-release bot 📦🚀

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed PRs after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.