feat(stack): add alignment props to stack

This prop will allow the stack to align the children inline

re #2207

Author: Jarvis1010

Diff for: packages/css/src/components/stack.css

@@ -14,8 +14,17 @@
   margin: 0;
 }
 
-[data-bedrock-stack] > [data-bedrock-column] {
-  grid-column: span 1 / auto;
+[data-bedrock-stack~="align:start"] {
+  align-items: flex-start;
+}
+[data-bedrock-stack~="align:center"] {
+  align-items: center;
+}
+[data-bedrock-stack~="align:end"] {
+  align-items: flex-end;
+}
+[data-bedrock-stack~="align:stretch"] {
+  align-items: stretch;
 }
 
 /* Gutter Sizes */

Diff for: packages/solid-doc-site/src/pages/StackPage/StackPage.tsx

@@ -5,6 +5,8 @@ import { ArgsTable } from "../../components/ArgsTable";
 import { Heading } from "../../components/Heading";
 import { PageSection } from "../../components/PageSection";
 import { Story } from "../../components/Story";
+import { Align } from "./align";
+import alignCode from "./align?raw";
 import { argTypes } from "./argTypes";
 import { Gutter } from "./gutters";
 import gutterCode from "./gutters?raw";
@@ -44,6 +46,17 @@ export function StackPage(): JSXElement {
           <Gutter />
         </Story>
       </PageSection>
+      <PageSection title="align">
+        <p>
+          The `align` prop defines the inline alignment of the elements within
+          the stack. It accepts the following values: `start`, `end`, `center`,
+          `stretch`.
+        </p>
+
+        <Story code={alignCode}>
+          <Align />
+        </Story>
+      </PageSection>
       <PageSection title="Playground">
         <Story code={playgroundCode}>
           <Playground {...props()} />

Diff for: packages/solid-doc-site/src/pages/StackPage/align.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/style-prop-object */
+import { Stack } from "@bedrock-layout/solid";
+import { JSXElement } from "solid-js";
+
+import { Box } from "../../components/Box";
+
+export function Align(): JSXElement {
+  return (
+    <>
+      <h3>start</h3>
+      <Stack align="start" gutter="size7">
+        <Box style="height:200px" widthLevel={5} />
+        <Box widthLevel={0.5} />
+        <Box />
+      </Stack>
+      <h3>end</h3>
+      <Stack align="end" gutter="size7">
+        <Box style="height:200px" widthLevel={5} />
+        <Box widthLevel={0.5} />
+        <Box />
+      </Stack>
+      <h3>center</h3>
+      <Stack align="center" gutter="size7">
+        <Box style="height:200px" widthLevel={5} />
+        <Box widthLevel={0.5} />
+        <Box />
+      </Stack>
+      <h3>stretch</h3>
+      <Stack align="stretch" gutter="size7">
+        <Box style="height:200px" widthLevel={5} />
+        <Box widthLevel={0.5} />
+        <Box />
+      </Stack>
+    </>
+  );
+}

Diff for: packages/solid-doc-site/src/pages/StackPage/argTypes.ts

@@ -10,4 +10,12 @@ export const argTypes: ArgType = {
     control: "select",
     options: Object.keys(spacing),
   },
+  align: {
+    description: "Sets the block alignment of the children",
+    summary: "start | end | center | stretch",
+    defaultValue: "stretch",
+    initialValue: "stretch",
+    control: "select",
+    options: ["start", "end", "center", "stretch"],
+  },
 };

Diff for: packages/solid/src/inline.tsx

@@ -94,7 +94,7 @@ export function Inline<T extends ValidConstructor = "div">(
   const style = () =>
     [propsStyle(), gutter(), switchAt(), minItemWidth()].join("; ");
 
-  const attrAssesor = () =>
+  const attrAssessor = () =>
     [justify(), align(), stretch()].filter(Boolean).join(" ");
 
   return createDynamic(
@@ -110,7 +110,7 @@ export function Inline<T extends ValidConstructor = "div">(
       ]),
       createPropsFromAccessors({
         style,
-        "data-bedrock-inline": attrAssesor,
+        "data-bedrock-inline": attrAssessor,
       }),
     ) as DynamicProps<T>,
   );

Diff for: packages/solid/src/stack.tsx

@@ -10,8 +10,16 @@ import createDynamic, {
   omitProps,
 } from "./typeUtils";
 
+const alignMap = {
+  start: "align:start",
+  end: "align:end",
+  center: "align:center",
+  stretch: "align:stretch",
+} as const;
+
 export interface StackPropsBase {
   gutter?: SpacingOptions;
+  align?: keyof typeof alignMap;
 }
 
 export type StackProps<T extends ValidConstructor = "div"> =
@@ -34,11 +42,16 @@ export function Stack<T extends ValidConstructor = "div">(
 
   const style = () => [propsStyle(), gutter()].join("; ");
 
+  const align = () =>
+    props.align !== undefined ? alignMap[props.align] : undefined;
+
+  const attrAssessor = () => [align()].filter(Boolean).join(" ");
+
   return createDynamic(
     () => props.as ?? ("div" as T),
     mergeProps(
       omitProps(props, ["as", "gutter"]),
-      createPropsFromAccessors({ style, "data-bedrock-stack": () => "" }),
+      createPropsFromAccessors({ style, "data-bedrock-stack": attrAssessor }),
     ) as DynamicProps<T>,
   );
 }