Repository: marigold-ui/marigold
Pull request #2496 (2022-09-20 07:51:21)

chore: change property names in breakout to alignX and alignY
Change horizontalAlign and verticalAlign to alignX and alignY for a better developer experience.

changeset-bot[bot]: ###  ⚠️  No Changeset found

Latest commit: e9d5c79c0cbe52d7ccd370572332175c6c0d8b9f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.**

<details><summary>This PR includes no changesets</summary>

  When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

</details>

[Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/master/docs/adding-a-changeset.md).

[Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/marigold-ui/marigold/new/rename-align?filename=.changeset/clean-donuts-protect.md&value=---%0A%22%40marigold%2Fdocs%22%3A%20patch%0A%22%40marigold%2Fcomponents%22%3A%20patch%0A---%0A%0Achore%3A%20change%20property%20names%20from%20vertical%20and%20horizontal%20align%20to%20al%E2%80%A6%0A)



Patch:
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/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/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/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/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',
       }}


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>
   );