ecabs-components 2.0.0-alpha.11 → 2.0.0-alpha.12

package/README.md

@@ -25,6 +25,9 @@ To get more help on the Angular CLI use `ng help` or go check out the [Angular C
 
 ## Version History
 
+- **v2.0.0-alpha.12**: Stack button groups and stretch their buttons only on phones (below 576px) instead of below 768px, so buttons stay side by side at their own size on tablets.
+  - Stacked buttons now fill the group on every screen, including dialogs, and groups wrap onto a second row when they don't fit. Adds an `x-small` case to `media-q`.
+  - A group placed directly inside another group keeps buttons together, such as Cancel and Save beside a Delete: it sizes to its buttons beside other items and fills the row when alone.
 - **v2.0.0-alpha.11**: Switch button groups and table padding to the desktop layout at 768px instead of 769px, and share the breakpoints: apps can `@use "ecabs-components/breakpoints"` for `$breakpoints` and `media-q`, and import `PHONE_MEDIA_QUERY`.
 - **v2.0.0-alpha.10**: Sync v1.1.96–v1.1.98 from `develop`: content beside and below `ecabs-segment`'s title (`ecabsSegmentHeaderEnd`, `ecabsSegmentHeaderBottom`), the `compact` size, `.card__header-action`, 12px `ecabs-table` panel padding up to 768px wide, and the phone paginator layout (two full-width rows up to 767px wide: page size on top, the item range with previous and next below).
   - On this line the card and table styles use the `@use`/`@forward` module system, and the Tailwind utilities the segment template uses are compiled by Tailwind v4.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ecabs-components",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.12",
   "peerDependencies": {
     "@angular/animations": "^19.2.25",
     "@angular/common": "^19.2.25",

package/src/assets/styles/material/overrides/_dialog.scss

@@ -1,5 +1,6 @@
 @use "../../scss/modules/index";
 @use "../../scss/utilities/functions";
+@use "../../scss/utilities/mixins";
 
 .mat-mdc-dialog-container {
   .mdc-dialog__container {
@@ -14,6 +15,12 @@
     .mdc-dialog__actions {
       padding: functions.calc-rem(0 24px 24px);
       justify-content: end !important;
+
+      @include mixins.media-q(x-small) {
+        &.btn__group {
+          align-items: stretch;
+        }
+      }
     }
 
     .mdc-dialog__content {

package/src/assets/styles/scss/modules/_button.scss

@@ -204,14 +204,28 @@
   /* #Group */
   @include mixins.e(group) {
     display: flex;
+    flex-wrap: wrap;
     width: 100%;
     align-items: center;
     column-gap: 1rem;
+    row-gap: 1rem;
     margin-top: 1.2rem;
 
-    @include mixins.media-q(small) {
+    // A group inside another group holds buttons that belong together, such as Cancel and Save beside a Delete.
+    // Beside other items it sizes to its buttons; alone in its row it fills the row, so its own justify applies.
+    & > & {
+      width: auto;
+      margin-top: 0;
+
+      &:only-child {
+        width: 100%;
+      }
+    }
+
+    @include mixins.media-q(x-small) {
       display: flex;
       flex-direction: column;
+      align-items: stretch;
       gap: 1.2rem;
     }
 
@@ -219,7 +233,7 @@
     @include mixins.m(item) {
       min-width: functions.calc-rem(100);
 
-      @include mixins.media-q(small) {
+      @include mixins.media-q(x-small) {
         width: 100%;
         margin-right: 0;
       }

package/src/assets/styles/scss/utilities/_breakpoints.scss

@@ -1,43 +1,47 @@
-@use "sass:map";
-
-// Emits no CSS, so apps can `@use "ecabs-components/breakpoints"` from component styles.
-// PHONE_MEDIA_QUERY in base/consts/breakpoints.consts.ts must match 'md' here.
-
-// #Viewport Breakpoints
-$breakpoints: (
-  xs: 0,
-  sm: 576px,
-  md: 768px,
-  lg: 992px,
-  xl: 1200px,
-  xxl: 1400px
-);
-
-// ==========================================================================
-// Media Query Functions
-// ==========================================================================
-@mixin media-q($break) {
-  @if $break == 'small' {
-    @media (min-width: map.get($breakpoints, 'xs')) and (max-width: map.get($breakpoints, 'md') - 0.02px) {
-      @content;
-    }
-  } @else if $break == 'medium' {
-    @media (min-width: map.get($breakpoints, 'md')) {
-      @content;
-    }
-  } @else if $break == 'large' {
-    @media (min-width: map.get($breakpoints, 'lg')) {
-      @content;
-    }
-  } @else if $break == 'x-large' {
-    @media (min-width: map.get($breakpoints, 'xl')) {
-      @content;
-    }
-  } @else if $break == 'xx-large' {
-    @media (min-width: map.get($breakpoints, 'xxl')) {
-      @content;
-    }
-  } @else {
-    @error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "small", "medium" or "large")';
-  }
-}
+@use "sass:map";
+
+// Emits no CSS, so apps can `@use "ecabs-components/breakpoints"` from component styles.
+// PHONE_MEDIA_QUERY in base/consts/breakpoints.consts.ts must match 'md' here.
+
+// #Viewport Breakpoints
+$breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);
+
+// ==========================================================================
+// Media Query Functions
+// ==========================================================================
+@mixin media-q($break) {
+  @if $break == 'x-small' {
+    @media (max-width: map.get($breakpoints, 'sm') - 0.02px) {
+      @content;
+    }
+  } @else if $break == 'small' {
+    @media (min-width: map.get($breakpoints, 'xs')) and (max-width: map.get($breakpoints, 'md') - 0.02px) {
+      @content;
+    }
+  } @else if $break == 'medium' {
+    @media (min-width: map.get($breakpoints, 'md')) {
+      @content;
+    }
+  } @else if $break == 'large' {
+    @media (min-width: map.get($breakpoints, 'lg')) {
+      @content;
+    }
+  } @else if $break == 'x-large' {
+    @media (min-width: map.get($breakpoints, 'xl')) {
+      @content;
+    }
+  } @else if $break == 'xx-large' {
+    @media (min-width: map.get($breakpoints, 'xxl')) {
+      @content;
+    }
+  } @else {
+    @error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "x-small", "small", "medium" or "large")';
+  }
+}