ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(button): adjust button to more sensible default styling (#674)

Browse source
This commit is contained in:
Jorge del Casar 2020-04-22 15:45:10 +02:00 committed by Thomas Allmer
parent 9731771c23
commit 78cd503b5e
3 changed files with 31 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
packages/button/src/LionButton.js
View file

@ -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;
}

1
packages/form-system/package.json
View file

@ -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",

24
packages/form-system/stories/50-Content-inside-fields.stories.mdx Normal file
View file

@ -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>
```