braid-design-system 33.11.1 → 33.11.3

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # braid-design-system
 
+## 33.11.3
+
+### Patch Changes
+
+- **Button, ButtonLink:** Ensure focus ring supports `bleed` layout ([#1866](https://github.com/seek-oss/braid-design-system/pull/1866))
+
+  Fixes the focus ring layout when combined with the `bleed` prop to ensure the outline wraps the visual boundary of the button.
+
+## 33.11.2
+
+### Patch Changes
+
+- **ButtonIcon:** Better match `Tooltip` text size with `size` prop ([#1864](https://github.com/seek-oss/braid-design-system/pull/1864))
+
+  When using a `small` `ButtonIcon`, the `Tooltip` text size is now set to `small`.
+  For other sizes, the text remains at the default `standard` size.
+
 ## 33.11.1
 
 ### Patch Changes

package/dist/lib/components/Button/Button.cjs

@@ -321,6 +321,7 @@ const useButtonStyles = ({
       width: "full",
       borderRadius: radius,
       cursor: !loading ? "pointer" : void 0,
+      outline: "none",
       className: [lib_components_Button_Button_css_cjs.root, size === "small" ? lib_components_private_touchable_virtualTouchable_css_cjs.virtualTouchable : void 0]
     },
     content: {
@@ -336,6 +337,7 @@ const useButtonStyles = ({
       userSelect: "none",
       background: stylesForVariant.background && typeof stylesForVariant.background !== "string" ? colorContrast(stylesForVariant.background) : stylesForVariant.background,
       className: [
+        lib_components_Button_Button_css_cjs.focusRing,
         variant === "soft" && lightness.lightMode === "dark" ? lib_components_Button_Button_css_cjs.invertedBackgroundsLightMode.soft : null,
         variant === "soft" && lightness.darkMode === "dark" ? lib_components_Button_Button_css_cjs.invertedBackgroundsDarkMode.soft : null,
         lib_components_Button_Button_css_cjs.activeAnimation,

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

@@ -4,6 +4,7 @@ const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
 const polished = require("polished");
 const lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
+const lib_css_outlineStyle_cjs = require("../../css/outlineStyle.cjs");
 const lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
 const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
 fileScope.setFileScope("src/lib/components/Button/Button.css.ts", "braid-design-system");
@@ -36,6 +37,7 @@ const hoverOverlay = css.style({
     }
   }
 }, "hoverOverlay");
+const focusRing = css.style(lib_css_outlineStyle_cjs.outlineStyle(`${root}:focus-visible > &`), "focusRing");
 const minHeightValueForSize = {
   standard: lib_themes_vars_css_cjs.vars.touchableSize,
   small: cssUtils.calc.multiply(lib_themes_vars_css_cjs.vars.touchableSize, 0.8)
@@ -140,6 +142,7 @@ fileScope.endFileScope();
 exports.activeAnimation = activeAnimation;
 exports.activeOverlay = activeOverlay;
 exports.bleedVerticallyToCapHeight = bleedVerticallyToCapHeight;
+exports.focusRing = focusRing;
 exports.forceActive = forceActive;
 exports.hoverOverlay = hoverOverlay;
 exports.invertedBackgroundsDarkMode = invertedBackgroundsDarkMode;

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

@@ -1,8 +1,9 @@
 import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
-import { styleVariants, style, createVar, keyframes } from "@vanilla-extract/css";
+import { style, styleVariants, createVar, keyframes } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { rgba } from "polished";
 import { colorModeStyle } from "../../css/colorModeStyle.mjs";
+import { outlineStyle } from "../../css/outlineStyle.mjs";
 import { responsiveStyle } from "../../css/responsiveStyle.mjs";
 import { vars } from "../../themes/vars.css.mjs";
 setFileScope("src/lib/components/Button/Button.css.ts", "braid-design-system");
@@ -35,6 +36,7 @@ const hoverOverlay = style({
     }
   }
 }, "hoverOverlay");
+const focusRing = style(outlineStyle(`${root}:focus-visible > &`), "focusRing");
 const minHeightValueForSize = {
   standard: vars.touchableSize,
   small: calc.multiply(vars.touchableSize, 0.8)
@@ -140,6 +142,7 @@ export {
   activeAnimation,
   activeOverlay,
   bleedVerticallyToCapHeight,
+  focusRing,
   forceActive,
   hoverOverlay,
   invertedBackgroundsDarkMode,

package/dist/lib/components/Button/Button.mjs

@@ -11,7 +11,7 @@ import { Text } from "../Text/Text.mjs";
 import { AvoidWidowIcon } from "../private/AvoidWidowIcon/AvoidWidowIcon.mjs";
 import { FieldOverlay } from "../private/FieldOverlay/FieldOverlay.mjs";
 import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
-import { invertedBackgroundsLightMode, invertedBackgroundsDarkMode, activeAnimation, standard, small, bleedVerticallyToCapHeight, root, hoverOverlay, forceActive, activeOverlay, padToMinHeight, loadingDot } from "./Button.css.mjs";
+import { focusRing, invertedBackgroundsLightMode, invertedBackgroundsDarkMode, activeAnimation, standard, small, bleedVerticallyToCapHeight, root, hoverOverlay, forceActive, activeOverlay, padToMinHeight, loadingDot } from "./Button.css.mjs";
 import { virtualTouchable } from "../private/touchable/virtualTouchable.css.mjs";
 const buttonVariants = [
   "solid",
@@ -318,6 +318,7 @@ const useButtonStyles = ({
       width: "full",
       borderRadius: radius,
       cursor: !loading ? "pointer" : void 0,
+      outline: "none",
       className: [root, size === "small" ? virtualTouchable : void 0]
     },
     content: {
@@ -333,6 +334,7 @@ const useButtonStyles = ({
       userSelect: "none",
       background: stylesForVariant.background && typeof stylesForVariant.background !== "string" ? colorContrast(stylesForVariant.background) : stylesForVariant.background,
       className: [
+        focusRing,
         variant === "soft" && lightness.lightMode === "dark" ? invertedBackgroundsLightMode.soft : null,
         variant === "soft" && lightness.darkMode === "dark" ? invertedBackgroundsDarkMode.soft : null,
         activeAnimation,

package/dist/lib/components/ButtonIcon/ButtonIcon.cjs

@@ -105,18 +105,19 @@ const ButtonIconContent = react.forwardRef(
   }
 );
 const ButtonIcon = react.forwardRef(
-  ({ id, label, tooltipPlacement, ...restProps }, forwardedRef) => {
+  ({ id, label, tooltipPlacement, size, ...restProps }, forwardedRef) => {
     const resolvedId = lib_hooks_useFallbackId_cjs.useFallbackId(id);
     return /* @__PURE__ */ jsxRuntime.jsx(
       lib_components_TooltipRenderer_TooltipRenderer_cjs.TooltipRenderer,
       {
-        tooltip: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { children: label }),
+        tooltip: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { size: size === "small" ? "small" : "standard", children: label }),
         placement: tooltipPlacement,
         children: ({ triggerProps: { ref: triggerRef, tabIndex } }) => /* @__PURE__ */ jsxRuntime.jsx(
           ButtonIconContent,
           {
             id: resolvedId,
             label,
+            size,
             ref: (node) => {
               if (typeof forwardedRef === "function") {
                 forwardedRef(node);

package/dist/lib/components/ButtonIcon/ButtonIcon.mjs

@@ -102,18 +102,19 @@ const ButtonIconContent = forwardRef(
   }
 );
 const ButtonIcon = forwardRef(
-  ({ id, label, tooltipPlacement, ...restProps }, forwardedRef) => {
+  ({ id, label, tooltipPlacement, size, ...restProps }, forwardedRef) => {
     const resolvedId = useFallbackId(id);
     return /* @__PURE__ */ jsx(
       TooltipRenderer,
       {
-        tooltip: /* @__PURE__ */ jsx(Text, { children: label }),
+        tooltip: /* @__PURE__ */ jsx(Text, { size: size === "small" ? "small" : "standard", children: label }),
         placement: tooltipPlacement,
         children: ({ triggerProps: { ref: triggerRef, tabIndex } }) => /* @__PURE__ */ jsx(
           ButtonIconContent,
           {
             id: resolvedId,
             label,
+            size,
             ref: (node) => {
               if (typeof forwardedRef === "function") {
                 forwardedRef(node);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "33.11.1",
+  "version": "33.11.3",
   "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.2",
+    "playroom": "0.44.3",
     "prettier": "^3.4.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",