From e398300798fe6a75f1742448dac60e5fb684fcfa Mon Sep 17 00:00:00 2001 From: Sven van de Scheur <svenvandescheur@gmail.com> Date: Mon, 16 Dec 2024 11:35:00 +0100 Subject: [PATCH] :lipstick: - style: adjust padding of various components --- src/components/card/card.scss | 4 ++++ src/components/card/card.stories.tsx | 25 +++++++++++++++++++++++++ src/components/form/form/form.tsx | 1 + 3 files changed, 30 insertions(+) diff --git a/src/components/card/card.scss b/src/components/card/card.scss index 8d381e9d..e255b3ad 100644 --- a/src/components/card/card.scss +++ b/src/components/card/card.scss @@ -16,4 +16,8 @@ & + & { margin-block-start: var(--spacing-v); } + + &:has(> .mykn-body) { + padding: 0; + } } diff --git a/src/components/card/card.stories.tsx b/src/components/card/card.stories.tsx index 90cc590f..ac0f2f95 100644 --- a/src/components/card/card.stories.tsx +++ b/src/components/card/card.stories.tsx @@ -26,3 +26,28 @@ export const CardComponent: Story = { ), }, }; + +export const CardWithTitle: Story = { + args: { + title: "Card title", + children: ( + <Body> + <P>The quick brown fox jumps over the lazy dog.</P> + </Body> + ), + }, +}; + +export const CardWithControls: Story = { + args: { + title: "Card title", + controls: [ + { children: "Click me", onClick: () => alert("Button clicked.") }, + ], + children: ( + <Body> + <P>The quick brown fox jumps over the lazy dog.</P> + </Body> + ), + }, +}; diff --git a/src/components/form/form/form.tsx b/src/components/form/form/form.tsx index 43d0cfc4..6a63aace 100644 --- a/src/components/form/form/form.tsx +++ b/src/components/form/form/form.tsx @@ -301,6 +301,7 @@ export const Form = <T extends SerializedFormData = SerializedFormData>({ }, ]} overrideItemProps={false} + pad={false} {...toolbarProps} /> )}