@unofficialbox/box-open-elements 0.2.0 → 0.2.1

package/README.md

@@ -116,6 +116,7 @@ The docs index is at [docs/README.md](./docs/README.md). The most important entr
 - [Taxonomy](./docs/taxonomy.md)
 - [Architecture](./docs/architecture.md)
 - [API Guidelines](./docs/api-guidelines.md)
+- [Using with React, Angular, Vue, and Svelte](./docs/integration/frameworks.md)
 - [Design Tokens](./docs/foundations/tokens.md)
 - [Content Explorer](./docs/patterns/content-explorer.md)
 - [Box Server Integration](./docs/integration/box-server.md)

package/dist/patterns/content-explorer/adapters/table.js

@@ -17,6 +17,10 @@ const elementStyles = `
           display: block;
           color: inherit;
           font: inherit;
+          /* The table's header row is nowrap, so its min-content width is wide.
+             Without this the host refuses to shrink below that width and pushes
+             out of grid/flex containers instead of scrolling. */
+          min-width: 0;
         }
 
         [part="table-shell"] {
@@ -24,7 +28,10 @@ const elementStyles = `
           border-radius: ${boePanel.radius};
           background: var(--boe-token-surface-surface, #ffffff);
           box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-          overflow: hidden;
+          /* Scroll the table within its own frame when the host is narrower
+             than the table's intrinsic width. */
+          overflow-x: auto;
+          overflow-y: hidden;
         }
 
         [part="table-shell"][aria-busy="true"] {

package/dist/patterns/search/filter-bar.js

@@ -13,6 +13,9 @@ const elementStyles = `
           display: block;
           color: inherit;
           font: inherit;
+          /* Let the host shrink below its controls' intrinsic width when a
+             container constrains it. */
+          min-width: 0;
           --_obp-surface: var(--boe-token-surface-surface, #ffffff);
           --_obp-surface-muted: var(--boe-token-surface-surface-secondary, #fbfbfb);
           --_obp-border: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
@@ -38,9 +41,17 @@ const elementStyles = `
           text-transform: uppercase;
         }
 
+        /* Zero track floors, not fixed rem floors. The columns still size to
+           their content (so a shrink-to-fit host keeps the three-up layout at
+           its natural width) but can compress when a container constrains the
+           bar, instead of forcing the host wider than its container.
+           auto-fit was rejected: it collapses to one column whenever the host
+           is shrink-to-fit. A container query was too: container-type makes
+           the host's width independent of its content, which collapses the bar
+           anywhere it isn't explicitly stretched. */
         [part="controls"] {
           display: grid;
-          grid-template-columns: minmax(14rem, 1.4fr) repeat(2, minmax(10rem, 0.8fr));
+          grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.8fr));
           gap: ${boePanel.gap};
           align-items: center;
         }
@@ -100,11 +111,6 @@ const elementStyles = `
           color: var(--_obp-brand);
         }
 
-        @media (max-width: 900px) {
-          [part="controls"] {
-            grid-template-columns: 1fr;
-          }
-        }
       `;
 export class BoxFilterBarElement extends BaseElement {
     static get observedAttributes() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",