@homebound/beam 2.149.0 → 2.151.1

package/dist/components/Chip.js

@@ -7,13 +7,12 @@ const Css_1 = require("../Css");
 const useTestIds_1 = require("../utils/useTestIds");
 /** Kinda like a chip, but read-only, so no `onClick` or `hover`. */
 function Chip(props) {
-    var _a;
     const { text, xss = {} } = props;
     const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
-    const typeScale = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.typeScale) !== null && _a !== void 0 ? _a : "sm";
+    const compact = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact;
     const tid = (0, useTestIds_1.useTestIds)(props, "chip");
     return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: {
-            ...Css_1.Css[typeScale].dif.aic.br16.pl1.px1.pyPx(2).gray900.bgGray200.$,
+            ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1.px1.pyPx(2).gray900.bgGray200.$,
             ...xss,
         } }, tid, { title: text }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.lineClamp1.breakAll.$ }, { children: text }), void 0) }), void 0));
 }

package/dist/components/Table/GridTable.d.ts

@@ -308,10 +308,12 @@ export declare type GridCellContent = {
     indent?: 1 | 2;
     colspan?: number;
     typeScale?: Typography;
-    /** Allows the cell to stay in place when the user scrolls horizontally */
+    /** Allows the cell to stay in place when the user scrolls horizontally, i.e. frozen columns. */
     sticky?: "left" | "right";
     /** If provided, content of the cell will be wrapped within a <button /> or <a /> tag depending on if the value is a function or a string. */
     onClick?: () => {} | string;
+    /** Custom css to apply directly to this cell, i.e. cell-specific borders. */
+    css?: Properties;
 };
 declare type MaybeFn<T> = T | (() => T);
 /**

package/dist/components/Table/GridTable.js

@@ -588,6 +588,8 @@ function GridRow(props) {
                     : {}),
                 // Add any cell specific style overrides
                 ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
+                // And any cell specific css
+                ...(isGridCellContent(maybeContent) && maybeContent.css ? maybeContent.css : {}),
                 // Define the width of the column on each cell. Supports col spans.
                 ...{
                     width: `calc(${columnSizes

package/dist/components/ToggleChip.js

@@ -3,21 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToggleChip = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const Icon_1 = require("./Icon");
+const PresentationContext_1 = require("./PresentationContext");
 const Css_1 = require("../Css");
 const useTestIds_1 = require("../utils/useTestIds");
 function ToggleChip(props) {
     const { text, onClick, xss = {}, disabled = false } = props;
+    const { fieldProps } = (0, PresentationContext_1.usePresentationContext)();
+    // If compact, then use a smaller type scale
+    const compact = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.compact;
     const tid = (0, useTestIds_1.useTestIds)(props, "chip");
     return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", css: {
-            ...Css_1.Css.dif.aic.br16.sm.pl1
-                // Use a lower right-padding to get closer to the `X` circle
-                .prPx(4)
+            ...Css_1.Css[compact ? "xs" : "sm"].dif.aic.br16.pl1
+                // Use a lower right-padding to get closer to the `X` circle when not disabled
+                .prPx(2)
                 .pyPx(2)
                 .gray900.bgGray200.if(disabled)
-                .mh((0, Css_1.px)(28)).gray600.$,
+                .gray600.pr1.mhPx(compact ? 20 : 28).$,
             ":hover:not(:disabled)": Css_1.Css.bgGray300.$,
             ":disabled": Css_1.Css.cursorNotAllowed.$,
             ...xss,
-        }, disabled: disabled, onClick: onClick }, tid, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.prPx(6).tl.lineClamp1.breakAll.if(disabled).prPx(4).$, title: text }, { children: text }), void 0), !disabled && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.br16.bgGray400.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "x", color: Css_1.Palette.Gray700 }, void 0) }), void 0))] }), void 0));
+        }, disabled: disabled, onClick: onClick }, tid, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.prPx(6).tl.lineClamp1.breakAll.if(disabled).pr0.$, title: text }, { children: text }), void 0), !disabled && ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.fs0.br16.bgGray400.$ }, { children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { icon: "x", color: Css_1.Palette.Gray700, inc: compact ? 2 : undefined }, void 0) }), void 0))] }), void 0));
 }
 exports.ToggleChip = ToggleChip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.149.0",
+  "version": "2.151.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",