refactor(helper-line): make it possible to show & hide it with a smoo…

…th animation

src/components/helper-line/examples/helper-line-animation.tsx

@@ -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;
+    };
+}

src/components/helper-line/helper-line.scss

@@ -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

src/components/helper-line/helper-line.tsx

@@ -17,6 +17,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({
@@ -69,8 +70,10 @@ export class HelperLine {
                 style={!this.hasContent() ? { display: 'none' } : {}}
                 aria-hidden={!this.hasContent()}
             >
-                {this.renderHelperText()}
-                {this.renderCharacterCounter()}
+                <div>
+                    {this.renderHelperText()}
+                    {this.renderCharacterCounter()}
+                </div>
             </Host>
         );
     }