Skip to content

Commit

Permalink
feat(forms): focused, placeholders, truncating, hints, & compact fiel…
Browse files Browse the repository at this point in the history
…ds (#10)

* fix text fields

* support placeholders infields

* use placeholder color light text

* add truncating

* Update lib/_forms.scss

Co-Authored-By: cmugla <celeste.glavin@wework.com>

* 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 <celeste.glavin@wework.com>

* add transition to placholder

* Add disabled state

* Update lib/_base.scss

Co-Authored-By: cmugla <celeste.glavin@wework.com>
  • Loading branch information
Celeste Glavin authored and Adam Raider committed Feb 27, 2019
1 parent 01a6cf8 commit 294ef60
Show file tree
Hide file tree
Showing 4 changed files with 317 additions and 55 deletions.
4 changes: 4 additions & 0 deletions packages/ray/lib/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ body {
box-sizing: border-box;
}

[disabled] {
cursor: not-allowed;
}

a {
text-decoration: none;
color: $color-blue50;
Expand Down
134 changes: 106 additions & 28 deletions packages/ray/lib/_forms.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
21 changes: 20 additions & 1 deletion packages/ray/lib/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -58,14 +58,33 @@ $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;

$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,
Expand Down
Loading

0 comments on commit 294ef60

Please sign in to comment.