style: updates accordion styling to better match Figma specs (#245)

Kajabi · Sep 9, 2024 · bdaf75d · bdaf75d
1 parent e27e08e
commit bdaf75d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/libs/core/src/components/pds-accordion/pds-accordion.scss b/libs/core/src/components/pds-accordion/pds-accordion.scss
@@ -8,7 +8,7 @@ details {
   --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);
 
   --color-background-default: var(--pine-color-white);
-  --color-background-hover: var(--pine-color-mercury-150);
+  --color-background-hover: var(--pine-color-grey-150);
   --color-text-default: var(--pine-color-grey-700);
   --color-text-active: var(--pine-color-grey-950);
   --color-text-hover: var(--pine-color-grey-800);
@@ -18,8 +18,8 @@ details {
   --number-animation-transform-timing: 200ms;
 
   --spacing-details-padding-inline: var(--pine-spacing-150);
-  --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2) //18 + 2 = 18px;
-  --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2) //12 / 2 = 6px;
+  --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2); //18 + 2 = 18px
+  --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2); //12 / 2 = 6px
   --spacing-summary-padding-inline-start: var(--pine-spacing-100);
   --spacing-summary-padding-inline-end: var(--pine-spacing-050);
 
@@ -29,7 +29,6 @@ details {
 
   pds-icon {
     transform: scaleY(1);
-    transition: transform var(--number-animation-transform-timing);
   }
 }
 
@@ -43,7 +42,6 @@ details[open] {
 
     pds-icon {
       transform: scaleY(-1);
-      transition: transform var(--number-animation-transform-timing);
     }
   }
 }

diff --git a/libs/core/src/components/pds-accordion/pds-accordion.tsx b/libs/core/src/components/pds-accordion/pds-accordion.tsx
@@ -2,6 +2,7 @@ import { Component, h, Host, Prop, Watch } from '@stencil/core';
 import { downSmall } from '@pine-ds/icons/icons';
 
 /**
+ * @part accordion-body - Accordion body styles.
  * @slot (default) - Accordion body content.
  * @slot label - Accordion trigger button content.
  */
@@ -57,7 +58,7 @@ export class PdsAccordion {
             <slot name="label">Details</slot>
             <pds-icon icon={downSmall} />
           </summary>
-          <div class="pds-accordion__body">
+          <div part="accordion-body" class="pds-accordion__body">
             <slot />
           </div>
         </details>

diff --git a/libs/core/src/components/pds-accordion/readme.md b/libs/core/src/components/pds-accordion/readme.md
@@ -21,6 +21,13 @@
 | `"label"`     | Accordion trigger button content. |
 
 
+## Shadow Parts
+
+| Part               | Description            |
+| ------------------ | ---------------------- |
+| `"accordion-body"` | Accordion body styles. |
+
+
 ## Dependencies
 
 ### Depends on

diff --git a/libs/core/src/components/pds-accordion/test/pds-accordion.spec.tsx b/libs/core/src/components/pds-accordion/test/pds-accordion.spec.tsx
@@ -16,7 +16,7 @@ describe('pds-accordion', () => {
                 <slot name="label">Details</slot>
                 <pds-icon icon="${downSmall}"></pds-icon>
               </summary>
-              <div class="pds-accordion__body">
+              <div part="accordion-body" class="pds-accordion__body">
                 <slot />
               </div>
             </details>
@@ -38,7 +38,7 @@ describe('pds-accordion', () => {
                 <slot name="label">Details</slot>
                 <pds-icon icon="${downSmall}"></pds-icon>
               </summary>
-              <div class="pds-accordion__body">
+              <div part="accordion-body" class="pds-accordion__body">
                 <slot />
               </div>
             </details>
@@ -61,7 +61,7 @@ describe('pds-accordion', () => {
               <slot name="label">Details</slot>
               <pds-icon icon="${downSmall}"></pds-icon>
             </summary>
-            <div class="pds-accordion__body">
+            <div part="accordion-body" class="pds-accordion__body">
               <slot />
             </div>
           </details>
@@ -84,7 +84,7 @@ describe('pds-accordion', () => {
               <slot name="label">Details</slot>
               <pds-icon icon="${downSmall}"></pds-icon>
             </summary>
-            <div class="pds-accordion__body">
+            <div part="accordion-body" class="pds-accordion__body">
               <slot />
             </div>
           </details>
@@ -108,7 +108,7 @@ describe('pds-accordion', () => {
               <slot name="label">Details</slot>
               <pds-icon icon="${downSmall}"></pds-icon>
             </summary>
-            <div class="pds-accordion__body">
+            <div part="accordion-body" class="pds-accordion__body">
               <slot />
             </div>
           </details>
@@ -132,7 +132,7 @@ describe('pds-accordion', () => {
               <slot name="label">Details</slot>
               <pds-icon icon="${downSmall}"></pds-icon>
             </summary>
-            <div class="pds-accordion__body">
+            <div part="accordion-body" class="pds-accordion__body">
               <slot />
             </div>
           </details>