Simplify layouting input fields

packages/component-library/src/components/form/mt-switch/mt-switch.vue

@@ -105,6 +105,7 @@ defineEmits<{
 
 .mt-switch--not-bordered {
   min-height: var(--scale-size-48);
+  display: flex;
 }
 
 .mt-switch--no-top-margin {

packages/component-library/src/components/layout/mt-grid/mt-grid.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import MtGrid from "./mt-grid.vue";
+import type { SlottedMeta } from "@/_internal/story-helper";
+import MtTextField from "@/components/form/mt-text-field/mt-text-field.vue";
+import MtCard from "../mt-card/mt-card.vue";
+import MtFutureFlag from "@/components/theme/mt-future-flag.vue";
+import MtSwitch from "@/components/form/mt-switch/mt-switch.vue";
+
+type MtGridMeta = SlottedMeta<typeof MtGrid, "default">;
+
+export default {
+  title: "Components/Layout/MtGrid",
+  component: MtGrid,
+  render(args) {
+    return {
+      setup: () => ({ args }),
+      components: { MtGrid, MtTextField, MtCard, MtFutureFlag, MtSwitch },
+      template: `
+<mt-future-flag remove-default-margin>
+  <mt-card title="Grid inside a card">
+    <mt-grid v-bind="args">
+      <MtTextField label="Delivery time" />
+      <MtTextField label="Restock time in days" />
+      <MtSwitch label="Free shipping" />
+      <MtTextField label="Min. order quantity" />
+      <MtTextField label="Purchase steps" />
+      <MtTextField label="Max. order quantity" />
+    </mt-grid>
+  </mt-card>
+</mt-future-flag>
+`,
+    };
+  },
+} satisfies MtGridMeta;
+
+export const Default: StoryObj<MtGridMeta> = {
+  args: {
+    columns: 3,
+  },
+};

packages/component-library/src/components/layout/mt-grid/mt-grid.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="mt-grid" :style="{ '--_mt-grid-columns': `calc(100% / ${columns})` }">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineSlots } from "vue";
+
+defineProps<{
+  columns: number;
+}>();
+
+defineSlots<{
+  default(): any;
+}>();
+</script>
+
+<style>
+.mt-grid {
+  --_mt-grid-gap: 32px;
+  --_mt-grid-columns-without-gap: calc(var(--_mt-grid-columns) - var(--_mt-grid-gap));
+
+  gap: var(--_mt-grid-gap);
+  align-items: end;
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fit,
+    minmax(max(var(--_mt-grid-columns-without-gap), 200px), 1fr)
+  );
+}
+</style>

packages/component-library/src/components/theme/mt-future-flag.spec.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/vue";
+import MtFutureFlag from "./mt-future-flag.vue";
+import { defineComponent } from "vue";
+import { useFutureFlags } from "@/composables/useFutureFlags";
+
+describe("mt-future-flag", () => {
+  it("can enable a future flag", () => {
+    // ARRANGE
+    const Child = defineComponent({
+      template: "<div>No default margin: {{futureFlags.removeDefaultMargin.toString()}}</div>",
+      setup() {
+        const futureFlags = useFutureFlags();
+
+        return { futureFlags };
+      },
+    });
+
+    const Component = defineComponent({
+      components: { MtFutureFlag, Child },
+      template: "<mt-future-flag remove-default-margin><Child /></mt-future-flag>",
+    });
+
+    render(Component);
+
+    // ASSERT
+    expect(screen.getByText("No default margin: true")).toBeVisible();
+  });
+
+  it("future flag is disabled by default", () => {
+    // ARRANGE
+    const Child = defineComponent({
+      template: "<div>No default margin: {{futureFlags.removeDefaultMargin.toString()}}</div>",
+      setup() {
+        const futureFlags = useFutureFlags();
+
+        return { futureFlags };
+      },
+    });
+
+    const Component = defineComponent({
+      components: { MtFutureFlag, Child },
+      template: "<mt-future-flag><Child /></mt-future-flag>",
+    });
+
+    render(Component);
+
+    // ASSERT
+    expect(screen.getByText("No default margin: false")).toBeVisible();
+  });
+});

packages/component-library/src/components/theme/mt-future-flag.vue

@@ -0,0 +1,25 @@
+<template>
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { provideFutureFlags } from "../../composables/useFutureFlags";
+
+const props = withDefaults(
+  defineProps<{
+    removeDefaultMargin?: boolean;
+  }>(),
+  {
+    removeDefaultMargin: false,
+  },
+);
+
+defineSlots<{
+  default(): any;
+}>();
+
+provideFutureFlags({
+  removeDefaultMargin: props.removeDefaultMargin,
+  removeCardWidth: false,
+});
+</script>

packages/component-library/src/index.ts

@@ -41,6 +41,8 @@ import MtTextEditor from "./components/form/mt-text-editor/mt-text-editor.vue";
 import MtTextEditorToolbarButton from "./components/form/mt-text-editor/_internal/mt-text-editor-toolbar-button.vue";
 import MtSearch from "./components/navigation/mt-search/mt-search.vue";
 import MtUrlField from "./components/form/mt-url-field/mt-url-field.vue";
+import MtFutureFlag from "./components/theme/mt-future-flag.vue";
+import MtGrid from "./components/layout/mt-grid/mt-grid.vue";
 
 // Import SCSS for styling
 import "./components/assets/scss/all.scss";
@@ -93,6 +95,8 @@ export {
   MtSearch,
   MtUrlField,
   MtThemeProvider,
+  MtFutureFlag,
+  MtGrid,
   TooltipDirective,
   DeviceHelperPlugin,
   // @deprecated