Allow more CSS custom properties on cds-accordion-header

[yuhsianw]

Please review our Contribution guide for more details about how to contribute effectively.

Summary

Describe the change or feature in detail. Try to answer the following questions.

• What is the change?

  Add --box-shadow, --icon-visibility, and --icon-margin CSS custom properties to cds-accordion-header.

• Why should it go in Clarity?

  This will allow Clarity users to extend the Clarity Core Accordion and build a stepper component with a look and feel that matches the Clarity Angular Stepper.

• Does this change impact existing behaviors? If so how?

  It will not change existing behaviors.

• If this change introduces a new behavior, is this behavior accessible?

  N/A.

Use case

Provide some specific details about how this change would improve your application and use case.
The added CSS custom properties will allow styling the Core accordion to match the Angular Stepper:

• --box-shadow for adding panel status indicator color block on the left of the panel header

  

• --icon-visibility for hiding the cds-button-expand in inactive/disabled panels

  

• --icon-margin for aligning the cds-button-expand to the top

  

Examples

If possible, show examples of the change. You may create one yourself, or link to external sites that have the idea. It can also be very useful to prototype the idea in isolation outside of Clarity with a Stackblitz example.

API

Describe the intended API for the feature you want to add. This would include:

• CSS classes and DOM structure for pure static UI contribution, and inputs/outputs, components, directives, services, or anything that is exported publicly for Angular contributions.

  Add --box-shadow, --icon-visibility, and --icon-margin CSS custom properties to cds-accordion-header.

• Examples of code snippets using this new feature.

  .header {
    --icon-margin: var(--cds-global-space-3) 0 auto 0;
  }
  
  .panel.inactive .header {
    --box-shadow: inset var(--cds-global-space-5) 0 0 var(--cds-alias-status-neutral-tint);
    --icon-visibility: hidden;
  }

• Note very clearly if anything might be a breaking change.

  No breaking change.

In the case of bug fixes or internal changes, there will most likely be no API changes.

Implementation plan

Describe how you plan to implement the feature, answering questions among the following or anything else you deem relevant.

• What parts of the code are affected?

  See feat(accordion): add css custom properties #279

• Will you introduce new services, components or directives?

  No.

• Can you describe the basic flow of information between classes?

  N/A.

• Does this introduce asynchronous behaviors?

  No.

• Will you need to refactor existing Clarity code?

  No.

• Will reasonable performance require optimizations?

  No.

• Will it need to access native elements (and be incompatible with server-side rendering)?

  N/A.

• ...

Conclusion

Describe how long you expect it to take to implement, what help you might need, and any other details that might be helpful. Don't worry, this is obviously non-contractual. 😛
The change is implemented in #279. Looking for reviews and approvals.

[williamernest]

Resolved with #279

[github-actions]

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