fix(accordion): udpate disable state to be allowed on open state

ovh · Dec 30, 2024 · 5cfd2ec · 5cfd2ec
1 parent 75c56f5
commit 5cfd2ec
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 30 deletions.
diff --git a/packages/ods/src/components/accordion/src/components/ods-accordion/ods-accordion.scss b/packages/ods/src/components/accordion/src/components/ods-accordion/ods-accordion.scss
@@ -9,8 +9,8 @@ $ods-accordion-padding: 24px;
     $details: &;
 
     &:not([open]) {
-      #{$details}__summary {
-        &:not(&#{$details}__summary--disabled) {
+      &:not(&#{$details}--disabled) {
+        #{$details}__summary {
           &:focus-visible,
           &:hover {
             transition: .3s border-color ease-out;
@@ -21,10 +21,34 @@ $ods-accordion-padding: 24px;
     }
 
     &[open] {
+      &:not(&#{$details}--disabled) {
+        #{$details}__summary {
+          transition: none;
+          border-color: var(--ods-color-primary-500);
+          border-bottom-color: transparent;
+        }
+      }
+    }
+
+    &--disabled {
+      opacity: .5;
+
       #{$details}__summary {
-        transition: none;
-        border-color: var(--ods-color-primary-500);
-        border-bottom-color: transparent;
+        @include state.ods-is-disabled();
+
+        #{$details}:not([open]) {
+          border-bottom-color: transparent;
+        }
+
+        &__icon {
+          color: state.$ods-state-is-disabled-text-color;
+        }
+      }
+
+      #{$details}__content {
+        @include state.ods-is-disabled();
+
+        border-top-color: transparent;
       }
     }
 
@@ -48,16 +72,6 @@ $ods-accordion-padding: 24px;
         @include focus.ods-focus();
       }
 
-      &--disabled {
-        @include state.ods-is-disabled();
-
-        opacity: .5;
-
-        & #{$summary}__icon {
-          color: state.$ods-state-is-disabled-text-color;
-        }
-      }
-
       &__icon {
         color: var(--ods-color-primary-500);
         font-size: 0.875rem;

diff --git a/packages/ods/src/components/accordion/src/components/ods-accordion/ods-accordion.tsx b/packages/ods/src/components/accordion/src/components/ods-accordion/ods-accordion.tsx
@@ -12,12 +12,16 @@ export class OdsAccordion {
   private observer?: MutationObserver;
 
   @Prop({ reflect: true }) public isDisabled: boolean = false;
-  @Prop({ reflect: true }) public isOpen: boolean = false;
+  @Prop({ mutable: true, reflect: true }) public isOpen: boolean = false;
 
   @Event() odsToggle!: EventEmitter<OdsAccordionToggleEventDetail>;
 
   @Method()
   public async close(): Promise<void> {
+    if (this.isDisabled) {
+      return;
+    }
+
     this.detailsElement?.removeAttribute('open');
   }
 
@@ -36,7 +40,7 @@ export class OdsAccordion {
       return;
     }
 
-    if (this.detailsElement?.hasAttribute('open')) {
+    if (this.isDetailsOpen()) {
       this.close();
     } else {
       this.open();
@@ -47,7 +51,8 @@ export class OdsAccordion {
     this.observer = new MutationObserver((mutations: MutationRecord[]) => {
       for (const mutation of mutations) {
         if (mutation.attributeName === 'open') {
-          this.odsToggle.emit({ isOpen: this.detailsElement?.hasAttribute('open') ?? false });
+          this.isOpen = this.isDetailsOpen();
+          this.odsToggle.emit({ isOpen: this.isOpen });
         }
       }
     });
@@ -65,6 +70,10 @@ export class OdsAccordion {
     this.observer?.disconnect();
   }
 
+  private isDetailsOpen(): boolean {
+    return this.detailsElement?.hasAttribute('open') ?? false;
+  }
+
   private preventToggle(event: Event): void {
     // This allows interactive elements to be put in the component without triggering the toggle on click
     if (!this.isDisabled) {
@@ -76,16 +85,16 @@ export class OdsAccordion {
     return (
       <Host class="ods-accordion">
         <details
-          class="ods-accordion__details"
+          class={{
+            'ods-accordion__details': true,
+            'ods-accordion__details--disabled': this.isDisabled,
+          }}
           onClick={ (e: Event) => e.preventDefault() }
-          open={ this.isDisabled ? false : this.isOpen }
+          open={ this.isOpen }
           part="accordion"
           ref={ (el) => this.detailsElement = el as HTMLDetailsElement }>
           <summary
-            class={{
-              'ods-accordion__details__summary': true,
-              'ods-accordion__details__summary--disabled': this.isDisabled,
-            }}
+            class="ods-accordion__details__summary"
             onClick={ (e: Event) => this.preventToggle(e) }
             part="summary"
             tabindex={ this.isDisabled ? -1 : 0 }>
@@ -95,7 +104,7 @@ export class OdsAccordion {
 
             <ods-icon
               class="ods-accordion__details__summary__icon"
-              name={ (this.isOpen && !this.isDisabled) ? ODS_ICON_NAME.chevronUp : ODS_ICON_NAME.chevronDown }>
+              name={ this.isOpen ? ODS_ICON_NAME.chevronUp : ODS_ICON_NAME.chevronDown }>
             </ods-icon>
           </summary>
 

diff --git a/packages/ods/src/components/accordion/src/index.html b/packages/ods/src/components/accordion/src/index.html
@@ -45,6 +45,11 @@
 
     toggleButton.addEventListener('click', () => {
       accordion.toggle();
+      // if (accordion.hasAttribute('is-disabled')) {
+      //   accordion.removeAttribute('is-disabled');
+      // } else {
+      //   accordion.setAttribute('is-disabled', '');
+      // }
     });
   </script>
 

diff --git a/packages/ods/src/components/accordion/tests/rendering/ods-accordion.e2e.ts b/packages/ods/src/components/accordion/tests/rendering/ods-accordion.e2e.ts
@@ -44,8 +44,8 @@ describe('ods-accordion rendering', () => {
       await page.waitForChanges();
 
       const isDisabled = await page.evaluate(() => {
-        const details = document.querySelector('ods-accordion')?.shadowRoot?.querySelector('.ods-accordion__details__summary');
-        return details?.classList.contains('ods-accordion__details__summary--disabled');
+        const details = document.querySelector('ods-accordion')?.shadowRoot?.querySelector('.ods-accordion__details');
+        return details?.classList.contains('ods-accordion__details--disabled');
       });
 
       expect(isDisabled).toBe(true);

diff --git a/packages/storybook/stories/components/accordion/documentation.mdx b/packages/storybook/stories/components/accordion/documentation.mdx
@@ -61,7 +61,6 @@ Use this component for :
     <span>- Use <StorybookLink kind="ODS Components/Icon" label="Icon" story="Documentation" /> in header text</span>,
     '- Expose a lot of content in the Panel section (i.e. more than the viewport height)',
     '- Empty the Panel section, as the Accordion become useless',
-    '- Disable Accordions, as it can be confusing for users',
     '- Trigger expanding/collapsing on hover action',
     '- Avoid nested Accordions, like collapsible content within collapsible content'
     ]}

diff --git a/packages/storybook/stories/components/accordion/technical-information.mdx b/packages/storybook/stories/components/accordion/technical-information.mdx
@@ -23,11 +23,11 @@ import * as AccordionStories from './accordion.stories';
     ODS component is using internally the native <OdsLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details" label="<details>" target="_blank" /> HTML element.
 
     This component does handle its open state on its own. It is therefore quite difficult to keep an internal state sync
-    without having some useless re-rendering.
+    as it will change on browser side on every user direct interaction (click, ...).
 
     That's why the `is-open` attribute should be used as an initialization value and not as an active state.
 
-    If you need to keep the component state, update it using `odsToggle` events.
+    If you need to keep track of the component state of other purpose, update it using `odsToggle` events.
 
     Here is an example using React: