braid-design-system 33.11.0 → 33.11.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # braid-design-system
 
+## 33.11.1
+
+### Patch Changes
+
+- **Actions:** Ensure full width on mobile ([#1858](https://github.com/seek-oss/braid-design-system/pull/1858))
+
+  Ensure that the children of an `Action` component are always full width on mobile, including within a centred flex container.
+
 ## 33.11.0
 
 ### Minor Changes

package/dist/lib/components/Actions/Actions.cjs

@@ -1,11 +1,23 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const lib_components_Inline_Inline_cjs = require("../Inline/Inline.cjs");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
 const lib_components_Actions_ActionsContext_cjs = require("./ActionsContext.cjs");
+const lib_components_Actions_Actions_css_cjs = require("./Actions.css.cjs");
 const actionsSpace = "xsmall";
 const Actions = ({ size, data, children }) => {
   const contextValue = react.useMemo(() => ({ size }), [size]);
-  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Actions_ActionsContext_cjs.ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Inline_Inline_cjs.Inline, { collapseBelow: "tablet", space: actionsSpace, data, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Actions_ActionsContext_cjs.ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      display: "flex",
+      flexDirection: { mobile: "column", [lib_components_Actions_Actions_css_cjs.actionsBreakpoint]: "row" },
+      flexWrap: "wrap",
+      gap: actionsSpace,
+      className: lib_components_Actions_Actions_css_cjs.root,
+      data,
+      children
+    }
+  ) });
 };
 exports.Actions = Actions;

package/dist/lib/components/Actions/Actions.css.cjs

@@ -0,0 +1,21 @@
+"use strict";
+const fileScope = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
+const lib_components_Inline_Inline_css_cjs = require("../Inline/Inline.css.cjs");
+fileScope.setFileScope("src/lib/components/Actions/Actions.css.ts", "braid-design-system");
+const actionsBreakpoint = "tablet";
+const root = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
+  mobile: {
+    alignSelf: "stretch"
+  },
+  [actionsBreakpoint]: {
+    alignSelf: "auto"
+  }
+}), "root");
+css.globalStyle(`${root} > *`, lib_css_responsiveStyle_cjs.responsiveStyle({
+  [actionsBreakpoint]: lib_components_Inline_Inline_css_cjs.fitContentStyleRule
+}));
+fileScope.endFileScope();
+exports.actionsBreakpoint = actionsBreakpoint;
+exports.root = root;

package/dist/lib/components/Actions/Actions.css.mjs

@@ -0,0 +1,22 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, globalStyle } from "@vanilla-extract/css";
+import { responsiveStyle } from "../../css/responsiveStyle.mjs";
+import { fitContentStyleRule } from "../Inline/Inline.css.mjs";
+setFileScope("src/lib/components/Actions/Actions.css.ts", "braid-design-system");
+const actionsBreakpoint = "tablet";
+const root = style(responsiveStyle({
+  mobile: {
+    alignSelf: "stretch"
+  },
+  [actionsBreakpoint]: {
+    alignSelf: "auto"
+  }
+}), "root");
+globalStyle(`${root} > *`, responsiveStyle({
+  [actionsBreakpoint]: fitContentStyleRule
+}));
+endFileScope();
+export {
+  actionsBreakpoint,
+  root
+};

package/dist/lib/components/Actions/Actions.mjs

@@ -1,11 +1,23 @@
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { Inline } from "../Inline/Inline.mjs";
+import { Box } from "../Box/Box.mjs";
 import { ActionsContext } from "./ActionsContext.mjs";
+import { root, actionsBreakpoint } from "./Actions.css.mjs";
 const actionsSpace = "xsmall";
 const Actions = ({ size, data, children }) => {
   const contextValue = useMemo(() => ({ size }), [size]);
-  return /* @__PURE__ */ jsx(ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Inline, { collapseBelow: "tablet", space: actionsSpace, data, children }) });
+  return /* @__PURE__ */ jsx(ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      display: "flex",
+      flexDirection: { mobile: "column", [actionsBreakpoint]: "row" },
+      flexWrap: "wrap",
+      gap: actionsSpace,
+      className: root,
+      data,
+      children
+    }
+  ) });
 };
 export {
   Actions

package/dist/lib/components/Inline/Inline.css.cjs

@@ -25,5 +25,6 @@ css.globalStyle(`${fitContentWide} > *`, lib_css_responsiveStyle_cjs.responsiveS
 fileScope.endFileScope();
 exports.fitContentDesktop = fitContentDesktop;
 exports.fitContentMobile = fitContentMobile;
+exports.fitContentStyleRule = fitContentStyleRule;
 exports.fitContentTablet = fitContentTablet;
 exports.fitContentWide = fitContentWide;

package/dist/lib/components/Inline/Inline.css.mjs

@@ -25,6 +25,7 @@ endFileScope();
 export {
   fitContentDesktop,
   fitContentMobile,
+  fitContentStyleRule,
   fitContentTablet,
   fitContentWide
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "33.11.0",
+  "version": "33.11.1",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {
@@ -211,7 +211,7 @@
     "fast-glob": "^3.3.2",
     "fs-extra": "^10.1.0",
     "html-validate": "^9.7.1",
-    "playroom": "0.44.0",
+    "playroom": "0.44.2",
     "prettier": "^3.4.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",