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

This reverts commit 0b3c3e6.
chanzuckerberg · Oct 13, 2023 · 3f2c8c4 · 3f2c8c4
1 parent 609f07e
commit 3f2c8c4
Show file tree

Hide file tree

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

diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -2,14 +2,18 @@ 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'],
   },
@@ -301,34 +305,6 @@ 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'],

diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/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-:r2k:"
+        id="headlessui-disclosure-button-:r2i:"
         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-:r2m:"
+        id="headlessui-disclosure-button-:r2k:"
         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-:r2o:"
+        id="headlessui-disclosure-button-:r2m:"
         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-:r2q:"
+        id="headlessui-disclosure-button-:r2o:"
         type="button"
       >
         <h2
@@ -1988,48 +1988,3 @@ 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>
-`;