Skip to content

Commit

Permalink
OWC-267 - Add tooltip animation for form-element.
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattgoldspink
mattgoldspink committed Jul 10, 2019
1 parent 51c992b commit d182284
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 45 deletions.
67 changes: 37 additions & 30 deletions ui/components/form-element/animate/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,53 +36,60 @@ input[placeholder]::placeholder {
position: absolute;
width: 100%;
#{$right}: 0;
pointer-events: none;
}

label {
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
white-space: nowrap;
font-weight: $form-label-pre-animate-font-weight;
font-size: $form-label-pre-animate-font-size;
letter-spacing: 1px;
color: $color-input-font-kashmiri-blue;
}

input:focus~label,
input.nds-has-value:not(:focus):valid~label,
input[cloned='dirty']+label,
input.nds-input[cloned='dirty']~label,
input.nds-is-dirty.nds-not-empty~label,
input.nds-is-dirty.nds-not-empty+label,
select:focus~label,
select.nds-has-value:not(:focus):valid~label,
select[cloned='dirty']+label,
select.nds-select[cloned='dirty']~label,
textarea:focus~label,
textarea.nds-has-value:not(:focus):valid~label,
textarea.nds-not-empty.nds-is-dirty~label,
textarea[cloned="dirty"]+label,
input.ng-dirty.ng-not-empty~label,
input.ng-dirty.ng-not-empty+label,
input.nds-input.ng-dirty.ng-not-empty.ng-touched[vlc-nds-lookup-control]~label,
input.ng-touched.ng-not-empty.td-input+label
select.ng-dirty.ng-not-empty~label,
select.ng-dirty.ng-not-empty+label,
select.nds-select.ng-dirty.ng-not-empty.ng-touched[vlc-nds-lookup-control]~label,
textarea.ng-not-empty.ng-dirty~label
input:focus~.nds-form-element__label,
input.nds-has-value:not(:focus):valid~.nds-form-element__label,
input[cloned='dirty']+.nds-form-element__label,
input.nds-input[cloned='dirty']~.nds-form-element__label,
input.nds-is-dirty.nds-not-empty~.nds-form-element__label,
input.nds-is-dirty.nds-not-empty+.nds-form-element__label,
select:focus~.nds-form-element__label,
select.nds-has-value:not(:focus):valid~.nds-form-element__label,
select[cloned='dirty']+.nds-form-element__label,
select.nds-select[cloned='dirty']~.nds-form-element__label,
textarea:focus~.nds-form-element__label,
textarea.nds-has-value:not(:focus):valid~.nds-form-element__label,
textarea.nds-not-empty.nds-is-dirty~.nds-form-element__label,
textarea[cloned="dirty"]+.nds-form-element__label,
input.ng-dirty.ng-not-empty~.nds-form-element__label,
input.ng-dirty.ng-not-empty+.nds-form-element__label,
input.nds-input.ng-dirty.ng-not-empty.ng-touched[vlc-nds-lookup-control]~.nds-form-element__label,
input.ng-touched.ng-not-empty.td-input+.nds-form-element__label
select.ng-dirty.ng-not-empty~.nds-form-element__label,
select.ng-dirty.ng-not-empty+.nds-form-element__label,
select.nds-select.ng-dirty.ng-not-empty.ng-touched[vlc-nds-lookup-control]~.nds-form-element__label,
textarea.ng-not-empty.ng-dirty~.nds-form-element__label
{
transform: translate3d(0, -1.2rem, 0);
transition-duration: 300ms;
z-index: 0;
font-size: $form-label-font-size;
font-weight: $form-label-font-weight;
top: 0.4rem;
#{$left}: 0;

label,
&label {
font-size: $form-label-font-size;
font-weight: $form-label-font-weight;
}
}

input:focus~label,
input:focus~label .nds-required,
select:focus~label,
select:focus~label .nds-required,
textarea:focus~label {
input:focus~.nds-form-element__label,
input:focus~.nds-form-element__label .nds-required,
select:focus~.nds-form-element__label,
select:focus~.nds-form-element__label .nds-required,
textarea:focus~.nds-form-element__label {
color: $color-border-input-active;
}

Expand Down
32 changes: 17 additions & 15 deletions ui/components/form-element/animate/form-element.animate.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,22 +175,24 @@ storiesOf(`${base}`, module)
.add('Field Level Help (examples)', () => {
return withExample(`<div class="demo-only" style="padding-top: 5rem;">
<div class="nds-form-element">
<label class="nds-form-element__label nds-align-middle" for="form-help">Text Label</label>
<div class="nds-form-element__icon">
<button aria-describedby="help" class="nds-button nds-button_icon">
<svg class="nds-icon nds-icon_x-small nds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
</svg>
<span class="nds-assistive-text">Help</span>
</button>
</div>
<div class="nds-form-element__control">
<div class="nds-form-element__control nds-form-element__control-animated-label">
<input type="text" class="nds-input" id="form-help" placeholder="Field Level Help">
</div>
</div>
<div class="nds-popover nds-popover_tooltip nds-nubbin_bottom-left" id="help" role="tooltip" style="position: absolute; top: 15px; left: 72px; margin-left: -1rem; width: 20rem;">
<div class="nds-popover__body nds-text-longform">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facere eligendi reiciendis obcaecati.</p>
<div class="nds-form-element__label nds-align-middle" for="form-help">
<label>Text Label</label>
<div class="nds-form-element__icon">
<button aria-describedby="help" class="nds-button nds-button_icon">
<svg class="nds-icon nds-icon_x-small nds-icon-text-default" aria-hidden="true">
<use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
</svg>
<span class="nds-assistive-text">Help</span>
</button>
<div class="nds-popover nds-popover_tooltip nds-nubbin_bottom-left" id="help" role="tooltip" style="position: absolute; top: -41px; left: 1px; margin-left: -1rem; width: 20rem;">
<div class="nds-popover__body nds-text-longform">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facere eligendi reiciendis obcaecati.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>`);
Expand Down

0 comments on commit d182284

Please sign in to comment.