From 3b7e35551b499a7b8887adb068d3a80e4088b0c2 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 5 Feb 2022 19:23:14 +0100 Subject: Added field-label --- src/index.scss | 1 + src/layouts/_card.scss | 25 +++++++------ src/objects/_field-label.scss | 85 +++++++++++++++++++++++++++++++++++++++++++ src/objects/_text-field.scss | 5 +-- tpl/index.pug | 78 +++++++++++++++++++++++++++++++++++++++ tpl/objects/button.pug | 2 +- tpl/objects/field-label.pug | 23 ++++++++++++ tpl/objects/text-field.pug | 2 +- 8 files changed, 205 insertions(+), 16 deletions(-) create mode 100644 src/objects/_field-label.scss create mode 100644 tpl/objects/field-label.pug diff --git a/src/index.scss b/src/index.scss index 5a6a94c..ad3b1af 100644 --- a/src/index.scss +++ b/src/index.scss @@ -11,6 +11,7 @@ @import 'objects/rule'; @import 'objects/button'; @import 'objects/text-field'; +@import 'objects/field-label'; :root { @include iro.props-assign; diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index f6b6b03..037b29f 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss @@ -1,35 +1,38 @@ -@include namespace('card') { - @include store(( +@use 'iro-sass/src/index' as iro; +@use 'include-media/dist/include-media' as media; + +@include iro.props-namespace('card') { + @include iro.props-store(( --dims: ( - --pad-x: iro-px-to-rem(11px), - --pad-y: iro-px-to-rem(8px), + --pad-x: iro.fn-px-to-rem(11px), + --pad-y: iro.fn-px-to-rem(8px), --lg: ( - --pad-x: iro-px-to-rem(14px), - --pad-y: iro-px-to-rem(11px), + --pad-x: iro.fn-px-to-rem(14px), + --pad-y: iro.fn-px-to-rem(11px), ) ) )); - @include layout(namespace()) { + @include iro.bem-layout(iro.props-namespace()) { display: flex; align-items: center; padding: prop(--dims --pad-y) prop(--dims --pad-x); gap: prop(--dims --pad-x); line-height: 1.4; - @include modifier('lg') { + @include iro.bem-modifier('lg') { padding: prop(--dims --lg --pad-y) prop(--dims --lg --pad-x); gap: prop(--dims --lg --pad-x); } - @include modifier('flush') { + @include iro.bem-modifier('flush') { padding: 0; } - @include element('block') { + @include iro.bem-elem('block') { flex: 0 0 auto; - @include modifier('main') { + @include iro.bem-modifier('main') { flex-shrink: 1; width: 100%; } diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss new file mode 100644 index 0000000..341bf49 --- /dev/null +++ b/src/objects/_field-label.scss @@ -0,0 +1,85 @@ +@use 'iro-sass/src/index' as iro; +@use '../vars'; +@use '../mixins/typography'; + +@include iro.props-namespace('field-label') { + @include iro.props-store(( + --dims: ( + --spacing-x: iro.props-get(--dims --spacing --x --sm, $global: true), + --spacing-y: iro.props-get(--dims --spacing --y --xs, $global: true), + --label-font-size: iro.props-get(--dims --font-size --sm, $global: true), + --hint-font-size: iro.props-get(--dims --font-size --sm, $global: true), + ), + --colors: ( + --label: iro.props-get(--colors --fg-hi, $global: true), + --hint: iro.props-get(--colors --fg, $global: true), + --error-hint: iro.props-get(--colors --accent --error, $global: true), + --disabled: iro.props-get(--colors --fg-hi3, $global: true), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + display: inline-block; + + @include iro.bem-elem('label') { + display: block; + padding-right: iro.props-get(--dims --spacing-x); + color: iro.props-get(--colors --label); + font-size: iro.props-get(--dims --label-font-size); + font-weight: 400; + line-height: 1.3; + + @include iro.bem-next-elem('content') { + margin-top: iro.props-get(--dims --spacing-y); + } + } + + @include iro.bem-elem('content') { + display: inline-block; + } + + @include iro.bem-elem('hint') { + display: block; + margin-top: iro.props-get(--dims --spacing-y); + color: iro.props-get(--colors --hint); + font-size: iro.props-get(--dims --hint-font-size); + } + + @include iro.bem-is('invalid') { + @include iro.bem-elem('hint') { + color: iro.props-get(--colors --error-hint); + } + } + + @include iro.bem-is('disabled') { + @include iro.bem-elem('label', 'hint') { + color: iro.props-get(--colors --disabled); + } + } + + @include iro.bem-modifier('left', 'right') { + display: inline-flex; + align-items: baseline; + + @include iro.bem-elem('label') { + display: inline-block; + + @include iro.bem-next-elem('content') { + margin-top: 0; + } + } + } + + @include iro.bem-modifier('left') { + @include iro.bem-elem('label') { + text-align: left; + } + } + + @include iro.bem-modifier('right') { + @include iro.bem-elem('label') { + text-align: right; + } + } + } +} diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss index f2c3678..ac48216 100644 --- a/src/objects/_text-field.scss +++ b/src/objects/_text-field.scss @@ -78,9 +78,8 @@ @include iro.bem-elem('input') { @include typography.set-font(vars.$font--main, (size: 1em, line-height: vars.$line-height)); - display: block; - color: iro.props-get(--colors --text); - resize: none; + color: iro.props-get(--colors --text); + resize: none; &::placeholder { opacity: 1; diff --git a/tpl/index.pug b/tpl/index.pug index 7dab86f..e3918de 100644 --- a/tpl/index.pug +++ b/tpl/index.pug @@ -7,6 +7,7 @@ include objects/heading.pug include objects/rule.pug include objects/button.pug include objects/text-field.pug +include objects/field-label.pug mixin box +container(padX=true padY=true inPage=true theme="raised") @@ -121,3 +122,80 @@ html br br +text-field(value='Incorrect input' pattern='a+' required=true disabled=true) + + //----------------------------------------- + + +h1-heading(level='xl')= 'Field label' + +rule(level='medium') + + +box + +field-label('First name') + +text-field(placeholder='Placeholder') + br + br + +field-label('Password', 'At least 6 characters required') + +text-field(placeholder='Placeholder' type='password') + br + br + +field-label('Password', 'At least 6 characters required')(invalid=true) + +text-field(placeholder='Placeholder' type='password' invalid=true) + br + br + +field-label('First name')(disabled=true) + +text-field(placeholder='Placeholder' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(disabled=true) + +text-field(placeholder='Placeholder' type='password' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true) + +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) + + +box + +field-label('First name')(align='left' labelWidth='100px') + +text-field(placeholder='Placeholder') + br + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px') + +text-field(placeholder='Placeholder' type='password') + br + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true) + +text-field(placeholder='Placeholder' type='password' invalid=true) + br + br + +field-label('First name')(align='left' labelWidth='100px' disabled=true) + +text-field(placeholder='Placeholder' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true) + +text-field(placeholder='Placeholder' type='password' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true) + +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) + + +box + +field-label('First name')(align='right' labelWidth='100px') + +text-field(placeholder='Placeholder') + br + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px') + +text-field(placeholder='Placeholder' type='password') + br + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true) + +text-field(placeholder='Placeholder' type='password' invalid=true) + br + br + +field-label('First name')(align='right' labelWidth='100px' disabled=true) + +text-field(placeholder='Placeholder' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true) + +text-field(placeholder='Placeholder' type='password' disabled=true) + br + br + +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true) + +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true) diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug index 243ff58..3b10ea0 100644 --- a/tpl/objects/button.pug +++ b/tpl/objects/button.pug @@ -12,5 +12,5 @@ mixin a-button let href = attributes.disabled ? null : '#'; - a(class=classes href=href) + a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled)) block diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug new file mode 100644 index 0000000..151e084 --- /dev/null +++ b/tpl/objects/field-label.pug @@ -0,0 +1,23 @@ +mixin field-label(label, hint=null) + - + let classes = { + 'o-field-label': true, + 'o-field-label--left': attributes.align === 'left', + 'o-field-label--right': attributes.align === 'right', + 'is-invalid': attributes.invalid, + 'is-disabled': attributes.disabled, + } + if (attributes.class) { + classes[attributes.class] = true; + } + + let needsLabelWidth = attributes.align === 'left' || attributes.align === 'right'; + + let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : ''; + + div(class=classes) + .o-field-label__label(style=labelStyle class=attributes.labelClass)= label + .o-field-label__content(class=attributes.contentClass) + block + if hint + .o-field-label__hint= hint diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug index 9bbe0a1..9069200 100644 --- a/tpl/objects/text-field.pug +++ b/tpl/objects/text-field.pug @@ -8,6 +8,6 @@ mixin text-field 'is-disabled': attributes.disabled, } - div(class=classes) + div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled)) input(class='o-text-field__input')&attributes(attributes) .o-text-field__bg -- cgit v1.2.3-70-g09d2