Commit 5e5b75b5 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Add before/after slot in neos-form-input

parent de9f952d
......@@ -149,6 +149,7 @@ declare global {
interface NeosIcon {
'name': string;
'squared': boolean;
'theme': string;
'type': string;
}
}
......@@ -174,6 +175,7 @@ declare global {
export interface NeosIconAttributes extends HTMLAttributes {
'name'?: string;
'squared'?: boolean;
'theme'?: string;
'type'?: string;
}
}
......
......@@ -32,7 +32,9 @@ export class FormInput {
</div>
</div>
<div class="input">
<slot name="before"/>
{this.renderInput()}
<slot name="after"/>
</div>
</label>
);
......
......@@ -8,39 +8,56 @@
font-size: $font-size-dark-base;
line-height: 1.1;
margin-bottom: $content-dark-margin;
}
::slotted(neos-icon:first-child) {
margin-right: 4px;
}
::slotted(neos-icon:last-child) {
margin-left: 4px;
}
::slotted(neos-button:first-child) {
margin-right: 4px;
}
input {
background-color: $background-dark-color;
border: 0;
outline: 1px solid neos-color($colors-dark, 'neutral');
color: inherit;
padding: 0 $content-padding;
margin: $content-margin-medium 0;
&:focus:enabled,
&:hover:enabled {
outline: 1px solid neos-color($colors-dark, 'primary');
}
&:focus:enabled {
background-color: neos-color($colors-dark, 'brightest');
color: neos-color($colors-dark, 'brightest', 'contrast');
outline: 2px solid neos-color($colors-dark, 'brightest');
}
&[disabled] {
cursor: not-allowed;
opacity: .85;
}
::slotted(neos-button:last-child) {
margin-left: 4px;
}
input {
background-color: $background-dark-color;
border: 0;
outline: 1px solid neos-color($colors-dark, 'darker');
box-sizing: content-box;
color: inherit;
padding: 0 $content-padding;
margin: $content-margin-medium 0;
&:focus:enabled,
&:hover:enabled {
outline: 1px solid neos-color($colors-dark, 'primary');
}
.label {
display: flex;
align-items: center;
&:focus:enabled {
background-color: neos-color($colors-dark, 'brightest');
color: neos-color($colors-dark, 'brightest', 'contrast');
outline: 2px solid neos-color($colors-dark, 'brightest');
}
.metadata {
margin-left: auto;
&[disabled] {
cursor: not-allowed;
opacity: .85;
}
}
.label {
display: flex;
align-items: center;
}
.metadata {
margin-left: auto;
}
......@@ -4,14 +4,20 @@
@include font-smoothing();
display: block;
}
input {
flex: 1;
width: 100%;
border: 0;
box-sizing: border-box;
height: $grid-unit;
line-height: $grid-unit;
input {
width: 100%;
border: 0;
box-sizing: border-box;
height: $grid-unit;
line-height: $grid-unit;
transition: all ease-in 100ms;
}
transition: all ease-in 100ms;
}
.input {
display: flex;
align-items: center;
}
import {Component, Prop} from '@stencil/core';
import classnames from 'classnames';
@Component({
tag: 'neos-icon',
......@@ -9,21 +10,22 @@ export class Icon {
@Prop() name: string;
@Prop() type: string = 'regular';
@Prop() theme: string = 'regular';
@Prop() squared: boolean = false;
className() {
return 'fa' + this.type.charAt(0) + ' ' + 'fa-' + this.name;
return classnames('t-' + this.theme, {'l-squared': this.squared});
}
icon() {
return <i class={this.className()}></i>;
iconClassName() {
return 'fa' + this.type.charAt(0) + ' ' + 'fa-' + this.name;
}
squaredIcon() {
return <div class="l-squared">{this.icon()}</div>
icon() {
return <i class={this.iconClassName()}></i>;
}
render() {
return this.squared ? this.squaredIcon() : this.icon();
return <div class={this.className()}>{this.icon()}</div>;
}
}
......@@ -4,4 +4,19 @@
:host {
color: $text-dark-color-value;
font-size: $font-size-dark-base;
.t-regular {
background-color: transparent;
color: white;
}
.t-neutral {
background-color: neos-color($colors-dark, 'neutral');
color: neos-color($colors-dark, 'neutral', 'contrast');
}
.t-success {
background-color: neos-color($colors-dark, 'success');
color: neos-color($colors-dark, 'success', 'contrast');
}
}
......@@ -10,7 +10,7 @@ export class InspectorGroup {
@Prop() icon: string;
render() {
return (<section>
return (<section role="group">
<neos-inspector-group-header icon={this.icon} label={this.label}></neos-inspector-group-header>
<div class="content">
<slot/>
......
......@@ -221,11 +221,18 @@
<neos-form-input label="URI Path Segement" disabled value="my-good-blog-post">
<neos-badge slot="metadata">readonly</neos-badge>
<neos-badge slot="metadata">computed</neos-badge>
<neos-button squared theme="primary" slot="after">
<neos-icon name="sync" type="solid" disabled></neos-icon>
</neos-button>
</neos-form-input>
</neos-inspector-group>
<neos-inspector-group icon="cogs" label="SEO">
<neos-form-input label="Descritption" placeholder="A short and meanigful description of the document"></neos-form-input>
<neos-form-input label="Keywords"></neos-form-input>
<neos-form-input label="Email" value="hello@neos.io">
<neos-icon squared name="at" type="solid" theme="neutral" slot="before"></neos-icon>
<neos-icon squared name="check-circle" type="solid" theme="success" slot="after"></neos-icon>
</neos-form-input>
</neos-inspector-group>
</section>
</section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment