feat(card): add large size and space option to footer

globalbrain · Jul 12, 2023 · 3e2beb6 · 3e2beb6
1 parent 4546cab
commit 3e2beb6
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 33 deletions.
diff --git a/docs/components/card.md b/docs/components/card.md
@@ -102,6 +102,8 @@ Use `<SCardHeader>` to display header element.
 </SCard>
 ```
 
+### Actions
+
 You may use `<SCardHeaderActions>` with nested `<SCardHeaderAction>` to add header actions. `<SCardHeaderAction>` accepts following props, and emits `@click` event when user clicks on the button.
 
 It uses [`<SButton>`](./button) component internally. Refer to the documentation of `<SButton>` for how the props work.
@@ -180,7 +182,9 @@ Use `<SCardBlock>` to display generic block element. This component is usually u
 </SCard>
 ```
 
-For combinience, `<SCardBlock>` component comes with `:space` props that lets you control the padding of the block. You may pass wither `compact` or `wide` as a value.
+### Spacing
+
+For combinience, `<SCardBlock>` component comes with `:space` props that lets you control the padding of the block. You may pass either `compact` or `wide` as a value.
 
 ```ts
 interface Props {
@@ -196,28 +200,25 @@ interface Props {
 </SCard>
 ```
 
-If you need to adjust the padding responsively, you may use `--card-padding` css variable to control them.
-
-```vue
-<template>
-  <SCard class="card">
-    <SCardBlock space="compact">
-      <p>Lorem ipsum...</p>
-    </SCardBlock>
-  </SCard>
-</template>
-
-<style scoped lang="postcss">
-.card {
-  --card-padding: 24px;
-}
-</style>
-```
+The spacing should be consistant across the application depending on the size of the `<SCard>` component. Use `compact` for  card width smaller than `640px`, and `wide` for larger width.
 
 ## Footer
 
 Similar to `<SCardHeader>`, use `<SCardFooter>` to add the "footer" section of the card. `<SCardFooter>` comes with nested `<SCardFooterActions>` and `<SCardFooterAction>` to display action buttons.
 
+```vue-html
+<SCard>
+  <SCardFooter>
+    <SCardFooterActions>
+      <SCardFooterAction mode="mute" label="Cancel" @click="onClick" />
+      <SCardFooterAction mode="info" label="Submit" @click="onClick" />
+    </SCardFooterActions>
+  </SCardFooter>
+</SCard>
+```
+
+### Actions
+
 `<SCardFooterAction>` accepts following props. As same as `<SCardHeaderAction>`, it uses [`<SButton>`](./button) component internally. Refer to the documentation of `<SButton>` for how the props work.
 
 ```ts
@@ -239,19 +240,24 @@ export interface Tooltip {
 }
 ```
 
+### Spacing
+
+Same as, `<SCardBlock>`, `<SCardFooter>` also comes with `:space` props that lets you control the padding of the block. You may pass either `compact` or `wide` as a value.
+
+```ts
+interface Props {
+  space?: 'compact' | 'wide'
+}
+```
+
 ```vue-html
 <SCard>
-  <SCardFooterActions>
-    <SCardFooterAction
-      mode="mute"
-      label="Cancel"
-      @click="onClick"
-    />
-    <SCardFooterAction
-      mode="info"
-      label="Submit"
-      @click="onClick"
-    />
+  <SCardFooter space="compact">
+    ...
   </SCardFooter>
 </SCard>
 ```
+
+To ensure consistent spacing across the application, you should adjust the spacing based on the size of the `<SCard>` component. Consider using the `compact` class for card widths smaller than `640px` and the `wide` class for larger widths.
+
+It's important to align this spacing with the `<SCardBlock>` component to ensure proper alignment between the block contents and the footer contents, such as actions.
diff --git a/lib/components/SCard.vue b/lib/components/SCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { provideCardState } from '../composables/Card'
 
-export type Size = 'small' | 'medium'
+export type Size = 'small' | 'medium' | 'large'
 
 defineProps<{
   size?: Size
@@ -55,6 +55,13 @@ const { isCollapsed } = provideCardState()
   }
 
   &.medium {
+    @media (min-width: 736px) {
+      margin: 48px auto 128px;
+      max-width: 640px;
+    }
+  }
+
+  &.large {
     @media (min-width: 864px) {
       margin: 48px auto 128px;
       max-width: 768px;

diff --git a/lib/components/SCardBlock.vue b/lib/components/SCardBlock.vue
@@ -18,7 +18,7 @@ defineProps<{
   background-color: var(--c-bg-elv-3);
 
   &.compact { padding: 24px; }
-  &.wide    { padding: 48px; }
+  &.wide    { padding: 32px; }
 }
 
 .SCard > .SCardBlock:first-child {

diff --git a/lib/components/SCardFooter.vue b/lib/components/SCardFooter.vue
@@ -1,5 +1,13 @@
+<script setup lang="ts">
+export type Space = 'compact' | 'wide'
+
+defineProps<{
+  space?: Space
+}>()
+</script>
+
 <template>
-  <div class="SCardFooter">
+  <div class="SCardFooter" :class="[space ?? 'compact']">
     <slot />
   </div>
 </template>

diff --git a/lib/components/SCardFooterActions.vue b/lib/components/SCardFooterActions.vue
@@ -10,6 +10,8 @@
   justify-content: flex-end;
   flex-grow: 1;
   gap: 12px;
-  padding: 12px 24px;
+
+  .SCardFooter.compact > & { padding: 12px 24px; }
+  .SCardFooter.wide > &    { padding: 16px 32px; }
 }
 </style>