feat(accordion): add css custom properties

vmware-clarity · Nov 17, 2023 · b02d26e · b02d26e
1 parent 68cfbff
commit b02d26e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/projects/core/custom-elements.json b/projects/core/custom-elements.json
@@ -66,10 +66,16 @@
               "name": "--background"
             },
             {
-              "name": "--icon-color"
+              "name": "--padding"
+            },
+            {
+              "name": "--icon-visibility"
             },
             {
-              "name": "--icon-transform"
+              "name": "--icon-margin"
+            },
+            {
+              "name": "--box-shadow"
             }
           ],
           "members": [

diff --git a/projects/core/src/accordion/accordion-header.element.scss b/projects/core/src/accordion/accordion-header.element.scss
@@ -7,12 +7,21 @@
 @import './../styles/tokens/generated/index';
 @import './../styles/mixins/mixins';
 
+/*
+ * The variables `--box-shadow`, `--icon-visibility`, and `--icon-margin` are
+ * included to provide users with the flexibility to extend the accordion
+ * component, enabling them to create a stepper component that aligns with the
+ * style of the Angular Stepper.
+ */
 :host {
   --color: #{$cds-alias-object-interaction-color};
   --background: #{$cds-alias-object-container-background-tint};
   --font-size: #{$cds-global-typography-secondary-font-size};
   --font-weight: #{$cds-global-typography-secondary-font-weight};
   --padding: calc(#{$cds-global-space-5} + #{$cds-global-space-2});
+  --box-shadow: 0;
+  --icon-visibility: visible;
+  --icon-margin: 0;
   cursor: pointer;
   width: 100%;
   contain: inherit;
@@ -26,6 +35,12 @@
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   color: var(--color);
+  box-shadow: var(--box-shadow);
+}
+
+.expand-button {
+  visibility: var(--icon-visibility);
+  margin: var(--icon-margin);
 }
 
 :host(:hover) {

diff --git a/projects/core/src/accordion/accordion-header.element.ts b/projects/core/src/accordion/accordion-header.element.ts
@@ -37,8 +37,10 @@ import styles from './accordion-header.element.scss';
  * @cssprop --font-size
  * @cssprop --font-weight
  * @cssprop --background
- * @cssprop --icon-color
- * @cssprop --icon-transform
+ * @cssprop --padding
+ * @cssprop --icon-visibility
+ * @cssprop --icon-margin
+ * @cssprop --box-shadow
  */
 export class CdsAccordionHeader extends LitElement {
   /** @private */
@@ -55,7 +57,12 @@ export class CdsAccordionHeader extends LitElement {
 
   render() {
     return html`<div class="private-host" cds-layout="horizontal gap:sm align:vertical-center wrap:none">
-      <cds-button-expand .expanded=${this.expanded} readonly action="vertical"></cds-button-expand>
+      <cds-button-expand
+        class="expand-button"
+        .expanded=${this.expanded}
+        readonly
+        action="vertical"
+      ></cds-button-expand>
       <div cds-layout="align:stretch"><slot></slot></div>
     </div>`;
   }