fix: fixed padding and added multiline story (#277)

* fixed padding and added multiline story

* type-checking on button story

Author: loivsen

packages/uui-button/lib/uui-button.element.ts

@@ -51,6 +51,8 @@ export class UUIButtonElement extends FormControlMixin(
         margin-left: calc(var(--uui-button-merge-border-left, 0) * -1px);
         --uui-button-padding-left-factor: 3;
         --uui-button-padding-right-factor: 3;
+        --uui-button-padding-top-factor: 1;
+        --uui-button-padding-bottom-factor: 1;
 
         min-height: var(--uui-button-height, var(--uui-size-11));
         max-height: 100%;
@@ -65,6 +67,8 @@ export class UUIButtonElement extends FormControlMixin(
       :host([compact]) {
         --uui-button-padding-left-factor: 1;
         --uui-button-padding-right-factor: 1;
+        --uui-button-padding-top-factor: 0;
+        --uui-button-padding-bottom-factor: 0;
       }
 
       .label {
@@ -117,8 +121,9 @@ export class UUIButtonElement extends FormControlMixin(
         );
         cursor: pointer;
 
-        padding: 0
-          calc(var(--uui-size-2) * var(--uui-button-padding-right-factor)) 0
+        padding: calc(var(--uui-size-2) * var(--uui-button-padding-top-factor))
+          calc(var(--uui-size-2) * var(--uui-button-padding-right-factor))
+          calc(var(--uui-size-2) * var(--uui-button-padding-bottom-factor))
           calc(var(--uui-size-2) * var(--uui-button-padding-left-factor));
 
         box-shadow: none;

packages/uui-button/lib/uui-button.story.ts

@@ -2,8 +2,9 @@ import '.';
 import '@umbraco-ui/uui-badge/lib';
 import '@umbraco-ui/uui-icon/lib';
 
-import { Story } from '@storybook/web-components';
+import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit-html';
+import { UUIButtonElement } from './uui-button.element';
 
 export default {
   title: 'Buttons/Button',
@@ -15,9 +16,9 @@ export default {
     target: undefined,
     look: 'default',
     color: 'default',
-    type: '',
+    type: undefined,
     label: 'Button',
-    state: '',
+    state: undefined,
   },
   argTypes: {
     look: {
@@ -54,7 +55,7 @@ export default {
     '--uui-button-background-color-disabled': { control: { type: 'color' } },
     '--uui-button-contrast-disabled': { control: { type: 'color' } },
   },
-};
+} as Meta<UUIButtonElement>;
 
 const cssProps = [
   '--uui-button-height',
@@ -87,12 +88,12 @@ const Template: Story = props => {
         .reduce(reducer)}
       ?disabled=${props.disabled}
       ?compact=${props.compact}
+      .state=${props.state}
+      .href=${props.href}
+      .target=${props.target}
       look=${props.look}
       color=${props.color}
       label=${props.label}
-      state=${props.state}
-      href=${props.href}
-      target=${props.target}
       >${props.content}</uui-button
     >
   `;
@@ -340,3 +341,82 @@ AnchorTag.parameters = {
     },
   },
 };
+
+export const MultiLine: Story = props => {
+  return html`
+    <uui-button
+      type=${props.type}
+      style=${cssProps
+        .map(cssProp => (props[cssProp] ? `${cssProp}: ${props[cssProp]}` : ''))
+        .reduce(reducer)}
+      ?disabled=${props.disabled}
+      ?compact=${props.compact}
+      look=${props.look}
+      color=${props.color}
+      label=${props.label}
+      state=${props.state}
+      href=${props.href}
+      target=${props.target}
+      >Hello <br />
+      I am button</uui-button
+    >
+    <br /><br />
+    <uui-button
+      type=${props.type}
+      style=${cssProps
+        .map(cssProp => (props[cssProp] ? `${cssProp}: ${props[cssProp]}` : ''))
+        .reduce(reducer)}
+      ?disabled=${props.disabled}
+      ?compact=${props.compact}
+      look=${props.look}
+      color=${props.color}
+      label=${props.label}
+      state=${props.state}
+      href=${props.href}
+      target=${props.target}>
+      <uui-badge color="danger">2</uui-badge>
+      Hello <br />
+      I am button
+    </uui-button>
+    <br /><br />
+    <uui-button
+      type=${props.type}
+      style=${cssProps
+        .map(cssProp => (props[cssProp] ? `${cssProp}: ${props[cssProp]}` : ''))
+        .reduce(reducer)}
+      ?disabled=${props.disabled}
+      compact
+      look=${props.look}
+      color=${props.color}
+      label=${props.label}
+      state=${props.state}
+      href=${props.href}
+      target=${props.target}>
+      Hi <br />
+      I am compact
+    </uui-button>
+    <br /><br />
+    <uui-icon-registry-essential>
+      <uui-button
+        type=${props.type}
+        style=${cssProps
+          .map(cssProp =>
+            props[cssProp] ? `${cssProp}: ${props[cssProp]}` : ''
+          )
+          .reduce(reducer)}
+        ?disabled=${props.disabled}
+        ?compact=${props.compact}
+        look=${props.look}
+        color=${props.color}
+        label=${props.label}
+        state=${props.state}
+        href=${props.href}
+        target=${props.target}>
+        <uui-icon .name=${'favorite'}></uui-icon>
+        <br />Home
+      </uui-button>
+    </uui-icon-registry-essential>
+  `;
+};
+
+MultiLine.args = { look: 'primary' };