feat(Align): support input and button (#1040)

packages/components/src/components/Align/Align.module.scss

@@ -1,30 +1,50 @@
 .align {
-  display: flex;
-  gap: var(--align--avatar-text--spacing);
-
-  .text {
-    font-size: var(--font-size-text--s);
-    flex-grow: 1;
+  &:has(.avatar):has(.text) {
     display: flex;
-    flex-direction: column;
-    align-self: center;
+    gap: var(--align--avatar-text--spacing);
+
+    .text {
+      font-size: var(--font-size-text--s);
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
+      align-self: center;
 
-    b {
-      font-size: var(--font-size-text--m);
+      b {
+        font-size: var(--font-size-text--m);
+      }
     }
-  }
 
-  --first-two-lines-height: calc(var(--line-height--s) * 2);
+    --first-two-lines-height: calc(var(--line-height--s) * 2);
 
-  &:has(b) {
-    --first-two-lines-height: calc(
-      var(--line-height--m) + var(--line-height--s)
-    );
+    &:has(b) {
+      --first-two-lines-height: calc(
+        var(--line-height--m) + var(--line-height--s)
+      );
+    }
+
+    .avatar {
+      margin-top: calc(
+        (var(--first-two-lines-height) - var(--avatar--size--m)) / 2
+      );
+    }
   }
 
-  .avatar {
-    margin-top: calc(
-      (var(--first-two-lines-height) - var(--avatar--size--m)) / 2
-    );
+  &:has(:global(.flow--form-field)):has(.button) {
+    display: flex;
+    align-items: start;
+    column-gap: var(--align--input-button--spacing);
+
+    :first-child {
+      flex-grow: 1;
+    }
+
+    &:has(label) {
+      .button {
+        margin-top: calc(
+          var(--label--font-size) * 1.5 + var(--form-control--spacing-y)
+        );
+      }
+    }
   }
 }

packages/components/src/components/Align/Align.tsx

@@ -20,6 +20,7 @@ export const Align = flowComponent("Align", (props) => {
 
   const propsContext: PropsContext = {
     Text: { className: styles.text },
+    Button: { className: styles.button },
     Avatar: { className: styles.avatar, size: "m" },
   };
 

packages/components/src/components/Align/stories/InputButton.stories.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Align } from "@/components/Align";
+import { TextField } from "@/components/TextField";
+import { Label } from "@/components/Label";
+import { Button } from "@/components/Button";
+import type { Meta, StoryObj } from "@storybook/react";
+import defaultMeta from "./Default.stories";
+import { NumberField } from "@/components/NumberField";
+import { TextArea } from "@/components/TextArea";
+import { Option, Select } from "@/components/Select";
+
+const meta: Meta<typeof Align> = {
+  ...defaultMeta,
+  title: "Structure/Align/Input + Button",
+  component: Align,
+  render: (props) => (
+    <Align {...props}>
+      <TextField>
+        <Label>Mail address</Label>
+      </TextField>
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};
+export default meta;
+
+type Story = StoryObj<typeof Align>;
+
+export const Default: Story = {};
+
+export const WithNumberField: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <NumberField>
+        <Label>Number</Label>
+      </NumberField>
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};
+
+export const WithTextArea: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <TextArea>
+        <Label>Message</Label>
+      </TextArea>
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};
+
+export const WithSelect: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <Select>
+        <Label>Options</Label>
+        <Option>Option 1</Option>
+        <Option>Option 2</Option>
+      </Select>
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};
+
+export const WithoutLabel: Story = {
+  render: (props) => (
+    <Align {...props}>
+      <TextField />
+      <Button>Hinzufügen</Button>
+    </Align>
+  ),
+};

packages/components/src/components/Modal/Modal.module.scss

@@ -58,7 +58,6 @@
     display: flex;
     flex-direction: column;
     padding: var(--modal--padding);
-    row-gap: var(--section--content-to-content-spacing);
   }
 
   .actionGroup {

packages/design-tokens/src/structure/align.yml

@@ -2,3 +2,6 @@ align:
   avatar-text:
     spacing:
       value: "{size-rem.s}"
+  input-button:
+    spacing:
+      value: "{size-px.m}"

packages/docs/src/content/03-components/structure/align/examples/input-button.tsx

@@ -0,0 +1,11 @@
+import { Align } from "@mittwald/flow-react-components/Align";
+import { TextField } from "@mittwald/flow-react-components/TextField";
+import { Label } from "@mittwald/flow-react-components/Label";
+import { Button } from "@mittwald/flow-react-components/Button";
+
+<Align>
+  <TextField>
+    <Label>Weiterleitungsziel</Label>
+  </TextField>
+  <Button>Hinzufügen</Button>
+</Align>;

packages/docs/src/content/03-components/structure/align/overview.mdx

@@ -1,3 +1,9 @@
 # Avatar + Text
 
 <LiveCodeEditor />
+
+---
+
+# Input + Button
+
+<LiveCodeEditor example="input-button" />