fix(Accordion): handle multi-line text in headers (#1783)

- set a constant size for the state caret
- allow text to roll over to multiple lines
- add snapshots to test multi-line behavior

src/components/Accordion/Accordion.module.css

@@ -25,8 +25,11 @@
   border: 0;
   border-radius: 0;
 
-  padding: var(--eds-size-2) var(--eds-size-1);
-  height: 3.375rem;
+  padding: var(--eds-size-1-and-half) var(--eds-size-1);
+  height: unset;
+  min-height: 3.375rem;
+
+  text-align: left;
 }
 
 .accordion-button--empty {
@@ -37,22 +40,22 @@
  * Small variant.
  */
 .accordion-button--sm {
-  padding: var(--eds-size-1);
-  height: 2.25rem;
+  padding: var(--eds-size-half) var(--eds-size-1);
+  min-height: 2.25rem;
 }
 
 /**
  * Outline variant.
  */
 .accordion-button--outline {
-  padding: var(--eds-size-2) var(--eds-size-3);
+  padding: var(--eds-size-1-and-half) var(--eds-size-3);
 }
 
 /**
  * Small outline variant.
  */
 .accordion-button--sm.accordion-button--outline {
-  padding: var(--eds-size-1) var(--eds-size-2);
+  padding: var(--eds-size-half) var(--eds-size-2);
 }
 
 /**
@@ -73,9 +76,10 @@
 /**
  * Expand more (chevron) icon indicates open or closed status.
  *
- * This nonrotated icon points down and represents closed status.
+ * This non-rotated icon points down and represents closed status.
  */
 .accordion-button__icon {
+  flex: 0 0 content;
   transform: rotate(0);
 }
 /**

src/components/Accordion/Accordion.stories.tsx

@@ -2,18 +2,14 @@ import type { StoryObj, Meta } from '@storybook/react';
 import React from 'react';
 
 import { Accordion } from './Accordion';
+import { chromaticViewports } from '../../util/viewports';
 import Icon from '../Icon';
 import NumberIcon from '../NumberIcon';
 import Text from '../Text';
 
 export default {
   title: 'Components/Accordion',
   component: Accordion,
-  subcomponents: {
-    'Accordion.Row': Accordion.Row,
-    'Accordion.Panel': Accordion.Panel,
-    'Accordion.Button': Accordion.Button,
-  },
   parameters: {
     badges: ['1.2'],
   },
@@ -305,6 +301,34 @@ export const UsingRenderProp: StoryObj<Args> = {
   },
 };
 
+/**
+ * Although headings should provide limited text, we allow for text to span multiple lines, preserving
+ * the size of the state caret.
+ */
+export const WithLargeHeader: StoryObj<Args> = {
+  parameters: {
+    chromatic: {
+      viewports: [chromaticViewports.ipadMini],
+    },
+  },
+  args: {
+    children: (
+      <Accordion.Row>
+        <Accordion.Button>
+          Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas
+          massa. Massa quam egestas massa. Massa quam egestas massa.
+        </Accordion.Button>
+        <Accordion.Panel>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla amet,
+          massa ultricies iaculis. Quam lacus maecenas nibh malesuada. At
+          tristique et ullamcorper rhoncus amet pharetra aliquet tortor.
+          Suscipit dui, nunc sit dui tellus massa laoreet tellus.
+        </Accordion.Panel>
+      </Accordion.Row>
+    ),
+  },
+};
+
 export const UsingComplexHeaders: StoryObj<Args> = {
   parameters: {
     badges: ['1.2', 'implementationExample'],

src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -1732,7 +1732,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2i:"
+        id="headlessui-disclosure-button-:r2k:"
         type="button"
       >
         <h2
@@ -1784,7 +1784,7 @@ exports[`<Accordion /> UsingComplexHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2k:"
+        id="headlessui-disclosure-button-:r2m:"
         type="button"
       >
         <h2
@@ -1847,7 +1847,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2m:"
+        id="headlessui-disclosure-button-:r2o:"
         type="button"
       >
         <h2
@@ -1896,7 +1896,7 @@ exports[`<Accordion /> UsingNumberIconInHeaders story renders snapshot 1`] = `
         aria-expanded="false"
         class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
         data-headlessui-state=""
-        id="headlessui-disclosure-button-:r2o:"
+        id="headlessui-disclosure-button-:r2q:"
         type="button"
       >
         <h2
@@ -1988,3 +1988,48 @@ exports[`<Accordion /> UsingRenderProp story renders snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`<Accordion /> WithLargeHeader story renders snapshot 1`] = `
+<div
+  style="margin: 0.5rem;"
+>
+  <div
+    class=""
+  >
+    <div
+      class="accordion-row"
+    >
+      <button
+        aria-expanded="false"
+        class="clickable-style clickable-style--lg clickable-style--icon clickable-style--neutral clickable-style--full-width button button--icon accordion-button"
+        data-headlessui-state=""
+        id="headlessui-disclosure-button-:r2i:"
+        type="button"
+      >
+        <h2
+          class="heading heading--size-h2 accordion-button__heading"
+        >
+          Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa. Massa quam egestas massa.
+        </h2>
+        <svg
+          class="icon accordion-button__icon"
+          fill="currentColor"
+          height="1.625rem"
+          role="img"
+          style="--icon-size: 1.625rem;"
+          viewBox="0 0 24 24"
+          width="1.625rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <title>
+            show content
+          </title>
+          <path
+            d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;