feat: allow text with icon in button

packages/components/src/components/Button/Button.module.scss

@@ -9,18 +9,20 @@
   padding-block: var(--button--padding-squished-y);
   padding-inline: var(--button--padding-squished-x);
   font-size: var(--font-size--default);
-  line-height: var(--line-height--default);
   font-weight: bold;
   transition-property: color, background-color;
   transition-duration: var(--transition--duration--default);
   max-width: 100%;
+  display: flex;
+  align-items: center;
+  column-gap: var(--button--text-to-icon-spacing);
 
   @include focus.focus;
 
   @extend .primary;
   @extend .solid;
 
-  &:has(.icon) {
+  &:has(.icon):not(:has(.text)) {
     padding: var(--button--padding);
   }
 
@@ -32,6 +34,11 @@
   }
 }
 
+.content {
+  display: flex;
+  column-gap: var(--button--text-to-icon-spacing);
+}
+
 .content,
 .stateIcon {
   grid-area: content;
@@ -51,10 +58,15 @@
   font-size: var(--button--font-size-s);
   padding-block: var(--button--padding-s-squished-y);
   padding-inline: var(--button--padding-s-squished-x);
+  column-gap: var(--button--text-to-icon-spacing-s);
 
-  &:has(.icon) {
+  &:has(.icon):not(:has(.text)) {
     padding: var(--button--padding-s);
   }
+
+  .content {
+    column-gap: var(--button--text-to-icon-spacing-s);
+  }
 }
 
 .stateIcon {
@@ -81,7 +93,7 @@
     visibility: hidden;
   }
   &.plain {
-    .content:not(:has(.icon)) {
+    .content:has(.text) {
       visibility: visible;
     }
   }

packages/components/src/components/Button/stories/Default.stories.tsx

@@ -3,6 +3,8 @@ import Button from "../Button";
 import React from "react";
 import { IconPlus } from "@/components/Icon/components/icons";
 import { action } from "@storybook/addon-actions";
+import { Text } from "@/components/Text";
+import IconChevronDown from "@/components/Icon/components/icons/IconChevronDown";
 
 const meta: Meta<typeof Button> = {
   title: "Actions/Button",
@@ -54,3 +56,21 @@ export const SmallWithIcon: Story = {
     </Button>
   ),
 };
+
+export const WithTextAndIcon: Story = {
+  render: (props) => (
+    <Button {...props}>
+      <Text>Add email address</Text>
+      <IconChevronDown />
+    </Button>
+  ),
+};
+
+export const SmallWithTextAndIcon: Story = {
+  render: (props) => (
+    <Button {...props} size="s">
+      <Text>Add email address</Text>
+      <IconChevronDown />
+    </Button>
+  ),
+};

packages/components/src/components/Button/stories/States.stories.tsx

@@ -3,10 +3,18 @@ import Button from "../Button";
 import defaultMeta from "./Default.stories";
 import { IconPlus } from "@/components/Icon/components/icons";
 import React from "react";
+import { Text } from "@/components/Text";
+import IconChevronDown from "../../Icon/components/icons/IconChevronDown";
 
 const meta: Meta<typeof Button> = {
   ...defaultMeta,
   title: "Actions/Button/States",
+  render: (props) => (
+    <Button {...props}>
+      <Text>Add email address</Text>
+      <IconChevronDown />
+    </Button>
+  ),
 };
 export default meta;
 

packages/design-tokens/src/components/button.yml

@@ -13,6 +13,8 @@ button:
     value: "{success.color.700}"
   failed-icon-color:
     value: "{danger.color.700}"
+  text-to-icon-spacing:
+    value: "{size-rem.s}"
 
   # Small
   padding-s:
@@ -21,6 +23,8 @@ button:
     value: "{size-px.s}"
   padding-s-squished-y:
     value: "{size-px.xs}"
+  text-to-icon-spacing-s:
+    value: "{size-rem.xs}"
   font-size-s:
     value: "{font-size.s}"
 

packages/docs/src/content/02-components/button/examples/iconText.tsx

@@ -0,0 +1,8 @@
+import Button from "@mittwald/flow-react-components/Button";
+import { Text } from "@mittwald/flow-react-components/Text";
+import { IconChevronDown } from "@mittwald/flow-react-components/Icons";
+
+<Button>
+  <Text>Add email address</Text>
+  <IconChevronDown />
+</Button>;

packages/docs/src/content/02-components/button/index.mdx

@@ -31,6 +31,10 @@ associated action.
 
 <LiveCodeEditor example="icon" />
 
+## With icon and text
+
+<LiveCodeEditor example="iconText" />
+
 ## Small variant
 
 <LiveCodeEditor example="small" />

packages/docs/src/lib/liveCode/dynamicImports.ts

@@ -11,6 +11,7 @@ export const liveCodeEditorGlobalImports: ImportMapping = {
 "Image:@mittwald/flow-react-components/Image": lazy(() => import("@mittwald/flow-react-components/Image").then(module => ({ default: module.Image } ))),
 "Button:@mittwald/flow-react-components/Button": lazy(() => import("@mittwald/flow-react-components/Button").then(module => ({ default: module.Button } ))),
 "IconHome:@mittwald/flow-react-components/Icons": lazy(() => import("@mittwald/flow-react-components/Icons").then(module => ({ default: module.IconHome } ))),
+"IconChevronDown:@mittwald/flow-react-components/Icons": lazy(() => import("@mittwald/flow-react-components/Icons").then(module => ({ default: module.IconChevronDown } ))),
 "Checkbox:@mittwald/flow-react-components/Checkbox": lazy(() => import("@mittwald/flow-react-components/Checkbox").then(module => ({ default: module.Checkbox } ))),
 "ColumnLayout:@mittwald/flow-react-components/ColumnLayout": lazy(() => import("@mittwald/flow-react-components/ColumnLayout").then(module => ({ default: module.ColumnLayout } ))),
 "TextField:@mittwald/flow-react-components/TextField": lazy(() => import("@mittwald/flow-react-components/TextField").then(module => ({ default: module.TextField } ))),