feat(accordion): add quiet style

Adds the "quiet" option to accordion, which does not have dividers and
shows the rounded corners on hover.

Author: jawinn

.changeset/chatty-lands-attack.md

@@ -11,6 +11,7 @@ the spacing around the content area.
 
 ##### New features
 
+- Adds the optional "quiet" style, which does not show dividers between accordion items.
 - Adds CSS transition to animate the rotation of the disclosure indicator when expanding and
   collapsing the accordion item.
 

components/accordion/dist/metadata.json

@@ -6,6 +6,7 @@
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeL",
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeS",
     ".spectrum-Accordion--compact.spectrum-Accordion--sizeXL",
+    ".spectrum-Accordion--quiet",
     ".spectrum-Accordion--sizeL",
     ".spectrum-Accordion--sizeS",
     ".spectrum-Accordion--sizeXL",
@@ -107,6 +108,7 @@
     "--spectrum-accordion-disclosure-indicator-to-text-small",
     "--spectrum-accordion-disclosure-indicator-to-text-space",
     "--spectrum-accordion-divider-color",
+    "--spectrum-accordion-divider-thickness",
     "--spectrum-accordion-edge-to-disclosure-indicator-space",
     "--spectrum-accordion-edge-to-text",
     "--spectrum-accordion-edge-to-text-space",

components/accordion/index.css

@@ -27,6 +27,7 @@
 	--spectrum-accordion-corner-radius: var(--spectrum-corner-radius-medium-size-medium);
 	--spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content);
 	--spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content);
+	--spectrum-accordion-divider-thickness: var(--spectrum-divider-thickness-small);
 
 	/* Text header */
 	--spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
@@ -172,6 +173,10 @@
 	}
 }
 
+.spectrum-Accordion--quiet {
+	--spectrum-accordion-divider-thickness: 0px;
+}
+
 .spectrum-Accordion-item.is-disabled {
 	--spectrum-accordion-item-header-cursor: default;
 	--spectrum-accordion-background-color-default: transparent;
@@ -198,10 +203,10 @@
 	margin: 0;
 	min-block-size: var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size));
 	min-inline-size: var(--mod-accordion-item-minimum-width, var(--spectrum-accordion-item-minimum-width));
-	border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)) solid var(--spectrum-accordion-divider-color);
+	border-block-end: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color);
 
 	&:first-child {
-		border-block-start: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small)) solid var(--spectrum-accordion-divider-color);
+		border-block-start: var(--mod-accordion-divider-thickness, var(--spectrum-accordion-divider-thickness)) solid var(--spectrum-accordion-divider-color);
 	}
 }
 
@@ -292,6 +297,10 @@
 	}
 }
 
+.spectrum-Accordion--quiet .spectrum-Accordion-itemHeader {
+	border-radius: var(--mod-accordion-corner-radius, var(--spectrum-accordion-corner-radius));
+}
+
 @media (forced-colors: active) {
 	.spectrum-Accordion {
 		--spectrum-accordion-focus-indicator-color: Highlight;

components/accordion/stories/accordion.stories.js

@@ -1,7 +1,7 @@
 import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { size } from "@spectrum-css/preview/types";
+import { isQuiet, size } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
@@ -47,13 +47,15 @@ export default {
 			options: ["compact", "regular", "spacious"],
 			control: "select",
 		},
+		isQuiet,
 	},
 	args: {
 		rootClass: "spectrum-Accordion",
 		size: "m",
 		density: "regular",
 		collapseAll: false,
 		disableAll: false,
+		isQuiet: false,
 	},
 	parameters: {
 		// Prevent an innacurate depiction of width due to "centered" layout's use of flex on the body.
@@ -212,6 +214,22 @@ Spacious.parameters = {
 };
 Spacious.storyName = "Density: Spacious";
 
+/**
+ * The optional quiet style for accordion has no dividers between sections. This style works best when a clear layout
+ * (vertical stack, table, grid) makes it easy see and understand. Too many quiet components in a small space can be
+ * hard to differentiate. This can be applied by adding the `spectrum-Accordion--quiet` class alongside the
+ * parent `spectrum-Accordion` class.
+ */
+export const Quiet = Template.bind({});
+Quiet.tags = ["!dev"];
+Quiet.args = {
+	items: content,
+	isQuiet: true,
+};
+Quiet.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+
 /**
  * Each of the different sizes have varying font sizes, and tighter or looser vertical spacing between the rows. Medium is the default size.
  */

components/accordion/stories/template.js

@@ -76,6 +76,7 @@ export const Template = ({
 	rootClass = "spectrum-Accordion",
 	size = "m",
 	density = "regular",
+	isQuiet = false,
 	items = [],
 	id = getRandomId("accordion"),
 	disableAll = false,
@@ -90,9 +91,10 @@ export const Template = ({
 			class="${classMap({
 				[rootClass]: true,
 				[`${rootClass}--size${size?.toUpperCase()}`]:
-					typeof size !== "undefined",
+					typeof size !== "undefined" && size !== "m",
 				[`${rootClass}--${density}`]:
 					typeof density !== "undefined" && density !== "regular",
+				[`${rootClass}--quiet`]: isQuiet,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}"
 			id=${ifDefined(id)}