chore(mixins): add a mixin for making resizable containers in examples

Author: Kiarokh

src/components/action-bar/examples/_application.scss

@@ -1,25 +1,19 @@
+@use '../../../style/mixins';
+
 .application {
     position: relative;
-
     overflow: hidden;
     height: 20rem;
-
     border: 1px solid rgb(var(--contrast-500));
     border-radius: 0.5rem;
     background-color: rgb(var(--contrast-400));
 
     &.is-resizable {
-        resize: horizontal;
-        max-width: 100%;
-        min-width: 10rem;
-
-        &::after {
-            content: 'Resize me ⤵';
-            font-size: 0.75rem;
-            position: absolute;
-            right: 0.25rem;
-            bottom: 0.25rem;
-        }
+        @include mixins.is-resizable(
+            $direction: horizontal,
+            $min-width: 10rem,
+            $min-height: 5rem
+        );
     }
 
     &.has-floating-action-bar {

src/components/ai-avatar/examples/ai-avatar-basic.scss

@@ -1,36 +1,18 @@
+@use '../../../style/mixins';
+
 :host {
     --example-controls-max-columns-width: 100%;
 }
 
 .avatar-container {
-    transition: background-color 0.3s ease;
-
-    display: block;
-    position: relative;
-    resize: horizontal;
-    overflow: auto;
-
-    box-sizing: border-box;
-
-    min-width: 3rem;
-    max-width: 100%;
+    @include mixins.is-resizable(
+        $direction: horizontal,
 
-    min-height: 2rem;
-    height: auto;
-    max-height: 20rem;
-
-    padding: 1rem 0.25rem 3rem 0.25rem;
-    border: 0.125rem dashed rgb(var(--contrast-500));
-
-    border-radius: 0.5rem;
-
-    &:after {
-        content: 'Resize me ⤵';
-        font-size: 0.75rem;
-        position: absolute;
-        right: 0.25rem;
-        bottom: 0.25rem;
-    }
+        $min-width: 3rem,
+        $height: auto,
+        $min-height: 2rem
+    );
+    transition: background-color 0.3s ease;
 }
 
 limel-ai-avatar {

src/components/card/examples/card-resizable-container.scss

@@ -1,31 +1,14 @@
+@use '../../../style/mixins';
+
 :host {
+    @include mixins.is-resizable(
+        $direction: both,
+        $min-width: 10rem,
+        $width: 20rem,
+        $min-height: 5rem,
+        $height: auto
+    );
     display: block;
-    position: relative;
-    resize: both;
-    overflow: auto;
-
-    box-sizing: border-box;
-
-    min-width: 10rem;
-    width: 20rem;
-    max-width: 100%;
-
-    min-height: 5rem;
-    height: auto;
-    max-height: 50rem;
-
-    padding: 1rem 1rem 3rem 1rem;
-    border: 0.125rem dashed rgb(var(--contrast-500));
-
-    border-radius: 0.5rem;
-
-    &::after {
-        content: 'Resize me ⤵';
-        font-size: 0.75rem;
-        position: absolute;
-        right: 0.25rem;
-        bottom: 0.25rem;
-    }
 }
 
 :host(limel-example-card-orientation),

src/components/chart/examples/chart-resizable-container.scss

@@ -1,38 +1,19 @@
+@use '../../../style/mixins';
+
 * {
     box-sizing: border-box;
 }
 
 :host {
-    position: relative;
     display: flex;
     flex-direction: column;
     gap: 1rem;
 
-    resize: both;
-    overflow: auto;
-
-    box-sizing: border-box;
-
-    min-width: 10rem;
-    width: 100%;
-    max-width: 100%;
-
-    min-height: 5rem;
-    height: 100%;
-    max-height: 50rem;
-
-    padding: 1rem 1rem 3rem 1rem;
-    border: 0.125rem dashed rgb(var(--contrast-500));
-
-    border-radius: 0.5rem;
-
-    &::after {
-        content: 'Resize me ⤵';
-        font-size: 0.75rem;
-        position: absolute;
-        right: 0.25rem;
-        bottom: 0.25rem;
-    }
+    @include mixins.is-resizable(
+        $direction: both,
+        $min-width: 10rem,
+        $min-height: 5rem
+    );
 }
 
 :host(.large) {

src/components/info-tile/examples/info-tile.scss

@@ -1,18 +1,13 @@
-div {
-    resize: both;
-    overflow: auto;
-
-    box-sizing: border-box;
-    position: relative;
-
-    min-width: 8rem;
-    width: 12rem;
-    max-width: 40rem;
+@use '../../../style/mixins';
 
-    min-height: 8rem;
-    height: 12rem;
-    max-height: 40rem;
-
-    padding: 1rem;
-    border: 0.125rem dashed rgb(var(--contrast-500));
+div {
+    @include mixins.is-resizable(
+        $direction: both,
+        $width: 12rem,
+        $min-width: 8rem,
+        $max-width: 40rem,
+        $height: 12rem,
+        $min-height: 8rem,
+        $max-height: 40rem
+    );
 }

src/components/menu/examples/menu-surface-width.scss

@@ -1,3 +1,5 @@
+@use '../../../style/mixins';
+
 :host(limel-example-menu-surface-width) {
     box-sizing: border-box;
     display: flex;
@@ -6,21 +8,12 @@
 }
 
 .is-resizable {
-    position: relative;
-    resize: horizontal;
-    overflow: auto;
-    width: clamp(10rem, 30rem, 100%);
-
-    padding: 0.5rem 0.5rem 3rem 0.5rem;
-    border: 1px solid rgb(var(--contrast-500));
-
-    &::after {
-        content: 'Resize me ⤵';
-        font-size: 0.75rem;
-        position: absolute;
-        right: 0.25rem;
-        bottom: 0.25rem;
-    }
+    @include mixins.is-resizable(
+        $direction: horizontal,
+        $min-width: 10rem,
+        $width: clamp(10rem, 30rem, 100%),
+        $min-height: 5rem
+    );
 }
 
 limel-menu {

src/components/text-editor/examples/text-editor-size.scss

@@ -1,23 +1,12 @@
+@use '../../../style/mixins';
+
 :host(limel-example-text-editor-size) {
-    box-sizing: border-box;
-    position: relative;
+    @include mixins.is-resizable(
+        $direction: both,
+        $min-width: 10rem,
+        $min-height: 5rem
+    );
     display: block;
-
-    overflow: auto;
-    resize: both;
-    max-width: 100%;
-
-    border: 1px dashed rgb(var(--contrast-700));
-    padding: 0.75rem;
-    padding-bottom: 2rem;
-
-    &::after {
-        content: 'Resize me ⤵';
-        font-size: 0.75rem;
-        position: absolute;
-        right: 0.25rem;
-        bottom: 0.25rem;
-    }
 }
 
 limel-text-editor {

src/style/mixins.scss

@@ -460,6 +460,51 @@ $clickable-normal-state-transitions: (
     background-size: 0.5rem;
 }
 
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+@mixin is-resizable(
+    $direction: both,
+    // can be `horizontal`, `vertical`, or `both`
+    $width: 100%,
+    $min-width: 10rem,
+    $max-width: 100%,
+    $height: 100%,
+    $min-height: 5rem,
+    $max-height: 50rem
+) {
+    box-sizing: border-box;
+    position: relative;
+
+    border: 1px dashed rgb(var(--contrast-700));
+    padding: 0.75rem;
+    padding-bottom: 2rem;
+
+    resize: $direction;
+    overflow: auto;
+
+    min-width: $min-width;
+    width: $width;
+    max-width: $max-width;
+
+    min-height: $min-height;
+    height: $height;
+    max-height: $max-height;
+
+    border-radius: 0.5rem;
+
+    &::after {
+        content: 'Resize me ⤵';
+        font-size: 0.75rem;
+        position: absolute;
+        right: 0.25rem;
+        bottom: 0.25rem;
+    }
+}
+
 // Hide element visually while keeping it accessible to assistive technologies
 // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
 // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/