Skip to content

Commit

Permalink
refactor(helper-line): make it possible to show & hide it with a smoo…
Browse files Browse the repository at this point in the history
…th animation
  • Loading branch information
Kiarokh committed Nov 2, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 4ef8a00 commit ab87615
Showing 3 changed files with 69 additions and 7 deletions.
42 changes: 42 additions & 0 deletions src/components/helper-line/examples/helper-line-animation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Component, State, h } from '@stencil/core';

/**
* Animating the appearance of the helper line
*
* It is possible to hide the helper line component with a
* smooth animation of its height.
* Simply add the `class="hide"` to the component,
* and it will take care fo the animations.
*/
@Component({
tag: 'limel-example-helper-line-animation',
shadow: true,
})
export class HelperLineAnimationExample {
@State()
private hide: boolean = false;

public render() {
const longHelperText =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';

return [
<limel-checkbox
label="Hide helper line"
onChange={this.toggleMode}
checked={this.hide}
/>,
<limel-helper-line
class={{ hide: this.hide }}
helperText={longHelperText}
length={10}
maxLength={20}
helperTextId="tf-helper-text"
/>,
];
}

private toggleMode = () => {
this.hide = !this.hide;
};
}
27 changes: 22 additions & 5 deletions src/components/helper-line/helper-line.scss
Original file line number Diff line number Diff line change
@@ -2,12 +2,8 @@
transition: opacity 0.2s ease;

box-sizing: border-box;
display: grid;

display: flex;
justify-content: space-between;
gap: 0.75rem;

// padding: 0.25rem 1rem; // TODO: use this padding, when helper line is opened in portal
padding: 0.125rem 1rem 0 1rem;
min-width: 0; // prevents overflowing, if component is placed in flex containers

@@ -22,6 +18,13 @@
color: rgb(var(--contrast-1200));
}

div {
display: flex;
justify-content: space-between;
gap: 0.75rem;
overflow: hidden;
}

:host(limel-helper-line.invalid) {
.helper-text {
color: var(--mdc-theme-error);
@@ -32,3 +35,17 @@
flex-shrink: 0;
margin-left: auto;
}

// This animates height of the helper line, from `0` to `auto`.
// To get this animation effect, the consumer component should
// add `hide` classed accordingly.
:host(limel-helper-line) {
// All below vars are for internal use only!
transition: grid-template-rows 0.2s cubic-bezier(1, 0.09, 0, 0.89);
grid-template-rows: 1fr;
}

:host(limel-helper-line.hide) {
grid-template-rows: 0fr;
}
// End: animating height
7 changes: 5 additions & 2 deletions src/components/helper-line/helper-line.tsx
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ import { Component, Host, Prop, h } from '@stencil/core';
* @exampleComponent limel-example-helper-line-long-text-no-counter
* @exampleComponent limel-example-helper-line-character-counter
* @exampleComponent limel-example-helper-line-empty
* @exampleComponent limel-example-helper-line-animation
* @private
*/
@Component({
@@ -68,8 +69,10 @@ export class HelperLine {
style={!this.hasContent() ? { display: 'none' } : {}}
aria-hidden={!this.hasContent()}
>
{this.renderHelperText()}
{this.renderCharacterCounter()}
<div>
{this.renderHelperText()}
{this.renderCharacterCounter()}
</div>
</Host>
);
}

0 comments on commit ab87615

Please sign in to comment.