@viasat/beam-styles 2.26.1 → 2.28.0

package/components/panel.module.scss

@@ -6,17 +6,23 @@
 @import '@viasat/beam-tokens/components/Panel';
 
 $panelBaseClass: '#{constants.$prefix}panel';
+$panelOffsetXVar: '--#{constants.$prefix}comp-panel-offset-x';
+$panelOffsetYVar: '--#{constants.$prefix}comp-panel-offset-y';
 $panel-transition-duration: 0.4s;
-$panel-width: 20rem; // TO DO: Temporary fixed width, to be mapped to spec props later
 $panel-max-height: 90dvh;
 $panel-full-height: 100dvh;
 
+$panel-sizes: (
+  'sm': tokens.$bm-comp-panel-size-sm,
+  'md': tokens.$bm-comp-panel-size-md,
+  'lg': tokens.$bm-comp-panel-size-lg,
+  'full': 100%,
+);
+
 .#{$panelBaseClass} {
   display: flex;
   flex-direction: column;
 
-  width: $panel-width;
-
   background-color: tokens.$bm-sem-color-surface-01;
 
   &--inline {
@@ -60,10 +66,52 @@ $panel-full-height: 100dvh;
     &.#{$panelBaseClass}--position-full {
       inset: 0;
     }
+
+    &.#{$panelBaseClass}--floating {
+      border-radius: tokens.$bm-comp-panel-radius;
+
+      $floating-positions: (
+        'start': (
+          'x': ('left',),
+          'y': ('top', 'bottom'),
+        ),
+        'end': (
+          'x': ('right',),
+          'y': ('top', 'bottom'),
+        ),
+        'bottom': (
+          'x': ('left', 'right'),
+          'y': ('bottom',),
+        ),
+      );
+
+      @each $position, $axes in $floating-positions {
+        &.#{$panelBaseClass}--position-#{$position} {
+          @each $edge in map.get($axes, 'x') {
+            #{$edge}: var(#{$panelOffsetXVar}, 1rem);
+          }
+
+          @each $edge in map.get($axes, 'y') {
+            #{$edge}: var(#{$panelOffsetYVar}, 1rem);
+          }
+
+          @if $position == 'bottom' {
+            width: auto;
+          }
+        }
+      }
+
+      &.#{$panelBaseClass}--position-full {
+        inset: var(#{$panelOffsetYVar}, 1rem) var(#{$panelOffsetXVar}, 1rem);
+        width: auto;
+      }
+    }
   }
 
-  &--size-full {
-    width: 100%;
+  @each $size, $width in $panel-sizes {
+    &--size-#{$size} {
+      width: $width;
+    }
   }
 
   // Applies to both inline and overlay bottom panels:
@@ -222,6 +270,54 @@ $panel-full-height: 100dvh;
       right: 0;
     }
   }
+
+  &__resize-handle {
+    position: absolute;
+    opacity: 0;
+    z-index: 100;
+    transition: opacity 0.2s ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+
+    &:hover,
+    &:active {
+      opacity: 1;
+    }
+  }
+
+  // Inline resizable: aside fills animated wrapper width
+  &--inline#{&}--resizable {
+    width: 100%;
+  }
+}
+
+$panelResizeHandleSize: 0.75rem;
+
+$resize-handle-positions: (
+  'start':  (cursor: col-resize, size-prop: width,  stretch: inset-block,  placement: inset-inline-end,   border-side: inline-end),
+  'end':    (cursor: col-resize, size-prop: width,  stretch: inset-block,  placement: inset-inline-start, border-side: inline-start),
+  'bottom': (cursor: row-resize, size-prop: height, stretch: inset-inline, placement: inset-block-start,  border-side: block-start),
+);
+
+@each $pos, $cfg in $resize-handle-positions {
+  .#{$panelBaseClass}--resizable.#{$panelBaseClass}--position-#{$pos} {
+    .#{$panelBaseClass}__resize-handle {
+      cursor: map.get($cfg, cursor);
+      #{map.get($cfg, size-prop)}: $panelResizeHandleSize;
+      #{map.get($cfg, stretch)}: 0;
+      #{map.get($cfg, placement)}: 0;
+      border-#{map.get($cfg, border-side)}-width: tokens.$bm-sem-border-width-md;
+      border-#{map.get($cfg, border-side)}-style: solid;
+      border-#{map.get($cfg, border-side)}-color: tokens.$bm-sem-color-border-selected;
+
+      &:hover,
+      &:active {
+        border-#{map.get($cfg, border-side)}-width: tokens.$bm-sem-border-width-lg;
+      }
+    }
+  }
 }
 
 @mixin panel-slide($prop, $hidden, $visible, $duration: $panel-transition-duration) {
@@ -260,9 +356,11 @@ $panel-full-height: 100dvh;
     transition: width $panel-transition-duration ease-in;
   }
 
-  &[data-status='open'] {
-    width: $panel-width;
-    transition: width $panel-transition-duration ease-out;
+  @each $size, $width in $panel-sizes {
+    &--size-#{$size}[data-status='open'] {
+      width: $width;
+      transition: width $panel-transition-duration ease-out;
+    }
   }
 
   &[data-position='bottom'][data-status] {
@@ -281,9 +379,6 @@ $panel-full-height: 100dvh;
     transition: transform $panel-transition-duration ease-out;
   }
 
-  &--full[data-status='open'] {
-    width: 100%;
-  }
 }
 
 .#{$panelBaseClass}__inline-wrapper-content {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-styles",
-  "version": "2.26.1",
+  "version": "2.28.0",
   "description": "SCSS modules and component styles for the Beam Design System",
   "license": "MIT",
   "author": "Viasat",