Repository: marigold-ui/marigold
Pull request #2490 (2022-09-19 14:44:45)

feat: `Columns` can stretch to available height via `stretch` prop + don't collapse by default


Patch:
diff --git a/.changeset/cuddly-cherries-rush.md b/.changeset/cuddly-cherries-rush.md
new file mode 100644
index 000000000..34aca471e
--- /dev/null
+++ b/.changeset/cuddly-cherries-rush.md
@@ -0,0 +1,5 @@
+---
+"@marigold/theme-b2b": patch
+---
+
+refa: change table hover to `gray20`
diff --git a/.changeset/famous-fireants-notice.md b/.changeset/famous-fireants-notice.md
new file mode 100644
index 000000000..00a037d93
--- /dev/null
+++ b/.changeset/famous-fireants-notice.md
@@ -0,0 +1,5 @@
+---
+"@marigold/icons": minor
+---
+
+feat: better `Logout` icon
diff --git a/.changeset/nervous-terms-vanish.md b/.changeset/nervous-terms-vanish.md
new file mode 100644
index 000000000..274e61b88
--- /dev/null
+++ b/.changeset/nervous-terms-vanish.md
@@ -0,0 +1,5 @@
+---
+"@marigold/theme-b2b": minor
+---
+
+feat: darken text and ghost butotn hover
diff --git a/.changeset/old-drinks-relax.md b/.changeset/old-drinks-relax.md
new file mode 100644
index 000000000..f90296d64
--- /dev/null
+++ b/.changeset/old-drinks-relax.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": minor
+---
+
+feat: `Columns` can stretch to available height via `stretch` prop + don't collapse by default
diff --git a/.changeset/shiny-camels-happen.md b/.changeset/shiny-camels-happen.md
new file mode 100644
index 000000000..a08f1e815
--- /dev/null
+++ b/.changeset/shiny-camels-happen.md
@@ -0,0 +1,5 @@
+---
+"@marigold/theme-b2b": patch
+---
+
+refa: Change focus color to orange60
diff --git a/.changeset/unlucky-papayas-tell.md b/.changeset/unlucky-papayas-tell.md
new file mode 100644
index 000000000..7f7a6b5c2
--- /dev/null
+++ b/.changeset/unlucky-papayas-tell.md
@@ -0,0 +1,6 @@
+---
+"@marigold/docs": patch
+"@marigold/components": patch
+---
+
+chore: change property names in breakout to alignX and AlignY
diff --git a/.github/ISSUE_TEMPLATE/1.feature.md b/.github/ISSUE_TEMPLATE/1.feature.md
new file mode 100644
index 000000000..208672f29
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/1.feature.md
@@ -0,0 +1,17 @@
+---
+name: "\U0001F680   Feature Request"
+about: Create a new issue for a feature or propose a change.
+title: ''
+labels: status:rfc, type:feature
+assignees: ''
+---
+
+## Description
+
+<!-- A clear and concise description of what the problem is and what the motivating for this decision or change is. Ex. I have an issue when [...] -->
+
+## Proposal
+
+<!-- A clear and concise description of what you want to happen. Add any considered drawbacks. -->
+
+<!-- When talking about code/API some usage scenarios may help to better understand the change. -->
diff --git a/.github/ISSUE_TEMPLATE/1.issue.md b/.github/ISSUE_TEMPLATE/1.issue.md
deleted file mode 100644
index a9aa6027f..000000000
--- a/.github/ISSUE_TEMPLATE/1.issue.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-name: "\U0001F4C4   Issue"
-about: Create a new issue for a feature or propose a change.
-title: ''
-labels: status:rfc
-assignees: ''
----
-
-## Description
-
-<!-- Describe the problem statement, e.g., in free form using two to three sentences. You may want to articulate the problem in form of a question.] -->
-
-## Context
-
-<!-- What is the issue that we're seeing that is motivating this decision or change? -->
-
-## Use Cases <!-- optional -->
-
-<!-- When talking about code/API some usage scenarios may help to better understand the change. -->
-
-## Consequences
-
-<!-- What becomes easier or more difficult to do because of this change? -->
diff --git a/.github/ISSUE_TEMPLATE/2.bug.md b/.github/ISSUE_TEMPLATE/2.bug.md
index 81c97d0eb..03763838e 100644
--- a/.github/ISSUE_TEMPLATE/2.bug.md
+++ b/.github/ISSUE_TEMPLATE/2.bug.md
@@ -2,7 +2,7 @@
 name: "\U0001F41E   Bug"
 about: Create a report to help us improve
 title: ''
-labels: bug
+labels: status:triage, type:bug
 assignees: ''
 ---
 
diff --git a/.github/ISSUE_TEMPLATE/3.design-update.md b/.github/ISSUE_TEMPLATE/3.design-update.md
index 67b753800..c0c5ba4e6 100644
--- a/.github/ISSUE_TEMPLATE/3.design-update.md
+++ b/.github/ISSUE_TEMPLATE/3.design-update.md
@@ -1,15 +1,47 @@
 ---
-name: "\U0001F3A8   Design Update"
-about:
-  Issue template for existing components that need an update in design/minor
-  changes.
+name: "\U0001F3A8   Component Update"
+about: Issue template for existing components that need an update in their behaviour or appearance.
 title: ''
-labels: design
+labels: status:rfc, type:design
 assignees: ''
 ---
 
-Link to Figma:
+## Overview
 
-Todos:
+| Component Name | Type             | Theme      |
+| -------------- | ---------------- | ---------- |
+|                | <!-- 🎨 / ⚙️ --> | `core/b2b` |
 
-<!-- Whats missing? -->
+## Description
+
+<!-- A clear and concise description of what should be changed and updated -->
+
+## Appearance Update <!-- If the appearance should change use this section -->
+
+**Figma Link:** [Component Name](https://www.figma.com/file/...)
+
+<!-- List all the required change -->
+
+- ...
+
+### Current
+
+<!-- Upload an image or video of the current appearance -->
+
+### New
+
+<!-- Upload an image or video of the updated appearance -->
+
+## Behavior Update <!-- If the behavior should change use this section -->
+
+<!-- List all the required change -->
+
+- ...
+
+### Current
+
+<!-- Upload an image or video of the current behavior -->
+
+### New
+
+<!-- Upload an image or video of the updated behavior -->
diff --git a/docs/src/demos/components/Breakout/basic-breakout.demo.tsx b/docs/src/demos/components/Breakout/basic-breakout.demo.tsx
index faebb3455..ec9357b96 100644
--- a/docs/src/demos/components/Breakout/basic-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/basic-breakout.demo.tsx
@@ -10,7 +10,7 @@ export const BasicBreakout = () => (
         width: '100%',
       }}
     />
-    <Breakout verticalAlign="center">
+    <Breakout alignY="center">
       <Box
         css={{
           bg: '#e9ecef',
diff --git a/docs/src/demos/components/Breakout/horizontal-breakout.demo.tsx b/docs/src/demos/components/Breakout/horizontal-breakout.demo.tsx
index cda5b828b..ed05c827e 100644
--- a/docs/src/demos/components/Breakout/horizontal-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/horizontal-breakout.demo.tsx
@@ -10,7 +10,7 @@ export const HorizontalBreakout = () => (
         width: '100%',
       }}
     />
-    <Breakout horizontalAlign="right">
+    <Breakout alignX="right">
       <Box>BREAKOUT with right aligned content</Box>
     </Breakout>
     <Box
diff --git a/docs/src/demos/components/Breakout/vertical-breakout.demo.tsx b/docs/src/demos/components/Breakout/vertical-breakout.demo.tsx
index 485a027da..2df272c49 100644
--- a/docs/src/demos/components/Breakout/vertical-breakout.demo.tsx
+++ b/docs/src/demos/components/Breakout/vertical-breakout.demo.tsx
@@ -10,7 +10,7 @@ export const VerticalAlignment = () => (
         width: '100%',
       }}
     />
-    <Breakout height="100px" verticalAlign="bottom">
+    <Breakout height="100px" alignY="bottom">
       <Box
         css={{
           bg: '#e9ecef',
diff --git a/docs/src/demos/components/Card/card-form.demo.tsx b/docs/src/demos/components/Card/card-form.demo.tsx
index b1ef19d5d..1fcca2197 100644
--- a/docs/src/demos/components/Card/card-form.demo.tsx
+++ b/docs/src/demos/components/Card/card-form.demo.tsx
@@ -1,8 +1,20 @@
-import { Card, TextField } from '@marigold/components';
+import {
+  Button,
+  Card,
+  Headline,
+  Stack,
+  Split,
+  TextField,
+} from '@marigold/components';
 
 export const CardFieldDemo = () => (
   <Card>
-    <TextField label="Firstname" />
-    <TextField label="Lastname" />
+    <Stack space="medium">
+      <Headline level="3">Personal Settings</Headline>
+      <TextField label="Firstname" />
+      <TextField label="Lastname" />
+      <Split />
+      <Button variant="primary">Save</Button>
+    </Stack>
   </Card>
 );
diff --git a/docs/src/demos/components/Card/card-infos.demo.tsx b/docs/src/demos/components/Card/card-infos.demo.tsx
new file mode 100644
index 000000000..743ea1af0
--- /dev/null
+++ b/docs/src/demos/components/Card/card-infos.demo.tsx
@@ -0,0 +1,25 @@
+import { Card, Link, Headline, Stack, Text } from '@marigold/components';
+
+export const CardInformations = () => (
+  <Card p="large">
+    <Stack space="small">
+      <Headline level="3">Professor Severus Snape</Headline>
+      <Text>
+        <strong>Professor Severus Snape</strong> (9 January, 1960[1] - 2 May,
+        1998)[2] was an English half-blood[3] wizard serving as Potions Master
+        (1981-1996), Head of Slytherin House (1981-1997), Defence Against the
+        Dark Arts professor (1996-1997), and Headmaster (1997-1998) of the
+        Hogwarts School of Witchcraft and Wizardry as well as a member of the
+        Order of the Phoenix and a Death Eater. His double life played an
+        extremely important role in both of the Wizarding Wars against
+        Voldemort.
+      </Text>
+      <Link
+        href="https://harrypotter.fandom.com/wiki/Severus_Snape"
+        target="blank"
+      >
+        Source
+      </Link>
+    </Stack>
+  </Card>
+);
diff --git a/docs/src/demos/components/Card/index.ts b/docs/src/demos/components/Card/index.ts
index 7a537073b..2fc9b5052 100644
--- a/docs/src/demos/components/Card/index.ts
+++ b/docs/src/demos/components/Card/index.ts
@@ -1,2 +1,3 @@
 export * from './card.demo';
 export * from './card-form.demo';
+export * from './card-infos.demo';
diff --git a/docs/src/demos/components/Columns/index.ts b/docs/src/demos/components/Columns/index.ts
index 45cbb758c..1d78c094e 100644
--- a/docs/src/demos/components/Columns/index.ts
+++ b/docs/src/demos/components/Columns/index.ts
@@ -2,3 +2,4 @@ export * from './basic-columns.demo';
 export * from './collapse-columns.demo';
 export * from './layout-columns.demo';
 export * from './space-columns.demo';
+export * from './stretch-columns.demo';
diff --git a/docs/src/demos/components/Columns/stretch-columns.demo.tsx b/docs/src/demos/components/Columns/stretch-columns.demo.tsx
new file mode 100644
index 000000000..afeb2c425
--- /dev/null
+++ b/docs/src/demos/components/Columns/stretch-columns.demo.tsx
@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { Box, Columns, Stack } from '@marigold/components';
+
+const Block = ({
+  children,
+  height,
+}: {
+  children: ReactNode;
+  height?: number | string;
+}) => (
+  <Box
+    css={{
+      height,
+      background: 'hsla(218 16% 77% / 50%)',
+      border: '1px solid hsla(218 16% 70% / 50%)',
+      borderRadius: 12,
+      p: 12,
+    }}
+  >
+    {children}
+  </Box>
+);
+
+export const StretchColumns = () => (
+  <Block>
+    <Stack space="medium">
+      <Block height={500}>
+        <Columns columns={[4, 4, 4]} space="small" stretch>
+          <Block height="100%">one</Block>
+          <Block>two</Block>
+          <Block height={200}>three</Block>
+        </Columns>
+      </Block>
+      <Columns columns={[2, 1]} space="small">
+        <Block>
+          Columns will stretch if they get longer, like a regular CSS element.
+        </Block>
+        <Block>five</Block>
+      </Columns>
+    </Stack>
+  </Block>
+);
diff --git a/docs/src/demos/components/Headline/headline.demo.tsx b/docs/src/demos/components/Headline/headline.demo.tsx
index 28ffef733..2ca9bcf34 100644
--- a/docs/src/demos/components/Headline/headline.demo.tsx
+++ b/docs/src/demos/components/Headline/headline.demo.tsx
@@ -2,7 +2,7 @@ import { Body, Headline, Text } from '@marigold/components';
 
 export const BasicHeadline = () => (
   <Body>
-    <Headline level="3">Lorem ipsum</Headline>
+    <Headline level="3">Awesome Headline!</Headline>
     <Text>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
       eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
diff --git a/docs/src/demos/components/Icon/icon-list.demo.tsx b/docs/src/demos/components/Icon/icon-list.demo.tsx
index 86d29d37b..377ec5126 100644
--- a/docs/src/demos/components/Icon/icon-list.demo.tsx
+++ b/docs/src/demos/components/Icon/icon-list.demo.tsx
@@ -1,5 +1,17 @@
 import { Inline } from '@marigold/components';
-import { DesignTicket, Ticket, TicketInsurance, Resale } from '@marigold/icons';
+import {
+  DesignTicket,
+  Ticket,
+  TicketInsurance,
+  Resale,
+  ExternalLink,
+  Food,
+  Save,
+  Eye,
+  AutoRenew,
+  EventDate,
+  GiftCard,
+} from '@marigold/icons';
 
 export const SomeIcons = () => (
   <Inline space="small">
@@ -7,5 +19,12 @@ export const SomeIcons = () => (
     <Ticket />
     <TicketInsurance />
     <Resale />
+    <ExternalLink />
+    <Food />
+    <Save />
+    <AutoRenew />
+    <Eye />
+    <EventDate />
+    <GiftCard />
   </Inline>
 );
diff --git a/docs/src/pages/components/breakout.mdx b/docs/src/pages/components/breakout.mdx
index 01688c7b9..8df2b6ed5 100644
--- a/docs/src/pages/components/breakout.mdx
+++ b/docs/src/pages/components/breakout.mdx
@@ -10,7 +10,7 @@ caption: Component that breaks out of a grid layout context.
 
 You need this component if you want to display something out of the context. It is also possible to put several components into the `<Breakout>`.
 
-You can use `horizontalAlign` or `verticalAlign` to place the items inside the `<Breakout>` element.
+You can use `alignX` or `alignY` to place the items inside the `<Breakout>` element.
 
 <Preview>
   <Container align="center">
@@ -22,7 +22,7 @@ You can use `horizontalAlign` or `verticalAlign` to place the items inside the `
         width: '100%',
       }}
     />
-    <Breakout horizontalAlign="center" height="150px" verticalAlign="center">
+    <Breakout alignX="center" height="150px" alignY="center">
       <Box
         css={{
           bg: '#e9ecef',
@@ -59,14 +59,14 @@ import { Breakout } from '@marigold/components';
 <PropsTable
   props={[
     {
-      property: 'horizontalAlign',
+      property: 'alignX',
       type: '"left" | "right" | "center"',
       description:
         'Horizontal alignment of the items inside the breakout element.',
       default: 'left',
     },
     {
-      property: 'verticalAlign',
+      property: 'alignY',
       type: '"top" | "bottom" | "center"',
       description:
         'Vertical alignment of the items inside the breakout element.',
@@ -85,7 +85,7 @@ import { Breakout } from '@marigold/components';
 
 ### Vertical alignment
 
-In this case the `height` prop is necessary, if you haven't set it, the `verticalAlign` has no impact.
+In this case the `height` prop is necessary, if you haven't set it, the `alignY` has no impact.
 
 ```tsx preview file=components/Breakout/vertical-breakout.demo.tsx
 
@@ -93,7 +93,7 @@ In this case the `height` prop is necessary, if you haven't set it, the `vertica
 
 ### Horizontal alignment
 
-Example to show how the `horizontalAlign` prop is to set. Options are `"left" | "center" | "right"`. The default value is `left`.
+Example to show how the `alignX` prop is to set. Options are `"left" | "center" | "right"`. The default value is `left`.
 
 ```tsx preview file=components/Breakout/horizontal-breakout.demo.tsx
 
diff --git a/docs/src/pages/components/card.mdx b/docs/src/pages/components/card.mdx
index 168de9512..6a8794190 100644
--- a/docs/src/pages/components/card.mdx
+++ b/docs/src/pages/components/card.mdx
@@ -5,21 +5,30 @@ figma: https://www.figma.com/file/DFKyTGHAoDxOsUBPszLLxP/%F0%9F%8F%B5%EF%B8%8FMa
 github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Card/Card.tsx
 edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/card.mdx
 switchTheme: true
+caption: Component to support the structuring of information.
 ---
 
-The card component can be used for organizing information inside the UI, as well it provides a better readability and helps the user to find information in an easier way.
+The `<Card>` is a content component to group informations inside the UI, as well it provides a better readability and helps the user to find relevant informations in an easy way.
+
+`<Card>` components usually contain images, text, links or action components like buttons.
+
+If you want, you can style the `<Card>` and create custom variants and sizes.
 
 <Preview>
   <CardDemo />
 </Preview>
 
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
 ```tsx
 import { Card } from '@marigold/components';
 ```
 
-## Usage
-
-### Apperance
+### Appearance
 
 <AppearanceTable component={title} />
 
@@ -30,44 +39,44 @@ import { Card } from '@marigold/components';
     {
       property: 'p',
       type: 'ResponsiveStyleValue<number⎮string>',
-      description: '',
+      description: 'Padding of the component.',
       default: 'none',
     },
     {
       property: 'px',
       type: 'ResponsiveStyleValue<number⎮string>',
-      description: '',
-      default: '',
+      description: 'Padding horizontal (left and right) of the component.',
+      default: 'none',
     },
     {
       property: 'py',
       type: 'ResponsiveStyleValue<number⎮string>',
-      description: '',
-      default: '',
+      description: 'Padding vertical (top and bottom) of the component.',
+      default: 'none',
     },
     {
       property: 'pt',
       type: 'ResponsiveStyleValue<number⎮string>',
-      description: '',
-      default: '',
+      description: 'Padding top of the component.',
+      default: 'none',
     },
     {
       property: 'pr',
       type: 'ResponsiveStyleValue<number⎮string>',
-      description: '',
-      default: '',
+      description: 'Padding right of the component.',
+      default: 'none',
     },
     {
       property: 'pl',
       type: 'ResponsiveStyleValue<number⎮string>',
-      description: '',
-      default: '',
+      description: 'Padding left of the component.',
+      default: 'none',
     },
     {
       property: 'pb',
       type: 'ResponsiveStyleValue<number⎮string>',
-      description: '',
-      default: '',
+      description: 'Padding bottom of the component.',
+      default: 'none',
     },
   ]}
 />
@@ -76,6 +85,16 @@ import { Card } from '@marigold/components';
 
 ### Card with form fields
 
+The Example shows how to use the `<Card>` in a common use case with form fields.
+
 ```tsx preview file=components/Card/card-form.demo.tsx
 
 ```
+
+### Card with some Text
+
+On this example you can see an imformation card with used prop `p`.
+
+```tsx preview file=components/Card/card-infos.demo.tsx
+
+```
diff --git a/docs/src/pages/components/columns.mdx b/docs/src/pages/components/columns.mdx
index 494c6e4bf..838085846 100644
--- a/docs/src/pages/components/columns.mdx
+++ b/docs/src/pages/components/columns.mdx
@@ -42,9 +42,16 @@ import { Columns } from '@marigold/components';
     },
     {
       property: 'collapseAt',
-      description: 'Collapse the columns at a certain width.',
-      type: 'string',
-      default: '40em',
+      description:
+        'Collapse children into a vertical layout at given width. Note that `collapseAt` is based on the total element width, and not the window width. With a default value of "0em" columns will not collapse by default.',
+      type: 'string | number',
+      default: '0em',
+    },
+    {
+      property: 'stretch',
+      description: 'Stretch to height of parent container.',
+      type: 'boolean',
+      default: 'false',
     },
   ]}
 />
@@ -74,3 +81,11 @@ Create a page layout with three columns and collapse or expanding at `25em`
 ```tsx preview file=components/Columns/layout-columns.demo.tsx
 
 ```
+
+### Stretch to Height of Parent
+
+By using the `stretch` prop you can make the container to take full width. Note that this is usually not necessary since the columns will expand with their children anyway.
+
+```tsx preview file=components/Columns/stretch-columns.demo.tsx
+
+```
diff --git a/docs/src/pages/components/headline.mdx b/docs/src/pages/components/headline.mdx
index ef019b8a2..fca5249ea 100644
--- a/docs/src/pages/components/headline.mdx
+++ b/docs/src/pages/components/headline.mdx
@@ -5,19 +5,30 @@ figma: https://www.figma.com/file/DFKyTGHAoDxOsUBPszLLxP/%F0%9F%8F%B5%EF%B8%8FMa
 github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Headline/Headline.tsx
 edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/headline.mdx
 switchTheme: true
+caption: Component for headlines.
 ---
 
+The main task of the `<Headline>` component is to serve as a title of a content section.
+It should be used when you want to structure different parts of informations. That could be the page title, text headings or the title of different content parts.
+
+The component has a `level` property that allows you to select a number from 1-6. This is a feature for SEO optimization, so that a rendered `level="5"` can look like a HTML H2 element.
+
+Alternatively you can set this with the `size` prop.
+With the `size` prop you can style the different levels.
+
 <Preview>
   <Headline>Simple Headline</Headline>
 </Preview>
 
+## Usage
+
+### Import
+
 ```tsx
 import { Headline } from '@marigold/components';
 ```
 
-## Usage
-
-### Apperance
+### Appearance
 
 <AppearanceTable component={title} />
 
@@ -28,7 +39,7 @@ import { Headline } from '@marigold/components';
     {
       property: 'level',
       type: 'string',
-      description: 'set a different level from theme, values are from 1 - 6',
+      description: 'Set a different level from theme, values are from 1 - 6.',
       default: `1`,
     },
   ]}
@@ -36,6 +47,10 @@ import { Headline } from '@marigold/components';
 
 ## Examples
 
+### Headline with Text
+
+In this example you see a simple headline with some text.
+
 ```tsx preview file=components/Headline/headline.demo.tsx
 
 ```
diff --git a/docs/src/pages/components/icon.mdx b/docs/src/pages/components/icon.mdx
index 9194474b6..4ea9b0862 100644
--- a/docs/src/pages/components/icon.mdx
+++ b/docs/src/pages/components/icon.mdx
@@ -5,21 +5,27 @@ figma: https://www.figma.com/file/DFKyTGHAoDxOsUBPszLLxP/%F0%9F%8F%B5%EF%B8%8FMa
 github: https://github.com/marigold-ui/marigold/tree/main/packages/icons/src
 edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/icon.mdx
 switchTheme: true
+caption: Component to render Icons.
 ---
 
-With the Icon component you can render one of the [Marigold Icons](../../foundation/icons).
-By adding the `size` prop you can change to another size. `24` is the default size.
-The `fill` prop is the second attribute and per default `currentcolor`.
+On this page you can learn how [Marigold Icons](/foundation/icons/) should be used.
+Icons itself can be used to improve visual interest and get users attention.
 
-```tsx preview file=components/Icon/icon-list.demo.tsx
+The size of the icon can be change via the `size` prop. The default size is `24px`.
+The `fill` prop is the second attribute and defaults `currentcolor`.
 
-```
+For a full list of the available Icons go to the [Marigold Icons](/foundation/icons/).
+
+<Preview>
+  <SomeIcons />
+</Preview>
+
+## Usage
 
-### React Icon component
+### Import
 
 Marigold Icons have a separate package to install.
-The first option is to install the package and use the Icons like other React components and as in the code example below.
-You have to specify the name of the icon directly between the `< />` brackets.
+You have to install the package and use the Icons like other React components.
 
 ```bash
 # with npm
@@ -32,28 +38,28 @@ yarn add @marigold/icons
 pnpm add @marigold/icons
 ```
 
-```tsx preview file=components/Icon/icon-ticket.demo.tsx
+To import a specific component you just have to use the name of the icon directly between the `< />` brackets. E.g.:
 
+```tsx
+import { DesignTicket } from '@marigold/icons';
 ```
 
-### HTML SVG Element
+Alternatively you can go to [Marigold Icons](/foundation/icons/) and click on an Icon in the list to copy them as `<svg>` Element.
 
-The second option is to go to [Marigold Icons](../../foundation/icons) and click on an Icon in the list to copy them as `<svg>` Element
-
-## Props
+### Props
 
 <PropsTable
   props={[
     {
       property: 'size',
       type: 'number',
-      description: '',
+      description: 'Size of the icon.',
       default: '24',
     },
     {
       property: 'fill',
       type: 'string',
-      description: '',
+      description: 'Color of the icon.',
       default: 'currentcolor',
     },
   ]}
@@ -63,12 +69,16 @@ The second option is to go to [Marigold Icons](../../foundation/icons) and click
 
 ### Icon size
 
+You can set the size of the icon as shown below.
+
 ```tsx preview file=components/Icon/icon-size.demo.tsx
 
 ```
 
 ### Icon color fill
 
+To fill in the color you can use the `fill` propery. Default value is currentcolor.
+
 ```tsx preview file=components/Icon/icon-fill.demo.tsx
 
 ```
diff --git a/docs/src/pages/components/inline.mdx b/docs/src/pages/components/inline.mdx
index 2cf040df8..68f5196ac 100644
--- a/docs/src/pages/components/inline.mdx
+++ b/docs/src/pages/components/inline.mdx
@@ -3,34 +3,46 @@ title: Inline
 group: Layout
 github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Inline/Inline.tsx
 edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/inline.mdx
+caption: Component to inline elements with spaces.
 ---
 
-Layout component to inline elements with space. This component uses the spaces from the given theme or a responsive string.
+The `<Inline>` is a responsive layout component. It's inlining element with space between each element. This component uses the spaces from the given theme or a responsive string.
 
-```tsx preview file=components/Inline/inline.demo.tsx
+<Preview>
+  <BasicInline />
+</Preview>
 
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Inline } from '@marigold/components';
 ```
 
-## Props
+### Props
 
 <PropsTable
   props={[
     {
       property: 'space',
       type: 'ResponsiveStyleValue<string>',
-      description: '',
+      description: 'Space between the Inline elements.',
       default: 'none',
     },
     {
       property: 'alignY',
       type: '`top, center, bottom` ',
-      description: '',
+      description: 'Vertical alignment of the items inside the inline element.',
       default: 'center',
     },
     {
       property: 'alignX',
       type: '`left, center, right` ',
-      description: '',
+      description:
+        'Horizontal alignment of the items inside the inline element.',
       default: 'left',
     },
   ]}
@@ -40,29 +52,34 @@ Layout component to inline elements with space. This component uses the spaces f
 
 ### More than two elements
 
+If you have more than two elements you can use the `<Inline>` component. The elements are arranged according to the space required.
+
 ```tsx preview file=components/Inline/inline-elements.demo.tsx
 
 ```
 
 ### Spacing
 
+The `<Inline>` component can be used to add spacing between elements.
+For this you need the props `space` and you can then place all components inside the `<Inline>` element.
+
 ```tsx preview file=components/Inline/inline-spacing.demo.tsx
 
 ```
 
 ### Nested Inline
 
+`<Inline>` components can also have themselves as component. This can be used to add more spacing within the elements.
+
 ```tsx preview file=components/Inline/inline-nested.demo.tsx
 
 ```
 
 ### Different alignment
 
+If elements need to be positioned differently on their x and y axis, this can be done with the `<Inline>` component.
+In this case one of the following props is given. Either `alignX` or `alignY`.
+
 ```tsx preview file=components/Inline/inline-alignments.demo.tsx
 
 ```
-
-## Use cases
-
-- [Badge](../badge)
-- [Button](../button)
diff --git a/docs/src/pages/components/table.mdx b/docs/src/pages/components/table.mdx
index 6ff3d48ad..6cd3d6e88 100644
--- a/docs/src/pages/components/table.mdx
+++ b/docs/src/pages/components/table.mdx
@@ -5,17 +5,30 @@ figma: https://www.figma.com/file/DFKyTGHAoDxOsUBPszLLxP/%F0%9F%8F%B5%EF%B8%8FMa
 github: https://github.com/marigold-ui/marigold/blob/main/packages/components/src/Table/Table.tsx
 edit: https://github.com/marigold-ui/marigold/blob/main/docs/src/pages/components/table.mdx
 switchTheme: true
+caption: Component for building tables.
 ---
 
-The `Table` component allows to present data in a table format. It enhances the functionality of regular `<table>` elements with the possibility to interact and select the data, as well as, helps with accessibility by providing keyboard navigation.
+The `<Table>` component allows to present data in a table format. It enhances the functionality of regular `<table>` elements with the possibility to interact and select the data, as well as, helps with accessibility by providing keyboard navigation.
 
-```tsx preview file=components/Table/table-basic.demo.tsx
+You can sort with the `<Table>` and add a `selectionMode` property with which you have the possibility to select entire rows.
 
-```
+The component is divided into several parts. So there are the `<Table.Header>`, `<Table.Body>`, `<Table.Column>`, `<Table.Row>` and `<Table.Cell>`.
+
+<Preview>
+  <BasicTable />
+</Preview>
 
 ## Usage
 
-### Apperance
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { Table } from '@marigold/components';
+```
+
+### Appearance
 
 <AppearanceTable component={title} />
 
@@ -38,9 +51,27 @@ The `Table` component allows to present data in a table format. It enhances the
     {
       property: 'stretch',
       type: 'boolean',
-      description: 'Stretch table to fill the container',
+      description: 'Stretch table to fill the container.',
       default: 'false',
     },
+    {
+      property: 'disabledKeys',
+      type: 'Object',
+      description: 'Disabled the selected row.',
+      default: 'none',
+    },
+    {
+      property: 'sortDescriptor',
+      type: 'Object',
+      description: 'The current sorted column and direction.',
+      default: 'none',
+    },
+    {
+      property: 'onSortChange',
+      type: 'function',
+      description: 'Handler that is called when the sort direction changes.',
+      default: 'none',
+    },
   ]}
 />
 
@@ -48,36 +79,48 @@ The `Table` component allows to present data in a table format. It enhances the
 
 ### Compact variant
 
+In this example you can see the variant `compact` from the theme b2b. It reduces the cell spacing. There is also another variant, which is called `expaned`, which enlarges the cells.
+
 ```tsx preview file=components/Table/table-compact.demo.tsx
 
 ```
 
 ### Selection mode single
 
+If you have set the `selectionMode` to single, then you just can select only one row of the table.
+
 ```tsx preview file=components/Table/table-single-mode.demo.tsx
 
 ```
 
 ### Selection mode multiple
 
+This example shows how to use the `selectionMode`, but with the setting that multiple checkboxes appear and you can select as many lines as you want.
+
 ```tsx preview file=components/Table/table-multi-mode.demo.tsx
 
 ```
 
 ### Dynamic collections
 
+You don't have to hard code the table items, you could also create a dynamic collection and iterate through it. That's what the example shows.
+
 ```tsx preview file=components/Table/table-dynamic.demo.tsx
 
 ```
 
 ### Disabled Rows
 
+You can also disable certain rows. For that all you have to do is add the property `disabledKeys` with the certain key to the table.
+
 ```tsx preview file=components/Table/table-disabled.demo.tsx
 
 ```
 
 ### Sorting
 
+The options to sort are ascending or descending. For this purpose the properties (`onSortChange`, `sortDescriptor`) for sorting must be specified.
+
 ```tsx preview file=components/Table/table-sorting.demo.tsx
 
 ```
diff --git a/packages/components/src/Breakout/Breakout.stories.tsx b/packages/components/src/Breakout/Breakout.stories.tsx
index 432872615..73bfa82dd 100644
--- a/packages/components/src/Breakout/Breakout.stories.tsx
+++ b/packages/components/src/Breakout/Breakout.stories.tsx
@@ -12,7 +12,7 @@ import { Breakout } from './Breakout';
 export default {
   title: 'Components/Breakout',
   argTypes: {
-    verticalAlign: {
+    alignY: {
       control: {
         type: 'select',
       },
@@ -24,7 +24,7 @@ export default {
         },
       },
     },
-    horizontalAlign: {
+    alignX: {
       control: {
         type: 'select',
       },
@@ -36,6 +36,12 @@ export default {
         },
       },
     },
+    height: {
+      control: {
+        type: 'text',
+      },
+      description: 'The height of the breakout',
+    },
   },
 } as Meta;
 
diff --git a/packages/components/src/Breakout/Breakout.tsx b/packages/components/src/Breakout/Breakout.tsx
index 6987cf0da..4ff587751 100755
--- a/packages/components/src/Breakout/Breakout.tsx
+++ b/packages/components/src/Breakout/Breakout.tsx
@@ -5,8 +5,8 @@ import { Box } from '../Box';
 
 export interface BreakoutProps extends ComponentProps<'div'> {
   children?: ReactNode;
-  verticalAlign?: 'top' | 'bottom' | 'center';
-  horizontalAlign?: 'left' | 'right' | 'center';
+  alignY?: 'top' | 'bottom' | 'center';
+  alignX?: 'left' | 'right' | 'center';
   height?: string;
 }
 
@@ -23,14 +23,14 @@ const useAlignment = (direction?: string) => {
 };
 
 export const Breakout = ({
-  horizontalAlign,
-  verticalAlign,
+  alignX,
+  alignY,
   height,
   children,
   ...props
 }: BreakoutProps) => {
-  const alignItems = useAlignment(verticalAlign);
-  const justifyContent = useAlignment(horizontalAlign);
+  const alignItems = useAlignment(alignY);
+  const justifyContent = useAlignment(alignX);
 
   return (
     <Box
@@ -38,7 +38,7 @@ export const Breakout = ({
       justifyContent={justifyContent}
       width="100%"
       height={height}
-      display={verticalAlign || horizontalAlign ? 'flex' : 'block'}
+      display={alignY || alignX ? 'flex' : 'block'}
       __baseCSS={{
         gridColumn: '1 / -1 !important',
       }}
diff --git a/packages/components/src/Columns/Columns.stories.tsx b/packages/components/src/Columns/Columns.stories.tsx
index 77e4e45be..cb20786ee 100644
--- a/packages/components/src/Columns/Columns.stories.tsx
+++ b/packages/components/src/Columns/Columns.stories.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
 
-import { Box, Columns } from '@marigold/components';
+import { Box, Columns, Stack } from '@marigold/components';
 
 export default {
   title: 'Components/Columns',
@@ -19,11 +19,6 @@ export default {
       ],
       description: 'array of numbers to set width of every column',
       defaultValue: [2, 8, 2],
-      table: {
-        defaultValue: {
-          summary: [2, 8, 2],
-        },
-      },
     },
     space: {
       control: {
@@ -40,11 +35,6 @@ export default {
         'xxlarge',
       ],
       description: 'Responsive Style Value',
-      table: {
-        defaultValue: {
-          summary: 'none',
-        },
-      },
     },
     collapseAt: {
       control: {
@@ -52,20 +42,22 @@ export default {
       },
       defaultValue: '40em',
       description: 'Responsive Style Value',
-      table: {
-        defaultValue: {
-          summary: '40em',
-        },
+    },
+    stretch: {
+      control: {
+        type: 'boolean',
       },
+      defaultValue: false,
+      description: 'Let columns container fill height',
     },
   },
 } as Meta;
 
 export const Basic: ComponentStory<typeof Columns> = args => (
   <Columns {...args}>
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
-    <Box border="1px solid #ced4da" bg="#e9ecef" height="100px" />
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="150px" />
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="150px" />
+    <Box border="1px solid #ced4da" bg="#e9ecef" height="150px" />
   </Columns>
 );
 
@@ -79,3 +71,41 @@ export const ComplexChildren: ComponentStory<typeof Columns> = args => (
     <Box as="aside" border="1px solid #ced4da" bg="#e9ecef" height="100px" />
   </Columns>
 );
+
+const Block = ({
+  children,
+  height,
+}: {
+  children: ReactNode;
+  height?: number | string;
+}) => (
+  <Box
+    css={{
+      height,
+      background: 'hsla(218 16% 77% / 50%)',
+      border: '1px solid hsla(218 16% 70% / 50%)',
+      borderRadius: 12,
+      p: 12,
+    }}
+  >
+    {children}
+  </Box>
+);
+
+export const MultiRow = () => (
+  <Block>
+    <Stack space="medium">
+      <Block height={500}>
+        <Columns columns={[4, 4, 4]} space="small" stretch>
+          <Block height="100%">one</Block>
+          <Block>two</Block>
+          <Block height={200}>three</Block>
+        </Columns>
+      </Block>
+      <Columns columns={[2, 1]} space="small">
+        <Block>four</Block>
+        <Block>five</Block>
+      </Columns>
+    </Stack>
+  </Block>
+);
diff --git a/packages/components/src/Columns/Columns.tsx b/packages/components/src/Columns/Columns.tsx
index 8b406fb2c..95d20905d 100755
--- a/packages/components/src/Columns/Columns.tsx
+++ b/packages/components/src/Columns/Columns.tsx
@@ -14,13 +14,15 @@ export interface ColumnsProps {
   columns: Array<number>;
   space?: ResponsiveStyleValue<string>;
   columnLimit?: number;
-  collapseAt?: string;
+  collapseAt?: string | 0;
+  stretch?: boolean;
 }
 
 export const Columns = ({
   space = 'none',
   columns,
-  collapseAt = '40em',
+  collapseAt = '0em',
+  stretch,
   children,
   ...props
 }: ColumnsProps) => {
@@ -34,9 +36,11 @@ export const Columns = ({
 
   return (
     <Box
-      display="flex"
       css={{
+        display: 'flex',
         flexWrap: 'wrap',
+        alignItems: 'stretch',
+        height: stretch ? '100%' : undefined,
         gap: space,
         '> *': {
           /**
diff --git a/packages/icons/src/action/Logout.tsx b/packages/icons/src/action/Logout.tsx
index a108718b7..dfda38e48 100644
--- a/packages/icons/src/action/Logout.tsx
+++ b/packages/icons/src/action/Logout.tsx
@@ -3,6 +3,6 @@ import { SVG, SVGProps } from '@marigold/system';
 
 export const Logout = forwardRef<SVGElement, SVGProps>((props, ref) => (
   <SVG {...props} viewBox="0 0 24 24" ref={ref}>
-    <path d="M13 3h-2v10h2V3Zm4.83 2.17-1.42 1.42A6.92 6.92 0 0 1 19 12c0 3.87-3.13 7-7 7A6.995 6.995 0 0 1 7.58 6.58L6.17 5.17A8.932 8.932 0 0 0 3 12a9 9 0 0 0 18 0c0-2.74-1.23-5.18-3.17-6.83Z" />
+    <path d="M5 21q-.825 0-1.413-.587Q3 19.825 3 19V5q0-.825.587-1.413Q4.175 3 5 3h7v2H5v14h7v2Zm11-4-1.375-1.45 2.55-2.55H9v-2h8.175l-2.55-2.55L16 7l5 5Z" />
   </SVG>
 ));
diff --git a/themes/theme-b2b/src/components/Button.style.ts b/themes/theme-b2b/src/components/Button.style.ts
index 4a25d1e6a..7344a89ab 100644
--- a/themes/theme-b2b/src/components/Button.style.ts
+++ b/themes/theme-b2b/src/components/Button.style.ts
@@ -43,7 +43,7 @@ export const Button: Theme['components']['Button'] = {
       outlineColor: 'gray70',
       '&:hover': {
         color: 'secondary',
-        bg: 'gray30',
+        bg: 'gray40',
       },
     },
     text: {
@@ -51,7 +51,7 @@ export const Button: Theme['components']['Button'] = {
       '&:hover': {
         color: 'secondary',
         outlineColor: 'gray70',
-        bg: 'gray30',
+        bg: 'gray40',
       },
     },
     menu: {
diff --git a/themes/theme-b2b/src/components/Select.style.ts b/themes/theme-b2b/src/components/Select.style.ts
index 43efd366c..8f8c56ee2 100644
--- a/themes/theme-b2b/src/components/Select.style.ts
+++ b/themes/theme-b2b/src/components/Select.style.ts
@@ -31,8 +31,8 @@ export const Select: Theme['components']['Select'] = {
       },
 
       '&:focus-visible': {
-        borderColor: 'blue60',
-        boxShadow: `0 0 0 1px ${colors.blue60}`,
+        borderColor: 'orange60',
+        boxShadow: `0 0 0 1px ${colors.orange60}`,
       },
 
       '&:expanded': {
diff --git a/themes/theme-b2b/src/components/Table.style.ts b/themes/theme-b2b/src/components/Table.style.ts
index 06ee39e61..d8ff8cbd9 100644
--- a/themes/theme-b2b/src/components/Table.style.ts
+++ b/themes/theme-b2b/src/components/Table.style.ts
@@ -21,7 +21,7 @@ export const Table: Theme['components']['Table'] = {
         bg: 'orange10',
       },
       '&[data-hover]': {
-        bg: 'gray30',
+        bg: 'gray20',
       },
       '&:focus-visible': {
         outlineColor: 'orange60',


Test patch:
diff --git a/packages/components/src/Breakout/Breakout.test.tsx b/packages/components/src/Breakout/Breakout.test.tsx
index b514c1bd5..86c6716ec 100644
--- a/packages/components/src/Breakout/Breakout.test.tsx
+++ b/packages/components/src/Breakout/Breakout.test.tsx
@@ -18,7 +18,7 @@ test('supports default horizontalAlign left', () => {
 
 test('supports horizontal center', () => {
   render(
-    <Breakout horizontalAlign="center" data-testid="breakout">
+    <Breakout alignX="center" data-testid="breakout">
       breakout
     </Breakout>
   );
@@ -28,7 +28,7 @@ test('supports horizontal center', () => {
 
 test('supports horizontalAlign right', () => {
   render(
-    <Breakout horizontalAlign="right" data-testid="breakout">
+    <Breakout alignX="right" data-testid="breakout">
       breakout
     </Breakout>
   );
@@ -44,7 +44,7 @@ test('supports default horizontalAlign top', () => {
 
 test('supports verticalAlign center', () => {
   render(
-    <Breakout verticalAlign="center" data-testid="breakout">
+    <Breakout alignY="center" data-testid="breakout">
       breakout
     </Breakout>
   );
@@ -54,7 +54,7 @@ test('supports verticalAlign center', () => {
 
 test('supports verticalAlign bottom', () => {
   render(
-    <Breakout verticalAlign="bottom" data-testid="breakout">
+    <Breakout alignY="bottom" data-testid="breakout">
       breakout
     </Breakout>
   );
diff --git a/packages/components/src/Columns/Columns.test.tsx b/packages/components/src/Columns/Columns.test.tsx
index c6d81f077..2496611b4 100644
--- a/packages/components/src/Columns/Columns.test.tsx
+++ b/packages/components/src/Columns/Columns.test.tsx
@@ -45,7 +45,7 @@ test('supports default collapseAt prop', () => {
     </Columns>
   );
   const [columnOne] = getColumnWrappers(screen.getByTestId(/columns/));
-  expect(columnOne).toHaveStyle(`flexBasis : calc(( 40em - 100%) * 999)`);
+  expect(columnOne).toHaveStyle(`flexBasis : calc(( 0em - 100%) * 999)`);
 });
 
 test('supports custom collapseAt prop', () => {
@@ -120,3 +120,15 @@ test('throws error if columns length and children length are different', () => {
   ).toThrow('Columns: expected 1 children, got 3');
   spy.mockRestore();
 });
+
+test('supports stretching to full height', () => {
+  render(
+    <Columns columns={[1, 1, 2]} stretch data-testid="columns">
+      <main>columnOne</main>
+      <div>columnTwo</div>
+      <aside>columnThree</aside>
+    </Columns>
+  );
+  const container = screen.getByTestId(/columns/);
+  expect(container).toHaveStyle(`height: 100%`);
+});