Skip to content

Commit

Permalink
refactor(form-feedback): change to form-info
Browse files Browse the repository at this point in the history 
closes #157
  • Loading branch information
@hjalmers
hjalmers committed Aug 12, 2021
1 parent df058b6 commit df1ae98
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 90 deletions.
10 changes: 7 additions & 3 deletions packages/chlorophyll/src/scss/components/input/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ form:not(.horizontal) >,
.form:not(.horizontal) > {
* {
//display: flex !important;
margin-bottom: 1rem;
//@include common.margin-bottom(4);
}

.form-control,
Expand All @@ -52,15 +52,19 @@ form:not(.horizontal) >,

// field
.form-field {
@include common.margin-bottom(6);
display: flex;
flex-direction: column;
position: relative;
width: fit-content;
}

.form-field > input {
@include common.margin-bottom(3);
}

// label
form label:not(.form-control),
.form label:not(.form-control) {
.form-field label:not(.form-control) {
@include common.font-weight('medium');
@include common.margin-bottom(3, true);
display: block !important;
Expand Down
104 changes: 36 additions & 68 deletions packages/chlorophyll/src/scss/components/input/_validation.scss
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,9 @@
@use '../../tokens';
@use '../../common';
@use 'sass:map';

.form-feedback {
@include common.font-size('s');
color: map-get(tokens.$grey, 3);
display: block;
height: 0;
max-width: fit-content;
min-height: 0;
min-width: 100%;
opacity: 0;
transform: translate3d(0, 4px, 0);
transition: opacity 200ms ease-in-out;
@mixin add-feedback-element() {
transition: 200ms ease-in-out;

&::before {
background: transparent;
Expand All @@ -21,78 +13,54 @@
display: block;
height: 4px;
position: absolute;
transform: translate3d(0, -8px, 0);
transition: 300ms ease-out;
transform: translate3d(0, -12px, 0);
transition: 300ms ease-in-out;
width: 100%;
}
}

// POC only show invalid feedback on hover, focus or when explicitly set using class
input:focus:invalid,
.form-field:hover input:invalid,
.is-invalid {
~ .form-feedback {
color: map-get(tokens.$intent-colors, 'danger');
@mixin add-feedback($color) {
color: $color;
//height: auto;
//min-height: 1rem;
opacity: 1;

&::before {
background: map-get(tokens.$intent-colors, 'danger');
}
&::before {
background: $color;
clip-path: inset(1px 0 0 0);
}
}

// POC only show valid feedback on hover, focus or when explicitly set using class
input:focus,
.form-field:hover input,
.is-valid {
&:valid ~ .form-feedback {
color: map-get(tokens.$intent-colors, 'success');

&::before {
background: map-get(tokens.$intent-colors, 'success');
}
}

// form info
.form-info {
@include common.font-size('s');
color: map-get(tokens.$grey, 3);
display: block;
max-width: fit-content;
min-width: 100%;
}

input:focus:invalid,
.form-field:hover input:invalid,
.is-invalid,
input:focus,
.form-field:hover input,
.is-valid {
~ .form-feedback {
@include common.padding-bottom(2);
background: tokens.$white;
box-shadow: 0 4px 8px 0 tokens.$white;
height: auto;
opacity: 1;
position: absolute;
top: 100%;
z-index: 1;
}
label + .form-info {
@include common.margin-bottom(3);
}

~ .form-feedback::before {
clip-path: inset(1px 0 0 0);
}
input + .form-info {
@include add-feedback-element();
}

// extra
.form-field input:focus,
.is-valid,
.is-invalid {
~ .form-feedback {
background: transparent;
box-shadow: none !important;
padding-bottom: 0 !important;
position: relative !important;
}

.was-validated input + .form-info {
opacity: 0;
}

.was-validated input:not(.is-invalid):valid + .form-info,
.is-valid ~ .form-info {
@include add-feedback(map.get(tokens.$intent-colors, 'success'));
}

.is-invalid,
.is-valid {
~ .form-feedback {
height: auto;
min-height: 1rem;
opacity: 1;
}
.was-validated input:not(.is-valid):invalid + .form-info,
.is-invalid ~ .form-info {
@include add-feedback(map.get(tokens.$intent-colors, 'danger'));
}
91 changes: 72 additions & 19 deletions packages/chlorophyll/src/stories/forms/validation.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,63 +4,64 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'

# Form validation

Lorem ipsum input field validation
Form validation in Green Chlorophyll relies on `:valid` and `:invalid` state of inputs scoped using the `.was-validated` class. The class `.was-validated` is preferably added to the form element once the form has been submitted or when validations should be displayed. Without it, `:valid` and `:invalid` and won't have any effect and no feedback will be displayed.
It's also possible to add either `.is-valid` or `.is-invalid` directly to an inputs to give feedback before the form has been submitted or to override the actual state.

## Default form
## Default form with validation
<Canvas>
<form autocomplete="off">
<form autocomplete="off" class="was-validated">
<div class="form-field">
<label for="input">Input label</label>
<input id="input" type="text" required/>
<span class="form-feedback">Field is required!</span>
<span class="form-info">Field is required!</span>
</div>
<div class="form-field">
<label for="inputLong">Input label</label>
<input id="inputLong" type="text" required/>
<span class="form-feedback">Field is required! Very long error message, lorem ipsum dolar sit amet.</span>
<span class="form-info">Field is required! Very long error message, lorem ipsum dolar sit amet.</span>
</div>
<div class="form-field">
<label for="numberInput">Input label</label>
<input id="numberInput" type="number" min="1" max="5" required/>
<span class="form-feedback">Invalid number!</span>
<span class="form-info">Invalid number!</span>
</div>
</form>
</Canvas>

## Horizontal form
## Horizontal form with validation
<Canvas>
<form class="horizontal" autocomplete="off">
<form class="horizontal was-validated" autocomplete="off">
<div class="form-field">
<label for="inputHorizontal">Input label</label>
<input id="inputHorizontal" type="text" required/>
<span class="form-feedback">Field is required!</span>
<span class="form-info">Field is required!</span>
</div>
<div class="form-field">
<label for="inputHorizontalLong">Input label</label>
<input id="inputHorizontalLong" type="text" required/>
<span class="form-feedback">Field is required! Very long error message, lorem ipsum dolar sit amet.</span>
<span class="form-info">Field is required! Very long error message, lorem ipsum dolar sit amet.</span>
</div>
<div class="form-field">
<label for="numberInputHorizontal">Input label</label>
<input id="numberInputHorizontal" type="number" min="1" max="5"/>
<span class="form-feedback">Invalid number!</span>
<input id="numberInputHorizontal" type="number" min="1" max="5" required/>
<span class="form-info">Invalid number!</span>
</div>
</form>
</Canvas>

## No feedback content
## Validation without content

<Canvas>
<form autocomplete="off">
<form autocomplete="off" class="was-validated">
<div class="form-field">
<label for="inputNoFeedback">Input label</label>
<input id="inputNoFeedback" type="text" required placeholder="Invalid"/>
<span class="form-feedback"></span>
<span class="form-info"></span>
</div>
<div class="form-field">
<label for="inputNoFeedback">Input label</label>
<label for="inputNoinfo">Input label</label>
<input id="inputNoFeedback" type="text" placeholder="Valid"/>
<span class="form-feedback"></span>
<span class="form-info"></span>
</div>
</form>
</Canvas>
Expand All @@ -73,12 +74,64 @@ Use `.is-valid` and/or `.is-invalid` to explicitly indicate input validity (usua
<div class="form-field">
<label for="inputValid">Input label</label>
<input id="inputValid" type="text" class="is-valid" value="Some value" required/>
<span class="form-feedback">Valid input</span>
<span class="form-info">Valid input</span>
</div>
<div class="form-field">
<label for="inputInvalid">Input label</label>
<input id="inputInvalid" type="text" class="is-invalid" value="Valid but still not"/>
<span class="form-feedback">Invalid input</span>
<span class="form-info">Invalid input</span>
</div>
</form>
</Canvas>

## Validation states

Using `.was-validated`, form inputs can either be marked as valid or invalid depending on the input state (`:valid` or `:invalid`).

<Canvas>
<form autocomplete="off" class="was-validated" novalidate>
<div class="form-field">
<label for="inputValid">Input label</label>
<span class="form-info">Lorem ipsum description</span>
<input id="inputValid" type="text" value="Some value" required/>
<span class="form-info">Neutral</span>
</div>
<div class="form-field">
<label for="inputValid">Input label</label>
<span class="form-info">Lorem ipsum description</span>
<input id="inputValid" type="text" value="Some value" required/>
<span class="form-info">Valid</span>
</div>
<div class="form-field">
<label for="inputValid">Input label</label>
<span class="form-info">Lorem ipsum description</span>
<input id="inputValid" type="text" required/>
<span class="form-info">Invalid</span>
</div>
</form>
</Canvas>

Using `.is-valid` and/or `.is-invalid`, form inputs can either be marked as valid, invalid or neutral depending on which class that has been applied to the input. If no class has been applied but the `.form-info` element is present, it's considered to be neutral i.e. just plain info related to the input.

<Canvas>
<form autocomplete="off" novalidate>
<div class="form-field">
<label for="inputInvalid">Input label</label>
<span class="form-info">Lorem ipsum very long description of input and what should be entered</span>
<input id="inputInvalid" type="text" />
<span class="form-info">Neutral</span>
</div>
<div class="form-field">
<label for="inputInvalid">Input label</label>
<span class="form-info">Lorem ipsum very long description of input and what should be entered</span>
<input id="inputInvalid" type="text" class="is-valid"/>
<span class="form-info">Valid</span>
</div>
<div class="form-field">
<label for="inputInvalid">Input label</label>
<span class="form-info">Lorem ipsum very long description of input and what should be entered</span>
<input id="inputInvalid" type="text" class="is-invalid"/>
<span class="form-info">Invalid</span>
</div>
</form>
</Canvas>

0 comments on commit df1ae98

Please sign in to comment.