From 69b7c9f7cabe051a6371ca13fa05d689e9034654 Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Wed, 12 Oct 2022 10:44:27 +0200 Subject: [PATCH 1/2] feat: added textfield sizes and label animation --- .../_patterns/01-elements/_form-elements.scss | 64 ++++---- .../01-elements/_form-elements.variables.scss | 10 +- .../01-elements/input/_input.variables.scss | 138 ++++++++++++++++++ .../01-elements/input/input-sizes.hbs | 6 + .../01-elements/input/input-sizes.json | 27 ++++ .../01-elements/input/input-sizes.md | 4 + source/_patterns/01-elements/input/input.hbs | 3 +- source/_patterns/01-elements/input/input.scss | 113 +++++++++++--- source/css/pattern-scaffolding.css | 9 ++ 9 files changed, 314 insertions(+), 60 deletions(-) create mode 100644 source/_patterns/01-elements/input/input-sizes.hbs create mode 100644 source/_patterns/01-elements/input/input-sizes.json create mode 100644 source/_patterns/01-elements/input/input-sizes.md diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss index ae22fdb5356..50ab5a3f5d1 100644 --- a/source/_patterns/01-elements/_form-elements.scss +++ b/source/_patterns/01-elements/_form-elements.scss @@ -3,12 +3,16 @@ %form-element { border-radius: 4px; + border: none; color: $form-elements-color; caret-color: $db-color-red-500; - --formElement---borderTopColor: var(--formElement---borderColor, transparent); + --formElement---borderTopColor: var( + --formElement---borderColor, + transparent + ); --formElement---borderRightColor: var( --formElement---borderColor, transparent @@ -35,48 +39,48 @@ // Semitransparent %form-element-semitransparent { background-color: $form-elements-semitransparent-background-color; - border-top: $form-elements---borderTop; - border-right: $form-elements---borderRight; - border-bottom: $form-elements---borderBottom; - border-left: $form-elements---borderLeft; - border-top-color: transparent; - border-right-color: transparent; - border-left-color: transparent; - --formElement---borderColor: #{$form-elements-semitransparent-border-bottom-color}; + // border-top: $form-elements---borderTop; + // border-right: $form-elements---borderRight; + // border-bottom: $form-elements---borderBottom; + // border-left: $form-elements---borderLeft; + // border-top-color: transparent; + // border-right-color: transparent; + // border-left-color: transparent; + // --formElement---borderColor: #{$form-elements-semitransparent-border-bottom-color}; } // White %form-element-white { background-color: $form-elements-white-background-color; - border-top: $form-elements---borderTop; - border-right: $form-elements---borderRight; - border-bottom: $form-elements---borderBottom; - border-left: $form-elements---borderLeft; - border-top-color: transparent; - border-right-color: transparent; - border-left-color: transparent; - --formElement---borderColor: #{$form-elements-white-border-bottom-color}; + // border-top: $form-elements---borderTop; + // border-right: $form-elements---borderRight; + // border-bottom: $form-elements---borderBottom; + // border-left: $form-elements---borderLeft; + // border-top-color: transparent; + // border-right-color: transparent; + // border-left-color: transparent; + // --formElement---borderColor: #{$form-elements-white-border-bottom-color}; } // Solid %form-element-solid { background-color: $form-elements-solid-background-color; - border-top: $form-elements---borderTop; - border-right: $form-elements---borderRight; - border-bottom: $form-elements---borderBottom; - border-left: $form-elements---borderLeft; - border-top-color: transparent; - border-right-color: transparent; - border-left-color: transparent; - --formElement---borderColor: #{$form-elements-solid-border-bottom-color}; + // border-top: $form-elements---borderTop; + // border-right: $form-elements---borderRight; + // border-bottom: $form-elements---borderBottom; + // border-left: $form-elements---borderLeft; + // border-top-color: transparent; + // border-right-color: transparent; + // border-left-color: transparent; + // --formElement---borderColor: #{$form-elements-solid-border-bottom-color}; } // Outline %form-element-outline { background-color: transparent; - border-top: $form-elements---borderTop; - border-right: $form-elements---borderRight; - border-bottom: $form-elements---borderBottom; - border-left: $form-elements---borderLeft; - --formElement---borderColor: #{$form-elements-outline-border-color}; + // border-top: $form-elements---borderTop; + // border-right: $form-elements---borderRight; + // border-bottom: $form-elements---borderBottom; + // border-left: $form-elements---borderLeft; + // --formElement---borderColor: #{$form-elements-outline-border-color}; } diff --git a/source/_patterns/01-elements/_form-elements.variables.scss b/source/_patterns/01-elements/_form-elements.variables.scss index 1859f4293b7..4379e6a892a 100644 --- a/source/_patterns/01-elements/_form-elements.variables.scss +++ b/source/_patterns/01-elements/_form-elements.variables.scss @@ -8,10 +8,7 @@ $form-elements---borderLeft: 1px solid var(--formElement---borderLeftColor) !def // ### Style variations ### // Semitransparent -$form-elements-semitransparent-background-color: rgba( - $db-color-cool-gray-700, - 0.05 -) !default; +$form-elements-semitransparent-background-color: rgba(0, 0, 0, 0.04) !default; $form-elements-semitransparent-border-bottom-color: rgba( $db-color-cool-gray-700, 0.5 @@ -26,10 +23,7 @@ $form-elements-white-border-bottom-color: rgba( // Solid $form-elements-solid-background-color: $db-color-cool-gray-100 !default; -$form-elements-solid-border-bottom-color: rgba( - $db-color-cool-gray-700, - 0.5 -) !default; +$form-elements-solid-border-bottom-color: rgba(0, 0, 0, 0.04) !default; // Outline $form-elements-outline-border-color: rgba( diff --git a/source/_patterns/01-elements/input/_input.variables.scss b/source/_patterns/01-elements/input/_input.variables.scss index 21c0a2e8078..e3d148baa49 100644 --- a/source/_patterns/01-elements/input/_input.variables.scss +++ b/source/_patterns/01-elements/input/_input.variables.scss @@ -2,3 +2,141 @@ $icons-path: "../../../icons/" !default; @import "../../../css/helpers/functions"; $input---color: $db-color-cool-gray-700 !default; + +$db-input-sizes: ( + "xs": 24px, + "s": 32px, + "m": 40px, + "l": 48px, + "xl": 64px +); + +$db-input-font-sizes: ( + "xs": 12, + "s": 12, + "m": 14, + "l": 16, + "xl": 20 +); + +$db-input-lineheight: ( + "xs": + to-rem( + $pxValue: 18 + ), + "s": + to-rem( + $pxValue: 18 + ), + "m": + to-rem( + $pxValue: 21 + ), + "l": + to-rem( + $pxValue: 24 + ), + "xl": + to-rem( + $pxValue: 30 + ) +); + +@mixin input--sizes() { + @each $size in (xl l m s xs) { + // $stroke-width: 3px; + // @if $size == s or $size == xs { + // $stroke-width: 2px; + // } + //.#{$prefix}loadingindicator--size-#{$size} { + // &%size-#{$size} { + + $padding-top: to-rem( + $pxValue: 16 + ); + $padding-right: $db-spacing-s; + $padding-left: $db-spacing-s; + $padding-bottom: calc($db-spacing-s - 4px); + + @if $size == s or $size == xs { + $padding-top: 0.5rem; + $padding-bottom: 0.5rem; + } + + &%size-#{$size} { + font-size: to-rem($pxValue: map-get($db-input-font-sizes, $size)); + line-height: map-get($db-input-lineheight, $size); + height: map-get($db-input-sizes, $size); + + padding: $db-spacing-s $db-spacing-s; + //&:not(:placeholder-shown) { + padding-top: $padding-top; + padding-bottom: $padding-bottom; + + &::placeholder { + font-size: to-rem( + $pxValue: map-get($db-input-font-sizes, $size) + ); + } + } + } +} + +// TODO rename +@mixin input-label-size($size) { + $transformScale: 1.2; + + @if $size == xs { + $transformScale: 0.8; + } + + @if $size == xl { + $transformScale: 1.35; + } + + font-size: to-rem($pxValue: map-get($db-input-font-sizes, $size)); + transform: translate( + $db-spacing-s, + -#{to-rem( + $pxValue: + calc(map-get($db-input-font-sizes, $size) * $transformScale) + + map-get($db-input-font-sizes, $size) + )} + ); +} + +// TODO rename +@mixin input-label-translation($size) { + @if $size == xs or $size == s { + transition: opacity 0.08s, transform 0.15s; + opacity: 0; + //transform: translate($db-spacing-s, -#{to-rem($pxValue: calc(map-get($db-input-font-sizes, $size) * 1.2) + map-get($db-input-font-sizes, $size))}) scale(0.7); + } + @if $size != xs and $size != s { + $transformScale: 2.9; + + @if $size == xl { + $transformScale: 3.1; + } + + transition: transform + 0.25s + cubic-bezier( + 0.075, + 0.82, + 0.165, + 1 + ); // TODO replace with transistion function + transform: translate( + $db-spacing-s, + -#{to-rem( + $pxValue: + calc( + map-get($db-input-font-sizes, $size) * + $transformScale + ) + )} + ) + scale(0.7); + } +} diff --git a/source/_patterns/01-elements/input/input-sizes.hbs b/source/_patterns/01-elements/input/input-sizes.hbs new file mode 100644 index 00000000000..3e054241b45 --- /dev/null +++ b/source/_patterns/01-elements/input/input-sizes.hbs @@ -0,0 +1,6 @@ +
+{{#each sizes}} + data-size="{{size}}": +
{{> elements-input type=../type label=../label placeholder=../placeholder }}
+{{/each }} +
diff --git a/source/_patterns/01-elements/input/input-sizes.json b/source/_patterns/01-elements/input/input-sizes.json new file mode 100644 index 00000000000..30587697ef9 --- /dev/null +++ b/source/_patterns/01-elements/input/input-sizes.json @@ -0,0 +1,27 @@ +{ + "sizes": [ + { + "size": "xs", + "label": "Small" + }, + { + "size": "s", + "label": "Small" + }, + { + "size": "m", + "label": "Medium (default, data-size attribute is optional)" + }, + { + "size": "l", + "label": "Large" + }, + { + "size": "xl", + "label": "Extra Large" + } + ], + "type": "text", + "placeholder": "z.B. DB User", + "label": "Textlabel" +} diff --git a/source/_patterns/01-elements/input/input-sizes.md b/source/_patterns/01-elements/input/input-sizes.md new file mode 100644 index 00000000000..8a5277013a5 --- /dev/null +++ b/source/_patterns/01-elements/input/input-sizes.md @@ -0,0 +1,4 @@ +--- +title: Input sizes +order: 1 +--- diff --git a/source/_patterns/01-elements/input/input.hbs b/source/_patterns/01-elements/input/input.hbs index 6d8dc1f1841..aa9abb361ed 100644 --- a/source/_patterns/01-elements/input/input.hbs +++ b/source/_patterns/01-elements/input/input.hbs @@ -11,7 +11,8 @@ {{{ validation }}} {{#if datalist }} list="datalist{{ id }}"{{/if }} aria-labelledby="{{ id }}-label" - {{#if variant}} data-variant="{{variant}}"{{/if }}> + {{#if variant}} data-variant="{{variant}}"{{/if }} + {{#if size}} data-size="{{size}}"{{/if }}> + {{#if description }}{{{ description }}}

{{/if }} {{#if datalist }} {{#each datalistItems }} diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss index 887ba658740..b16b01c31ca 100644 --- a/source/_patterns/01-elements/input/input.scss +++ b/source/_patterns/01-elements/input/input.scss @@ -12,7 +12,7 @@ @include input--sizes(); @extend %size-m; // default - color: $input---color; + // color: $input---color; width: 100%; max-width: 100%; @@ -27,42 +27,22 @@ // ### Size variations &[data-size="xs"] { @extend %size-xs; - - & + .elm-label { - @include input-label-size(xs); - } } &[data-size="s"] { @extend %size-s; - - & + .elm-label { - @include input-label-size(s); - } } &[data-size="m"] { @extend %size-m; - - & + .elm-label { - @include input-label-size(m); - } } &[data-size="l"] { @extend %size-l; - - & + .elm-label { - @include input-label-size(l); - } } &[data-size="xl"] { @extend %size-xl; - - & + .elm-label { - @include input-label-size(xl); - } } // * TODO: to get evaluated @@ -75,6 +55,10 @@ &:focus, &:not(:placeholder-shown) { &:not(:disabled) { + + .elm-label { + @include input-label-translation(m); + } + &[data-size="xs"] + .elm-label { @include input-label-translation(xs); } @@ -145,13 +129,15 @@ display: block; pointer-events: none; transform-origin: left; - color: $db-color-cool-gray-500; + // color: $db-color-cool-gray-500; + + @include input-label-size(m); // transform: translate($db-spacing-s, -#{to-rem($pxValue: 16 + 14)}); // margin-bottom: -#{to-rem($pxValue: 18)}; & + .description { - margin-top: 0; + margin-top: -1.5rem; } } // &[placeholder] { @@ -163,7 +149,7 @@ // } &::placeholder { - color: $db-color-cool-gray-500; + //color: $db-color-cool-gray-500; opacity: 0; //font-size: to-rem($pxValue: 14); } @@ -178,11 +164,15 @@ // Validation &:required { &:valid:not([aria-invalid]) { - --formElement---borderColor: #{$db-color-green-600}; + //--formElement---borderColor: #{$db-color-green-600}; } &:invalid { &:not(:placeholder-shown) { - --formElement---borderColor: #{$db-color-red-500}; + @extend %db-bg-critical-transparent-semi; + + & + .elm-label { + color: $db-colors-critical-on-bg-enabled; + } } } } @@ -190,18 +180,94 @@ --formElement---borderColor: #{$db-color-red-500}; } - // ### Style variations - &[data-variant="semitransparent"] { - @extend %form-element-semitransparent; + // ### variations + &[data-variant="error"] { + @extend %db-bg-critical-transparent-semi; + + & + .elm-label { + color: $db-colors-critical-on-bg-enabled; + } + + & ~ .description { + @extend %db-text-critical; + display: flex; + justify-content: space-between; + max-width: 30rem; + + &::after { + content: " "; + position: relative; + display: block; + width: 20px; + height: 20px; + background-color: aquamarine; + top: -2rem; + @include icon(glyph(error-triangle), 20, "filled"); + } + } } - &[data-variant="white"] { - @extend %form-element-white; + &[data-variant="warning"] { + @extend %db-bg-warning-transparent-semi; + + & + .elm-label { + color: $db-colors-warning-on-bg-enabled; + } + + & ~ .description { + @extend %db-text-warning; + } + } + &[data-variant="success"] { + @extend %db-bg-success-transparent-semi; + + & + .elm-label { + color: $db-colors-success-on-bg-enabled; + } + + & ~ .description { + @extend %db-text-success; + } + } + &[data-variant="information"] { + @extend %db-bg-information-transparent-semi; + + & + .elm-label { + color: $db-colors-information-on-bg-enabled; + } + + & ~ .description { + @extend %db-text-information; + } + } + + &[data-size="xs"] { + & + .elm-label { + @include input-label-size(xs); + } + } + + &[data-size="s"] { + & + .elm-label { + @include input-label-size(s); + } + } + + &[data-size="m"] { + & + .elm-label { + @include input-label-size(m); + } } - &[data-variant="solid"] { - @extend %form-element-solid; + + &[data-size="l"] { + & + .elm-label { + @include input-label-size(l); + } } - &[data-variant="outline"] { - @extend %form-element-outline; + + &[data-size="xl"] { + & + .elm-label { + @include input-label-size(xl); + } } }