Merge pull request #908 from mperrando/diclosure-title-spacing-in-config

Disclosure: config title spacing.
buildo · Sep 19, 2024 · d0c2ed5 · d0c2ed5
2 parents bf9b4d8 + 6d35202
commit d0c2ed5
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/packages/bento-design-system/src/Disclosure/Config.ts b/packages/bento-design-system/src/Disclosure/Config.ts
@@ -5,6 +5,7 @@ import { Children } from "../util/Children";
 import { DisclosureProps } from "./Disclosure";
 
 export type DisclosureConfig = {
+  titleSpacing: BentoSprinkles["gap"];
   internalSpacing: BentoSprinkles["gap"];
   titleSize: {
     1: TitleProps["size"];

diff --git a/packages/bento-design-system/src/Disclosure/Disclosure.tsx b/packages/bento-design-system/src/Disclosure/Disclosure.tsx
@@ -46,7 +46,7 @@ export function Disclosure({
   const icon = open ? config.icons.open : config.icons.closed;
 
   return (
-    <Stack space={16}>
+    <Stack space={config.titleSpacing}>
       <Box
         {...focusProps}
         {...pressProps}

diff --git a/packages/bento-design-system/src/util/defaultConfigs.tsx b/packages/bento-design-system/src/util/defaultConfigs.tsx
@@ -186,6 +186,7 @@ export const decorativeDivider: DecorativeDividerConfig = {
 };
 
 export const disclosure: DisclosureConfig = {
+  titleSpacing: 16,
   internalSpacing: 16,
   titleSize: {
     1: "medium",

diff --git a/packages/bento-design-system/stories/Utils/withBentoConfig.stories.tsx b/packages/bento-design-system/stories/Utils/withBentoConfig.stories.tsx
@@ -1,4 +1,10 @@
-import { DesignSystemProvider, Modal as BentoModal, withBentoConfig } from "..";
+import {
+  DesignSystemProvider,
+  Modal as BentoModal,
+  withBentoConfig,
+  Disclosure as BentoDisclosure,
+  Placeholder,
+} from "..";
 import { action } from "@storybook/addon-actions";
 import { defaultMessages } from "../../src/defaultMessages/en";
 
@@ -45,3 +51,20 @@ export const ConfiguredModal = () => {
     </DesignSystemProvider>
   );
 };
+
+export const ConfiguredDisclosure = () => {
+  const Disclosure = withBentoConfig(
+    {
+      disclosure: {
+        titleSpacing: 0,
+      },
+    },
+    BentoDisclosure
+  );
+
+  return (
+    <Disclosure title="Title">
+      <Placeholder />
+    </Disclosure>
+  );
+};