Merge pull request #330 from woylie/refine-stack

refine stack
woylie · Jul 24, 2024 · 282c375 · 282c375
2 parents 67100b6 + a2805bf
commit 282c375
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 61 deletions.
diff --git a/demo/assets/css/_extends.scss b/demo/assets/css/_extends.scss
@@ -12,57 +12,3 @@
  */
 
 @use "functions" as f;
-
-/// Applies a vertical margin between the child elements.
-///
-/// @example
-///   .some-component {
-///      @extend %stack;
-///   }
-///
-/// This layout can also be applied with the `.stack` class (see layouts/stack).
-%stack {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-
-  & > * {
-    margin-block: 0;
-  }
-
-  & > * + * {
-    margin-block-start: var(--space, f.lines(1));
-  }
-
-  &.is-recursive {
-    & * {
-      margin-block: 0;
-    }
-
-    & * + * {
-      margin-block-start: var(--space, f.lines(1));
-    }
-  }
-
-  /*
-  You can add modifiers like this:
-
-      &.is-small > * + * {
-        margin-top: var(--space, f.lines(0.5));
-      }
-
-  Or you can add exceptions like this:
-
-      & > .some-component + * {
-        margin-top: var(--space, f.lines(1.5));
-      }
-
-  This would apply a different margin between `.some-component` and the next
-  element. Alternatively, you could also change the margin between some
-  component and the previous element:
-
-      & > * + .some-component {
-        margin-top: var(--space, f.lines(1.5));
-      }
-  */
-}
diff --git a/demo/assets/css/layouts/_stack.scss b/demo/assets/css/layouts/_stack.scss
@@ -2,8 +2,50 @@
  * Applies a vertical margin between the child elements.
  */
 
-@use "../extends";
+@use "../functions" as f;
 
 .stack {
-  @extend %stack;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+
+  & > * {
+    margin-block: 0;
+  }
+
+  & > * + * {
+    margin-block-start: var(--space, f.lines(1));
+  }
+
+  &.is-recursive {
+    & * {
+      margin-block: 0;
+    }
+
+    & * + * {
+      margin-block-start: var(--space, f.lines(1));
+    }
+  }
+
+  /*
+  You can add modifiers like this:
+
+      &.is-small > * + * {
+        margin-top: var(--space, f.lines(0.5));
+      }
+
+  Or you can add exceptions like this:
+
+      & > .some-component + * {
+        margin-top: var(--space, f.lines(1.5));
+      }
+
+  This would apply a different margin between `.some-component` and the next
+  element. Alternatively, you could also change the margin between some
+  component and the previous element:
+
+      & > * + .some-component {
+        margin-top: var(--space, f.lines(1.5));
+      }
+  */
 }
diff --git a/lib/doggo/components/stack.ex b/lib/doggo/components/stack.ex
@@ -22,11 +22,12 @@ defmodule Doggo.Components.Stack do
     </.stack>
     ```
 
-    To apply a vertical margin on nested elements as well, set `recursive` to
-    `true`.
+    By default, the margin is only applied to the direct children of the
+    component. To apply a vertical margin on children at any nesting level, set
+    the `recursive` attribute.
 
     ```heex
-    <.stack recursive={true}>
+    <.stack recursive>
       <div>
         <div>some nested block</div>
         <div>another nested block</div>
@@ -42,7 +43,7 @@ defmodule Doggo.Components.Stack do
     [
       type: :layout,
       since: "0.6.0",
-      maturity: :refining,
+      maturity: :stable,
       modifiers: [],
       extra: [recursive_class: "is-recursive"]
     ]
@@ -54,7 +55,7 @@ defmodule Doggo.Components.Stack do
       attr :recursive, :boolean,
         default: false,
         doc:
-          "If `true`, the stack margins will be applied to nested elements as well."
+          "If `true`, the stack margins will be applied to nested children as well."
 
       attr :rest, :global, doc: "Any additional HTML attributes."
 

diff --git a/lib/doggo/storybook/stack.ex b/lib/doggo/storybook/stack.ex
@@ -6,10 +6,12 @@ defmodule Doggo.Storybook.Stack do
     [
       %Variation{
         id: :default,
+        description: "Default (margin only applied to direct children)",
         slots: slots()
       },
       %Variation{
         id: :recursive,
+        description: "Recursive (margin applied to nested children)",
         attributes: %{recursive: true},
         slots: recursive_slots()
       }