From 294ef60ff87c04160d6b6bac9c2788ed64a19e73 Mon Sep 17 00:00:00 2001 From: Celeste Glavin Date: Fri, 1 Feb 2019 15:55:24 -0500 Subject: [PATCH] feat(forms): focused, placeholders, truncating, hints, & compact fields (#10) * fix text fields * support placeholders infields * use placeholder color light text * add truncating * Update lib/_forms.scss Co-Authored-By: cmugla * ellipsis stuff doesn't really work but its a little bit nicer * add IE prefix for placeholder-shown * remove prefix for IE, breaks everything * Add compact fields * match spec spacing: * add hint states * add border colors * fix variable refs and spacing issues with hints * reference 1rem in field-height calcs * oop misread the spec, correct label focused spacing * make --active class the true fallback * Update lib/_forms.scss Co-Authored-By: cmugla * add transition to placholder * Add disabled state * Update lib/_base.scss Co-Authored-By: cmugla --- packages/ray/lib/_base.scss | 4 + packages/ray/lib/_forms.scss | 134 ++++++++++++---- packages/ray/lib/_variables.scss | 21 ++- packages/ray/stories/forms.stories.js | 213 ++++++++++++++++++++++---- 4 files changed, 317 insertions(+), 55 deletions(-) diff --git a/packages/ray/lib/_base.scss b/packages/ray/lib/_base.scss index aa54a702..da71cea9 100644 --- a/packages/ray/lib/_base.scss +++ b/packages/ray/lib/_base.scss @@ -22,6 +22,10 @@ body { box-sizing: border-box; } +[disabled] { + cursor: not-allowed; +} + a { text-decoration: none; color: $color-blue50; diff --git a/packages/ray/lib/_forms.scss b/packages/ray/lib/_forms.scss index 6bfc2108..53ab919e 100644 --- a/packages/ray/lib/_forms.scss +++ b/packages/ray/lib/_forms.scss @@ -1,70 +1,148 @@ -.FormControl { - border: 1px solid $color-gray35; - background-color: $color-white; - border-radius: $border-radius; - position: relative; - height: $field-height; - +.#{$prefix}fieldWrapper { &:not(:last-child) { margin-bottom: 1.5rem; } +} - &--active { - border-color: $color-blue50; - } +.#{$prefix}field { + border: $field-border-width solid $color-gray35; + background-color: $color-white; + border-radius: $border-radius; + position: relative; + height: $field-height; label, &__label { font-family: $font-stack-mono; - font-size: 16px; - line-height: 24px; + font-size: $field-label-size; + line-height: 1; font-weight: 400; display: block; - text-transform: uppercase; position: absolute; - left: 1rem; - top: 15px; - display: flex; - align-items: center; + left: $field-h-spacing; + top: $field-v-spacing; color: $color-text-medium; transition: all 0.125s ease; pointer-events: none; + + // handle truncating label + width: calc(100% - (2 * #{$field-h-spacing})); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } input, &__input { font-family: inherit; - font-size: 1rem; line-height: 1; - height: 56px; - display: block; - background-color: transparent; - padding: 1rem 1rem 0; width: 100%; height: 100%; + font-size: $field-label-size; + display: block; + background-color: transparent; + padding: $field-v-spacing $field-h-spacing 0; outline: 0; border: 0; &:focus, &:not(:placeholder-shown) { - border-color: $color-blue50; - + label { - font-size: 12px; - top: 4px; + font-size: $field-label-size-focus; + top: $field-h-spacing - $field-border-width; } } &::placeholder { + transition: all 0.125s ease; + } + + &:not(:focus)::placeholder { color: transparent; } + + &:focus::placeholder, [placeholder] { + text-overflow: ellipsis; + color: $color-text-light; + } + } + + [placeholder] { + text-overflow: ellipsis; + } + + // :focus-within is only supported in modern browsers (https://caniuse.com/#search=focus-within), --active should be used as a backup + &--active, &:focus-within { + border-color: $color-blue50; + + label { + font-size: $field-label-size-focus; + top: $field-h-spacing - $field-border-width; + } + + input::placeholder { + color: $color-text-light !important; + } + } + + &--disabled { + border-color: $color-gray35; + } + + &--success { + border-color: $color-green; + } + + &--error { + border-color: $color-red; } &__hint { - @extend .p4; display: block; - color: $color-text-light; + color: $color-text-medium; font-weight: 400; + font-size: $field-label-size-focus; margin-top: 0.25rem; + margin-left: $field-h-spacing; + line-height: 1; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + &--success { + color: $color-green; + } + + &--error { + color: $color-red; + } + } + + [disabled] { + background-color: $color-gray30; + color: $color-black20; + } +} + +.#{$prefix}field--compact { + height: $field-height-compact; + + label, + &--label { + top: $field-v-spacing-compact; + transition: none; + } + + input, + &--input { + padding-top: 0; + + &:focus, + &:not(:placeholder-shown) { + + label { + opacity: 0; + } + } } } diff --git a/packages/ray/lib/_variables.scss b/packages/ray/lib/_variables.scss index 3b18e291..a5175eb6 100644 --- a/packages/ray/lib/_variables.scss +++ b/packages/ray/lib/_variables.scss @@ -58,6 +58,18 @@ $color-red20: lighten($color-red, 30%) !default; $color-red10: lighten($color-red, 40%) !default; $color-red01: lighten($color-red, 49%) !default; +$color-green: #00cc00; +$color-green90: darken($color-green, 40%) !default; +$color-green80: darken($color-green, 30%) !default; +$color-green70: darken($color-green, 20%) !default; +$color-green60: darken($color-green, 10%) !default; +$color-green50: $color-green !default; +$color-green40: lighten($color-green, 10%) !default; +$color-green30: lighten($color-green, 20%) !default; +$color-green20: lighten($color-green, 30%) !default; +$color-green10: lighten($color-green, 40%) !default; +$color-green01: lighten($color-green, 49%) !default; + $color-text-light: #b0b0b0; $color-text-medium: #666666; $color-text-dark: #000000; @@ -65,7 +77,14 @@ $color-text-dark: #000000; $color-primary: $color-blue50 !default; $color-secondary: $color-yellow50 !default; -$field-height: 54px !default; +$field-v-spacing: 20px; +$field-v-spacing-compact: 12px; +$field-h-spacing: 12px; +$field-label-size: 1rem; +$field-label-size-focus: 12px; +$field-border-width: 1px; +$field-height: calc((#{$field-v-spacing} * 2) + 1rem); +$field-height-compact: calc((#{$field-v-spacing-compact} * 2) + 1rem); $grid-breakpoints: ( xs: 0, diff --git a/packages/ray/stories/forms.stories.js b/packages/ray/stories/forms.stories.js index 161642b2..6e603aae 100644 --- a/packages/ray/stories/forms.stories.js +++ b/packages/ray/stories/forms.stories.js @@ -4,18 +4,34 @@ import { storiesOf } from '@storybook/react'; import withPadding from './util/withPadding'; storiesOf('Forms', module) - .addWithJSX('FormControl', () => + .addWithJSX('Text field', () => withPadding( -
- +
+
) ) - .addWithJSX('FormControl FormControl--active', () => + .addWithJSX('Text field, active', () => withPadding( -
- +
+ + +
+ ) + ) + .addWithJSX('Text field, disabled', () => + withPadding( +
+ + +
+ ) + ) + .addWithJSX('Text field, active disabled', () => + withPadding( +
+
) @@ -26,28 +42,173 @@ storiesOf('Forms', module)

Sign up

-
- - -
-
- - -
-
- - +
+
+ + +
+
+
+
+ + +
+
We want your emails
+
+
+
+ + +
+
+
+
+ + +
- + +
+
+
+ ) + ) + .addWithJSX('Hint states', () => + withPadding( +
+
+
+
+
+ + +
+
Nuetral hint
+
+
+
+ + +
+
Success hint
+
+
+
+ + +
+
Error hint
+
+
+
+
+ ) + ) + .addWithJSX('Text field - compact', () => + withPadding( +
+ + +
+ ) + ) + .addWithJSX('Example form - compact', () => + withPadding( +
+
+
+

Sign up

+
+
+ + +
+
+
+
+ + +
+
We want your emails
+
+
+
+ + +
+
+
+
+ + +
+
+ + +
+
+
+ ) + ) + .addWithJSX('Hint states - compact', () => + withPadding( +
+
+
+
+
+ + +
+
Nuetral hint
+
+
+
+ + +
+
Success hint
+
+
+
+ + +
+
Error hint
+