Commit a0dbd250 authored by Dominique Feyer's avatar Dominique Feyer

TASK: Refactor form input and improve dropdown

parent 01f357ab
......@@ -188,30 +188,30 @@ declare global {
declare global {
namespace StencilComponents {
interface NeosFormInputLabel {
interface NeosFormInputWrapper {
'label': string;
}
}
interface HTMLNeosFormInputLabelElement extends StencilComponents.NeosFormInputLabel, HTMLStencilElement {}
interface HTMLNeosFormInputWrapperElement extends StencilComponents.NeosFormInputWrapper, HTMLStencilElement {}
var HTMLNeosFormInputLabelElement: {
prototype: HTMLNeosFormInputLabelElement;
new (): HTMLNeosFormInputLabelElement;
var HTMLNeosFormInputWrapperElement: {
prototype: HTMLNeosFormInputWrapperElement;
new (): HTMLNeosFormInputWrapperElement;
};
interface HTMLElementTagNameMap {
'neos-form-input-label': HTMLNeosFormInputLabelElement;
'neos-form-input-wrapper': HTMLNeosFormInputWrapperElement;
}
interface ElementTagNameMap {
'neos-form-input-label': HTMLNeosFormInputLabelElement;
'neos-form-input-wrapper': HTMLNeosFormInputWrapperElement;
}
namespace JSX {
interface IntrinsicElements {
'neos-form-input-label': JSXElements.NeosFormInputLabelAttributes;
'neos-form-input-wrapper': JSXElements.NeosFormInputWrapperAttributes;
}
}
namespace JSXElements {
export interface NeosFormInputLabelAttributes extends HTMLAttributes {
export interface NeosFormInputWrapperAttributes extends HTMLAttributes {
'label'?: string;
}
}
......
......@@ -37,9 +37,9 @@ export class Dropdown {
render() {
return (
<div>
<neos-form-input-label label={this.label}>
<neos-form-input-wrapper label={this.label}>
<slot name="metadata"/>
</neos-form-input-label>
</neos-form-input-wrapper>
<div class={this.wrapperClassName()}>
<a href="#" class="dropdown" onClick={(e) => this.toggle(e)}>
<div class="icon">
......
import {Component, Prop} from '@stencil/core';
@Component({
tag: 'neos-form-input-label',
styleUrl: 'styles/form-input-label.dark.scss',
shadow: true
})
export class FormInputLabel {
@Prop() label: string;
render() {
return (
<div class="label">
<neos-label label={this.label}></neos-label>
<div class="metadata">
<slot/>
</div>
</div>
);
}
}
@import "./form-input-label";
@import "./form-input-label.dark.vars";
:host {
color: $text-dark-color-value;
font-family: $font-family-dark-base;
font-weight: 400;
font-size: $font-size-dark-base;
line-height: 1.1;
.metadata {
margin-left: auto;
}
}
@import "./form-input-label.vars";
:host {
@include font-smoothing();
}
.label {
display: flex;
align-items: flex-end;
}
......@@ -249,9 +249,9 @@ export class FormInput {
render() {
return (
<label>
<neos-form-input-label label={this.label}>
<neos-form-input-wrapper label={this.label}>
<slot name="metadata"/>
</neos-form-input-label>
</neos-form-input-wrapper>
<div class="input">
<slot name="before"/>
<input
......
......@@ -21,11 +21,11 @@
text-transform: lowercase;
opacity: .6;
}
section {
section[role=presentation] {
border-top: 4px solid white;
margin-bottom: 40px;
}
section section {
section[role=presentation] section[role=presentation] {
border-top: 0;
margin-bottom: 20px;
}
......@@ -153,7 +153,7 @@
<header>
<h1>neos-icon</h1>
</header>
<section>
<section role="presentation">
<header>
<h2>default</h2>
</header>
......
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