tor-browser

commit cb452f7495f90c546f657a127a906621807d52be
parent a179b18d96c78882cc719633f5884cbbb73e9026
Author: hannajones <hjones@mozilla.com>
Date:   Mon,  3 Nov 2025 20:35:10 +0000

Bug 1961856 - make it possible to set a max-height on moz-box-group r=desktop-theme-reviewers,tgiles

Differential Revision: https://phabricator.services.mozilla.com/D268904

Diffstat:
M
browser/components/storybook/component-status/components.json
 | 
2
+-
M
toolkit/content/tests/widgets/test_moz_box_group.html
 | 
14
+++++++-------
M
toolkit/content/widgets/moz-box-group/moz-box-group.css
 | 
34
+++++++++++++++++++++++++++++++++-
M
toolkit/content/widgets/moz-box-group/moz-box-group.mjs
 | 
5
+++--
M
toolkit/content/widgets/moz-box-group/moz-box-group.stories.mjs
 | 
13
++++++++++++-

5 files changed, 56 insertions(+), 12 deletions(-)
diff --git a/browser/components/storybook/component-status/components.json b/browser/components/storybook/component-status/components.json
@@ -1,5 +1,5 @@
 {
-  "generatedAt": "2025-09-23T22:31:46.034Z",
+  "generatedAt": "2025-10-15T13:18:04.980Z",
   "count": 28,
   "items": [
     {
diff --git a/toolkit/content/tests/widgets/test_moz_box_group.html b/toolkit/content/tests/widgets/test_moz_box_group.html
@@ -52,11 +52,11 @@
         }
 
         const FIRST_ITEM_STYLES = {
-          borderStartEndRadius: "8px",
-          borderStartStartRadius: "8px",
+          borderStartEndRadius: "7px",
+          borderStartStartRadius: "7px",
           borderEndEndRadius: "0px",
           borderEndStartRadius: "0px",
-          borderBottomWidth: "0px",
+          borderTopWidth: "0px",
         };
 
         const MIDDLE_ITEM_STYLES = {
@@ -64,15 +64,15 @@
           borderStartStartRadius: "0px",
           borderEndEndRadius: "0px",
           borderEndStartRadius: "0px",
-          borderBottomWidth: "0px",
+          borderTopWidth: "1px",
         };
 
         const LAST_ITEM_STYLES = {
           borderStartEndRadius: "0px",
           borderStartStartRadius: "0px",
-          borderEndEndRadius: "8px",
-          borderEndStartRadius: "8px",
-          borderBottomWidth: "1px",
+          borderEndEndRadius: "7px",
+          borderEndStartRadius: "7px",
+          borderTopWidth: "1px",
         };
 
         // Verify that two items use the first and last item styles.
diff --git a/toolkit/content/widgets/moz-box-group/moz-box-group.css b/toolkit/content/widgets/moz-box-group/moz-box-group.css
@@ -2,13 +2,40 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+:host {
+  --box-group-border: var(--border-width) solid var(--border-color);
+  --box-group-border-radius-inner: calc(var(--border-radius-medium) - var(--border-width));
+
+  display: block;
+  border: var(--box-group-border);
+  border-radius: var(--border-radius-medium);
+  overflow: hidden;
+}
+
+::slotted(*) {
+  border: none;
+}
+
 ::slotted(*:not(.last)) {
   --box-border-radius-end: 0;
   --box-border-width-end: 0;
 }
 
-::slotted(*:not(.first)) {
+::slotted(*:not(.first, [position="0"])) {
   --box-border-radius-start: 0;
+  border-block-start: var(--box-group-border);
+}
+
+::slotted(.first) {
+  --box-border-radius-start: var(--box-group-border-radius-inner);
+}
+
+::slotted(.last) {
+  --box-border-radius-end: var(--box-group-border-radius-inner);
+}
+
+slot[name="header"]::slotted(:first-child) {
+  border-block-end: var(--box-group-border);
 }
 
 .list {
@@ -16,3 +43,8 @@
   padding: 0;
   margin: 0;
 }
+
+.scroll-container {
+  max-height: var(--box-group-max-height);
+  overflow-y: auto;
+}
diff --git a/toolkit/content/widgets/moz-box-group/moz-box-group.mjs b/toolkit/content/widgets/moz-box-group/moz-box-group.mjs
@@ -57,6 +57,7 @@ export default class MozBoxGroup extends MozLitElement {
   contentTemplate() {
     if (this.type == GROUP_TYPES.reorderable) {
       return html`<moz-reorderable-list
+        class="scroll-container"
         itemselector="moz-box-item"
         dragselector=".handle"
         @reorder=${this.handleReorder}
@@ -72,7 +73,7 @@ export default class MozBoxGroup extends MozLitElement {
       let listTag =
         this.type == GROUP_TYPES.reorderable ? literal`ol` : literal`ul`;
       return staticHtml`<${listTag}
-          class="list"
+          class="list scroll-container"
           aria-orientation="vertical"
           @keydown=${this.handleKeydown}
           @focusin=${this.handleFocus}
@@ -86,7 +87,7 @@ export default class MozBoxGroup extends MozLitElement {
         </${listTag}>
         <slot hidden></slot>`;
     }
-    return html`<slot></slot>`;
+    return html`<div class="scroll-container"><slot></slot></div>`;
   }
 
   handleReorder(event) {
diff --git a/toolkit/content/widgets/moz-box-group/moz-box-group.stories.mjs b/toolkit/content/widgets/moz-box-group/moz-box-group.stories.mjs
@@ -116,8 +116,12 @@ function basicElements() {
     <moz-box-button data-l10n-id="moz-box-button-2"></moz-box-button>`;
 }
 
-const Template = ({ type, hasHeader, hasFooter }) => html`
+const Template = ({ type, hasHeader, hasFooter, scrollable }) => html`
   <style>
+    moz-box-group {
+      --box-group-max-height: ${scrollable ? "200px" : "unset"};
+    }
+
     .delete {
       margin-top: var(--space-medium);
     }
@@ -166,6 +170,7 @@ Default.args = {
   type: "default",
   hasHeader: false,
   hasFooter: false,
+  scrollable: false,
 };
 
 export const List = Template.bind({});
@@ -186,3 +191,9 @@ ListWithHeaderAndFooter.args = {
   hasHeader: true,
   hasFooter: true,
 };
+
+export const Scrollable = Template.bind({});
+Scrollable.args = {
+  ...ListWithHeaderAndFooter.args,
+  scrollable: true,
+};