braid-design-system 33.11.2 → 33.11.4

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # braid-design-system
 
+## 33.11.4
+
+### Patch Changes
+
+- **Button, ButtonIcon, ButtonLink:** Ensure active transition is correctly applied ([#1868](https://github.com/seek-oss/braid-design-system/pull/1868))
+
+## 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

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: {
@@ -331,11 +332,11 @@ const useButtonStyles = ({
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      transition: "touchable",
       textAlign: "center",
       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,13 @@ const hoverOverlay = css.style({
     }
   }
 }, "hoverOverlay");
+const {
+  transition: outlineTransition,
+  ...restOutlineStyles
+} = lib_css_outlineStyle_cjs.outlineStyle(`${root}:focus-visible > &`);
+const focusRing = css.style([{
+  transition: [lib_themes_vars_css_cjs.vars.transition.touchable, outlineTransition].join(", ")
+}, restOutlineStyles], "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 +148,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,13 @@ const hoverOverlay = style({
     }
   }
 }, "hoverOverlay");
+const {
+  transition: outlineTransition,
+  ...restOutlineStyles
+} = outlineStyle(`${root}:focus-visible > &`);
+const focusRing = style([{
+  transition: [vars.transition.touchable, outlineTransition].join(", ")
+}, restOutlineStyles], "focusRing");
 const minHeightValueForSize = {
   standard: vars.touchableSize,
   small: calc.multiply(vars.touchableSize, 0.8)
@@ -140,6 +148,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: {
@@ -328,11 +329,11 @@ const useButtonStyles = ({
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      transition: "touchable",
       textAlign: "center",
       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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "33.11.2",
+  "version": "33.11.4",
   "description": "Themeable design system for the SEEK Group",
   "homepage": "https://seek-oss.github.io/braid-design-system/",
   "bugs": {