From 78cd503b5ef4c54cce5bae5008397e1ce1242133 Mon Sep 17 00:00:00 2001
From: Jorge del Casar <948953+jorgecasar@users.noreply.github.com>
Date: Wed, 22 Apr 2020 15:45:10 +0200
Subject: [PATCH] fix(button): adjust button to more sensible default styling
 (#674)

---
 packages/button/src/LionButton.js             | 10 ++++----
 packages/form-system/package.json             |  1 +
 .../50-Content-inside-fields.stories.mdx      | 24 +++++++++++++++++++
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 packages/form-system/stories/50-Content-inside-fields.stories.mdx

diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js
index 66919f3f2..e11e2f0e4 100644
--- a/packages/button/src/LionButton.js
+++ b/packages/button/src/LionButton.js
@@ -61,8 +61,6 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
       css`
         :host {
           display: inline-block;
-          padding-top: 2px;
-          padding-bottom: 2px;
           min-height: 40px; /* src = https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/ */
           outline: 0;
           background-color: transparent;
@@ -75,18 +73,22 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
           align-items: center;
           position: relative;
           background: #eee; /* minimal styling to make it recognizable as btn */
-          padding: 7px 15px;
+          padding: 8px; /* vertical padding to fix with host min-height */
           outline: none; /* focus style handled below, else it follows boundaries of click-area */
         }
 
         :host .btn ::slotted(button) {
           position: absolute;
+          top: 0;
+          left: 0;
           clip: rect(0 0 0 0);
           clip-path: inset(50%);
           overflow: hidden;
           white-space: nowrap;
           height: 1px;
           width: 1px;
+          padding: 0; /* reset default agent styles */
+          border: 0; /* reset default agent styles */
         }
 
         .click-area {
@@ -95,7 +97,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
           right: 0;
           bottom: 0;
           left: 0;
-          margin: -3px -1px;
+          margin: 0;
           padding: 0;
         }
 
diff --git a/packages/form-system/package.json b/packages/form-system/package.json
index 7bafb3936..8c76487de 100644
--- a/packages/form-system/package.json
+++ b/packages/form-system/package.json
@@ -33,6 +33,7 @@
     "*.js"
   ],
   "dependencies": {
+    "@lion/button": "0.5.11",
     "@lion/checkbox-group": "0.8.7",
     "@lion/core": "0.5.1",
     "@lion/field": "0.12.1",
diff --git a/packages/form-system/stories/50-Content-inside-fields.stories.mdx b/packages/form-system/stories/50-Content-inside-fields.stories.mdx
new file mode 100644
index 000000000..136aa08b8
--- /dev/null
+++ b/packages/form-system/stories/50-Content-inside-fields.stories.mdx
@@ -0,0 +1,24 @@
+import { Story, Meta, html } from '@open-wc/demoing-storybook';
+import '@lion/input/lion-input.js';
+import '@lion/button/lion-button.js';
+
+# Content inside fields
+
+Due to our custom inputs being Web Components, it is possible to put HTML content inside an input.
+For example if you want to add a button as a prefix or suffix.
+
+<Story name="Buttons Within lion fields">
+  {html`
+    <lion-input label="Prefix and sufix">
+      <lion-button slot="prefix" type="button">prefix</lion-button>
+      <lion-button slot="suffix" type="button">sufix</lion-button>
+    </lion-input>
+  `}
+</Story>
+
+```html
+<lion-input label="Prefix and sufix">
+  <lion-button slot="prefix" type="button">prefix</lion-button>
+  <lion-button slot="suffix" type="button">sufix</lion-button>
+</lion-input>
+```